WebGPU: Rendering breaks when scene contains more than 7 lights

I want to add WebGPU support to our existing app. By default, our scenes contain 10 lights. When i add a mesh into the scene, e.g. primitive sphere, the console prints alot of WebGPU warnings and the canvas rendering the scene breaks as shown in the image below.

If I reduce the number of lights to 7, the scene is able to work fine. I’d like to understand what may be contributing to this error. Is the application exceeding the maximum uniform buffers? If so, how come since the scene may have 8 or 9 lights and still trigger this issue.

I tried to reproduce on PG but am not successful. WebGPU works fine with 10 lights in BJS PG. Our app is big and contains post process such as FxaaPostProcess and GlowLayer and custom shaders for gizmos and widgets. I appreciate without a PG it is difficult to provide a solution. For now, i’d be happy to understand more about this error and suggestions for where i can debug and diagnose the cause.


Each light in Babylon consumes one uniform buffer, and there’s a limit a vertex/fragment stage can use. It seems it is 12 on your device, as per the error message (it’s also 12 on my GPU according to https://webgpureport.org/). As we also use uniform buffers internally for other purposes (one for scene data, one for material data, one for mesh data, one for “left over” data from the material - maybe I forget some others…), the maximum number of lights you can use is even less than this limit.

At the time, there’s nothing that can be done about it, but there exists some algorithms that can handle lot of lights (hundreds / thousands), and we will see if/how we could integrate them in Babylon in the future.

@Evgeni_Popov I think it could be great to have a function in BabylonJS which counts the number of buffers still available to avoid the crash of the application when using lights improperly.

OK. Noted. What can i do to make sure i don’t encounter this kind of crash for our users? It seems there are many variables at play which means it isn’t as simple as reducing number of lights because more meshes or materials could also trigger this issue with reduced lights.

bvaisman’s suggestion below can be useful. I also suggest an observable/hook to notify soon as when max uniform buffers are reached so that the app can make reductions in lights or meshes or materials to make sure we don’t exceed and break the app.

Note that you can disable ubo support (engine.disableUniformBuffers = true) to increase the number of lights you can use. We are going to add an option (probably in the light constructor) so that you can disable ubo support only for lights and not globally.

1 Like