Piani tremolanti

Question

Ho un'applicazione con piani 2D di grandi dimensioni con trame, ma ho alcuni problemi di sfarfallio.

E 'possibile vedere il problema sfarfallio qui (gli aerei sono trame withouth): EXAMPLE CODE

È questo il buffer di profondità (z-buffer) problemi di precisione o qualcos'altro?

È la soluzione per ridimensionare tutto, non per consentire grandi piani/oggetti? Qual è la migliore pratica?

So che z vicino e lontano influenzano anche la precisione, quindi l'impostazione z vicino a 1000 corregge lo sfarfallio in questo esempio.

Il codice:

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

Quello che stai vedendo è la GPU a corto di precisione a causa delle gamme che si sta utilizzando sono troppo grandi. Impostando il piano near della telecamera su 100 (anziché su 1) lo sfarfallio è scomparso.

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

Answer 2

provare questo codice per vedere se funziona:

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