Minimal WebGPU ShaderMaterial

I am taking my first steps towards WebGPU and try to make the most minimalistic Shader Material. As I have no clue what to do, I googled minimal WebGPU shader, found this example online: Hello Triangle - WebGPU Samples and tried to hook it up to babylon:

I get a shader compilation error basically on the first character of the source. In the original example, there is another ‘decorator’ on the first line, saying @vertex and @fragment respectively but it does not help either.

Can someone point me into the right direction or has another minimal WebGPU example at hand?

Best regards,

1 Like

Hi! This page might be helpful :slight_smile: Writing shaders for WebGPU in WGSL | Babylon.js Documentation (


Hi Carolhmj,
Thanks for the link. I went a bit further by:

  1. Setting the correct Shading Language as pointed out in the link.
  2. Adding again @vertex and @fragment to the shaders.

Now I get a bunch of warnings that I do not understand:

  vertexInputs = input; // error: unresolved identifier 'input'

as well as

error: unresolved identifier 'input'
fn main() -> @location(0) vec4<f32> {  fragmentInputs = input;

I cannot find either either of the pieces in my code so I assume there is some pre-processing going on that I do not know about yet.

You can’t simply copy/paste existing wgsl code, you have to modify a number of things to make it compatible with Babylon WebGPU sub-system.

Everything is described in the link given by @carolhmj, and this PG should clear things up:

Let us know if something is still not clear.

1 Like

Hi all,
thank you all for the replies. With @Evgeni_Popov 's playground, I should have everything to figure out everything myself. Yes, I was expecting that it would not work just copy&pasting code, but coming from a WebGL background and now seeing the difference between the minimal code that works outside babylon and what I need in order to get it working, I am a but surprised TBH. But this is just an issue for the first time and I will get used to it pretty quickly. I’ll report back once I got it working.

Thanks again everyone for the help and wish you all the best.