ちらつき面

テクスチャのある大きな2D平面のアプリケーションがありますが、ちらつきの問題が発生しています。ちらつき面

（平面がwithouthテクスチャです）ここでちらつきの問題を参照することが可能である：EXAMPLE CODE

は、この深度バッファ（zバッファ）の精度の問題や何か他のものですか？

大規模な平面/オブジェクトを許可するのではなく、すべてを縮小するソリューションですか？ベストプラクティスは何ですか？

私は知っていると私は知っているので、精度に影響を与えるので、1000に近いzを設定するとこの例ではちらつきが修正されます。

コード：あなたが使用している範囲が大きすぎるので、

/* 
* 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