闪烁的飞机 [英] Flickering planes

问题描述

我有一个带有纹理的大型 2D 平面的应用程序，但我遇到了一些闪烁问题.

I have an application with large 2D planes with textures, but I am experience some flickering problems.

可以在这里看到闪烁的问题(平面没有纹理):示例代码

It is possible to see the flickering problem here (planes are withouth textures): EXAMPLE CODE

这是深度缓冲区(z-buffer)精度问题还是其他问题?

Is this depth buffer (z-buffer) precision issues or something else?

是缩小一切的解决方案，不允许大平面/物体吗?最佳做法是什么?

Is the solution to scale down everything, not to allow large planes/objects? What is the best practice?

我知道 z near 和 far 也会影响精度，因此将 z near 设置为 1000 可修复此示例中的闪烁.

I know that z near and far also influence the precision, so setting z near to 1000 fixes the flickering in this example.

代码:

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

推荐答案

您看到的是 GPU 精度不足，因为您使用的范围太大.通过将相机的 near 平面设置为 100(而不是 1)，闪烁消失了.

What you're seeing is the GPU running out of precision because the ranges you're using are too big. By setting the near plane of the camera to 100 (instead of 1) the flickering is gone.

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

这篇关于闪烁的飞机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！