GRL OIT support

[RolandCsibrei]

No description provided.

[bjsplat]

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

[bjsplat]

Snapshot stored with reference name:
refs/pull/15966/merge

Test environment:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/15966/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/15966/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/15966/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/15966/merge
https://gui.babylonjs.com/?snapshot=refs/pull/15966/merge
https://nme.babylonjs.com/?snapshot=refs/pull/15966/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/15966/merge#BCU1XR#0

[bjsplat]

Visualization tests for WebGPU (Experimental)

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/15966/merge/testResults/webgpuplaywright/index.html

[bjsplat]

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/15966/merge/testResults/webgl2playwright/index.html

[RolandCsibrei]

@Popov72 Hello! Is this as simpke as changing the fragmentOutputs output color name to support OIT or do I need to do more? Thanks!

EDIT: Test PG:
https://playground.babylonjs.com/?webgpu&snapshot=refs/pull/15966/merge#H1LRZ3#690

[Popov72]

It's a bit more involved:

• you have to add two includes in your shader code (look for "oit" in default.fragment.fx for an example).
• you have to add some JS code in your material. Look for "oit" in standardMaterial.ts to know what to do (you don't need the PrepareDefinesForPrePass call).

Also, the PG test link is for WebGL, whereas you only updated the WGSL shaders, so it doesn't show your changes. Another thing is that there's a "Cannot add an uniform after UBO has been created. uniformName=viewProjection" error with this link. It probably doesn't come from your PR, but it should be fixed nonetheless.

[RolandCsibrei]

@Popov72

Since the GRL material is a material plugin are those two additional steps really needed? Isn't OIT handled by the standard and pbr material base shaders?

[Popov72]

No, it's not needed, but I think greasedLine.fragment.fx is used by the standalone material, not the plugin?

[RolandCsibrei]

Yes, it is a ShaderMaterial. I just added the OIT "support" shader code to a random GRL shader to be able to show the changes I'm going to make to all GRL shaders involved in OIT and I didn't really choose the best one. Sorry to confuse you.

On the other hand since the GrasedLineSimpleMaterial doesn't support alpha I believe there is no need to implement OIT support in this material. Is this correct?

[Popov72]

Yes, in that case you don't have to modify greasedLine.fragment.fx.

Regarding the plugin, you should inject your code in CUSTOM_FRAGMENT_BEFORE_FRAGCOLOR and not CUSTOM_FRAGMENT_MAIN_END. That way, it will automatically work with OIT/the pre-pass renderer.

With this change, instead of gl_FragColor, you should update color for standard materials, and finalColor for PBR materials. The easiest way to do this is to add something like that at the start of the shader code injected at CUSTOM_FRAGMENT_BEFORE_FRAGCOLOR:

#ifdef PBR
    #define grlFinalColor finalColor
#else
    #define grlFinalColor color
#endif

and use grlFinalColor instead of gl_FragColor.