@mirage-engine/core 0.3.20 → 0.3.22

package/src/animation/Animator.ts

@@ -2,25 +2,28 @@ import { StyleData } from "@mirage-engine/dom-tracker";
 import { MeshRegistry } from "../store/MeshRegistry";
 import { Painter } from "@mirage-engine/painter";
 import * as THREE from "three";
+import { WASM_STRIDE, OFFSET_LOCAL_X, OFFSET_LOCAL_Y, OFFSET_PARENT, OFFSET_WORLD_X, OFFSET_WORLD_Y } from "../types";
 
 export function animateMeshByData(
   registry: MeshRegistry,
   data: Map<HTMLElement, StyleData>,
+  sharedArray?: Float32Array,
 ) {
   if (data.size === 0) return;
 
+  const elementsToUpdateLayout = new Set<HTMLElement>();
+
   data.forEach((styleData, element) => {
     const mesh = registry.get(element);
     if (!mesh || !mesh.userData.basePosition) return;
 
+    // Fast-path styling updates (colors, opacity, etc.)
     Painter.forceUpdateUniforms(mesh.material as THREE.ShaderMaterial, {
       backgroundColor: styleData.backgroundColor,
       backgroundImage: styleData.backgroundImage,
       boxShadow: styleData.boxShadow,
       opacity: styleData.opacity,
-      borderRadius:
-        styleData.borderRadius ?? mesh.userData.baseStyles?.borderRadius,
-      // width and height are no longer updated here, they are updated in syncMeshesByDOM
+      borderRadius: styleData.borderRadius ?? mesh.userData.baseStyles?.borderRadius,
     });
 
     if (mesh.userData.nativeMesh) {
@@ -31,6 +34,96 @@ export function animateMeshByData(
         opacity: styleData.opacity,
         borderRadius: styleData.borderRadius ?? mesh.userData.baseStyles?.borderRadius,
       });
+
+      if (styleData.scaleX !== undefined || styleData.scaleY !== undefined) {
+        const nativeMesh = mesh.userData.nativeMesh as THREE.Mesh;
+        const currentScaleX = nativeMesh.scale.x;
+        const currentScaleY = nativeMesh.scale.y;
+        const currentScaleZ = nativeMesh.scale.z;
+        nativeMesh.scale.set(
+          styleData.scaleX !== undefined ? styleData.scaleX * currentScaleX : currentScaleX,
+          styleData.scaleY !== undefined ? styleData.scaleY * currentScaleY : currentScaleY,
+          styleData.scaleZ !== undefined ? styleData.scaleZ * currentScaleZ : currentScaleZ
+        );
+      }
+    }
+
+    if (styleData.layoutChanged || styleData.width !== undefined || styleData.height !== undefined) {
+      elementsToUpdateLayout.add(element);
+      // Add all descendants that are in the registry
+      const descendants = element.querySelectorAll('*');
+      for (let i = 0; i < descendants.length; i++) {
+        const desc = descendants[i] as HTMLElement;
+        if (registry.has(desc)) {
+          elementsToUpdateLayout.add(desc);
+        }
+      }
+    } else if (styleData.x !== undefined || styleData.y !== undefined) {
+      // Just transform update (x, y) - doesn't affect child layout natively!
+      if (sharedArray && mesh.userData.wasmIndex !== undefined) {
+        const offset = mesh.userData.wasmIndex * WASM_STRIDE;
+        if (styleData.x !== undefined && mesh.userData.initialLocalX !== undefined) {
+          sharedArray[offset + OFFSET_LOCAL_X] = mesh.userData.initialLocalX + styleData.x;
+        }
+        if (styleData.y !== undefined && mesh.userData.initialLocalY !== undefined) {
+          sharedArray[offset + OFFSET_LOCAL_Y] = mesh.userData.initialLocalY + styleData.y;
+        }
+      }
+    }
+  });
+
+  // Now, process all layout updates efficiently!
+  elementsToUpdateLayout.forEach((element) => {
+    const mesh = registry.get(element);
+    if (!mesh) return;
+
+    const rect = element.getBoundingClientRect();
+    
+    if (mesh.userData.domRect) {
+      mesh.userData.domRect.width = rect.width;
+      mesh.userData.domRect.height = rect.height;
+    }
+    
+    let pad = (mesh.material as THREE.ShaderMaterial).userData?.shadowPadding || 0;
+    mesh.scale.set(rect.width + pad * 2, rect.height + pad * 2, 1);
+    
+    Painter.forceUpdateUniforms(mesh.material as THREE.ShaderMaterial, {
+      width: rect.width,
+      height: rect.height,
+    });
+
+    if (sharedArray && mesh.userData.wasmIndex !== undefined) {
+      const offset = mesh.userData.wasmIndex * WASM_STRIDE;
+      const myWorldX = rect.left + (mesh.userData.isFixed ? 0 : window.scrollX);
+      const myWorldY = rect.top + (mesh.userData.isFixed ? 0 : window.scrollY);
+
+      const parentIndex = sharedArray[offset + OFFSET_PARENT];
+      let parentWorldX = 0;
+      let parentWorldY = 0;
+      if (parentIndex !== -1) {
+        const parentOffset = parentIndex * WASM_STRIDE;
+        parentWorldX = sharedArray[parentOffset + OFFSET_WORLD_X];
+        parentWorldY = sharedArray[parentOffset + OFFSET_WORLD_Y];
+      }
+
+      sharedArray[offset + OFFSET_LOCAL_X] = myWorldX - parentWorldX;
+      sharedArray[offset + OFFSET_LOCAL_Y] = myWorldY - parentWorldY;
+    }
+
+    if (mesh.userData.nativeMesh) {
+      const nativeMesh = mesh.userData.nativeMesh as THREE.Mesh;
+      let nPad = (nativeMesh.material as THREE.ShaderMaterial).userData?.shadowPadding || 0;
+      nativeMesh.scale.set(rect.width + nPad * 2, rect.height + nPad * 2, 1);
+      
+      Painter.forceUpdateUniforms(nativeMesh.material as THREE.ShaderMaterial, {
+        width: rect.width,
+        height: rect.height,
+      });
+
+      if (mesh.userData.nativeRect) {
+        mesh.userData.nativeRect.width = rect.width;
+        mesh.userData.nativeRect.height = rect.height;
+      }
     }
   });
 }

