Unexpected three.js rendering order in r61 vs. r58

Question

The following illustrates the rendering order I would like to obtain for two plane geometries:

http://jsfiddle.net/Axy2F/8/

This works fine under r58 but under r61 the red square is obscured regardless of how I structure the scene graph. I'm unclear whether this is a bug in r61, or whether I was doing things incorrectly in r58, in a way that just happened to work.

Am I right in assuming that behind.add(child) should suffice to have the red square "beneath" the indigo one in the scene graph, and therefore rendered on top of it?

If not, what is the correct way to establish the rendering order by controlling the construction of the scene graph (that works with r61)? I would like to avoid setting renderDepth explicitly. Note that setting rendered.sortObjects to false does not help.

Answer 1

The object that is in front is the object that is closest to the camera. Being a child has nothing to do with it.

Both your objects have position ( 0, 0, 0 ), so they are the same distance from the camera.

This will lead to z-fighting, which is worse with CanvasRenderer than it is with WebGLRenderer.

Change the position of the child to render it in front. For example,

child.position.z = 1;

FYI, r.61 has a different tie-breaker rule than r.58 did. This is why the rendering is different in r.61.