“提交时使用的被破坏的纹理[纹理]”在chrome/webgpu中使用视频纹理时

Question

我试图在external_texture中使用WebGpu，但遇到了一个错误。

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)，除了有更多的在我的程序。

Answer 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