Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Resaltado de sintaxis

Untitled diff

Creado El diff nunca expira
5 eliminaciones
151 líneas
10 adiciones
153 líneas
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;


Diferencias guardadas