Possible incompatibility between order independent transparency and transparent GridMaterial

Bugs
1

As soon as I set scene.useOrderIndependentTransparency = true; my project broke with the following console errors:

image
image712×300 26 KB

I narrowed it down to a possible incompatibility between order independent transparency and transparent GridMaterial. See the following PG for a replication - specifically the line gridMat.opacity = 0.98; which triggers the problem.

I am using a lot of transparency so I’m uncertain if it’s ONLY GridMaterial that’s triggering the issue - it could be something else as well. However, transparent GridMaterial definitely triggers the issue.

2

Yes, see:

2 Likes
3

@Evgeni_Popov what about this issue then? No console error, but transparency is a mess just setting box.visibility = 0.8 (with default StandardMaterial):

image
image1376×1056 210 KB

4

This PG does work for me (Chrome and Firefox in Windows 11):

image
image1265×1173 7.88 KB

5

Interesting …

The screenshot I posed was on my Surface Pro using Chrome and Windows 11:

  • Chrome Version 139.0.7258.128 (Official Build) (arm-64)
  • Windows 11 Home Version 10.0.26100 Build 26100

I just switched to my desktop, also using Chrome and Windows 11 and it’s fine:

  • Chrome Version 139.0.7258.67 (Official Build) (64-bit)
  • Windows 11 Pro Version 10.0.26100 Build 26100
6

I just updated Chrome to latest version 139.0.7258.139 (Official Build) (arm-64) on Surface Pro and the issue is still evident. No problem when scene.useOrderIndependentTransparency = false;

It doesn’t worry me too much. I can definitely do without it - I was just playing around. However I thought I better report it in case there was a genuine bug impacting some users.

7

I marked the original issue as resolved. Thanks @Evgeni_Popov

1 Like
8

It seems that this may be a driver issue. You can try creating a ticket at Chromium

1 Like
9

please share the issue here and we ll try to bump it

10

@sebavan in preparing a Chrome bug report, I thought I’d do some more testing, and on Android Chrome that PG gives me a white screen and an uncaught type error. Reverting to scene.useOrderIndependentTransparency = false; and there’s no issue. I don’t know if this is related to or separate from the transparency issue on ARM64.

image
image894×839 32.5 KB

11

It looks like this code was added recently (July 4) by @Evgeni_Popov Support for back stencil configuration + blend configuration per targ… · BabylonJS/Babylon.js@0d321a5 · GitHub

I don’t know much low-level webGL but in my naive searches I can find no mention of WebGL2RenderingContext.enableIndexed()

However, even dropping back to Babylon.js 7.x (well before this code addition) I still get a white screen on Android Chrome but no type error in console, when scene.useOrderIndependentTransparency = true;

12

@sebavan I’ve created a Chrome bug report for the transparency issue as best I can: Chromium

2 Likes
13

This PR should fix the “enableIndexed is not a function“ error:

However, as you mentioned, OIT does not work in Babylon 7.x either, so I believe this is because this mobile phone does not support this feature.

1 Like