text rendering 전략

텍스트는 그래픽 에디터에서 가장 어려운 도형 중 하나입니다. CSS에서는 브라우저가 font shaping, line break, selection, caret를 처리합니다. GPU renderer에서는 이 많은 기능을 직접 다루거나 브라우저와 협력해야 합니다.

DOM editing overlay와 GPU preview 코드

실용적인 초기 구현은 편집 중에는 DOM textarea를 canvas 위에 올리고, commit할 때 text node를 갱신한 뒤 GPU preview texture를 다시 만드는 방식입니다.

function beginTextEdit(node, camera) {
  const screen = worldBoundsToScreen(nodeWorldBounds(node), camera);
  const editor = document.createElement("textarea");

  editor.value = node.text;
  Object.assign(editor.style, {
    position: "absolute",
    left: `${screen.x}px`,
    top: `${screen.y}px`,
    width: `${screen.width}px`,
    height: `${screen.height}px`,
    font: `${node.fontSize}px ${node.fontFamily}`,
    lineHeight: String(node.lineHeight)
  });

  editor.addEventListener("blur", () => {
    updateNode(node.id, { text: editor.value });
    invalidateTextTexture(node.id);
    editor.remove();
  });

  overlayRoot.append(editor);
  editor.focus();
}

표시 모드에서는 Canvas 2D로 text preview를 rasterize한 뒤 texture로 올릴 수 있습니다.

function rasterizeText(node) {
  const canvas = new OffscreenCanvas(node.width, node.height);
  const ctx = canvas.getContext("2d");
  ctx.font = `${node.fontSize}px ${node.fontFamily}`;
  ctx.fillStyle = node.fill;
  ctx.textBaseline = "top";
  ctx.fillText(node.text, 0, 0);
  return canvas.transferToImageBitmap();
}

text는 단순한 rectangle이 아니다

텍스트에는 많은 정보가 있습니다.

font family
font size
font weight
line height
letter spacing
paragraph alignment
glyph shaping
selection range
caret

특히 한글, 이모지, ligature, RTL text까지 생각하면 직접 구현 난이도가 올라갑니다.

전략은 여러 가지다

처음에는 DOM/SVG text overlay를 사용할 수 있습니다. 품질과 입력 처리가 좋지만, GPU scene과 완전히 같은 pipeline은 아닙니다.

다음 단계로 Canvas 2D에 text를 rasterize해서 texture로 올릴 수 있습니다. 구현은 비교적 현실적이지만 확대 시 품질과 invalidation을 신경 써야 합니다.

고급 단계에서는 glyph atlas나 SDF text를 사용합니다.

DOM text: 브라우저 기능 활용
Canvas raster text: texture로 업로드
Glyph atlas: glyph 단위 batch
SDF text: 확대 품질 개선

editor에서는 입력 모드가 중요하다

텍스트를 그냥 보여주는 것과 편집하는 것은 다릅니다. 편집 중에는 DOM input이나 contenteditable을 임시로 사용하는 하이브리드 전략이 실용적입니다.

normal mode: GPU rendered text
editing mode: DOM text editor overlay
commit: update scene model

오늘의 핵심

text rendering은 renderer 문제이면서 editor interaction 문제입니다.

display quality
text shaping
editing UX
selection/caret
performance

처음부터 모든 것을 GPU로 직접 구현하려고 하지 말고, 단계별 전략을 선택해야 합니다.