Issue with transparent materials based on camera rotation

Hi there! I don’t know why this is happening, but we are experiencing a strange issue on our materials with opacity.

WeirdOpacity

Essentially the opacity doesn’t seem to be consistent all the time as you can see in the gif. They will sometimes change color. Transparent shadow pngs sometimes completely disappear. It also seems to be heavily influenced by our camera’s position and rotation.

Below is an example of one of our transparent materials. Nothing crazy here!



Any help is greatly appreciated! We have some cool ideas we’d love to explore but we can’t if this graphical issue persists!

Hey @Josh_Gatarn Is this something new that you’ve noticed? I can’t quite tell, but it looks like it’s a depth precision issue where two objects are very close together. If you move them apart slightly do you still get the same isssue?

This is something that’s been a problem for quite a while now that we’ve kind of just dealt with. This happens on all of our transparent materials in different areas.

I would love it if it was just a z-fighting problem but it seems to be something more than that! You can see that all 5 transparent cylinders are having the same problem.

@Mark_Lundin Are there any known limitations currently with transparency?

Just the general WebGL limitations. You can try lowering the distance between near and far planes of the camera. Another option is to place them in different layers, and order your layers instead.

I’d avoid using transparent materials when possible. They look nice when work, but they are expensive to render and have AABB ordering issues.

@LeXXik Yeah I understand. We’re mostly trying to use it for uncommon things like loot drop protection and for when the camera is blocked by an object. These objects here are just for us to visualize our physics bodies so they won’t be used in the live game.

For my understanding, what do you think the near and far planes will do?

That will give more room for depth buffer to work with. The ordering of transparent objects depends on it. You want the difference (not the actual values, but the difference between them) to be the smallest.