three.js: Transparent Objects rendering in wrong order depending on camera-angle

Question

I am seeing a problem with inconsistent rendering of transparent objects in three.js and I can't quite figure out what is happening there and what causes the problem.

A reduced test-case to demonstrate the issue can be found here: http://jsfiddle.net/fgu0fzro/3/.

The important bits:

renderer.setClearColor(0xffffff);

camera = new THREE.PerspectiveCamera(50, aspectRatio, 1, 1000000);
camera.position.set( 4600, 4800, -10000);

cameraControl = new THREE.OrbitControls( camera, renderer.domElement );

var plane = new THREE.Mesh(
    new THREE.PlaneGeometry(100000,100000),
    new THREE.MeshLambertMaterial({
        color: 0x2B79DE, transparent:true, opacity:.75
    })
);

var cube = new THREE.Mesh(
  new THREE.BoxGeometry(1000,1000,1000),
  new THREE.MeshLambertMaterial({
      color: 0xF33856, transparent: true, opacity: .2
  })
);

plane.rotation.x = -Math.PI/2;    
cube.position.set(3000, 1000, 2000);

scene.add(camera);
scene.add(plane);
scene.add(cube);

So the cube is above the plane and i'd expect to see the plane through the transparent cube. Instead, it is rendered as if the plane wasn't there at all. Now, if you move the camera slightly to the left, the problem disappears and everything gets rendered like it should.

Now, I already figured out that this problem has to do with the object sorting of three.js (if i set renderer.sortObjects = false; and add the objects in the proper order, it works), but I still don't quite unterstand what exactly is happening there and i wonder if there is any way to solve this without disabling the otherwise useful object-sorting.

three.js r70

Answer 1

Alpha-blending of transparent objects in three.js is not order-independent -- in other words, the order in which the objects are rendered will impact the result.

Also, material.depthTest and material.DepthWrite values will affect the result. By default, they are both true. You can experiment with changing them, but there may be unwanted side-effects depending on your use case.

In your particular case, I would have two scenes and implement two render passes. The first scene would contain the plane, and the second scene would contain the remaining objects. See this answer.

three.js r.70