static subtree를 texture cache로 굽기

자주 바뀌지 않는 복잡한 group은 매 프레임 다시 그리지 않아도 됩니다. 한 번 render texture로 굽고, 바뀔 때만 다시 만들 수 있습니다.

static subtree cache 코드

subtree가 dirty가 아니면 render texture를 재사용하고, 바뀐 경우에만 다시 굽습니다.

function renderSubtreeWithCache(renderer, node, cache) {
  const entry = cache.get(node.id);

  if (entry && !node.dirty && entry.version === node.version) {
    renderer.drawTexture(entry.texture, node.worldBounds);
    entry.lastUsedFrame = renderer.frame;
    return;
  }

  const texture = renderer.renderToTexture(node.children, node.worldBounds);
  cache.set(node.id, {
    texture,
    version: node.version,
    bytes: estimateTextureBytes(texture),
    lastUsedFrame: renderer.frame
  });

  renderer.drawTexture(texture, node.worldBounds);
}

cache 후보

복잡한 vector group
고정된 background frame
thumbnail preview
거의 움직이지 않는 subtree

cache는 문서 상태가 아닙니다. renderer가 속도를 위해 만든 중간 결과입니다.

dirty invalidation

node changed -> mark subtree dirty
next render -> rebuild cache
stable frame -> reuse texture

오늘의 핵심

texture cache는 draw cost를 줄이지만 memory를 씁니다. dirty flag와 cache budget이 같이 있어야 합니다.