Order independent transparency Bugs with bump texture and rendering pipeline

Hi There,

we are having two issues with Order independent transparency in Babylon 5.1.0.
Both happen when OIT is set to true.

  1. When a rendering pipeline is created with the hdr flag set to true, the sorting of the transparent objects break (the front side disappears).

  2. When a material with a bump texture is rendered, wireframe like artifacts appear on the material.

We created this playground for reproduction:

Every help, hint or fix is appreciated :slight_smile:

Best regards,

cc @CraigFeldspar

Bump bump @CraigFeldspar

There is indeed a bug with bump + OIT that comes from shader derivatives (dfdx and dfdy) being equal to 0, probably because some code paths from OIT don’t reach the derivative calculation. I’m still looking for a proper way to fix it, as safeguarding dfdx values has proven to be breaking bump.
In the meantime, I would advise to either disable bump or disable OIT, whichever is less important visually in your case

Keep you in touch,


Hi There,

it seems to me that the normal error is fixed (checked version 5.13.3). Thank you very much @CraigFeldspar.
However there is still an error with the sorting, when hdr is to true for the rendering pipeline.

This is still visible in the playground:

Are you aware of this?

Thanks once again,

That’s funny because I didn’t push any fix :slight_smile: but the fact that it breaks now with hdr and not with normal pipeline will give me more info to investigate and hopefully find a definitive fix.


thanks for your help!

I also had the same issue while using OIT, a workaround that worked for me was to export the tangents with the gltf file.


@CraigFeldspar I am sorry to tell you the normal error is still there. Just checked version 5.14.1.
In addition to that, it does not break with one or the other.
There is a sorting error, when hdr is set to true and black lines appear, when a normal map is used.

@L1v3 Thanks for your reply, I will give it a try.

Yes it kinda confirms what I was thinking, the use of dFdx and dFdy to calculate tangents in the shader (when they are not in the model) breaks OIT and bump

we can document that limitation I guess

spent another few hours debugging that, I still don’t have a fix but I’m closer to finding the real problem. Posting details here in case someone else wants to take a stab at it too :

Turns out the problematic lines are in the oitFragment.fx shader bit : we use texelFetch and gl_FragCoord to retrieve the previous depth/color. I didn’t notice the problem during the development because I always used constant alpha values for the whole mesh. In here, the opacity texture makes alpha values vary from pixel to pixel, and it turns out this texelFetch sometimes doesn’t exactly sample the right depth/alpha (dunno why though). If you replace these fetches by a constant value, the problem is gone. Could also be a side effect somewhere else in the code, who knows…

I’ll pick back this issue later on, but for now I feel like I spent too much time on it, I’ll let my eyes rest a bit :slight_smile:


Hey, are you able to provide an update about this issue?

Thank you for investigating this!

Lots of struggle for a solution as simple as moving 2 lines around :sweat_smile:

Branching prevents derivatives (dFdx and dFdy) from being computed, so moving branching at the end of the shader makes it possible.


I am very sorry to tell you that I still have the problem.
However, what I noticed is that it works when I use the integrated graphics card on my laptop, but not with the didcated Nvidia card.

I tried BabylonJS version 5.26.1.
Does this already include your fix?

The graphics card that is not working is a NVIDIA RTX 3080 Latop GPU with driver version 497.09.
It seems to me that this might be a driver issue?

It seems to be a driver issue, indeed.

On my desktop PC with a RTX 3080 TI it does work (driver version=516.94).

I tried it again, after updating my driver to version 517.4, but the problem is still there.
Maybe the issue is with Laptop graphics cards.

Would be great to report it to the chromium bug tracker if you can ?

Is the chromium bug tracker the right place to report it?
Isn’t it more an Nvidia issue?

Nonetheless, we could help ourselves by precomputing the tangents and skipping the whole dfdx/dfdy calculation in the shader. By doing this, the black lines disappear.

But now we have a new problem: When an object is viewed from a distance, it becomes noisy. Maybe this is due to missing trilinear filtering?
The noise is only visible, when “scene.useOrderIndependentTransparency” is set to true.

You can see the error here:

And also in this playground:

Yup the chromium team is the place to go as it might be something wrong at the angle level. The second behavior seems to also be to report.

It looks like the current support is somehow broken for this driver :frowning: