텍스트 비교

두 텍스트 파일의 차이점을 찾아보세요

실시간 편집

변경 없는 행 숨기기

줄바꿈 비활성화

레이아웃

비교 단위

구문 강조

Diffchecker Desktop 가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!데스크톱 앱 받기

Untitled diff

생성일 2년 전비교 결과 만료 없음

5 삭제

행
총
삭제

글자
총
삭제

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

151 행

10 추가

행
총
추가

글자
총
추가

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

153 행

import { makeSample, SampleInit } from '../../components/SampleLayout';

import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';

import sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';

const init: SampleInit = async ({ canvas, pageState, gui }) => {

// Set video element

const video = document.createElement('video');

video.loop = true;

video.autoplay = true;

video.muted = true;

video.src = '../assets/video/pano.webm';

await video.play();

const adapter = await navigator.gpu.requestAdapter();

const device = await adapter.requestDevice();

if (!pageState.active) return;

const context = canvas.getContext('webgpu') as GPUCanvasContext;

const devicePixelRatio = window.devicePixelRatio;

canvas.width = canvas.clientWidth * devicePixelRatio;

canvas.height = canvas.clientHeight * devicePixelRatio;

const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

context.configure({

device,

format: presentationFormat,

alphaMode: 'premultiplied',

});

const pipeline = device.createRenderPipeline({

vertex: {

module: device.createShaderModule({

code: fullscreenTexturedQuadWGSL,

}),

entryPoint: 'vert_main',

fragment: {

module: device.createShaderModule({

code: sampleExternalTextureWGSL,

}),

entryPoint: 'main',

targets: [

{

format: presentationFormat,

primitive: {

topology: 'triangle-list',

});

const sampler = device.createSampler({

magFilter: 'linear',

minFilter: 'linear',

});

const settings = {

requestFrame: 'requestAnimationFrame',

};

gui.add(settings, 'requestFrame', [

'requestAnimationFrame',

'requestVideoFrameCallback',

]);

function frame() {

// Sample is no longer the active page.

if (!pageState.active) return;

const videoFrame = new VideoFrame(video);

const uniformBindGroup = device.createBindGroup({

entries: [

{

binding: 1,

resource: sampler,

{

binding: 2,

resource: device.importExternalTexture({

source: video,

source: videoFrame as any, // eslint-disable-line @typescript-eslint/no-explicit-any

}),

});

const commandEncoder = device.createCommandEncoder();

const textureView = context.getCurrentTexture().createView();

const renderPassDescriptor: GPURenderPassDescriptor = {

colorAttachments: [

{

view: textureView,

clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },

loadOp: 'clear',

storeOp: 'store',

};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

passEncoder.setPipeline(pipeline);

passEncoder.setBindGroup(0, uniformBindGroup);

passEncoder.draw(6);

passEncoder.end();

device.queue.submit([commandEncoder.finish()]);

if (settings.requestFrame == 'requestVideoFrameCallback') {

video.requestVideoFrameCallback(frame);

} else {

requestAnimationFrame(frame);

}

if (settings.requestFrame == 'requestVideoFrameCallback') {

video.requestVideoFrameCallback(frame);

} else {

requestAnimationFrame(frame);

}

};

const VideoUploading: () => JSX.Element = () =>

const VideoUploadingWebCodecs: () => JSX.Element = () =>

makeSample({

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,

init,

sources: [

{

contents: __SOURCE__,

{

contents: fullscreenTexturedQuadWGSL,

editable: true,

{

contents: sampleExternalTextureWGSL,

editable: true,

filename: __filename,

});

export default VideoUploading;

export default VideoUploadingWebCodecs;

저장된 비교 결과

원본

파일 열기

import { makeSample, SampleInit } from '../../components/SampleLayout';

import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';
import sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';

const init: SampleInit = async ({ canvas, pageState, gui }) => {
  // Set video element
  const video = document.createElement('video');
  video.loop = true;
  video.autoplay = true;
  video.muted = true;
  video.src = '../assets/video/pano.webm';
  await video.play();

const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();

if (!pageState.active) return;

const context = canvas.getContext('webgpu') as GPUCanvasContext;
  const devicePixelRatio = window.devicePixelRatio;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

context.configure({
    device,
    format: presentationFormat,
    alphaMode: 'premultiplied',
  });

const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: {
      module: device.createShaderModule({
        code: fullscreenTexturedQuadWGSL,
      }),
      entryPoint: 'vert_main',
    },
    fragment: {
      module: device.createShaderModule({
        code: sampleExternalTextureWGSL,
      }),
      entryPoint: 'main',
      targets: [
        {
          format: presentationFormat,
        },
      ],
    },
    primitive: {
      topology: 'triangle-list',
    },
  });

const sampler = device.createSampler({
    magFilter: 'linear',
    minFilter: 'linear',
  });

const settings = {
    requestFrame: 'requestAnimationFrame',
  };

gui.add(settings, 'requestFrame', [
    'requestAnimationFrame',
    'requestVideoFrameCallback',
  ]);

function frame() {
    // Sample is no longer the active page.
    if (!pageState.active) return;

const uniformBindGroup = device.createBindGroup({
      layout: pipeline.getBindGroupLayout(0),
      entries: [
        {
          binding: 1,
          resource: sampler,
        },
        {
          binding: 2,
          resource: device.importExternalTexture({
            source: video,
          }),
        },
      ],
    });

const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();

const renderPassDescriptor: GPURenderPassDescriptor = {
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: 'clear',
          storeOp: 'store',
        },
      ],
    };

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.setBindGroup(0, uniformBindGroup);
    passEncoder.draw(6);
    passEncoder.end();
    device.queue.submit([commandEncoder.finish()]);

if (settings.requestFrame == 'requestVideoFrameCallback') {
      video.requestVideoFrameCallback(frame);
    } else {
      requestAnimationFrame(frame);
    }
  }

if (settings.requestFrame == 'requestVideoFrameCallback') {
    video.requestVideoFrameCallback(frame);
  } else {
    requestAnimationFrame(frame);
  }
};

const VideoUploading: () => JSX.Element = () =>
  makeSample({
    name: 'Video Uploading',
    description: 'This example shows how to upload video frame to WebGPU.',
    gui: true,
    init,
    sources: [
      {
        name: __filename.substring(__dirname.length + 1),
        contents: __SOURCE__,
      },
      {
        name: '../../shaders/fullscreenTexturedQuad.wgsl',
        contents: fullscreenTexturedQuadWGSL,
        editable: true,
      },
      {
        name: '../../shaders/sampleExternalTexture.wgsl',
        contents: sampleExternalTextureWGSL,
        editable: true,
      },
    ],
    filename: __filename,
  });

export default VideoUploading;

수정본

파일 열기

import { makeSample, SampleInit } from '../../components/SampleLayout';

import fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';
import sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';

const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();

if (!pageState.active) return;

context.configure({
    device,
    format: presentationFormat,
    alphaMode: 'premultiplied',
  });

const sampler = device.createSampler({
    magFilter: 'linear',
    minFilter: 'linear',
  });

const settings = {
    requestFrame: 'requestAnimationFrame',
  };

gui.add(settings, 'requestFrame', [
    'requestAnimationFrame',
    'requestVideoFrameCallback',
  ]);

function frame() {
    // Sample is no longer the active page.
    if (!pageState.active) return;

const videoFrame = new VideoFrame(video);

const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();

if (settings.requestFrame == 'requestVideoFrameCallback') {
      video.requestVideoFrameCallback(frame);
    } else {
      requestAnimationFrame(frame);
    }
  }

if (settings.requestFrame == 'requestVideoFrameCallback') {
    video.requestVideoFrameCallback(frame);
  } else {
    requestAnimationFrame(frame);
  }
};

const VideoUploadingWebCodecs: () => JSX.Element = () =>
  makeSample({
    name: 'Video Uploading with WebCodecs',
    description: `This example shows how to upload a WebCodecs VideoFrame to WebGPU.`,
    gui: true,
    init,
    sources: [
      {
        name: __filename.substring(__dirname.length + 1),
        contents: __SOURCE__,
      },
      {
        name: '../../shaders/fullscreenTexturedQuad.wgsl',
        contents: fullscreenTexturedQuadWGSL,
        editable: true,
      },
      {
        name: '../../shaders/sampleExternalTexture.wgsl',
        contents: sampleExternalTextureWGSL,
        editable: true,
      },
    ],
    filename: __filename,
  });

export default VideoUploadingWebCodecs;