WGSL과 render pipeline

WebGL에서는 GLSL shader program을 만들었습니다. WebGPU에서는 WGSL shader module과 render pipeline을 만듭니다.

pipeline은 “이 vertex data를 이 shader로, 이 color target에, 이런 방식으로 그린다”는 렌더링 계약입니다.

pipeline을 실제로 만드는 코드

WGSL shader module을 만들고, vertex buffer layout과 color target을 묶어 render pipeline을 생성합니다.

const shader = device.createShaderModule({
  code: `
    struct VertexOut {
      @builtin(position) position: vec4f,
      @location(0) color: vec4f
    };

    @vertex
    fn vs_main(
      @location(0) position: vec2f,
      @location(1) color: vec4f
    ) -> VertexOut {
      var out: VertexOut;
      out.position = vec4f(position, 0.0, 1.0);
      out.color = color;
      return out;
    }

    @fragment
    fn fs_main(in: VertexOut) -> @location(0) vec4f {
      return in.color;
    }
  `
});

const pipeline = device.createRenderPipeline({
  layout: "auto",
  vertex: {
    module: shader,
    entryPoint: "vs_main",
    buffers: [{
      arrayStride: 6 * 4,
      attributes: [
        { shaderLocation: 0, offset: 0, format: "float32x2" },
        { shaderLocation: 1, offset: 2 * 4, format: "float32x4" }
      ]
    }]
  },
  fragment: {
    module: shader,
    entryPoint: "fs_main",
    targets: [{ format }]
  },
  primitive: {
    topology: "triangle-list"
  }
});

WebGL의 vertexAttribPointer로 attribute를 연결하던 일이 WebGPU에서는 pipeline의 buffers 배열에 들어갑니다.

WGSL은 WebGPU의 shader 언어다

WGSL은 WebGPU용 shader language입니다.

@vertex
fn vs_main(@location(0) position: vec2f) -> @builtin(position) vec4f {
  return vec4f(position, 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(0.05, 0.58, 0.53, 1.0);
}

처음에는 WebGL의 vertex shader/fragment shader와 같은 역할로 읽으면 됩니다.

pipeline은 상태를 미리 묶는다

WebGL은 그때그때 상태를 바꾸는 느낌이 강합니다. WebGPU는 pipeline을 미리 만들어 렌더링 상태를 묶습니다.

const pipeline = device.createRenderPipeline({
  vertex,
  fragment,
  primitive
});

이 방식은 더 장황하지만 상태가 명시적입니다.

editor renderer에서는 pipeline 종류가 늘어난다

rectangle fill, image texture, outline, text 같은 렌더링 경로마다 pipeline이 필요할 수 있습니다.

solid rect pipeline
image pipeline
outline pipeline
text pipeline

scene model은 같아도 renderer backend의 pipeline 구성은 달라질 수 있습니다.

오늘의 핵심

WGSL은 shader이고 pipeline은 렌더링 상태의 묶음입니다.

shader module
vertex layout
color target
primitive state
-> render pipeline

WebGPU는 이 계약을 명확히 세운 뒤 draw command를 기록합니다.