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):

<?php
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}) }

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]

Advert (Support Website)

Visitor: