Order indepedent transparency OIT fails with translucency enabled

Bugs
1

Hi, I would like to ask a question regarding OIT feature. Not sure if it’s a bug or it’s expected.

When OIT is enabled in scene with translucency materials, the rendering not longer work. Just pure white color is displayed.

The problem can be reproduced by inserting the below line to the script https://playground.babylonjs.com/#WGZLGJ#2849
scene.useOrderIndependentTransparency = true;

I also would like to know in case the OIT feature is not supported for translucence materials, is there anyway I can contribute to make it work?

Thanks

1 Like
2

Hello and welcome to the Babylon community! @CraigFeldspar is who implemented the feature so they’ll know :smiley:

1 Like
3

Hey @khanh_ha !
OIT has really basic support right now, since it’s a specific pipeline for rendering transparent objects, there may be a set of features that are conflicting with it. And it appears to be the case with translucency as we have lots of webgl errors in the console.
We will improve the support of OIT in the future, but for now I would disable translucency on all transparent materials if you want to use it.

2 Likes
4

Hi @CraigFeldspar,
Thanks for your support.

I understand that the white screen problem is due to a bug in the IOT feature that is not compatible with translucency material. Can you tell me a bit more about this bug?

It would be wonderful if you could suggest me any workaround that I can implement for now so translucency materials can coexist with transparent materials in the same scene while IOT is enabled?

Disabling translucency is a big trade-off for my project.

Thanks

5

Just repinging @CraigFeldspar in case he hasn’t seen it

1 Like
6

As far as I know (and I know little :wink:) for now there is no workaround. Either you keep with translucency and forget about OIT or the other way round.

1 Like
7

@CraigFeldspar Hi, as far as I understand, the dual depth peeling technique is used for the current IOT feature in babylonJS. Can you provide me with more detail why this dual depth peeling is preferrered over the new technique “weighed, blended”, as mentioned here [LearnOpenGL - Introduction]? Is there any challenge that prevents us from integration this weighted, blended technique into BabylonJS?

8

Not sure about the required API but I wonder if it was possible with WebGL2 @CraigFeldspar will definitely have more thoughts about it :slight_smile:

9

@CraigFeldspar @carolhmj I think I have figured out why OIT fails with PBRMaterial. To be precise, it fails when refractionTexture of PBRMaterial is used. PBRMaterial with transmission is a 2-pass rendering algorithm that renders opaque objects first onto a render target, and then use this render target as a refraction texture.

When this refraction texture is active in PBRMaterial, OIT just fails.

I have managed to reproduce the problem here https://playground.babylonjs.com/#GWPDQH#1

I wonder if there is any quick fix I can apply to get around the problem? Thanks

10

@khanh_ha quick fix I’d say no, the problem lies in the engine : the oit messes somehow with the render destinations and the both techniques mess with each other. In your PG, there seems to be a new framebuffer created every frame, for some reason that eludes me

11

@CraigFeldspar thanks for your answer. Should we submit this bug to github?

12

I’d say if you feel like trying to work this out/help/collaborate, then ‘yes’. It certainly would be nice if this could somehow work. But I rather believe this will not be just a ‘quick fix’.

1 Like
13

I would think it is a current limitation of how the algorithm is working unfortunately. @CraigFeldspar could you confirm ? and if yes could it be added to the doc ?

14

The algorithm for sure blends naively the colors that are stacked onto each other, so indeed there is no refraction happening, I’d say let’s add this limitation to the doc

15

I added it to the doc, thanks

1 Like