Stange behaviour of useOrderIndependent Transparency

[Lemcat]

Here I have some simple Playground that have 3 objects and changing clearColor.

For the test I use mobile browsers on my Android 13 (Xiaomi Pad 6). When I turn useOrderIndependentTransparency = true it starts to work weird:

• Chrome 135.0: no objects, no setting clearColor, only static white screen only
• FirefoxBeta 138.0b7: no objects, but clearColor changing only

When I turn this option off then I start to see all the objects and clearColor changing normally.
Maybe I use that option in a wrong way?

[sebavan]

cc @Evgeni_Popov

[ryantrem]

I can see the same “static white screen only” behavior on my Android device (Chrome) and my MacBook (Edge). Seems like a shader problem. For Android, I see this warning in the console output:

[.WebGL-0x7207ac6a00]GL ERROR :GL_INVALID_OPERATION : glDrawElementsInstancedANGLE: buffer format and fragment output variable type incompatible

For MacOS, I see this:

[.WebGL-0x12800a76a00] GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs.

@Evgeni_Popov or @Deltakosh any thoughts?

[sebavan]

This happens mostly due to the use of multi render target in the OIT/prep pass renderer case but I wonder if there is a shortcut to implement it in a custom shader.

[Evgeni_Popov]

It’s a bit involved, see:

Order-independent transparency + custom shader + needAlphaBlending = broken shader

It’s a bit complicated because you will have to implement the necessary code in your custom shader to support OIT. You should take example on the standard material and look for the ORDER_INDEPENDENT_TRANSPARENCY define. You will also have to add #include<oitDeclaration> and #include<oitFragment> in your shader. Again, look how it is done in the default material (shaders/default.vertex.fx and shaders/default.fragment.fx).

And a working PG:

Order-independent transparency + custom shader + needAlphaBlending = broken shader

You can reuse the existing OIT shader code by using the same #includes than the ones used in the PBR / standard materials. Also, you have to declare the oitDepthSampler and oitFrontColorSampler samplers when you create your material (line 72). To bind the samplers, simply call scene.depthPeelingRenderer.bind(shaderMaterial.getEffect()) (line 80):