Untitled diff
建立於 差異永不過期
import { makeSample, SampleInit } from '../../components/SampleLayout';
import { makeSample, SampleInit } from '../../components/SampleLayout';
import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';
import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';
import sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';
import sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';
const init: SampleInit = async ({ canvas, pageState, gui }) => {
const init: SampleInit = async ({ canvas, pageState, gui }) => {
// Set video element
// Set video element
const video = document.createElement('video');
const video = document.createElement('video');
video.loop = true;
video.loop = true;
video.autoplay = true;
video.autoplay = true;
video.muted = true;
video.muted = true;
video.src = '../assets/video/pano.webm';
video.src = '../assets/video/pano.webm';
await video.play();
await video.play();
const adapter = await navigator.gpu.requestAdapter();
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const device = await adapter.requestDevice();
if (!pageState.active) return;
if (!pageState.active) return;
const context = canvas.getContext('webgpu') as GPUCanvasContext;
const context = canvas.getContext('webgpu') as GPUCanvasContext;
const devicePixelRatio = window.devicePixelRatio;
const devicePixelRatio = window.devicePixelRatio;
canvas.width = canvas.clientWidth * devicePixelRatio;
canvas.width = canvas.clientWidth * devicePixelRatio;
canvas.height = canvas.clientHeight * devicePixelRatio;
canvas.height = canvas.clientHeight * devicePixelRatio;
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
context.configure({
device,
device,
format: presentationFormat,
format: presentationFormat,
alphaMode: 'premultiplied',
alphaMode: 'premultiplied',
});
});
const pipeline = device.createRenderPipeline({
const pipeline = device.createRenderPipeline({
layout: 'auto',
layout: 'auto',
vertex: {
vertex: {
module: device.createShaderModule({
module: device.createShaderModule({
code: fullscreenTexturedQuadWGSL,
code: fullscreenTexturedQuadWGSL,
}),
}),
entryPoint: 'vert_main',
entryPoint: 'vert_main',
},
},
fragment: {
fragment: {
module: device.createShaderModule({
module: device.createShaderModule({
code: sampleExternalTextureWGSL,
code: sampleExternalTextureWGSL,
}),
}),
entryPoint: 'main',
entryPoint: 'main',
targets: [
targets: [
{
{
format: presentationFormat,
format: presentationFormat,
},
},
],
],
},
},
primitive: {
primitive: {
topology: 'triangle-list',
topology: 'triangle-list',
},
},
});
});
const sampler = device.createSampler({
const sampler = device.createSampler({
magFilter: 'linear',
magFilter: 'linear',
minFilter: 'linear',
minFilter: 'linear',
});
});
const settings = {
const settings = {
requestFrame: 'requestAnimationFrame',
requestFrame: 'requestAnimationFrame',
};
};
gui.add(settings, 'requestFrame', [
gui.add(settings, 'requestFrame', [
'requestAnimationFrame',
'requestAnimationFrame',
'requestVideoFrameCallback',
'requestVideoFrameCallback',
]);
]);
function frame() {
function frame() {
// Sample is no longer the active page.
// Sample is no longer the active page.
if (!pageState.active) return;
if (!pageState.active) return;
const videoFrame = new VideoFrame(video);
const uniformBindGroup = device.createBindGroup({
const uniformBindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
layout: pipeline.getBindGroupLayout(0),
entries: [
entries: [
{
{
binding: 1,
binding: 1,
resource: sampler,
resource: sampler,
},
},
{
{
binding: 2,
binding: 2,
resource: device.importExternalTexture({
resource: device.importExternalTexture({
source: video,
source: videoFrame as any, // eslint-disable-line @typescript-eslint/no-explicit-any
}),
}),
},
},
],
],
});
});
const commandEncoder = device.createCommandEncoder();
const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();
const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor: GPURenderPassDescriptor = {
const renderPassDescriptor: GPURenderPassDescriptor = {
colorAttachments: [
colorAttachments: [
{
{
view: textureView,
view: textureView,
clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
loadOp: 'clear',
loadOp: 'clear',
storeOp: 'store',
storeOp: 'store',
},
},
],
],
};
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.setPipeline(pipeline);
passEncoder.setBindGroup(0, uniformBindGroup);
passEncoder.setBindGroup(0, uniformBindGroup);
passEncoder.draw(6);
passEncoder.draw(6);
passEncoder.end();
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
device.queue.submit([commandEncoder.finish()]);
if (settings.requestFrame == 'requestVideoFrameCallback') {
if (settings.requestFrame == 'requestVideoFrameCallback') {
video.requestVideoFrameCallback(frame);
video.requestVideoFrameCallback(frame);
} else {
} else {
requestAnimationFrame(frame);
requestAnimationFrame(frame);
}
}
}
}
if (settings.requestFrame == 'requestVideoFrameCallback') {
if (settings.requestFrame == 'requestVideoFrameCallback') {
video.requestVideoFrameCallback(frame);
video.requestVideoFrameCallback(frame);
} else {
} else {
requestAnimationFrame(frame);
requestAnimationFrame(frame);
}
}
};
};
const VideoUploading: () => JSX.Element = () =>
const VideoUploadingWebCodecs: () => JSX.Element = () =>
makeSample({
makeSample({
name: 'Video Uploading',
name: 'Video Uploading with WebCodecs',
description: 'This example shows how to upload video frame to WebGPU.',
description: `This example shows how to upload a WebCodecs VideoFrame to WebGPU.`,
gui: true,
gui: true,
init,
init,
sources: [
sources: [
{
{
name: __filename.substring(__dirname.length + 1),
name: __filename.substring(__dirname.length + 1),
contents: __SOURCE__,
contents: __SOURCE__,
},
},
{
{
name: '../../shaders/fullscreenTexturedQuad.wgsl',
name: '../../shaders/fullscreenTexturedQuad.wgsl',
contents: fullscreenTexturedQuadWGSL,
contents: fullscreenTexturedQuadWGSL,
editable: true,
editable: true,
},
},
{
{
name: '../../shaders/sampleExternalTexture.wgsl',
name: '../../shaders/sampleExternalTexture.wgsl',
contents: sampleExternalTextureWGSL,
contents: sampleExternalTextureWGSL,
editable: true,
editable: true,
},
},
],
],
filename: __filename,
filename: __filename,
});
});
export default VideoUploading;
export default VideoUploadingWebCodecs;