Problem Compute Shader output to be float32array type instead of rgba8unorm

Questions
,
1

Hi everyone!

I’m new to compute shaders in BabylonJS and want to understand some foundational concepts.
I want to develop a compute shader whose output is equal to the input. PG here. You can see the results in the browser’s console.

image
image1145×96 16.1 KB

I need the input texSrc to be type of Float32Array. As the output texDest is type of rgba8unorm I need to do something. As I didn’t find a clear example that does this, I tried to create a Float32Array view of the output, but I guess the format set is wrong from the compute shader definition.

image
image1646×68 13.2 KB

Any clues on how to achieve this? Thanks in advance :v:

2

Pinging the mastermind @Evgeni_Popov (with a bit of patience, because he is currently away)

1 Like
3

There are a few problems in the PG:

  • you should use a nearest/nearest sampler type for the source texture, else the values read from the texture will be interpolated (bilinear interpolation). Or, you could also sample at the center of the pixel (so, add (0.5/width, 0.5/height) to the uv coordinate), in which case no bilinear interpolation will take place. Lastly, you could also use textureLoad to just ignore sampler type.
  • the destination texture should be created with a FLOAT type (the default type is UNSIGNED_BYTE when not set) => the type of texDest should be updated accordingly in the compute shader
  • you set only 8 float values in your source texture, but because it is created as an RGBA texture, you should set 4 (width) * 2 (height) * 4 (RGBA channels)=32 values. In the PG below, I replaced RGBA textures by RED only textures, so that only 8 values are needed (4*2*1)
  • to compute the uv coordinates, you should divide the (x,y) coordinates by (width,height), not (width-1,height-1).
  • I’m not sure DEPTH32_FLOAT can be written by the user => using DEPTH32_FLOAT for the source texture does not work in the PG, I used FLOAT instead
  • To compare the content of two arrays, you have to loop over the elements and check them one by one, arrayOutView !== arrayIn won’t work because the two objects arrayOutView and arrayIn are different

Corrected PG:

2 Likes
4

Thanks @Evgeni_Popov for your reply!

I realized when I download your PG from the editor I get the following warnings in Chrome’s console and an array of 0 as output of the compute shader.

image
image1098×1754 195 KB

When I do the same with the original PG of the question it works fine.

Any thoughts on this? Thanks again

5

Maybe the editor is using an older version of Babylon? Try to use a newer / the latest version and see if that helps.

6

Thanks for the idea, but same result when updating to the latest. It seems to work only inside the BJS online editor but not outside. Maybe a WebGPU issue with float 32 textures?

7

Have you an external repro that would show the error? It will be hard to help if it works in the Playground.

1 Like