WebGPU Depth Stencil Error

The error you're encountering is related to a mismatch between your fragment shader and your render pipeline configuration. Let me explain what's happening:

The Issue

Your fragment shader is writing to frag_depth (using the built-in output variable), but you haven't specified a depth stencil state in your render pipeline descriptor. In WebGPU, if your shader writes to frag_depth, you must include a depth stencil attachment in your pipeline configuration.

How to Fix It

You need to either:

1. Add a depth stencil state to your render pipeline descriptor, even if you're not using the depth buffer for rendering:

JAVASCRIPTCopied
const pipelineDescriptor = {
  // other pipeline settings...
  depthStencil: {
    format: 'depth24plus', // or another appropriate depth format
    depthWriteEnabled: true,
    depthCompare: 'less',
  },
  // remaining settings...
};

2. Or remove the frag_depth writes from your fragment shader if you don't need depth functionality.

Important Note

Even if you've disabled the depth buffer in your render target, the shader itself is still compiled with the capability to write to depth. The validation layer is detecting this mismatch between your shader capabilities and pipeline configuration.

If you're implementing GTAO (Ground Truth Ambient Occlusion), you might need depth information, so the first approach (adding the depth stencil state) is likely what you need.