context

WebGL에서는 canvas에서 context를 바로 얻었습니다. WebGPU는 조금 더 명시적입니다. 먼저 adapter를 요청하고, device를 만들고, canvas context를 설정합니다.

이 과정은 처음에는 길어 보이지만, WebGPU가 GPU 기능과 리소스를 더 명확히 다루기 때문입니다.

WebGPU 초기화 전체 코드

WebGPU는 getContext 한 줄로 끝나지 않습니다. 실패 가능성을 처리하면서 adapter, device, canvas context를 차례로 준비합니다.

async function initWebGPU(canvas) {
  if (!navigator.gpu) {
    throw new Error("WebGPU is not supported in this browser.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw new Error("No WebGPU adapter was found.");
  }

  const device = await adapter.requestDevice();
  const context = canvas.getContext("webgpu");
  const format = navigator.gpu.getPreferredCanvasFormat();

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

  return { adapter, device, context, format };
}

이 함수가 성공해야 buffer, shader module, pipeline, render pass를 만들 수 있습니다. 실패하면 WebGL renderer로 내려가는 fallback을 선택합니다.

adapter는 사용 가능한 GPU 능력이다

adapter는 브라우저가 접근할 수 있는 GPU backend의 능력을 대표합니다.

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

adapter가 없을 수 있습니다. WebGPU를 지원하지 않는 브라우저나 환경에서는 fallback이 필요합니다.

device는 리소스를 만드는 주체다

device는 buffer, texture, pipeline 같은 GPU 리소스를 만드는 객체입니다.

const device = await adapter.requestDevice();

WebGL의 gl context가 많은 일을 한 객체라면, WebGPU에서는 device, queue, context, command encoder가 역할을 나눠 가집니다.

canvas context를 configure한다

WebGPU canvas context는 format과 device로 configure해야 합니다.

const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();

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

이제 render pass가 현재 canvas texture를 대상으로 그릴 수 있습니다.

오늘의 핵심

WebGPU 초기화는 GPU 작업의 소유권을 명확히 만드는 과정입니다.

navigator.gpu
-> adapter
-> device
-> canvas context
-> configured surface

이 구조 위에 render pipeline과 buffer를 올립니다.