“提交时使用的已破坏纹理 [Texture]。”在 chrome/webgpu 中使用视频纹理时答案

【问题标题】："Destroyed texture [Texture] used in a submit." when using a video texture in chrome/webgpu“提交时使用的已破坏纹理 [Texture]。”在 chrome/webgpu 中使用视频纹理时
【发布时间】：2022-01-13 22:48:44
【问题描述】：

我正在尝试在 WebGpu 中使用 external_texture，但遇到了错误。

localhost/:1 Destroyed texture [Texture] used in a submit.
    at ValidateCanUseInSubmitNow (../../third_party/dawn/src/dawn_native/Texture.cpp:605)
    at ValidateSubmit (../../third_party/dawn/src/dawn_native/Queue.cpp:395)

我创建了一个视频元素并创建了一个外部纹理：

const video = document.createElement('video');
video.loop = true;
video.autoplay = true;
video.muted = true;
video.src = '/videos/sample.webm';
await video.play();

const videoTexture = device.importExternalTexture({
    source: video,
  });

我是这样绑定的：

{
    binding: 2,
    resource: videoTexture,
},

并在我的着色器中引用它，如下所示：

[[binding(2), group(0)]] var diffuseTexture: texture_external;

...
var diffuse = textureSampleLevel(diffuseTexture, textureSampler, in.uv).xyz

我已将视频元素和 videoTexture 存储到一个变量中，以防万一它与垃圾收集有关，但它没有帮助。我所做的一切似乎都与视频上传示例 (https://austin-eng.com/webgpu-samples/samples/videoUploading) 中的相同，除了我的程序中还有很多事情要做。

【问题讨论】：

标签： webgpu

【解决方案1】：

事实证明，视频外部纹理的生命周期非常有限。当您的代码将控制权返回给浏览器时，外部纹理将被销毁。对于大多数 3d 应用程序，这很可能是在 requestAnimationFrame 完成时。

为了缓解这种情况，您必须在渲染时在同一帧中创建绑定组和外部纹理。将外部纹理放在单独的绑定组中可能会有所帮助，因为您必须重新创建它。

例如

function frame() {

    var externalTextureBindGroup = device.createBindGroup({
        layout: pipeline.getBindGroupLayout(1),
        entries: [
            {
                binding: 0,
                resource: device.importExternalTexture({
                    source: video,
                    }),
            },
        ],
    }); 

    // additional setup.

    passEncoder.setBindGroup(1, externalTextureBindGroup);
    passEncoder.drawIndexed(group.count, 1, group.start, 0);

    // additional draws

    requestAnimationFrame(frame);

}

参考资料：

https://github.com/toji/webgpu-best-practices/blob/main/img-textures.md#gpuexternaltexture-lifetime

【讨论】：