아키텍처

Tracker가 뭔가 바뀌었다를 판단

packages/dom-tracker/src/Tracker.ts

MutationObserver가 childList, attributes, characterData, subtree를 감시합니다. 각 레코드가 pendingMask에 비트를 더합니다.

구조 변경은 즉시 플러시되고, 나머지는 200ms 디바운스를 기다립니다. 연속된 편집을 한 번의 추출로 합치기 위해서입니다.

이후 renderLoop이 다섯 개의 훅을 순서대로 발화합니다. onBeforeRender, onLayoutChange(더티일 때만), onScrollChange, onStyleChange, onRender.

Syncer가 훅과 작업을 연결

packages/core/src/core/Syncer.ts

Syncer는 자체 루프가 없습니다. 트래커 훅과 렌더러 호출 사이의 어댑터입니다.

tracker.onLayoutChange.add((mask, deletions) => {
  renderer.updateScroll();
  const graph = extractSceneGraph(target, mask, USER_LAYER, /* … */ ctx);
  renderer.syncScene(graph, deletions);
  renderer.saveInitialLocals(sharedArray);
});
 
tracker.onStyleChange.add((styles) => animateMeshByData(registry, styles, sharedArray));
 
tracker.onRender.add(() => {
  renderer.updateScroll();
  wasmSync.updatePhysics(lastNodeCount);
  renderer.syncMeshesByWasm(sharedArray);
  renderer.render();
});

Extractor가 DOM을 평탄화

packages/core/src/dom/Extractor.ts

재귀 함수 extractSceneGraph 하나가 SceneNode 트리를 만듭니다. 노드마다:

• getBoundingClientRect()와 getComputedStyle()을 읽고
• data-mirage-filter / -select를 가시성 비트로 파싱하고
• data-mirage-travel을 isTraveler, captureLayer, nativeLayer, 네이티브 스타일 오버라이드로 파싱하고
• data-mirage-shader를 ShaderHooks로 파싱하고
• <img>, 인라인 직렬화된 <svg>, background-image에서 imageSrc를 결정하고
• 텍스트 노드를 Range.getClientRects()로 줄 단위 박스로 쪼개고
• wasmIndex를 부여하고 공유 메모리에 [parent, localX, localY]를 씁니다

부모를 자식보다 먼저 방문하므로 공유 배열이 위상 정렬 순서로 나옵니다. WASM 패스가 한 번의 순회로 해결되는 이유입니다.

Renderer가 메시를 조정

packages/core/src/renderer/Renderer.ts

syncScene이 리사이즈/이동을 감지한 뒤 reconcileNode를 재귀 호출합니다.

• 요소를 키로 MeshRegistry에서 메시를 조회
• 셰이더 해시가 바뀌었으면 해제 후 재생성
• 아니면 스케일, 위치, 레이어, 머티리얼 유니폼을 갱신
• TEXT 노드는 reconcileTextChild를 거치며, 내용이나 스타일이 바뀌면 줄마다 자식 메시를 다시 만듭니다
• 이미지 텍스처를 TextureLifecycleManager에 등록/해제

삭제된 요소는 pendingDeletions로 들어와 메시·지오메트리·머티리얼·텍스처가 정리됩니다.

WASM이 위치를 확정

packages/wasm-compute/src/lib.rs

for i in 0..node_count {
    let offset = i * 5;
    let parent = buffer[offset];
    if parent >= 0.0 {
        let p = parent as usize * 5;
        buffer[offset + 3] = buffer[p + 3] + buffer[offset + 1];
        buffer[offset + 4] = buffer[p + 4] + buffer[offset + 2];
    } else {
        buffer[offset + 3] = buffer[offset + 1];
        buffer[offset + 4] = buffer[offset + 2];
    }
}

이후 syncMeshesByWasm이 월드 좌표를 읽어 WebGL 공간으로 변환하고 스크롤 오프셋을 적용합니다(position: fixed 메시는 건너뜁니다).

렌더

traveler가 먼저입니다. 각 레이어에 대해 카메라를 캡처 채널 31 - n으로 전환하고, traveler마다 시저 박스를 설정한 뒤 해당 레이어의 WebGLRenderTarget에 씬을 렌더링합니다. 그다음 카메라를 기본 채널로 되돌려 실제 프레임을 그리며, overflow: hidden 클리핑을 위해 메시별 시저 훅을 적용합니다.