Multiple SPS-es do not work on WebGPU

Hello all,

I have this playground: https://playground.babylonjs.com/#2FPT1A#466

And at least on my laptop when I try to open it in Chrome Version 97.0.4692.71 (Official Build) (64-bit)
or Chrome Canary Version 100.0.4847.0 (Official Build) canary (64-bit) with WebGPU enabled I get the following error in the console:

babylon.js:16 Uncaught TypeError: Failed to execute ‘beginRenderPass’ on ‘GPUCommandEncoder’: Failed to read the ‘colorAttachments’ property from ‘GPURenderPassDescriptor’: Failed to read the ‘loadValue’ property from ‘GPURenderPassColorAttachment’: Failed to read the ‘b’ property from ‘GPUColorDict’: Failed to read the ‘b’ property from ‘GPUColorDict’: Required member is undefined.
at t._startMainRenderPass (babylon.js:16:1871010)
at t.clear (babylon.js:16:1845322)
at t._clear (babylon.js:16:273574)
at t._clearFrameBuffer (babylon.js:16:267598)
at t.render (babylon.js:16:276807)
at VM213 babylon.playground.js:16:26983
at t._renderFrame (babylon.js:16:142033)
at t._renderLoop (babylon.js:16:142219)

Am I doing something wrong in the code or is this a bug in Babylon itself?

The same example works just fine in webgl1 and 2.

@Evgeni_Popov is the one and only WebGPU hero :slight_smile: I will try to have a look ASAP but feels like a bug

Currently having a look at the problem.

Oh man, I miss you so much and I am so happy you are having a look :slight_smile:

There are two problems in the PG:

  • BABYLON.Color3.Black is a function, you should use BABYLON.Color3.Black() instead
  • scene.clearColor expects a Color4, not a Color3. However, we have some defensive code that can handle Color3, so using a Color3 will work (but you should really use Color4 instead: it would not work in Typescript)

@Evgeni_Popov Thank you very much! I copied the code from some example, so I guess I should have checked it, it is very weird that the WebGL works at all.

Also once my pg is fixed I managed to test the performance of drawing an absurd amount of particles, and I got some interesting results, at the moment WebGPU handles 2M particles in 2K meshes 1K particles each at about 44FPS, WebGL2 on the same hardware, after some initial FPS drops, handles the same scene at about 49-50FPS, I was expecting the meshes count to not matter so much. Although WebGPU is far more efficient, 10% GPU load in WebGPU vs 45% in WebGL2, so I think I can increase the total particles count if I increase the particles per SPS count, and hopefully, WebGPU will handle it much better. However at the moment if I try to create more particles in the initial method I ran out of memory in the browser, so I will have to improve the performance test to load asynchronously to avoid the huge memory spike.
The scene for the performance test is: https://playground.babylonjs.com/#2FPT1A#490 (WARNING, this is a very big scene, the browser might run out of memory while loading)

In WebGPU, you can try to use the “non compatibility mode” (engine.compatibilityMode = false) to try to save a bit of performance. See WebGPU Non Compatibility Mode | Babylon.js Documentation.

2 Likes