renderer-independent editor core

지금까지 우리는 WebGL renderer를 염두에 두고 왔습니다. 하지만 editor core는 WebGL에 묶이면 안 됩니다.

같은 문서와 도구가 WebGL, WebGPU, debug DOM renderer 뒤에서 모두 동작해야 합니다.

editor core는 의미를 소유한다

editor core가 관리하는 것은 문서와 편집 상태입니다.

scene graph
selection
hover
tools
commands
history
camera

이 값들은 renderer가 바뀌어도 유지되어야 합니다.

renderer는 그리는 방법을 소유한다

renderer는 editor core의 snapshot을 읽고 화면을 그립니다.

renderer.render({
  scene,
  camera,
  selection,
  hover
});

WebGL renderer는 buffer와 shader를 쓰고, WebGPU renderer는 pipeline과 bind group을 씁니다. 하지만 입력 데이터는 같은 editor state입니다.

interface RendererSnapshot {
  scene: SceneDocument;
  camera: { x: number; y: number; zoom: number };
  selection: { ids: NodeId[] };
  hoverNodeId: NodeId | null;
  drawList: Array<SceneNode & { worldMatrix: Mat3 }>;
}

boundary가 API가 된다

core와 renderer 사이에는 명확한 인터페이스가 필요합니다.

interface RendererBackend {
  mount(canvas: HTMLCanvasElement): void;
  resize(width: number, height: number): void;
  render(snapshot: RendererSnapshot): void;
  getStats(): RendererStats;
  dispose(): void;
}

이 작은 경계가 나중에 WebGPU로 넘어가는 길을 엽니다.

function renderFrame(core, renderer) {
  const snapshot = core.getRendererSnapshot();
  renderer.render(snapshot);
  return renderer.getStats();
}

오늘의 핵심

Figma-like editor의 중심은 renderer가 아니라 editor core입니다.

editor core: what the document means
renderer: how pixels are produced

이 분리가 있어야 WebGL에서 배운 구조를 WebGPU로 확장할 수 있습니다.