閃爍的飛機

我有一個具有紋理的大型2D飛機的應用程序，但我遇到了一些閃爍的問題。閃爍的飛機

有可能看到這裏的閃爍問題（平面是withouth的紋理）：EXAMPLE CODE

這是深度緩存（Z緩存）的精度問題，還是別的什麼？

解決方案是縮小一切，不允許大型飛機/物體？最佳做法是什麼？

我知道z近和遠也會影響精度，所以在本例中將z設置爲接近1000固定閃爍。

代碼：

/* 
* 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();

來源

2013-07-22 eoaksnes