Migotanie płaszczyzn

Question

Mam aplikację z dużymi płaszczyznami 2D z teksturami, ale mam doświadczenie w niektórych problemach z migotaniem.

Jest możliwe, aby zobaczyć problem migotania tutaj (samoloty są withouth tekstur): EXAMPLE CODE

Jest to bufor głębokości (Z-buffer) zagadnienia precyzyjne lub coś innego?

Czy rozwiązaniem jest skalowanie wszystkiego, aby nie pozwolić na duże płaszczyzny/obiekty? Jaka jest najlepsza praktyka?

Wiem, że z blisko i daleko wpływają również na precyzję, więc ustawienie z blisko 1000 powoduje migotanie w tym przykładzie.

Kod:

/* 
* Scale = 1, no flickering. Scale = 1000, flickering. 
*/ 
    var scale = 1000; 

    var scene = new THREE.Scene(); 

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1000, 1000000); 
    camera.position.x = 0; 
    camera.position.y = 0; 
    camera.position.z = 100 * scale; 
    var renderer = new THREE.WebGLRenderer({ 
     antialias: false 
    }); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    var light = new THREE.AmbientLight(0xFFFFFF); 
    scene.add(light); 

    var material = new THREE.MeshBasicMaterial({ 
     transparent: false, 
     side: THREE.DoubleSide, 
     fog: false, 
     color: 0xFFFF00, 
     opacity: 1.0 
    }); 

    var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1); 
    var cubeMesh = new THREE.Mesh(cubeGeometry, material); 
    cubeMesh.position.set(0, 0, 1 * scale); 
    scene.add(cubeMesh); 

    var material = new THREE.MeshBasicMaterial({ 
     transparent: false, 
     side: THREE.DoubleSide, 
     fog: false, 
     color: 0xFF0000, 
     opacity: 1.0 
    }); 

    var cubeGeometry = new THREE.PlaneGeometry(100 * scale, 100 * scale, 1, 1); 
    var cubeMesh = new THREE.Mesh(cubeGeometry, material); 
    scene.add(cubeMesh); 

    function render() { 
     var time = Date.now() * 0.5; 
     camera.position.x = Math.sin(time/1000) * 150 * scale; 
     camera.position.y = 0; 
     camera.position.z = Math.cos(time/1000) * 150 * scale; 
     camera.lookAt(scene.position); 
     renderer.render(scene, camera); 
     requestAnimationFrame(render); 
    } 
    render(); 

Answer 1

Co widzisz jest GPU pracuje z precyzją, ponieważ zakresy używasz są zbyt duże. Ustawiając płaszczyznę kamery near na 100 (zamiast 1) migotanie zniknęło.

http://jsfiddle.net/GYQ5v/74/

Answer 2

Wypróbuj ten kod, aby sprawdzić, czy to działa:

cubeMesh.position.set(0, 0, 1);