Transparency Issues when using forceDepthWrite=true

Hello everyone,

We are using a lot of Thin Instances in our project and noticed some transparency issues that occur once we set forceDepthWrite to true.

I have created a playground that shows the issue:

If you look into the bottom left corner of the first clock, some of the objects that are located behind this - supposedly transparent - corner do not show (blue plane and can) , but some others do (orange plane, grid, other clock).

Could you please explain to me, why this behavior is happening?

It seems to be fixed by removing the forceDepthWrite=true line, but in our project we might need this option for other reasons.

Do you know any other ways to prevent these kind of transparency issues, or might even know a way to solve this in the babylon source code?

Thanks!

Basically, forceDepthWrite is incompatible with transparency, unless you can ensure that your objects are always correctly sorted from back to front. But, depending on the camera view, the sorting order will change because it’s based on the center of the objects’ bounding box.

Transparency management is a complex subject and is always a compromise, see :

1 Like