demo · v137
Binding lab
Three sources — an HTMLVideoElement, a VideoFrame, and a synthetic uploaded texture — rendered through both binding styles. The new GPUTextureView path unblocks effect graphs that need to feed the same source into multiple bind groups or sample multiple frames in one shader.
Heads upRequires Chrome 137+ with WebGPU. The lab falls back to a 2D canvas pipeline so the comparison and matrix still render.
probing…
legacy: external_texture binding
requires a fresh GPUExternalTexture per call
const ext = device.importExternalTexture({ source: videoEl });
const bind = device.createBindGroup({
layout: layout,
entries: [{ binding: 0, resource: ext }],
});
// ext is single-use; next frame: re-import
—
v137: bind GPUTextureView
same view across multiple bindings
const view = videoTexture.createView({ usage: GPUTextureUsage.TEXTURE_BINDING });
const bind = device.createBindGroup({
layout: layout,
entries: [{ binding: 0, resource: view }],
});
// view can be reused this frame in N bind groups
—
capability matrix
| capability | legacy importExternalTexture | v137 GPUTextureView |
|---|---|---|
| Use in multiple bind groups same frame | no — single-use | yes |
| Sample multiple frames in one shader | no | yes |
| Pass to compute pass | limited | yes |
| Source = HTMLVideoElement | yes | yes |
| Source = VideoFrame | yes | yes |
| YUV-aware sampling without manual conversion | yes | yes |