WebGL rendering transparent objects. Render order

Question

Here is my test application inthree.js- http://zheden.elitno.net/

There are 2 cubes - green is the upper one. If you uncheck "Cube 2" (yellow inner cube), it becomes invisible. And when you rotate then camera and after rotating check back "Cube 2", it becomes outer. It reproduces not with all angles of rotation.

Adding "renderer.sortObjects = false" fixed the problem. But could you please explain me the reason of this behavior? Renderer sort objects based on their positions. Why order of rendering is changed when some object is transparent? It's position is not changed.

Is this related to Transparent textures behaviour in WebGL ?

Thanks, Zhenya

Answer 1

There are no transparent objects in your demo, only opaque ones. You are changing the visibility.

WebGLRenderer sorts objects based on their distance from the camera, and renders objects in the sorted order. It renders opaque objects from front to back.

The rendering order can change due to how the sorting algorithm breaks ties when two objects are the same distance from the camera.

However, the render order is not necessarily changing when you toggle the visibility off and then on again. What can be changing is the distance to the depth buffer in the least significant digits due to roundoff when you move the camera. Hence, sometimes the second object renders, and sometimes it does not.

You have two cubes of exactly the same size and orientation in exactly the same location. Do not do that. It can cause you all sorts of rendering problems -- the most common of which, is flickering.

three.js r.58