WebGPU: WebGL을 넘어선 차세대 웹 그래픽스 최적화

WebGPU의 등장 배경: 왜 WebGL로는 부족한가?

웹 그래픽스의 표준이었던 WebGL은 OpenGL ES를 기반으로 설계되었습니다. 하지만 현대의 GPU는 Vulkan, Metal, Direct3D 12와 같이 '로우 레벨' 접근을 선호하는 방향으로 진화했습니다. WebGL은 상태 기반(State-based) 머신으로 동작하며, 드로우 콜(Draw call) 하나를 실행할 때마다 발생하는 드라이버 오버헤드가 상당합니다. 또한 멀티스레딩 지원이 미비하고, 최신 GPU 기능을 온전히 활용하기 어렵다는 한계가 있었습니다. 이러한 문제를 해결하기 위해 W3C는 현대적인 그래픽스 API의 특징을 웹으로 가져온 WebGPU를 표준화했습니다.

WebGPU의 핵심 개념: 어댑터, 장치, 그리고 파이프라인

WebGPU를 사용하기 위해서는 기존 WebGL과는 다른 개념적 접근이 필요합니다. 가장 큰 차이점은 '명령 제출(Command Submission)' 방식입니다.

• GPUAdapter: 실제 물리적인 GPU 하드웨어를 나타냅니다.
• GPUDevice: 하드웨어와 통신하기 위한 논리적인 인터페이스입니다. 리소스를 생성하고 명령을 큐에 보냅니다.
• GPURenderPipeline: 셰이더 코드, 정점 버퍼 레이아웃, 블렌딩 상태 등 렌더링에 필요한 모든 상태를 미리 구워둔(Pre-baked) 객체입니다. 런타임에 상태를 변경하는 오버헤드를 줄여줍니다.

실전 예제: 기본적인 삼각형 렌더링 파이프라인 구축

WebGPU를 사용하여 화면에 삼각형을 그리는 최소한의 JavaScript 코드를 살펴보겠습니다. WebGPU는 WGSL(WebGPU Shading Language)이라는 전용 셰이더 언어를 사용합니다.

async function initWebGPU() {
    if (!navigator.gpu) {
        console.error("WebGPU를 지원하지 않는 브라우저입니다.");
        return;
    }

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

    const canvas = document.querySelector('canvas');
    const context = canvas.getContext('webgpu');

    const format = navigator.gpu.getPreferredCanvasFormat();
    context.configure({ device, format });

    // WGSL 셰이더 코드
    const shaderModule = device.createShaderModule({
        code: `
            @vertex
            fn vs_main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4 {
                var pos = array, 3>(
                    vec2(0.0, 0.5),
                    vec2(-0.5, -0.5),
                    vec2(0.5, -0.5)
                );
                return vec4(pos[VertexIndex], 0.0, 1.0);
            }

            @fragment
            fn fs_main() -> @location(0) vec4 {
                return vec4(1.0, 0.5, 0.0, 1.0);
            }
        `
    });

    const pipeline = device.createRenderPipeline({
        layout: 'auto',
        vertex: { module: shaderModule, entryPoint: 'vs_main' },
        fragment: { 
            module: shaderModule, 
            entryPoint: 'fs_main',
            targets: [{ format }]
        },
        primitive: { topology: 'triangle-list' }
    });

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

        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [{
                view: textureView,
                clearValue: { r: 0.1, g: 0.1, b: 0.1, a: 1.0 },
                loadOp: 'clear',
                storeOp: 'store'
            }]
        });

        renderPass.setPipeline(pipeline);
        renderPass.draw(3);
        renderPass.end();

        device.queue.submit([commandEncoder.finish()]);
        requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);
}

성능 최적화의 핵심: 컴퓨트 셰이더(Compute Shader)

WebGPU의 가장 강력한 기능 중 하나는 컴퓨트 셰이더에 대한 퍼스트 클래스 지원입니다. 그래픽 렌더링 파이프라인과 상관없이 일반적인 병렬 연산을 GPU에서 수행할 수 있습니다. 이는 물리 시뮬레이션, 입자 시스템, AI 추론 등을 브라우저에서 수십 배 빠르게 실행할 수 있게 해줍니다.

// 간단한 컴퓨트 셰이더 예시 (데이터 복사)
const computeShader = `
    @group(0) @binding(0) var inputData : array;
    @group(0) @binding(1) var outputData : array;

    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) global_id : vec3) {
        let index = global_id.x;
        outputData[index] = inputData[index] * 2.0;
    }
`;

WebGPU 최적화 전략

성능을 극대화하기 위해 다음 사항을 고려해야 합니다.

• Bind Group 관리: 바인드 그룹을 자주 교체하는 것은 비용이 듭니다. 레이아웃을 최적화하여 교체 횟수를 최소화하세요.
• Memory Alignment: GPU 버퍼에 데이터를 쓸 때 4바이트 혹은 16바이트 정렬 규칙을 엄격히 지켜야 성능 손실이 없습니다.
• Pipeline Caching: 동일한 설정을 가진 파이프라인은 재사용하고, 초기 로딩 시 필요한 파이프라인을 미리 생성하세요.

결론: 웹 게임의 새로운 지평

WebGPU는 단순히 WebGL의 후계자가 아닙니다. 웹 브라우저가 진정한 고성능 컴퓨팅 플랫폼으로 거듭나게 하는 핵심 기술입니다. Unity나 Unreal 엔진도 WebGPU 지원을 통해 네이티브 수준의 그래픽을 웹에서 구현하려 노력하고 있습니다. 지금이 바로 WebGPU를 학습하여 차세대 웹 앱과 게임의 주인공이 될 기회입니다.

LYSC Studio

1인 게임 개발과 웹 기술에 관심이 많은 개발자입니다. 경험을 통해 배운 것을 공유하고, 함께 성장하는 것을 즐깁니다.