demo · v137

WebGPU: GPUTextureView for externalTexture

External textures (video frames) now accept a plain GPUTextureView binding — meaning the same compute / fragment shader can sample a video frame and a regular texture using one bind-group layout. The demo below grabs a camera frame, samples it into a canvas via WebGPU, and toggles between an invert-colours and grayscale shader.

probing…

source video

WebGPU rendered

click start camera

the code

// Old: needed a special externalTexture binding type:
//   layout: { entries: [{ binding: 0, externalTexture: {} }] }
// New: a regular sampled-texture binding works too —
const layout = device.createBindGroupLayout({
  entries: [{ binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} }],
});
const view = device.importExternalTexture({ source: videoElement }).createView?.()
            ?? device.importExternalTexture({ source: videoElement });
device.createBindGroup({ layout, entries: [{ binding: 0, resource: view }] });

see also