SVG/text를 GPU editor에서 다루는 경계

GPU renderer를 만든다고 해서 모든 것을 GPU로 직접 그려야 하는 것은 아닙니다. SVG와 DOM text는 여전히 강력한 브라우저 기능입니다.

중요한 것은 어디까지 GPU scene에 넣고, 어디부터 브라우저 레이어를 사용할지 경계를 정하는 것입니다.

하나의 scene model에서 여러 layer를 투영하는 코드

GPU canvas, SVG overlay, DOM overlay가 따로 상태를 갖지 않도록 같은 scene snapshot과 camera에서 모두 파생시킵니다.

function renderFrame(editor) {
  const snapshot = editor.getSnapshot();

  webglRenderer.render({
    scene: snapshot.scene,
    camera: snapshot.camera,
    selection: snapshot.selection
  });

  svgOverlay.render({
    scene: snapshot.scene,
    camera: snapshot.camera,
    activePathId: snapshot.tool.activePathId
  });

  domOverlay.render({
    scene: snapshot.scene,
    camera: snapshot.camera,
    editingTextId: snapshot.tool.editingTextId
  });
}

핵심은 svgOverlay나 domOverlay가 자체 좌표를 source of truth로 갖지 않는 것입니다. 위치는 항상 scene model과 camera로부터 다시 계산합니다.

혼합 renderer는 현실적이다

그래픽 문서의 대부분을 WebGL/WebGPU canvas로 그리고, 텍스트 편집 UI나 복잡한 SVG preview는 DOM/SVG overlay로 둘 수 있습니다.

content canvas: shapes, images, cached text
SVG overlay: path editing handles
DOM overlay: text editing, controls

이 방식은 완전한 GPU renderer보다 구현이 빠르고 브라우저 기능을 활용할 수 있습니다.

경계가 흔들리면 버그가 생긴다

문제는 좌표계와 source of truth입니다. DOM overlay가 자체 위치를 갖고, GPU scene도 위치를 갖기 시작하면 어긋납니다.

source of truth: scene model
projection: GPU canvas / SVG overlay / DOM overlay

모든 레이어는 같은 camera와 scene model에서 파생되어야 합니다.

export 정책도 필요하다

화면에서는 DOM/SVG overlay를 쓰더라도 export할 때는 어떻게 할지 정해야 합니다.

1. SVG로 export
2. canvas로 raster export
3. HTML/CSS로 export
4. 자체 JSON으로 export

renderer 경계는 export pipeline과도 연결됩니다.

오늘의 핵심

GPU editor는 꼭 GPU-only editor일 필요가 없습니다.

scene model은 하나
projection layer는 여러 개
좌표계와 ownership은 명확하게

브라우저가 잘하는 일은 활용하고, GPU가 필요한 일에 GPU를 씁니다.