Add video texture sample

This sample shows how to upload video frame to webgpu and rendering on
canvas.
It can be easily modified to check the uploading perf of
copyImageBitmapToTexture.

Author: shaoboyan

assets/video/big-buck-bunny_trailer.webm

@@ -8,4 +8,5 @@ module.exports = [
     './examples/fractalCube',
     './examples/computeBoids',
     './examples/animometer',
+    './examples/videoUploading',
 ];

build/exampleList.js

@@ -0,0 +1,183 @@
+import glslangModule from '../glslang';
+
+export const title = 'Video Texture';
+export const description = 'This example shows how to upload video frame to WebGPU.';
+
+export async function init(canvas: HTMLCanvasElement) {
+  // Set video element
+  const video: HTMLVideoElement = document.createElement('video');
+  video.loop = true;
+  video.autoplay = true;
+  video.muted = true;
+  video.src = "assets/video/big-buck-bunny_trailer.webm";
+  await video.play();
+
+  const vertexShaderGLSL = `#version 450
+    layout(location = 0) in vec3 position;
+    layout(location = 1) in vec2 uv;
+
+    layout(location = 0) out vec2 fragUV;
+
+    void main() {
+      gl_Position = vec4(position, 1.0);
+      fragUV = uv;
+    }
+  `;
+
+  const fragmentShaderGLSL = `#version 450
+    layout(set = 0, binding = 0) uniform sampler mySampler;
+    layout(set = 0, binding = 1) uniform texture2D myTexture;
+
+    layout(location = 0) in vec2 fragUV;
+    layout(location = 0) out vec4 outColor;
+
+    void main() {
+        outColor = texture(sampler2D(myTexture, mySampler), fragUV);
+    }
+  `;
+
+  const adapter = await navigator.gpu.requestAdapter();
+  const device = await adapter.requestDevice();
+  const glslang = await glslangModule();
+  const context = canvas.getContext('gpupresent');
+
+  const swapChainFormat = "bgra8unorm";
+
+  var rectVerts = new Float32Array([
+    1.0,  1.0, 0.0, 1.0, 0.0,
+    1.0, -1.0, 0.0, 1.0, 1.0,
+    -1.0, -1.0, 0.0, 0.0, 1.0,
+    1.0,  1.0, 0.0, 1.0, 0.0,
+    -1.0, -1.0, 0.0, 0.0, 1.0,
+    -1.0,  1.0, 0.0, 0.0, 0.0,
+  ]);
+
+  const verticesBuffer = device.createBuffer({
+    size: rectVerts.byteLength,
+    usage: GPUBufferUsage.VERTEX,
+    mappedAtCreation: true,
+  });
+  new Float32Array(verticesBuffer.getMappedRange()).set(rectVerts);
+  verticesBuffer.unmap();
+
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [{
+      // Sampler
+      binding: 0,
+      visibility: GPUShaderStage.FRAGMENT,
+      type: "sampler"
+    }, {
+      // Texture view
+      binding: 1,
+      visibility: GPUShaderStage.FRAGMENT,
+      type: "sampled-texture"
+    }]
+  });
+
+  // @ts-ignore:
+  const swapChain = context.configureSwapChain({
+    device,
+    format: swapChainFormat,
+  });
+
+  const pipeline = device.createRenderPipeline({
+    layout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+
+    vertexStage: {
+      module: device.createShaderModule({
+        code: glslang.compileGLSL(vertexShaderGLSL, "vertex"),
+
+        // @ts-ignore
+        source: vertexShaderGLSL,
+        transform: source => glslang.compileGLSL(source, "vertex"),
+      }),
+      entryPoint: "main"
+    },
+    fragmentStage: {
+      module: device.createShaderModule({
+        code: glslang.compileGLSL(fragmentShaderGLSL, "fragment"),
+
+        // @ts-ignore
+        source: fragmentShaderGLSL,
+        transform: source => glslang.compileGLSL(source, "fragment"),
+      }),
+      entryPoint: "main"
+    },
+
+    primitiveTopology: "triangle-list",
+    vertexState: {
+      vertexBuffers: [{
+        arrayStride: 20,
+        attributes: [{
+          // position
+          shaderLocation: 0,
+          offset: 0,
+          format: "float3"
+        }, {
+          // uv
+          shaderLocation: 1,
+          offset: 12,
+          format: "float2"
+        }]
+      }],
+    },
+
+    colorStates: [{
+      format: swapChainFormat,
+    }],
+  });
+
+  const sampler = device.createSampler({
+    magFilter: "linear",
+    minFilter: "linear",
+  });
+
+  const videoTexture: GPUTexture = device.createTexture({
+    size: {
+      width: video.videoWidth,
+      height: video.videoHeight,
+      depth: 1,
+    },
+    format: 'rgba8unorm',
+    usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED,
+  });
+
+  const uniformBindGroup: GPUBindGroup = device.createBindGroup({
+    layout: bindGroupLayout,
+    entries: [{
+      binding: 0,
+      resource: sampler,
+    }, {
+      binding: 1,
+      resource: videoTexture.createView(),
+    }],
+  });
+
+  return async function frame() {
+    const commandEncoder = device.createCommandEncoder({});
+    const textureView = swapChain.getCurrentTexture().createView();
+
+    const videoImageBitmap = await createImageBitmap(video);
+
+    device.defaultQueue.copyImageBitmapToTexture(
+      {imageBitmap:videoImageBitmap, origin: {x:0, y: 0} },
+      {texture: videoTexture},
+      {width: video.videoWidth, height:video.videoHeight, depth: 1}
+    );
+
+    const renderPassDescriptor = {
+      colorAttachments: [{
+        attachment: textureView,
+        loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+      }],
+    };
+
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setVertexBuffer(0, verticesBuffer);
+    passEncoder.setBindGroup(0, uniformBindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.endPass();
+    device.defaultQueue.submit([commandEncoder.finish()]);
+  }
+}