I’m working on a project that requires multiple transparent objects in close proximity of each other. Enabling OIT easily fixes the classic transparency ordering issues, when replicated in a simple environment: https://playground.babylonjs.com/#0OS3RL#13 (Doubleclick the canvas to toggle OIT)
We are still testing the consequences of implementing OIT in the full setup, in terms of both material limitations and general performance, but expect it to create too many compromises in our setup. Same project as this topic:
..What would be a good alternative to using OIT in this case?
Core issues (without OIT turned on):
1: Transparency ordering between the objects keeps changing relative to the camera position.
It is a visual requirement that both objects need this kind of transparent material without backfaceculling. The scene needs to viewed from all sides as well, so the alpha index order cannot be static either.
We use the needDepthPrepass function on slightly transparent materials to fix the ordering, but for our cases with highly transparent materials, we need the backface of the objects to be visible as well. Is there a way to utilize the depthPrePass functionality and still draw the the backfaces of the object properly?
Is that an example where face sorting is necessary perhaps?
The WBOIT looks exciting, but is unfortunately beyond our technical capabilities to implement at the moment.
In regards to the 1st issue with the depth sorting of the objects, would it be a solution to change the alpha index dynamically somehow?
Using depth prepass is a cheap way to make some problems with transparency work, but in your case it seems it doesn’t. You can also try to set material.separateCullingPass = true and see if that helps.
You can try facet depth sorting, but it sorts by face only (and not at pixel level), so, depending on the camera position, it could still fail.
