GLSL and WGSL in WebGPU

Hi~~~
I am confused about glsl in WebGPU. doc say “wgsl is the only shader language that WebGPU knows about”, and I find that some glsl code still work in webGPU, I want to confirm that where I can write glsl and where I have to write wgsl?

  1. pbrCustomMaterial/customMaterial: must glsl (:heavy_check_mark:
  2. shaderMaterial: can glsl or must wgsl (?)
    my glsl shaderCode didn’t work in webgpu like picture1
  3. material extends pushMaterial: can glsl or must wgsl (?)
    this skybox (picture 2) is a custom procedure skybox written by glsl, it still works.
    4.postprocess: can glsl or must wgsl(?)
    my custom postprocees doesn’t work. It is same like q2, engine throw lots of warming and canvas is white.

Picture 1


Picture 2

I think this doc page should clear things up:

The relevant part:

So, even in WebGPU, if you use a CustomMaterial or a PBRCustomMaterial to inject some custom shader code, you must write it in GLSL.

If you want to write shader code in the WGSL language, you can either write a compute shader or use the ShaderMaterial class to wrap a vertex/fragment shader. The latter is the subject of this page.

See second quote: the only way to use WGSL is in compute shaders or ShaderMaterial.

1 Like

if i want write a shadermaterial, do I have to write wgsl? glsl seem didn’t work

No, ShaderMaterial written in glsl does also work in WebGPU:

https://playground.babylonjs.com/#6GFJNR#155

Babylon transforms glsl to wgsl for you at runtime

when I create WebgpuEngine to replace Engine, BBL throw out lots of warning and then engine break out, the canvas flash to white. I find that it is cause by a glsl shader code which is for a thinInstanceMesh’s shaderMaterial, it contains 3 custom AttributeBuffers and many uniforms (no sampler)

Are you able to put a repro somewhere? Those errors should not happen but I don’t know where they come from. Using a custom ShaderMaterial should definitely not lead to that.

1 Like

I plan to rewrite this shader code line by line to find where is wrong.
I think maybe I forget to bind any uniform or any attribute?


Does these correct path to create a thinInstanceMesh with ShaderMaterial ?
1.create a shaderMaterial
2.bind all uniforms with default value
3.bind all samples (? textures are always load async, should I have to do next steps after loading all texture?)
4.create a thinInstanceMesh
5.regist all custom attributes
6.set all attributes
(finish all, then)
7 mesh.material = shaderMaterial;

You should do exactly what you do for it to work in WebGL: create the ShaderMaterial and set the uniforms / samplers with proper values. If you have custom attributes, set them on the mesh (setVerticesData). For textures, it will work even if the texture is not fully loaded the first time the mesh is displayed with the shader, as long as you set a value to the sampler variable (shader.setTexture("...", myTexture);).

See WebGPU Breaking Changes | Babylon.js Documentation, it can help you finding where the problem lies.

Like this PG. if I want to add a custom thin instance attribute “offset”, how to set them on the mesh?
https://playground.babylonjs.com/#6GFJNR#157

You can do it like that:

https://playground.babylonjs.com/#6GFJNR#158

2 Likes

Thank you!!! I will have a try tomorrow to make my shaderMaterial work!!! :grin:

2 Likes

It looks like you can simplify things a bit by removing the promise and onLoadObservable part too. :slightly_smiling_face:
https://playground.babylonjs.com/#6GFJNR#159

1 Like

Ohhh, same name attribute cause this question
image

Thank you for your reply, my shaderMaterial work again!!!

1 Like

Thank you for your reply, my shaderMaterial work again!!! :grin:

1 Like