vector path는 어디까지 직접 구현할 것인가

Figma-like 에디터라고 하면 pen tool과 vector editing을 떠올리기 쉽습니다. 하지만 vector path renderer와 editor를 직접 구현하는 것은 큰 프로젝트입니다.

이 강의에서는 어디까지 직접 만들고 어디부터 라이브러리나 브라우저 기능을 활용할지 기준을 잡습니다.

path node를 renderer 정책으로 나누는 코드

처음부터 GPU tessellation을 직접 구현하지 않고, node의 복잡도와 편집 상태에 따라 renderer 경로를 고를 수 있습니다.

function renderVectorNode(node, ctx) {
  if (node.isEditing) {
    svgPathOverlay.render(node.pathData, node.transform);
    return;
  }

  if (node.cachedTexture && !node.dirty) {
    imageRenderer.drawTexture(node.cachedTexture, node.bounds);
    return;
  }

  if (node.pathData.commands.length < 64) {
    canvas2dPathCache.rasterize(node);
    imageRenderer.drawTexture(node.cachedTexture, node.bounds);
    return;
  }

  scheduleVectorTessellation(node.id);
}

이 코드는 “path data는 scene model에 유지하되, 화면에 그리는 방법은 renderer가 선택한다”는 경계를 보여줍니다. 나중에 tessellation renderer가 생겨도 document format은 바꾸지 않아도 됩니다.

path에는 두 문제가 있다

첫 번째는 렌더링입니다. Bezier curve를 화면에 fill/stroke로 그려야 합니다.

두 번째는 편집입니다. anchor point, tangent handle, boolean operation, stroke join, hit testing을 다뤄야 합니다.

rendering problem
editing problem

둘은 연결되어 있지만 같은 난이도가 아닙니다.

처음에는 SVG path를 활용할 수 있다

초기 에디터에서는 vector node를 SVG path로 overlay하거나, SVG를 texture로 rasterize해서 GPU canvas에 올릴 수 있습니다.

SVG path as editing overlay
SVG rasterized as texture
path data stored in scene model

이렇게 하면 path data model을 유지하면서도 GPU tessellation을 바로 직접 구현하지 않아도 됩니다.

직접 구현할 때 필요한 것

GPU에서 vector fill을 직접 그리려면 tessellation이 필요합니다. stroke도 line join/cap과 miter limit을 다뤄야 합니다.

Bezier flattening
triangulation
stroke mesh generation
path hit testing
boolean operations

각각이 독립 강의가 될 만큼 큽니다.

오늘의 핵심

vector path는 Figma-like editor의 중요한 기능이지만, 초반 capstone의 핵심 경로는 아닙니다.

store path data
use SVG/Canvas fallback first
add GPU tessellation later

직접 구현 범위를 작게 잡아야 WebGL/WebGPU editor의 전체 구조를 끝까지 완성할 수 있습니다.