How to detect WebGL errors like "Too many uniforms"

Questions
1

My BabylonJS app works on most devices, but on old iPads I get WebGL errors like “Too many uniforms”. Sometimes the errors happen while loading a scene.

Is there some reliable way to detect unrecoverable WebGL errors, so I can alert the user with a message like “Your device is not powerful enough to run this app. Please try using a more powerful device.”

PS: I have tried patching BABYLON.Tools.Error and it detects WebGL errors OK, but (a) BabylonJS also calls Tools.Error for unimportant errors like failing to load some files, and (b) it looks like BabylonJS can recover from some shader errors by falling back to a simpler shader. In this case I would not want to show an error to the user. So this way (patching Tools.Error) is not reliable.

2

Do you know what feature of Babylon you are using which reproduces the issue, this may be a bug in Babylon. Based on this post javascript - WebGL: get error/warning message text as a string - Stack Overflow it looks like you could keep polling gl.getError() but that wouldn’t really be recommended. Another option is checking the engine capabilities eg. scene.getEngine().getCaps() to check which features are supported.

3

Technically Babylon.js should be able to recover and just use a degraded version of the material involved in the error.

You can check your material.getEffect().getCompilationError() to get a string of potential issues

4

Thanks for your answers.

I do have a ShaderMaterial with a custom shader in my scene. From your answers I assume it’s my GLSL code that is failing on old iPads. In which case, of course, I can detect the error and report it to the user. (Or downgrade the function of my shader to work on low level WebGL devices.)

Thanks again.

1 Like
5

I checked my shader, but it was working OK on old iPad, so it wasn’t causing any problem.

My original requirement was to show the user a warning popup if their device was not powerful enough for my website, instead of appearing to freeze. I though that the BJS error messages I saw in the console were evidence that the device was not powerful enough. Now I realise that BJS emits these error messages while it is falling back to simpler shaders. So error messages are not evidence that the device is not powerful enough. For example, I see BJS error messages in a recent iPadPro, which is certainly powerful enough for my app, but just doesn’t happen to support some WebGL features that BJS tries to use.

To solve my original requirement, I now track the FPS and if it stays below 10fps for 5 seconds then I assume the device is not powerful enough, and I alert the user with message “Your device may not be powerful enough to run this website effectively. Please try using a more powerful device”.

Thanks to trevordev and Deltakosh for pointing out that BJS works on any WebGL device by degrading materials gracefully. It’s good to know this.

6

ok that makes totally sense
We dump errors because you may want to know that babylon.js was forced to use some fallbacks