Order independent transparency in alpha.57 - how does it work?

Questions
1

Hi,

I was so happy when I found out that OIT is merged into the alpha release. Now, I need some help to understand how to use it.

I tried:
mat.alphaMode = BABYLON.Engine.ALPHA_LAYER_ACCUMULATE;
for a material with mat.alpha=0.8, the result is opaque meshes.

https://playground.babylonjs.com/#1PLV5Z#75

Adding this makes all objects disappear:
scene.useOrderIndependentTransparency = true;

What else do I need?
Thanks!!

1 Like
2

Welcome aboard!

Some documentation is coming regarding OIT. Adding @CraigFeldspar who may be interested in this thread as he is the creator of the functionality!

OIT is enabled simply by doing scene.useOrderIndependentTransparency = true.

For it to work, you should not set needDepthPrePass to true nor backFaceCulling to false:
https://playground.babylonjs.com/#1PLV5Z#78

Here’s one another PG using OIT:
https://playground.babylonjs.com/#WGZLGJ#3348

2 Likes
3

Thanks so much for your speedy response.
Your examples do work in Chrome, but not in my Safari Browser.

4

@CraigFeldspar will have a look shortly but what version of safari and what platform are you running it on ?

Safari is currently full of webgl compliance test issue and I hope they ll address those soon.

5

It’s MacOS 11.5.1 and Safari 14.1.2.

Do you have any indication when this feature will be available in a stable Babylon version?
Thanks!

6

5.0 is planned to be release next april, but it all depends on when Safari will deploy a fix which we do not control.