Hello! I’m having problems with displaying a sprite inside a mesh with a custom ShaderMaterial. I had a similar issue before this that was resolved by lowering the alphaTest value, but that worked with imported models, the issue persists when using custom shaders.
Here’s a visual representation of the problem:
The sprite’s edges cover the mesh.
The issue seems to get resolved if I don’t set the transparency attribute to true on the shader material:
Unfortunately I need to keep the mesh transparent. Any help is appreciated, here’s a fiddle if you’re curious: https://jsfiddle.net/npo8wauh/45/
Transparent objects are simply 100% not cool to work with - and at some point you’ll unfortunately have to come to terms with it.
This thread may help a bit - but I don’t think there are any perfect, universal solutions around (especially for stacking multiple semi-transparent objects without using explicit alphaTest :’) )
The approaches listed in that post are all pretty general but depending on what you’re trying to render you can come up with some more situational solutions.
In this case you could separate the models you’re rendering into three pieces and render them back to front which should result in no artifacts. You could try rendering them in this order relative to the camera:
Unfortunately this is only a minimal representation of the problem. There are a lot of other meshes in the scene that suffer from a similar problem, this ring is not the only one.
One workaround I found was increasing the alphaTest value to around 0.6 on the sprite. It’s not perfect, but at least looks a lot better than having a lower value.
