WebGL renderer를 WebGPU renderer로 바꾸기

우리가 editor core와 renderer를 분리한 이유가 여기서 드러납니다. scene model, selection, camera, command model은 그대로 두고 renderer backend만 바꾸고 싶습니다.

같은 Renderer interface를 사용한다

WebGL renderer와 WebGPU renderer는 같은 입력을 받아야 합니다.

interface Renderer {
  resize(width: number, height: number): void;
  render(snapshot: EditorSnapshot): void;
  dispose(): void;
}

editor core는 내부가 WebGL인지 WebGPU인지 몰라도 됩니다.

WebGL의 program, buffer, uniform location은 WebGPU에서 shader module, pipeline, GPUBuffer, bind group으로 바뀝니다.

WebGL program -> WebGPU pipeline
WebGL buffer -> GPUBuffer
uniform -> uniform buffer + bind group
draw call -> render pass command

scene traversal과 draw list 생성은 최대한 공유할 수 있습니다.

renderer에 넘기는 snapshot은 특정 API 객체를 포함하지 않아야 합니다.

good: nodes, camera, selection, assets
bad: WebGLBuffer, GPUBuffer, shader handle

이 원칙을 지키면 WebGPU renderer는 같은 snapshot을 자신만의 리소스로 변환합니다.

WebGPU 전환은 editor를 다시 만드는 일이 아니라 renderer backend를 교체하는 일이어야 합니다.

same editor core
same scene model
different GPU backend

이 구조가 강의 전체의 설계 목표입니다.