@mirage-engine/core 0.2.1 → 0.3.0

package/src/renderer/Renderer.ts

@@ -6,38 +6,62 @@ import {
   CoreConfig,
   MirageMode,
   USER_LAYER,
-  SYSTEM_LAYER,
+  SELECT_LAYER,
   travelerClipArea,
+  THREE_LAYERS,
+  ATTR_TRAVEL,
+  LayerTarget,
 } from "../types";
-import { Painter } from "@mirage-engine/painter";
+import { Painter, TextStyles, BoxStyles } from "@mirage-engine/painter";
+import { MeshRegistry } from "../store/MeshRegistry";
+import { TextureLifecycleManager } from "../store/TextureLifecycleManager";
 
 export class Renderer {
   public readonly canvas: HTMLCanvasElement;
   private readonly scene: THREE.Scene;
   private readonly camera: THREE.OrthographicCamera;
   private readonly renderer: THREE.WebGLRenderer;
-  private renderTarget: THREE.WebGLRenderTarget | null = null;
+  private renderTargets: THREE.WebGLRenderTarget[] = [];
   private renderOrder: number = 0;
-  private qualityFactor: number = 2;
+  public qualityFactor: number = 2;
   private mode: MirageMode = "overlay";
   private clipArea: travelerClipArea = 1;
+  public targetLayer: number | LayerTarget = "base";
 
   private target: HTMLElement;
   private mountContainer: HTMLElement;
+  private registry: MeshRegistry;
   private targetRect: DOMRect;
 
-  private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
+  private travelersByLayer: Set<THREE.Mesh>[] = Array.from(
+    { length: ATTR_TRAVEL.MAX_LAYERS },
+    () => new Set(),
+  );
+  private textureManager: TextureLifecycleManager;
+  // private meshMap: Map<HTMLElement, THREE.Mesh> = new Map();
+
+  public readonly fixedMeshes: Set<THREE.Mesh> = new Set();
 
   constructor(
     target: HTMLElement,
     config: CoreConfig,
     mountContainer: HTMLElement,
+    registry: MeshRegistry,
   ) {
     this.target = target;
     this.mountContainer = mountContainer;
+    this.registry = registry;
+
+    this.textureManager = new TextureLifecycleManager((el, texture) => {
+      const mesh = this.registry.get(el);
+      if (mesh && mesh.material instanceof THREE.ShaderMaterial) {
+        Painter.forceUpdateUniforms(mesh.material, { texture: texture });
+      }
+    });
 
     this.mode = config.mode ?? "overlay";
     this.clipArea = config.travelerClipArea ?? 1;
+    this.targetLayer = config.layer ?? "base";
     this.canvas = document.createElement("canvas");
     this.scene = new THREE.Scene();
 
@@ -58,10 +82,7 @@ export class Renderer {
       1000,
     );
     this.camera.position.z = 100;
-    this.camera.layers.set(0);
-
-    // [new]
-    // THREE.ColorManagement.enabled = false;
+    this.camera.layers.set(this.getSceneLayer());
 
     this.renderer = new THREE.WebGLRenderer({
       canvas: this.canvas,
@@ -71,24 +92,41 @@ export class Renderer {
       // premultipliedAlpha: true
     });
 
+    THREE.ColorManagement.enabled = false;
+    this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
+
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.renderer.setSize(width, height);
 
     this.applyTextQuality(config.quality ?? "medium");
   }
+
+  private getSceneLayer(): number {
+    if (typeof this.targetLayer === "number") {
+      return this.targetLayer;
+    } else if (this.targetLayer === "selected") {
+      return THREE_LAYERS.SELECTED;
+    } else {
+      return THREE_LAYERS.BASE;
+    }
+  }
+
   public createRenderTarget() {
-    this.renderTarget = new THREE.WebGLRenderTarget(
-      this.targetRect.width * this.qualityFactor,
-      this.targetRect.height * this.qualityFactor,
-      {
-        minFilter: THREE.LinearFilter,
-        magFilter: THREE.LinearFilter,
-        format: THREE.RGBAFormat,
-        stencilBuffer: false,
-        depthBuffer: true,
-        samples: 4,
-      },
-    );
+    for (let i = 0; i < ATTR_TRAVEL.MAX_LAYERS; i++) {
+      this.renderTargets.push(
+        new THREE.WebGLRenderTarget(
+          this.targetRect.width * this.qualityFactor,
+          this.targetRect.height * this.qualityFactor,
+          {
+            minFilter: THREE.LinearFilter,
+            magFilter: THREE.LinearFilter,
+            format: THREE.RGBAFormat,
+            stencilBuffer: false,
+            depthBuffer: true,
+          },
+        ),
+      );
+    }
   }
 
   private applyTextQuality(quality: Quality) {
@@ -104,6 +142,9 @@ export class Renderer {
         this.qualityFactor = 4;
         break;
       case "medium":
+        // this.qualityFactor = 2;
+        this.qualityFactor = 2;
+        break;  
       default:
         this.qualityFactor = 2;
         break;
@@ -135,19 +176,42 @@ export class Renderer {
     }
   }
 
+  public updateUniforms(element: HTMLElement, uniforms: Record<string, any>) {
+    const mesh = this.registry.get(element);
+    if (!mesh) return;
+
+    mesh.traverse((child) => {
+      if ((child as THREE.Mesh).isMesh && (child as THREE.Mesh).material) {
+        Painter.forceUpdateUniforms(
+          (child as THREE.Mesh).material as THREE.ShaderMaterial,
+          uniforms,
+        );
+      }
+    });
+
+    if (mesh.userData.nativeMesh) {
+      mesh.userData.nativeMesh.traverse((child: THREE.Object3D) => {
+        if ((child as THREE.Mesh).isMesh && (child as THREE.Mesh).material) {
+          Painter.forceUpdateUniforms(
+            (child as THREE.Mesh).material as THREE.ShaderMaterial,
+            uniforms,
+          );
+        }
+      });
+    }
+  }
+
   public dispose() {
     this.renderer.dispose();
     this.canvas.remove();
+    this.textureManager.disposeAll();
     // TODO: Scene 내부 Mesh들도 순회하며 dispose
   }
 
   public setSize(width: number, height: number) {
     this.renderer.setSize(width, height);
-    if (this.renderTarget) {
-      this.renderTarget.setSize(
-        width * this.qualityFactor,
-        height * this.qualityFactor,
-      );
+    for (const target of this.renderTargets) {
+      target.setSize(width * this.qualityFactor, height * this.qualityFactor);
     }
     this.camera.left = width / -2;
     this.camera.right = width / 2;
@@ -156,7 +220,7 @@ export class Renderer {
     this.camera.updateProjectionMatrix();
   }
 
-  public syncScene(graphNode: SceneNode) {
+  public syncScene(graphNode: SceneNode, pendingDeletions: Set<HTMLElement>) {
     const newRect = this.target.getBoundingClientRect();
 
     const isResized =
@@ -182,110 +246,230 @@ export class Renderer {
 
     this.renderOrder = 0;
 
-    const activeElements = new Set<HTMLElement>();
-
-    this.reconcileNode(graphNode, activeElements);
-
-    for (const [el, mesh] of this.meshMap.entries()) {
-      if (!activeElements.has(el)) {
-        this.scene.remove(mesh);
-
-        mesh.geometry.dispose();
-        if (mesh.material instanceof THREE.Material) mesh.material.dispose();
-        this.meshMap.delete(el);
-      }
+    this.reconcileNode(graphNode);
+
+    if (pendingDeletions.size > 0) {
+      pendingDeletions.forEach((el) => {
+        const meshToDestroy = this.registry.get(el) as THREE.Mesh | undefined;
+        if (meshToDestroy) {
+          this.scene.remove(meshToDestroy);
+          for (const set of this.travelersByLayer) {
+            set.delete(meshToDestroy);
+          }
+          this.fixedMeshes.delete(meshToDestroy);
+          meshToDestroy.geometry.dispose();
+          if (meshToDestroy.userData.nativeMesh) {
+            this.scene.remove(meshToDestroy.userData.nativeMesh);
+            if (Array.isArray(meshToDestroy.userData.nativeMesh.material)) {
+              meshToDestroy.userData.nativeMesh.material.forEach((mat: THREE.Material) => mat.dispose());
+            } else {
+              meshToDestroy.userData.nativeMesh.material.dispose();
+            }
+            meshToDestroy.userData.nativeMesh.geometry.dispose();
+          }
+          meshToDestroy.traverse((child) => {
+            if (child instanceof THREE.Mesh) {
+              if (child.geometry) child.geometry.dispose();
+              if (child.material) {
+                if (Array.isArray(child.material)) {
+                  child.material.forEach((mat) => mat.dispose());
+                } else {
+                  child.material.dispose();
+                }
+              }
+            }
+          });
+          this.registry.remove(el);
+          this.textureManager.unregister(el);
+        }
+      });
     }
+
+    //     mesh.geometry.dispose();
+    //     if (mesh.material instanceof THREE.Material) mesh.material.dispose();
+    //     this.meshMap.delete(el);
+    //   }
+    // }
   }
 
-  private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
-    activeElements.add(node.element);
+  // 탐색 후 완성된 Scene node를 이용하여 mesh를 만들거나 조정
+  // => 이 과정에서 scene node에 있는 ele를 넣은 hash => activeElements
+  // => 이후 activeElements를 이용하여 mesh를 정리!!!+ map에서도 삭제
 
-    let mesh = this.meshMap.get(node.element);
+  // private reconcileNode(node: SceneNode, activeElements: Set<HTMLElement>) {
+  private reconcileNode(node: SceneNode) {
+    let mesh = this.registry.get(node.element) as THREE.Mesh | undefined;
+      
     if (!mesh) {
       const geometry = new THREE.PlaneGeometry(1, 1);
-      let material: THREE.MeshBasicMaterial | THREE.Material;
-      material = Painter.create(
+      const initialTexture = node.isTraveler
+        ? this.renderTargets[node.captureLayer - 2]?.texture
+        : this.textureManager.get(node.element);
+
+      const material = Painter.create(
         "BOX",
         node.styles,
         "",
         node.rect.width,
         node.rect.height,
         this.qualityFactor,
-        node.isTraveler ? this.renderTarget?.texture : undefined,
-        node.shaderHooks
+        initialTexture,
+        node.shaderHooks,
       );
+      
       mesh = new THREE.Mesh(geometry, material);
+
       if (node.type === "TEXT") mesh.name = "BG_MESH";
       this.scene.add(mesh);
-      this.meshMap.set(node.element, mesh);
+      
+      this.registry.register(node.element, mesh);
+      mesh.userData.baseMaterial = material;
     }
 
-    mesh.userData.domRect = node.rect;
+
+
+    // [Important] use whene mesh animating with js
 
     this.updateMeshProperties(mesh, node);
     this.updateMeshLayers(mesh, node);
-    if (node.isTraveler) mesh.layers.enable(28);
+    if (node.isTraveler) {
+      for (let i = 0; i < ATTR_TRAVEL.MAX_LAYERS; i++) {
+        if (i === node.captureLayer - 2) {
+          this.travelersByLayer[i].add(mesh);
+        } else {
+          this.travelersByLayer[i].delete(mesh);
+        }
+      }
+    } else {
+      for (const set of this.travelersByLayer) {
+        set.delete(mesh);
+      }
+    }
+
+    if (node.isFixed) {
+      this.fixedMeshes.add(mesh);
+    } else {
+      this.fixedMeshes.delete(mesh);
+    }
+
+    if (node.styles.imageSrc) {
+      this.textureManager.register(node.element, node.styles.imageSrc);
+    } else {
+      this.textureManager.unregister(node.element);
+    }
 
     if (node.type === "BOX") {
       for (const child of node.children) {
-        this.reconcileNode(child, activeElements);
+        this.reconcileNode(child);
       }
     } else if (node.type === "TEXT") {
-      this.reconcileTextChild(mesh, node);
+      this.reconcileTextChild(mesh, node, false);
+      if (mesh.userData.nativeMesh && node.nativeStyles) {
+        this.reconcileTextChild(mesh.userData.nativeMesh as THREE.Mesh, node, true);
+      }
     }
   }
 
-  private reconcileTextChild(parentMesh: THREE.Mesh, node: SceneNode) {
-    let textMesh = parentMesh.children.find(
-      (c) => c.name === "TEXT_CHILD",
-    ) as THREE.Mesh;
-
-    const currentStyleHash = JSON.stringify(node.textStyles);
-    const cachedStyleHash = textMesh?.userData?.styleHash;
+  private reconcileTextChild(parentMesh: THREE.Mesh, node: SceneNode, isNative: boolean) {
+    const lines = node.textLines || [
+      { text: node.textContent || "", rect: node.rect },
+    ];
+    
+    const stylesToUse = (isNative ? node.nativeStyles : node.textStyles) as TextStyles;
+    const currentStyleHash =
+      JSON.stringify(stylesToUse) +
+      node.textContent +
+      lines.map((l) => l.text).join("|");
+    const cachedStyleHash = parentMesh.userData?.textChildStyleHash;
     const isDirty =
-      !textMesh ||
-      node.dirtyMask & DIRTY_CONTENT ||
-      currentStyleHash !== cachedStyleHash;
+      node.dirtyMask & DIRTY_CONTENT || currentStyleHash !== cachedStyleHash;
 
     if (isDirty) {
-      if (textMesh) {
+      // Remove all existing TEXT_CHILD meshes
+      const existingChildren = parentMesh.children.filter((c) =>
+        c.name.startsWith("TEXT_CHILD"),
+      );
+      existingChildren.forEach((child) => {
+        const textMesh = child as THREE.Mesh;
         (textMesh.material as THREE.MeshBasicMaterial).map?.dispose();
         textMesh.geometry.dispose();
         parentMesh.remove(textMesh);
-      }
+      });
 
-      const material = Painter.create(
-        "TEXT",
-        node.textStyles!,
-        node.textContent || "",
-        node.rect.width,
-        node.rect.height,
-        this.qualityFactor,
-      );
-
-      const geometry = new THREE.PlaneGeometry(1, 1);
-      textMesh = new THREE.Mesh(geometry, material);
-
-      textMesh.name = "TEXT_CHILD";
-      textMesh.userData = { styleHash: currentStyleHash };
-      this.updateMeshLayers(textMesh, node);
-      textMesh.position.z = 0.005;
-      parentMesh.add(textMesh);
-    }
-
-    if (textMesh) {
-      const parentRect = parentMesh.userData.domRect;
+      const parentRect = node.rect;
       const parentCenterX = parentRect.x + parentRect.width / 2;
       const parentCenterY = parentRect.y + parentRect.height / 2;
 
-      const textCenterX = node.rect.x + node.rect.width / 2;
-      const textCenterY = node.rect.y + node.rect.height / 2;
+      lines.forEach((line, index) => {
+        const material = Painter.create(
+          "TEXT",
+          stylesToUse,
+          line.text,
+          line.rect.width,
+          line.rect.height,
+          this.qualityFactor,
+        );
+
+        const geometry = new THREE.PlaneGeometry(1, 1);
+        const textMesh = new THREE.Mesh(geometry, material);
+
+        textMesh.name = `TEXT_CHILD_${index}`;
+
+        // Parent is already scaled to node.rect.width/height.
+        // We counter-scale the child so its absolute size is exactly line.rect.width/height.
+        const scaleX =
+          node.rect.width === 0 ? 1 : line.rect.width / node.rect.width;
+        const scaleY =
+          node.rect.height === 0 ? 1 : line.rect.height / node.rect.height;
+        textMesh.scale.set(scaleX, scaleY, 1);
+
+        const textCenterX = line.rect.x + line.rect.width / 2;
+        const textCenterY = line.rect.y + line.rect.height / 2;
+
+        const offsetX = textCenterX - parentCenterX;
+        const offsetY = -(textCenterY - parentCenterY);
+
+        // Position must also be counter-scaled relative to parent's scale
+        textMesh.position.set(
+          node.rect.width === 0 ? 0 : offsetX / node.rect.width,
+          node.rect.height === 0 ? 0 : offsetY / node.rect.height,
+          0.005,
+        );
+
+        parentMesh.add(textMesh);
+      });
+
+      parentMesh.userData.textChildStyleHash = currentStyleHash;
+    }
 
-      const offsetX = textCenterX - parentCenterX;
-      const offsetY = -(textCenterY - parentCenterY);
+    // Always update layers for all text children, as visibility/nativeLayer can change without dirtifying the style
+    parentMesh.children.forEach((child) => {
+      if (!child.name.startsWith("TEXT_CHILD")) return;
+      const textMesh = child as THREE.Mesh;
+      
+      const layerNum = node.visibility & USER_LAYER ? THREE_LAYERS.BASE : THREE_LAYERS.HIDDEN;
+      textMesh.layers.set(layerNum);
 
-      textMesh.position.set(offsetX, offsetY, 0.005);
-    }
+      if (node.visibility & SELECT_LAYER) {
+        textMesh.layers.enable(THREE_LAYERS.SELECTED);
+      }
+
+      if (node.visibility & USER_LAYER) {
+        if (!isNative && node.nativeLayer !== undefined && node.nativeStyles !== undefined) {
+          for (let i = node.captureLayer; i < node.nativeLayer; i++) {
+            textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+          }
+        } else if (isNative && node.nativeLayer !== undefined) {
+          for (let i = Math.max(node.captureLayer, node.nativeLayer); i <= ATTR_TRAVEL.MAX_LAYERS + 1; i++) {
+            textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+          }
+        } else {
+          for (let i = node.captureLayer; i <= ATTR_TRAVEL.MAX_LAYERS + 1; i++) {
+            textMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+          }
+        }
+      }
+    });
   }
 
   private updateMeshProperties(mesh: THREE.Mesh, node: SceneNode) {
@@ -294,9 +478,16 @@ export class Renderer {
     const pixelRatio = this.renderer.getPixelRatio();
     const canvasWidth = this.renderer.domElement.width / pixelRatio;
     const canvasHeight = this.renderer.domElement.height / pixelRatio;
-
+    
+    mesh.material = mesh.userData.baseMaterial as THREE.Material;
     mesh.scale.set(rect.width, rect.height, 1);
 
+    mesh.userData.domRect = {
+      ...rect,
+      width: rect.width,
+      height: rect.height,
+    };
+
     const Z_MICRO_OFFSET = 0.001;
     this.renderOrder++;
 
@@ -306,50 +497,168 @@ export class Renderer {
     const localX = rect.x - targetPageX;
     const localY = rect.y - targetPageY;
 
+    const baseX = localX - canvasWidth / 2 + rect.width / 2;
+    const baseY = -localY + canvasHeight / 2 - rect.height / 2;
+
     mesh.position.set(
-      localX - canvasWidth / 2 + rect.width / 2,
-      -localY + canvasHeight / 2 - rect.height / 2,
+      baseX,
+      baseY,
       styles.zIndex + this.renderOrder * Z_MICRO_OFFSET,
     );
+    const pureDOM_X = rect.x; // 트랜스폼 오염 전 순수 좌표 (가정)
+    const pureDOM_Y = rect.y;
+
+    mesh.userData.basePosition = { x: baseX, y: baseY };
+    mesh.userData.originalBasePosition = { x: baseX, y: baseY };
+    mesh.userData.baseSize = { width: rect.width, height: rect.height };
+
+    mesh.userData.baseDOM = { x: pureDOM_X, y: pureDOM_Y };
+    mesh.userData.isFixed = node.isFixed;
+    mesh.userData.initialScroll = { x: window.scrollX, y: window.scrollY };
+
+    const targetEl =
+      node.element.nodeType === Node.TEXT_NODE
+        ? node.element.parentElement!
+        : node.element;
+    const computed = window.getComputedStyle(targetEl);
+    let baseTx = 0,
+      baseTy = 0;
+    if (computed.transform && computed.transform !== "none") {
+      const matrix = new DOMMatrix(computed.transform);
+      baseTx = matrix.m41;
+      baseTy = matrix.m42;
+    }
+    mesh.userData.baseTransform = { x: baseTx, y: baseTy };
+
+    delete mesh.userData.originRatioX;
+    delete mesh.userData.originRatioY;
+    // mesh.position.set(
+    //   localX - canvasWidth / 2 + rect.width / 2,
+    //   -localY + canvasHeight / 2 - rect.height / 2,
+    //   styles.zIndex + this.renderOrder * Z_MICRO_OFFSET,
+    // );
     Painter.update(
-      mesh.material as THREE.Material,
+      mesh.userData.baseMaterial,
       "BOX",
-      node.styles,
+      styles,
       "",
-      node.rect.width,
-      node.rect.height,
+      rect.width,
+      rect.height,
       this.qualityFactor,
-      node.isTraveler ? this.renderTarget?.texture : undefined,
+      node.isTraveler
+        ? this.renderTargets[node.captureLayer - 2]?.texture
+        : this.textureManager.get(node.element),
     );
+
+    if (node.nativeStyles && node.nativeRect) {
+      if (!mesh.userData.nativeMesh) {
+        const nativeMaterial = Painter.create(
+          "BOX",
+          node.nativeStyles,
+          "",
+          node.nativeRect.width,
+          node.nativeRect.height,
+          this.qualityFactor,
+          node.isTraveler
+            ? this.renderTargets[node.captureLayer - 2]?.texture
+            : this.textureManager.get(node.element),
+          node.shaderHooks,
+        );
+        const nativeMesh = new THREE.Mesh(mesh.geometry, nativeMaterial);
+        if (node.type === "TEXT") nativeMesh.name = "BG_MESH";
+        this.scene.add(nativeMesh);
+        mesh.userData.nativeMesh = nativeMesh;
+      }
+
+      const nativeMesh = mesh.userData.nativeMesh as THREE.Mesh;
+      const nativeLocalX = node.nativeRect.x - targetPageX;
+      const nativeLocalY = node.nativeRect.y - targetPageY;
+      const nativeBaseX = nativeLocalX - canvasWidth / 2 + node.nativeRect.width / 2;
+      const nativeBaseY = -nativeLocalY + canvasHeight / 2 - node.nativeRect.height / 2;
+
+      nativeMesh.scale.set(node.nativeRect.width, node.nativeRect.height, 1);
+      nativeMesh.position.set(
+        nativeBaseX,
+        nativeBaseY,
+        (node.nativeStyles as BoxStyles).zIndex + this.renderOrder * Z_MICRO_OFFSET,
+      );
+
+      Painter.update(
+        nativeMesh.material as THREE.Material,
+        "BOX",
+        node.nativeStyles,
+        "",
+        node.nativeRect.width,
+        node.nativeRect.height,
+        this.qualityFactor,
+        node.isTraveler
+          ? this.renderTargets[node.captureLayer - 2]?.texture
+          : this.textureManager.get(node.element),
+      );
+    } else {
+      if (mesh.userData.nativeMesh) {
+        this.scene.remove(mesh.userData.nativeMesh);
+        if (mesh.userData.nativeMesh.material instanceof THREE.Material) {
+          mesh.userData.nativeMesh.material.dispose();
+        }
+        delete mesh.userData.nativeMesh;
+      }
+    }
   }
 
   private updateMeshLayers(mesh: THREE.Mesh, node: SceneNode) {
-    const layerNum = (1 - (node.visibility & USER_LAYER)) * 30;
+    const layerNum =
+      node.visibility & USER_LAYER ? THREE_LAYERS.BASE : THREE_LAYERS.HIDDEN;
     mesh.layers.set(layerNum);
-    if (node.visibility === (USER_LAYER | SYSTEM_LAYER)) mesh.layers.enable(29);
-  }
 
-  private captureRenderTarget() {
-    const travelers: THREE.Mesh[] = [];
-    for (const mesh of this.meshMap.values()) {
-      if ((mesh.layers.mask & (1 << 28)) !== 0) {
-        travelers.push(mesh);
+    if (node.visibility & SELECT_LAYER) {
+      mesh.layers.enable(THREE_LAYERS.SELECTED);
+    }
+
+    if (mesh.userData.nativeMesh && node.nativeLayer !== undefined) {
+      const nativeMesh = mesh.userData.nativeMesh as THREE.Mesh;
+      nativeMesh.layers.set(THREE_LAYERS.HIDDEN);
+
+      if (node.visibility & USER_LAYER) {
+        for (let i = node.captureLayer; i < node.nativeLayer; i++) {
+          mesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+        }
+        for (let i = Math.max(node.captureLayer, node.nativeLayer); i <= ATTR_TRAVEL.MAX_LAYERS + 1; i++) {
+          nativeMesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+        }
+      }
+    } else {
+      if (node.visibility & USER_LAYER) {
+        for (let i = node.captureLayer; i <= ATTR_TRAVEL.MAX_LAYERS + 1; i++) {
+          mesh.layers.enable(THREE_LAYERS.getCaptureLayer(i));
+        }
       }
     }
-    if (travelers.length === 0) return;
+  }
+
+  private captureRenderTarget(
+    travelers: Set<THREE.Mesh>,
+    targetLayer: number,
+    renderTarget: THREE.WebGLRenderTarget | null,
+  ) {
+    // [Problem] this method called on requestAnimationFrame
+    // => this logic travers all meshes every frame, need optimization
+
+    // if (travelers.length === 0) return;
+    if (travelers.size === 0 || !renderTarget) return;
 
     const oldClearColor = new THREE.Color();
     const oldClearAlpha = this.renderer.getClearAlpha();
     this.renderer.getClearColor(oldClearColor);
 
     this.renderer.setClearColor(0x000000, 0);
-    this.renderer.setRenderTarget(this.renderTarget);
+    this.renderer.setRenderTarget(renderTarget);
 
     this.renderer.clear();
 
     this.renderer.autoClear = false;
     this.renderer.setScissorTest(true);
-    this.camera.layers.set(29);
+    this.camera.layers.set(targetLayer);
 
     const vector = new THREE.Vector3();
     const canvasWidth = this.targetRect.width;
@@ -392,35 +701,23 @@ export class Renderer {
     this.renderer.setScissorTest(false);
     this.renderer.autoClear = true;
     this.renderer.setRenderTarget(null);
-    this.camera.layers.set(28);
+    this.camera.layers.set(this.getSceneLayer());
     this.renderer.setClearColor(oldClearColor, oldClearAlpha);
   }
 
   public render() {
-    if (this.renderTarget) this.captureRenderTarget();
-    this.renderer.render(this.scene, this.camera);
-  }
-
-  // for debugging
-  public showScissoredRenderTarget() {
-    if (!this.renderTarget) return;
-
-    const w = this.targetRect.width;
-    const h = this.targetRect.height;
-
-    const geometry = new THREE.PlaneGeometry(w, h);
-    const material = new THREE.MeshBasicMaterial({
-      map: this.renderTarget.texture,
-      side: THREE.DoubleSide,
-      transparent: true,
-      opacity: 0.8,
-    });
-
-    const debugMesh = new THREE.Mesh(geometry, material);
+    for (let i = 0; i < ATTR_TRAVEL.MAX_LAYERS; i++) {
+      const currentLayer = i + 1;
 
-    debugMesh.position.set(0, 0, 90);
-    debugMesh.layers.set(28);
+      this.captureRenderTarget(
+        this.travelersByLayer[i],
+        THREE_LAYERS.getCaptureLayer(currentLayer),
+        this.renderTargets[i],
+      );
+    }
 
-    this.scene.add(debugMesh);
+    this.renderer.render(this.scene, this.camera);
   }
+
+  
 }