WebGPU采样深度纹理持续报错：修改采样器无效果求助

错误信息 #

Uncaught (in promise) GPUPipelineError: Texture binding (group:0, binding:1) is TextureSampleType::Depth but used statically with a sampler (group:0, binding:0) that's SamplerBindingType::Filtering

背景 #

Chrome 135 更新后，WebGPU 规则变更：

不再允许使用过滤采样器采样深度纹理。深度纹理仅可配合非过滤采样器或比较采样器使用。

原有代码 #

着色器代码（WGS） #

...
@group(0) @binding(0) var env_sampler: sampler;
@group(0) @binding(1) var depth_texture: texture_depth_2d;
@group(0) @binding(2) var normal_texture: texture_2d<f32>;
@group(0) @binding(3) var specular_texture: texture_2d<f32>;
@group(0) @binding(4) var ssao_texture: texture_2d<f32>;

...

fn VSPositionFromDepth(uv: vec2f) -> vec3f {
    // 获取当前像素的深度值
    var z = textureSample(depth_texture, env_sampler, uv);  // <-- 报错行
    // 从视口位置获取x/w和y/w
    var x = uv.x * 2.0 - 1.0;
    var y = (1.0 - uv.y) * 2.0 - 1.0;
    var vProjectedPos = vec4f(x, y, z, 1.0);
    // 用逆投影矩阵变换
    var vPositionVS = env.proj_inverse * vProjectedPos;
    // 除以w得到视图空间位置
    return vPositionVS.xyz / vPositionVS.w;  
}

TypeScript 绑定代码 #

...

private readonly _sampler = device.createSampler({
    minFilter: 'linear',
    magFilter: 'linear',
    mipmapFilter: 'linear',
});

...

private createTexturesBindGroup(pool: RenderResourcePool) {
    return device.createBindGroup({
        label: 'environment texture bind group',
        layout: this._pipeline.getBindGroupLayout(EnvironmentShader.BINDING_GROUPS.TEXTURES),
        entries: [
            { binding: 0, resource: this._sampler },
            { binding: 1, resource: pool.depthTextureView },
            { binding: 2, resource: pool.normalTextureView },
            { binding: 3, resource: pool.specularTextureView },
            { binding: 4, resource: pool.ssaoTextureViewBlurred },
        ],
    });
}

...

render(pool: RenderResourcePool) {
    pool.commandEncoder.pushDebugGroup('Environment Renderer');

    const texturesBindGroup = this.createTexturesBindGroup(pool);
    this.updateVariablesBuffer(pool);
    this.setRenderTexture(pool.hdrBufferChain.current.view);
    const rpe = pool.commandEncoder.beginRenderPass(this._renderPassDescriptor);

    rpe.setPipeline(this._pipeline);
    rpe.setBindGroup(
        EnvironmentShader.BINDING_GROUPS.SCENE,
        pool.scene.info.getBindGroup(this._pipeline, this._sceneBindGroupOptions),
    );
    rpe.setBindGroup(EnvironmentShader.BINDING_GROUPS.TEXTURES, texturesBindGroup);
    rpe.setBindGroup(EnvironmentShader.BINDING_GROUPS.VARIABLES, this._variablesBindGroup);
    rpe.draw(6);
    rpe.end();

    pool.commandEncoder.popDebugGroup();
}

尝试过的无效方案 #

将采样器的过滤模式全部改为nearest，或使用默认采样器定义，均仍报相同错误：

private readonly _sampler = device.createSampler({
    minFilter: 'nearest',
    magFilter: 'nearest',
    mipmapFilter: 'nearest',
});
// 或
private readonly _sampler = device.createSampler();

疑问 #

明明已经按照Chrome更新说明更换了非过滤采样器，为何仍然触发相同的绑定错误？

内容的提问来源于stack exchange，提问作者tlckpl