I know I’m “on my own with RawShaderMaterial…” but I don’t have the chops yet to dig into the ShaderChunks and pull out the pieces I need to have obscured objects be visible through transparent sections the way a fully loaded material would with:
material.transparent = "true";
In this AFrame scene I’m creating, the circular progress bar needs to be based on RawShaderMaterial, but I’d love to bring back the ability to preserve transparency and to see the animated landscape through it.
FYI, I’m using a RawShaderMaterial because I’m building upon the really awesome work of Matt Deslauriers (https://mattdesl.svbtle.com/shaping-curves-with-parametric-equations). The ring is both a progress bar with some subtle EQ reactions to the audio.
Thanks to anyone who can point me in the right direction!
What does your fragment shader alpha output look like? Are you doing anything to gl_FragColor.a?
Yes, I’m modifying gl_FragColor's alpha component based on how much time is left in the audio clip that’s playing.
Found a quick non-shader based fix within a SO answer here by simply changing the order in which the objects are added to the scene. In AFrame that’s just shifting the order of the HTML <a-entity> blocks that define the objects and their components.
So the issue is fixed, but I don’t understand what would happen if there were two objects with transparency that were moving such that they swapped which was in front regularly. Would I need to re-add them to the scene? That seems horrible. Is there a general rule to follow here or something I’m missing?
Yeah, self-transparency in WebGL is a very tricky thing. Especially when transparent objects overlap with themselves because the triangles don’t know if they’re in front or behind other triangles in the same object. Here’s a thread with a bunch of examples of odd behavior.
My favorite workaround is to try messing with setting depthWrite and depthTest to false, so it doesn’t check with the depth-buffer, it might help you get the result you want: https://threejs.org/docs/#api/en/materials/Material.depthTest
1 Like
Super interesting.
Tried playing with depthTest/depthWrite but it seems that it locks in one of the objects as always in front or behind… I’m assuming based on the order it is added to the scene.
Unfortunately my circular progress/EQ is a ring that surrounds the terrain within, meaning it’s behind and in front simultaneously. It breaks the illusion of depth.
I have a decent hack right now where the inner object’s (the terrain’s) vertex shader, moves its offending vertices (the ones that should be transparent, but that don’t allow the ring to show through), they get moved to (0, 0, -1.0), so that they don’t overlap the ring. There are some pixels that aren’t right on close inspection, but it’s better improved.
Should I edit the title of this post? It now seems this has nothing to do with the RawShaderMaterial 
Should I make a new post that describes the problem better?
