WebGPU Usage

• GPU 디바이스 초기화
• 쉐이더 모듈 생성
• 파이프라인 생성
• 렌더링 / 인코딩

Init Device

const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
    device,
    format: presentationFormat,
});

Create Shader Module

• shader.wgsl 파일 로드, 모듈로 저장 WGSL Usage

const module = device.createShaderModule({
    label: 'Shader Module Example',
    code: await fetch("shader.wgsl").then((response) => response.text()),
});

const module_hard = device.createShaderModule({
    label: 'Shader Module Example',
    code: `
        // 하드코딩된 셰이더 모듈
        @vertex fn ... 
    `,
});

Create Render Pipeline

const pipeline = device.createRenderPipeline({
    label: 'Render Pipeline Example',
    layout: 'auto',
    vertex: {
        module,
        entryPoint: 'vs', // @vertex fn vs(...)
    },
    fragment: {
        module,
        entryPoint: 'fs', // @fragment fn fs(...)
        targets: [{ format: presentationFormat }],
    },
});

Create Render Descriptor

• 기본 렌더링 정보

const renderPassDescriptor = {
    label: 'RenderPass Example',
    colorAttachments: [{
        clearValue: [0.3, 0.3, 0.3, 1],
        loadOp: 'clear',
        storeOp: 'store',
    },],
};

Render

• 출력

function render() {
    renderPassDescriptor.colorAttachments[0].view =
        context.getCurrentTexture().createView();

    const encoder = device.createCommandEncoder({ label: 'Encoder Example' });

    const pass = encoder.beginRenderPass(renderPassDescriptor);
    pass.setPipeline(pipeline);
    pass.draw(3);
    pass.end();

    const commandBuffer = encoder.finish();
    device.queue.submit([commandBuffer]);
}

render();