fill rule

rectangle만 그릴 때는 WebGL renderer가 단순합니다. 하지만 vector stroke와 path fill이 들어오면 renderer는 geometry 생성기가 됩니다.

stroke는 path 주변의 mesh다

Canvas 2D의 stroke()는 join, cap, dash를 알아서 처리합니다. WebGL에서는 직접 mesh를 만들거나, 지원 범위를 제한해야 합니다.

const strokeStyle = {
  width: 8,
  join: "miter", // miter | bevel | round
  cap: "round", // butt | square | round
  miterLimit: 4,
  dash: [12, 6]
};

초기 editor에서는 모든 stroke를 직접 구현하지 않아도 됩니다. rectangle stroke, simple polyline, texture fallback처럼 단계적으로 나눌 수 있습니다.

fill rule은 내부 판정 규칙이다

겹친 path에서 어떤 영역이 내부인지 정하는 규칙도 필요합니다.

function isFilled(windingNumber, rule) {
  if (rule === "evenodd") return Math.abs(windingNumber) % 2 === 1;
  return windingNumber !== 0; // nonzero
}

SVG import/export를 고려한다면 evenodd와 nonzero 차이를 문서 모델에 저장해야 합니다.

renderer 지원 범위를 명시한다

v1: rect stroke, line stroke
v2: polyline join/cap
v3: bezier flattening
v4: fill tessellation
fallback: rasterize to texture

지원하지 않는 path는 editor model에는 유지하되 renderer에서 preview texture로 처리할 수 있습니다.

오늘의 핵심

stroke와 path는 “색칠”이 아니라 geometry 문제입니다. 어디까지 직접 구현하고 어디서 texture fallback을 쓸지 정해야 renderer가 커져도 유지됩니다.