Use imageStore in WebGPU

Questions
,
1

Currently I use 5 texture renderings in webGL2 because each subsequent shader needs the texture result of the previous shader. WebGL2 has its limits because there is no imageStore in WebGL2.

Now I want to implement this much more elegantly and effectively with WebGPU. My goal now is to connect the 5 shaders that I have in the GPU. I would like to use imageStore to have the result of a shader within the GPU available as an input for the next shader.

I looked at the example with WebGPU - Compute. It’s impressive to control so many particles with the GPU.

I want to feel my way forward step by step. But my simple example already has a flaw somewhere, because it leads to a black screen.

In the Init()

const computeShaderCode = ` 
  #version 450
			
  layout (local_size_x = 16, local_size_y = 16, local_size_z = 1) in;			
  layout(set = 0, binding = 0, rgba8) uniform writeonly image2D outputImage;
			
  void main() { 
    ivec2 storePos = ivec2(gl_GlobalInvocationID.xy); 
    vec4 color = vec4(1.0, 0.0, 0.0, 1.0);
    imageStore(outputImage, storePos, color); 
  }`;
		
const computeMaterial = new THREE.ShaderMaterial({ 
  computeShader: computeShaderCode, 
});
		
const computePass = new THREE.ComputePass( 
  renderer, scene, camera, computeMaterial 
);
				 
computePass.setSize(512, 512); 
computePass.setOutputs([{ format: THREE.RGBAFormat }]); 
computePass.run();

If I disable this section of code I see my green test cube. So webGPU runs perfectly.
I find it very good that such data calculations no longer require the separate division into vertex and fragment shaders.