Máy bay nhấp nháy

Question

Tôi có một ứng dụng với máy bay 2D lớn có kết cấu, nhưng tôi đang gặp phải một số sự cố nhấp nháy.

Có thể thấy vấn đề nhấp nháy ở đây (máy bay là withouth textures): EXAMPLE CODE

là sâu này đệm (z-buffer) Các vấn đề chính xác hay cái gì khác?

Là giải pháp để giảm thiểu mọi thứ, không cho phép các mặt phẳng/vật thể lớn? Thực hành tốt nhất là gì?

Tôi biết rằng z gần và xa cũng ảnh hưởng đến độ chính xác, do đó, thiết lập z gần 1000 sửa chữa nhấp nháy trong ví dụ này.

Mã:

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

Những gì bạn đang nhìn thấy những GPU chạy ra khỏi chính xác bởi vì phạm vi bạn đang sử dụng là quá lớn là. Bằng cách thiết lập mặt phẳng near của máy ảnh thành 100 (thay vì 1) nhấp nháy sẽ biến mất.

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

Answer 2

Hãy thử mã này để xem nếu nó hoạt động:

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