renderer worker / OffscreenCanvas를 고려하는 기준

렌더링을 worker로 옮기면 main thread 부담을 줄일 수 있지만, 입력과 상태 동기화 비용이 생깁니다.

OffscreenCanvas worker 연결 코드

worker renderer는 canvas와 snapshot을 message로 주고받는 구조가 됩니다.

// main thread
const worker = new Worker("/renderer-worker.js", { type: "module" });
const offscreen = canvas.transferControlToOffscreen();

worker.postMessage({ type: "init", canvas: offscreen }, [offscreen]);

function renderInWorker(snapshot) {
  worker.postMessage({
    type: "render",
    snapshot: serializeRenderSnapshot(snapshot)
  });
}

// renderer-worker.js
let renderer;

self.onmessage = async (event) => {
  if (event.data.type === "init") {
    renderer = await createWebGlRenderer(event.data.canvas);
  }

  if (event.data.type === "render") {
    renderer.render(event.data.snapshot);
  }
};

언제 고려할까

main thread input이 끊긴다
render cost가 크다
state snapshot 전송 비용을 감당할 수 있다

초기부터 worker renderer로 시작하면 구조가 빨리 복잡해집니다. 먼저 측정이 필요합니다.

오늘의 핵심

OffscreenCanvas는 성능 버튼이 아닙니다. renderer와 editor core의 통신 구조를 바꾸는 아키텍처 선택입니다.