WebGPU Compute & StorageTexture to store non color data

Questions
, ,
1

I’m scratching my head on this one. First time using compute shaders, so maybe I’m doing something wrong due to poor understanding? In a normal webGL implementation I was just rendering to a target then feeding that texture as input to the next shader and so on.

With compute I write to a StorageTexture from within the compute shader.

I’m noticing some data not being detected? Or maybe I’m asuming a particular value range but webGPU uses another?

The first and last passes seem to work, since I can see the objects tinting the final result, but the “hidden” velocity texture is not doing anything it feels like it’s data is not being saved or maybe truncated to very low values?

There’s one texture that holds velocities and other non color values. In webGL it was working, but in GPU it doesn’t… to read from the velocity texture I’m doing .sample, is that a mistake?

webGPU Demo:
https://threejs-fluid-simulation-git-gpu-compute-bandinoplas-projects.vercel.app/

Source code: threejs-fluid-simulation/src/FluidMaterialGPU.ts at ffc75c2f79e3e9d6860bd253b02b57a46c922fa1 · bandinopla/threejs-fluid-simulation · GitHub

Is there anything wrong in the code?

2

Solved this issue.

The default StorageTexture is set at 8bits so all the fluid calculations being stored in the pixels were being absolutely destroyed. The solution was:

const txt = new StorageTexture(textureWidth, textureHeight); 
+          txt.type = FloatType; //<--- makes it 32bit