Flickering planes

Question

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

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?

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

The code:

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

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/

Answer 2

Try out this code to see if it works:

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