Sprites: Combined rendering with opaque and transparent objects

[rmarques-realstatus]

I've created a scene where there's an outer box that's being rendered from the inside (THREE.BackSide). Inside the main box I've placed two smaller boxes (also being rendered from the inside), some particles, and a text Sprite. All the boxes have transparency enabled.

All seems to work well enough, except the sprite not being visible through the inner boxes, and only through the outer one. Here's an example (with OrbitControls enabled): http://jsfiddle.net/rgE2j/104/

After some digging I found this: http://stackoverflow.com/questions/19046972/three-js-cannot-view-a-sprite-through-a-mesh-with-transparency

Which had me change my example to: http://jsfiddle.net/rgE2j/106/

The latter example works. However, my question is: Is this behavior to be fixed in the future, or is the workaround the way to go?

Many thanks!

[mrdoob]

Yes. The problem is that, right now, WebGLRenderer renders Sprites in a "second pass". We should fix this...

[rmarques-realstatus]

So I'll stick with the workaround for now. Thanks @mrdoob!

[T045T]

Just to make sure: This behavior hasn't changed in the interim, correct?

We ran into the same problem at RobotWebTools/ros3djs#192.

@mrdoob, do you have any idea what a proper solution might look like? I'm not really a serious graphics or JS programmer, but with a pointer in the right direction, I think I could take a shot at this.

From some cursory reading, it seems like the depth buffer doesn't contribute much to the correct rendering of (correctly sorted) transparent objects.

So if transparent objects by default didn't write into the depth buffer (or maybe the depth buffer got restored to the state it was in after rendering all the opaques after the transparents are done), that shouldn't break much, right?

Then the sprite "pass" would just render over any transparent objects, but not solid ones. Looks like that's what OGRE does, too – at least the way it's used in RViz (see the second screenshot in RobotWebTools/ros3djs#192 ).

Feels a little closer to "right" to me than what's happening now. Then, to get 100% correct results, I guess you'd have to sort sprites and objects together and switch renderers potentially every other object, which looks like a lot of work and possibly wasted performance...

[mrdoob]

Just to make sure: This behavior hasn't changed in the interim, correct?

It has not.

@mrdoob, do you have any idea what a proper solution might look like?

You could create 3d planes and make them point the camera.

var geometry = new THREE.PlaneBufferGeometry();

var texture1 = new THREE.Texture( image );
var material1 = new THREE.MeshBasicMaterial( { map: texture } );
var label1 = new THREE.Mesh( geometry, material );
label1.scale.x = image.width;
label1.scale.y = image.height;
label1.lookAt( camera.position );
scene.add( label1 );

[Mugen87]

I guess this issue can be solved now with the following suggestion: #14411 (comment)