Sometimes shaders are not shown in WebGL 1

Hey. I have a strange error on our page. I have some meshes which include shadows and PBR materials. The weird thing is that on some browsers some shaders throw an exception and the material is not shown. I know these screenshots might not help a lot, but maybe there is some valuable information in, which I don’t see. I also have no idea where to start to looking at. As this usually happens only (until now) only on older laptops. For now I also only saw this with browsers running WebGL 1 (in our case FF WebGL 1 worked and Chrome WebGL 1 did not work).

Edit: In a PM I can also share a link to reproduce this.



it looks like a bug in angle \o/ where pack is a restricited word in D3D9 but not on the glsl spec :frowning:

The repro would probably not help as it might be machine specific I suspect ???

Yes unfortunately it is very machine specific.

Okay actually this is a start. Which means it has something to do with the PBR materials?
Also I heard D3D9 the first time. Is this somehow bundled within BabylonJS or is this shipped with OSes/browsers?

D3D9 is the underlying graphics Stack (directx old version) used by angle on this machine from the error. It is not related to PBR but to shadows who are using pack unpack in the shaders when float rendering is not supported.

Do you have an example of machine spec where you have the issue ?

Yeah sure I just got a lot information about that laptop:

Processor: Intel i5 M540 2.53GHz (and its graphic chip)
RAM: 4GB
OS: Windows 10 Home
DirectX-Version: 12

This screenshot is in German, but I hope the necessary information can be extracted :slight_smile:

I also had the chance to dig a little deeper. I found the real reason why it did not work and I wonder why this is happening. By only disabling the shadows the errors were the same. So then I realized we are also using a scene.environmentTexture:

// where layerPx etc. are images
scene.environmentTexture = CubeTexture.CreateFromImages(
  [layerPx, layerPy, layerPz, layerNx, layerNy, layerNz],
  scene,
);

And on the meshes we are using a PBRMetallicRoughnessMaterial, where things are crashing, it seems. As soon as I removed the environmentTexture it worked again. I just don’t understand why it worked in Firefox (96.0.2) and not in Chrome (97.0.4692.99).

Edit: I try to make a playground which causes this bug. But I am not sure if this should be fixed here in BabylonJS or somewhere else? Also should it be fixed for such old versions?

The fix should be in Chromium or Angle unfortunately, could you create a bug report in their bug tracker ?

Sure I will create one there, just needed to know where this one goes. Thanks a lot for your help :+1:

1 Like