15

テクスチャ付きの大きな 2D プレーンを使用するアプリケーションを使用していますが、ちらつきの問題が発生します。

ここでちらつきの問題を見ることができます (平面にはテクスチャがありません):例コード

この深度バッファ (z バッファ) の精度の問題ですか、それとも何か他の問題ですか?

大きな平面/オブジェクトを許可しないように、すべてを縮小するソリューションはありますか? ベストプラクティスは何ですか?

z near と far も精度に影響することがわかっているので、z near を 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();
4

2 に答える 2

41

あなたが見ているのは、使用している範囲が大きすぎるため、GPU が精度を使い果たしていることです。nearカメラの平面を100(ではなく) に設定すると1、ちらつきがなくなります。

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

于 2013-07-22T16:04:55.513 に答える
1

次のコードを試して、動作するかどうかを確認してください。

cubeMesh.position.set(0, 0, 1);
于 2014-02-11T04:24:40.963 に答える