[WebGPU] Unable to use StorageBuffer in PostProcess shader

Hello folks! I already owe so much of my progress with Babylon to the questions and answers here. :heart: Now I’m bringing one of my own:

I am using a WGSL-flavored pixel shader for post processing in my game (source not yet reflecting my port to Babylon.js).

I am able to update uniforms / samplers on the PostProcess instance’s resulting Effect with the exact same API as for the Material class.

However, the method setStorageBuffer which can be used on a Material instance (to pass a StorageBuffer to e.g. a WGSL fragment shader) seems to be missing on Effect. I would like to use storage buffers to pass instance information to my pixel shader code (which is an unmodified fragment shader). How can I achieve this?

For reference, here is a PG showing StorageBuffer working in a normal WGSL fragment shader; and here is a working WGSL pixel shader PostProcess.

Thanks!

Chris

@sebavan might be able to help here. Please be patient. He’ll only be able to answer in a few days.

1 Like

You can use the webgpuengine function directly https://playground.babylonjs.com/#8BHKCQ#28

1 Like

Thanks @sebavan, it’s working great!

Updated the playground for anyone else it might help (working WGSL PostProcess with StorageBuffer read / write): https://playground.babylonjs.com/#8BHKCQ#31

1 Like

@sebavan
I have another problem here. If I want to pass a matrix variable to the WGSL shader, what should I do? I’ve tried as below and none was right.

What’s the problem with the PG?

If you uncomment line 51, it does work as expected for me.

Note that if you want to access viewMat2 in your code, you must use the syntax uniforms.viewMat2.

Also, you don’t have to call camera.attachPostProcess(shader), as you passed the camera to the post process constructor: the post process is already attached to the camera. By doing this call, you attach the post process two times to the camera.

3 Likes

@Evgeni_Popov
Thank you for your reply!

Actually I was confused about the syntax. “uniform viewMat2” seems to be GLSL language. When I wrote “var viewMat3” there will be some error messages.

And I didn’t find the “uniforms.viewMat2” syntax. Did I miss something in the documentation?

This page also applies to post-processes written in WGSL:

https://doc.babylonjs.com/setup/support/webGPU/webGPUWGSL

I created a PR to make it clear:

1 Like

Great!