I have two transparent, overlapping spheres in a webgl context. During overlap, I would like to control how the spheres are drawn. You can see my problem at this page:
When the red and blue sphere overlap, I would like for the blue sphere to be hidden behind the red sphere.
If I simply change the order in which the spheres are added to the scene (if I add the big sphere first), I get the desired behavior:
However, things are different in my project. I see the intersection even though I add the big sphere first.
The closest I have gotten is moving the smaller spheres closer to the camera. in this example, I have moved the smaller spheres 10 units closer: http://andrewray.me/stuff/b-test/
However, if you move around with the arrow keys, you can see the intersection flash every now and then, and sometimes flat out rudely stay visible (especially with bubbles coming in from the side)
I have tried setting
renderer.sortObjects = false
After much head banging (not the good kind) I have discovered that you can force draw order with a flag on the mesh.
For Three r70 and above use
mesh.renderOrder = 0.5; // Value from 0 to 1
For Three r69 and below use
mesh.renderDepth = 0.5; // Value from 0 to 1
It draws lowest first, highest last.