DepthTexture with Mipmaps Issue in WebGPU

The error you're encountering is related to using mipmaps with a depth texture in WebGPU. The key issue is that WebGPU doesn't support using depth textures with mipmaps when they're used as render target attachments.

The Problem

The error message indicates that WebGPU doesn't allow a depth texture with multiple mip levels (10 in your case) to be used as a depth attachment in a render pass. In WebGPU, depth attachments must have exactly one mip level.

The mip level count (10) of [TextureView of Texture (unlabeled 512x512 px, TextureFormat::Depth32Float)] used as attachment is greater than 1.

Solution

You need to disable mipmaps for your depth texture. Modify your code as follows:

JAVASCRIPTCopied
this.renderTarget = new THREE.WebGLRenderTarget(512, 512);
this.renderTarget.stencilBuffer = false;
this.renderTarget.depthTexture = new THREE.DepthTexture();
this.renderTarget.depthTexture.type = THREE.FloatType;
this.renderTarget.depthTexture.format = THREE.DepthFormat;
this.renderTarget.depthTexture.minFilter = THREE.NearestFilter;
this.renderTarget.depthTexture.magFilter = THREE.NearestFilter;
this.renderTarget.depthTexture.generateMipmaps = false; // Set to false
this.renderTarget.depthTexture.needsUpdate = true;

Additional Information

1. Depth textures in WebGPU (and generally in most graphics APIs) have special restrictions compared to color textures.

2. If you need to use mipmaps with depth information, you might need to:

   • Render your depth to a regular color texture (using a shader to encode depth values)
   • Generate mipmaps for that color texture
   • Use the mipmapped color texture in your shader

3. For WebGPU specifically, depth textures used as attachments must have exactly one mip level, which is why setting generateMipmaps to false should resolve your issue.

This limitation is specific to using the texture as a depth attachment - if you're sampling from the depth texture in a shader after it's been rendered to, different rules may apply.