 | Video to WebGPU Texture in Real-Time |  |
How to have live video frames copied to a in scene texture.
 Screenshot of the output from the Example - showing an animated video getting mapped in real-time to the texture (burning cube).
Important lines needed to modify an ordinary 2d texture so its content are updated from a video.
Summary
• Fragment shader: needs to use texture_external
• Fragment shader access the color: textureSampleBaseClampToEdge
• Body code (key lines):
const video = document.createElement('video');
video.loop = true;
video.autoplay = true;
video.muted = true;
video.src = 'https://webgpulab.xbdev.net/var/resources/fire.mp4';
await video.play();
...
const externalTextureSource = new VideoFrame(video);
...
{ binding: 2, resource: device.importExternalTexture({source: externalTextureSource}) }
| Resources | |
• Live example (with code) [LINK]
| 