package/src/core/Engine.ts

@@ -47,8 +47,8 @@ export class Engine {
     this.syncer = new Syncer(this.target, this.renderer, this.registry, config);
   }
 
-  public start() {
-    this.syncer.start();
+  public async start() {
+    await this.syncer.start();
   }
 
   public stop() {

package/src/core/Syncer.ts

@@ -2,15 +2,18 @@ import { CoreConfig } from "../types/config";
 import { Renderer } from "../renderer/Renderer";
 import { MeshRegistry } from "../store/MeshRegistry";
 import { extractSceneGraph } from "../dom/Extractor";
-import { Visibility, USER_LAYER, ATTR_TRAVEL } from "../types";
+import { Visibility, USER_LAYER, ATTR_TRAVEL, WASM_STRIDE } from "../types";
 import { animateMeshByData } from "../animation/Animator";
 import { Tracker } from "@mirage-engine/dom-tracker";
+import { WasmSynchronizer } from "../wasm/WasmSynchronizer";
 
 export class Syncer {
   private target: HTMLElement;
   private renderer: Renderer;
   private registry: MeshRegistry;
   private isTravelEnabled: boolean = false;
+  private wasmSync: WasmSynchronizer;
+  private lastWasmNodeCount: number = 0;
   
   public tracker: Tracker;
 
@@ -23,6 +26,7 @@ export class Syncer {
     this.target = target;
     this.renderer = renderer;
     this.registry = registry;
+    this.wasmSync = new WasmSynchronizer();
 
     // Use Tracker from dom-tracker
     this.tracker = new Tracker(target, {
@@ -38,31 +42,55 @@ export class Syncer {
         this.renderer.createRenderTarget();
       }
 
+      const sharedArray = this.wasmSync.sharedArray;
+      this.renderer.updateScroll();
+      const extractContext = {
+        sharedArray: sharedArray || new Float32Array(),
+        currentIndex: 0,
+        scrollX: (this.renderer as any).getScrollX(),
+        scrollY: (this.renderer as any).getScrollY(),
+      };
+
       const sceneGraph = extractSceneGraph(
         this.target,
         pendingMask,
         USER_LAYER as Visibility,
         1,
         0,
-        this.renderer.qualityFactor
+        this.renderer.qualityFactor,
+        undefined,
+        undefined,
+        undefined,
+        extractContext
       );
 
       if (sceneGraph) {
+        this.lastWasmNodeCount = extractContext.currentIndex;
         this.renderer.syncScene(sceneGraph, pendingDeletions);
+
+        if (sharedArray) {
+          this.renderer.saveInitialLocals(sharedArray);
+        }
       }
     });
 
     this.tracker.onStyleChange.add((pendingStyles) => {
-      animateMeshByData(this.registry, pendingStyles);
+      animateMeshByData(this.registry, pendingStyles, this.wasmSync.sharedArray || undefined);
     });
 
     this.tracker.onRender.add(() => {
-      this.renderer.syncMeshesByDOM();
+      this.renderer.updateScroll();
+      this.wasmSync.updatePhysics(this.lastWasmNodeCount);
+      if (this.wasmSync.sharedArray) {
+        this.renderer.syncMeshesByWasm(this.wasmSync.sharedArray);
+      }
       this.renderer.render();
     });
   }
 
-  public start() {
+  public async start() {
+    // 10000개 노드 분량의 공유 메모리를 넉넉하게 선행 할당 (1-Pass 위함)
+    await this.wasmSync.initialize(10000 * WASM_STRIDE);
     this.tracker.start();
   }
 

package/src/dom/Extractor.ts

@@ -14,6 +14,10 @@ import {
   ATTR_SELECT,
   ATTR_TRAVEL,
   ATTR_SHADER,
+  WASM_STRIDE,
+  OFFSET_PARENT,
+  OFFSET_LOCAL_X,
+  OFFSET_LOCAL_Y,
 } from "../types";
 
 import { BoxStyles, TextStyles, ShaderHooks } from "@mirage-engine/painter";
@@ -210,7 +214,15 @@ export function extractSceneGraph(
   inheritedNativeLayer?: number,
   inheritedNativeStyles?: any,
   inheritedClipElements?: HTMLElement[],
+  extractContext?: { sharedArray: Float32Array; currentIndex: number; scrollX?: number; scrollY?: number },
+  parentWasmIndex: number = -1,
+  parentWorldX: number = 0,
+  parentWorldY: number = 0,
+  inheritedIsFixed: boolean = false
 ): SceneNode | null {
+  const scrollX = extractContext?.scrollX ?? window.scrollX;
+  const scrollY = extractContext?.scrollY ?? window.scrollY;
+
   // Check text node
   if (sourceNode.nodeType === Node.TEXT_NODE) {
     const textNode = sourceNode as Text;
@@ -228,20 +240,34 @@ export function extractSceneGraph(
     const computed = parent ? window.getComputedStyle(parent) : null;
     if (!computed) return null;
 
+    const myIsFixed = inheritedIsFixed || computed.position === "fixed";
+
     // Calculate overall bounding box of the lines
     const minX = Math.min(...textLines.map((l) => l.rect.left));
     const minY = Math.min(...textLines.map((l) => l.rect.top));
     const maxX = Math.max(...textLines.map((l) => l.rect.left + l.rect.width));
     const maxY = Math.max(...textLines.map((l) => l.rect.top + l.rect.height));
 
+    const myWorldX = minX + (myIsFixed ? 0 : scrollX);
+    const myWorldY = minY + (myIsFixed ? 0 : scrollY);
+
+    let myWasmIndex = -1;
+    if (extractContext && extractContext.sharedArray) {
+      myWasmIndex = extractContext.currentIndex++;
+      const offset = myWasmIndex * WASM_STRIDE;
+      extractContext.sharedArray[offset + OFFSET_PARENT] = parentWasmIndex;
+      extractContext.sharedArray[offset + OFFSET_LOCAL_X] = myWorldX - parentWorldX;
+      extractContext.sharedArray[offset + OFFSET_LOCAL_Y] = myWorldY - parentWorldY;
+    }
+
     // Create SceneNode for the text node
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: textNode as unknown as HTMLElement,
       rect: {
-        x: minX + window.scrollX,
-        y: minY + window.scrollY,
+        x: minX + (myIsFixed ? 0 : scrollX),
+        y: minY + (myIsFixed ? 0 : scrollY),
         width: maxX - minX,
         height: maxY - minY,
       },
@@ -264,8 +290,8 @@ export function extractSceneGraph(
       textLines: textLines.map((l) => ({
         text: l.text.trim(),
         rect: {
-          x: l.rect.left + window.scrollX,
-          y: l.rect.top + window.scrollY,
+          x: l.rect.left + (myIsFixed ? 0 : scrollX),
+          y: l.rect.top + (myIsFixed ? 0 : scrollY),
           width: l.rect.width,
           height: l.rect.height,
         },
@@ -275,7 +301,7 @@ export function extractSceneGraph(
       visibility: inheritedFlow,
       isTraveler: false,
       captureLayer,
-      isFixed: computed.position === "fixed",
+      isFixed: myIsFixed,
       nativeLayer: inheritedNativeLayer,
       nativeStyles: inheritedNativeStyles
         ? {
@@ -299,13 +325,14 @@ export function extractSceneGraph(
         : undefined,
       nativeRect: inheritedNativeStyles
         ? {
-            x: minX + window.scrollX,
-            y: minY + window.scrollY,
+            x: minX + (myIsFixed ? 0 : scrollX),
+            y: minY + (myIsFixed ? 0 : scrollY),
             width: maxX - minX,
             height: maxY - minY,
           }
         : undefined,
       clipElements: inheritedClipElements,
+      wasmIndex: myWasmIndex !== -1 ? myWasmIndex : undefined,
       children: [],
     };
   }
@@ -498,6 +525,20 @@ export function extractSceneGraph(
     return null;
   }
 
+  const myIsFixed = inheritedIsFixed || computed.position === "fixed";
+
+  const myWorldX = rect.left + (myIsFixed ? 0 : scrollX);
+  const myWorldY = rect.top + (myIsFixed ? 0 : scrollY);
+
+  let myWasmIndex = -1;
+  if (extractContext && extractContext.sharedArray) {
+    myWasmIndex = extractContext.currentIndex++;
+    const offset = myWasmIndex * WASM_STRIDE;
+    extractContext.sharedArray[offset + OFFSET_PARENT] = parentWasmIndex;
+    extractContext.sharedArray[offset + OFFSET_LOCAL_X] = myWorldX - parentWorldX;
+    extractContext.sharedArray[offset + OFFSET_LOCAL_Y] = myWorldY - parentWorldY;
+  }
+
   // [TODO] dataset 방식으로 변경
   let id = element.getAttribute("data-mid");
   if (!id) {
@@ -511,64 +552,71 @@ export function extractSceneGraph(
   // console.log(`${element.id}: ${computed.background}`);
   // console.log(computed.backgroundImage);
   let imageSrc: string | undefined;
+  let nativeImageSrc: string | undefined;
   if (element.tagName === "IMG") {
     imageSrc = (element as HTMLImageElement).src;
   } else if (element.tagName.toLowerCase() === "svg") {
-    const clone = element.cloneNode(true) as SVGSVGElement;
-
     const overrideColor = nativeParsedStyles?.color;
     const overrideFill = nativeParsedStyles?.fill;
     const overrideStroke = nativeParsedStyles?.stroke;
     const overrideOpacity = nativeParsedStyles?.opacity;
 
-    const inlineSVGStyles = (orig: Element, cloned: Element) => {
-      const computed = window.getComputedStyle(orig);
-      const clonedHtml = cloned as HTMLElement;
+    const getSvgImageSrc = (useOverrides: boolean) => {
+      const clone = element.cloneNode(true) as SVGSVGElement;
+      
+      const inlineSVGStyles = (orig: Element, cloned: Element) => {
+        const computed = window.getComputedStyle(orig);
+        const clonedHtml = cloned as HTMLElement;
 
-      const isCurrentColorFill = computed.fill === computed.color;
-      const isCurrentColorStroke = computed.stroke === computed.color;
+        const isCurrentColorFill = computed.fill === computed.color;
+        const isCurrentColorStroke = computed.stroke === computed.color;
 
-      const fill = overrideFill || (isCurrentColorFill ? overrideColor : undefined) || computed.fill;
-      if (fill && fill !== "none") clonedHtml.style.fill = fill;
+        const fill = (useOverrides ? (overrideFill || (isCurrentColorFill ? overrideColor : undefined)) : undefined) || computed.fill;
+        if (fill && fill !== "none") clonedHtml.style.fill = fill;
 
-      const stroke = overrideStroke || (isCurrentColorStroke ? overrideColor : undefined) || computed.stroke;
-      if (stroke && stroke !== "none") clonedHtml.style.stroke = stroke;
+        const stroke = (useOverrides ? (overrideStroke || (isCurrentColorStroke ? overrideColor : undefined)) : undefined) || computed.stroke;
+        if (stroke && stroke !== "none") clonedHtml.style.stroke = stroke;
 
-      if (computed.strokeWidth && computed.strokeWidth !== "0px")
-        clonedHtml.style.strokeWidth = computed.strokeWidth;
+        if (computed.strokeWidth && computed.strokeWidth !== "0px")
+          clonedHtml.style.strokeWidth = computed.strokeWidth;
 
-      const color = overrideColor || computed.color;
-      if (color) clonedHtml.style.color = color;
+        const color = (useOverrides ? overrideColor : undefined) || computed.color;
+        if (color) clonedHtml.style.color = color;
 
-      const opacity = overrideOpacity || computed.opacity;
-      if (opacity && opacity !== "1") clonedHtml.style.opacity = opacity;
+        const opacity = (useOverrides ? overrideOpacity : undefined) || computed.opacity;
+        if (opacity && opacity !== "1") clonedHtml.style.opacity = opacity;
 
-      for (let i = 0; i < orig.children.length; i++) {
-        inlineSVGStyles(orig.children[i], cloned.children[i]);
-      }
-    };
+        for (let i = 0; i < orig.children.length; i++) {
+          inlineSVGStyles(orig.children[i], cloned.children[i]);
+        }
+      };
 
-    inlineSVGStyles(element, clone);
+      inlineSVGStyles(element, clone);
 
-    const svgRect = element.getBoundingClientRect();
-    const scale = window.devicePixelRatio * qualityFactor; // High-DPI 대응을 위한 해상도 스케일업
+      const svgRect = element.getBoundingClientRect();
+      const scale = window.devicePixelRatio * qualityFactor;
 
-    if (!clone.hasAttribute("viewBox")) {
-      clone.setAttribute("viewBox", `0 0 ${svgRect.width} ${svgRect.height}`);
-    }
+      if (!clone.hasAttribute("viewBox")) {
+        clone.setAttribute("viewBox", `0 0 ${svgRect.width} ${svgRect.height}`);
+      }
 
-    clone.setAttribute("width", (svgRect.width * scale).toString());
-    clone.setAttribute("height", (svgRect.height * scale).toString());
+      clone.setAttribute("width", (svgRect.width * scale).toString());
+      clone.setAttribute("height", (svgRect.height * scale).toString());
 
-    let svgString = new XMLSerializer().serializeToString(clone);
-    if (!svgString.includes("xmlns=")) {
-      svgString = svgString.replace(
-        "<svg",
-        '<svg xmlns="http://www.w3.org/2000/svg"',
-      );
-    }
+      let svgString = new XMLSerializer().serializeToString(clone);
+      if (!svgString.includes("xmlns=")) {
+        svgString = svgString.replace(
+          "<svg",
+          '<svg xmlns="http://www.w3.org/2000/svg"',
+        );
+      }
+      return `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+    };
 
-    imageSrc = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+    imageSrc = getSvgImageSrc(false);
+    if (nativeLayer !== undefined && (overrideColor || overrideFill || overrideStroke || overrideOpacity)) {
+      nativeImageSrc = getSvgImageSrc(true);
+    }
   } else if (computed.backgroundImage && computed.backgroundImage !== "none") {
     const match = computed.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
     if (match) {
@@ -620,6 +668,11 @@ export function extractSceneGraph(
           ? nativeParsedStyles
           : undefined,
         nextClipElements,
+        extractContext,
+        myWasmIndex,
+        myWorldX,
+        myWorldY,
+        myIsFixed
       );
       if (childNode) {
         children.push(childNode);
@@ -632,8 +685,8 @@ export function extractSceneGraph(
     type: "BOX",
     element,
     rect: {
-      x: rect.left + window.scrollX,
-      y: rect.top + window.scrollY,
+      x: rect.left + scrollX,
+      y: rect.top + scrollY,
       width: rect.width,
       height: rect.height,
     },
@@ -668,6 +721,7 @@ export function extractSceneGraph(
               nativeParsedStyles.boxShadow ?? baseStyles.boxShadow,
             isTraveler: baseStyles.isTraveler,
             transform: nativeParsedStyles.transform,
+            imageSrc: nativeImageSrc ?? imageSrc,
           }
         : undefined,
     nativeRect:
@@ -676,11 +730,11 @@ export function extractSceneGraph(
             x:
               nativeParsedStyles.x !== undefined
                 ? parseFloat(nativeParsedStyles.x)
-                : rect.left + window.scrollX,
+                : rect.left + scrollX,
             y:
               nativeParsedStyles.y !== undefined
                 ? parseFloat(nativeParsedStyles.y)
-                : rect.top + window.scrollY,
+                : rect.top + scrollY,
             width:
               nativeParsedStyles.width !== undefined
                 ? parseFloat(nativeParsedStyles.width)
@@ -691,8 +745,9 @@ export function extractSceneGraph(
                 : rect.height,
           }
         : undefined,
-    isFixed: computed.position === "fixed",
+    isFixed: myIsFixed,
     clipElements: inheritedClipElements,
+    wasmIndex: myWasmIndex !== -1 ? myWasmIndex : undefined,
     children,
     shaderHooks,
   };

package/src/index.ts

@@ -1,2 +1,3 @@
 export { Engine} from "./core/Engine";
 export * from "./types";
+export * from "./wasm/WasmSynchronizer";