Injecting WGSL in Babylon.js shaders

Questions
1

With material plugins, one can inject custom code into existing Babylon.js shaders.

We are using the new WebGPU backend, and would like to inject WGSL code into Babylon.js shaders. However, this doesn’t seem to be reasonably possible, because

  1. Babylon.js starts with a GLSL shader
  2. The material plugin gets executed, and injects GLSL. One can inject structs, functions and uniforms.
  3. The GLSL code is transpiled to WGSL
  4. WebGPU is being used for rendering

And step 3 and 4 are abstracted away, which makes sense.

We would need to inject WGSL code, because other parts of our rendering pipeline need to use the same code. We also need to inject storage buffers. Is there a reasonable way of doing this?

2

For completeness: We found two variants, both of which are not ideal

  • Overriding the WebGPU Javascript global, and intercepting all the API calls to inject our code in the shaders, and to inject the required parts in the pipeline building.
  • Not using Babylon.js materials for this task, and instead writing our own shaders.
3

cc @Evgeni_Popov

4

It’s not possible to use material plugins with WGSL at the time, because we still only use GLSL for the standard and PBR materials (and for all our other shader code, for that matter).

But we are in the process of adding support for WGSL in the NME (see Nme webgpu2 by deltakosh · Pull Request #15003 · BabylonJS/Babylon.js · GitHub), meaning that we are converting our shader code base to WGSL. Once NME support is done, I think we will work on converting the remaining code to WGSL, at which point material plugins will support injecting WGSL code.

2 Likes
5

Glad to hear that the WebGPU plans are progressing nicely. I suppose the current solution will be writing the parts that we need by hand, which is doable.