@mirage-engine/core 0.1.0 → 0.2.1

package/src/renderer/Renderer.ts

@@ -2,9 +2,12 @@ import * as THREE from "three";
 import {
   SceneNode,
   DIRTY_CONTENT,
-  TextQuality,
+  Quality,
   CoreConfig,
   MirageMode,
+  USER_LAYER,
+  SYSTEM_LAYER,
+  travelerClipArea,
 } from "../types";
 import { Painter } from "@mirage-engine/painter";
 
@@ -13,9 +16,11 @@ export class Renderer {
   private readonly scene: THREE.Scene;
   private readonly camera: THREE.OrthographicCamera;
   private readonly renderer: THREE.WebGLRenderer;
+  private renderTarget: THREE.WebGLRenderTarget | null = null;
   private renderOrder: number = 0;
-  private textQualityFactor: number = 2;
+  private qualityFactor: number = 2;
   private mode: MirageMode = "overlay";
+  private clipArea: travelerClipArea = 1;
 
   private target: HTMLElement;
   private mountContainer: HTMLElement;
@@ -32,7 +37,7 @@ export class Renderer {
     this.mountContainer = mountContainer;
 
     this.mode = config.mode ?? "overlay";
-
+    this.clipArea = config.travelerClipArea ?? 1;
     this.canvas = document.createElement("canvas");
     this.scene = new THREE.Scene();
 
@@ -53,6 +58,7 @@ export class Renderer {
       1000,
     );
     this.camera.position.z = 100;
+    this.camera.layers.set(0);
 
     // [new]
     // THREE.ColorManagement.enabled = false;
@@ -68,24 +74,38 @@ export class Renderer {
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.renderer.setSize(width, height);
 
-    this.applyTextQuality(config.textQuality ?? "medium");
+    this.applyTextQuality(config.quality ?? "medium");
+  }
+  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,
+      },
+    );
   }
 
-  private applyTextQuality(quality: TextQuality) {
+  private applyTextQuality(quality: Quality) {
     if (typeof quality === "number") {
-      this.textQualityFactor = Math.max(0.1, quality);
+      this.qualityFactor = Math.max(0.1, quality);
       return;
     }
     switch (quality) {
       case "low":
-        this.textQualityFactor = 1;
+        this.qualityFactor = 1;
         break;
       case "high":
-        this.textQualityFactor = 4;
+        this.qualityFactor = 4;
         break;
       case "medium":
       default:
-        this.textQualityFactor = 2;
+        this.qualityFactor = 2;
         break;
     }
   }
@@ -123,12 +143,16 @@ export class Renderer {
 
   public setSize(width: number, height: number) {
     this.renderer.setSize(width, height);
-
+    if (this.renderTarget) {
+      this.renderTarget.setSize(
+        width * this.qualityFactor,
+        height * this.qualityFactor,
+      );
+    }
     this.camera.left = width / -2;
     this.camera.right = width / 2;
     this.camera.top = height / 2;
     this.camera.bottom = height / -2;
-
     this.camera.updateProjectionMatrix();
   }
 
@@ -146,14 +170,7 @@ export class Renderer {
 
     if (isResized) {
       this.targetRect = newRect;
-      this.renderer.setSize(this.targetRect.width, this.targetRect.height);
-
-      this.camera.left = this.targetRect.width / -2;
-      this.camera.right = this.targetRect.width / 2;
-      this.camera.top = this.targetRect.height / 2;
-      this.camera.bottom = this.targetRect.height / -2;
-      this.camera.layers.set(0);
-      this.camera.updateProjectionMatrix();
+      this.setSize(this.targetRect.width, this.targetRect.height);
 
       this.updateCanvasLayout();
     } else if (isMoved) {
@@ -186,16 +203,18 @@ export class Renderer {
     let mesh = this.meshMap.get(node.element);
     if (!mesh) {
       const geometry = new THREE.PlaneGeometry(1, 1);
-      const material = Painter.create(
+      let material: THREE.MeshBasicMaterial | THREE.Material;
+      material = Painter.create(
         "BOX",
         node.styles,
         "",
         node.rect.width,
         node.rect.height,
+        this.qualityFactor,
+        node.isTraveler ? this.renderTarget?.texture : undefined,
+        node.shaderHooks
       );
-
       mesh = new THREE.Mesh(geometry, material);
-      mesh.layers.set(node.visibility);
       if (node.type === "TEXT") mesh.name = "BG_MESH";
       this.scene.add(mesh);
       this.meshMap.set(node.element, mesh);
@@ -204,6 +223,8 @@ export class Renderer {
     mesh.userData.domRect = node.rect;
 
     this.updateMeshProperties(mesh, node);
+    this.updateMeshLayers(mesh, node);
+    if (node.isTraveler) mesh.layers.enable(28);
 
     if (node.type === "BOX") {
       for (const child of node.children) {
@@ -239,7 +260,7 @@ export class Renderer {
         node.textContent || "",
         node.rect.width,
         node.rect.height,
-        this.textQualityFactor,
+        this.qualityFactor,
       );
 
       const geometry = new THREE.PlaneGeometry(1, 1);
@@ -247,7 +268,7 @@ export class Renderer {
 
       textMesh.name = "TEXT_CHILD";
       textMesh.userData = { styleHash: currentStyleHash };
-      textMesh.layers.set(node.visibility);
+      this.updateMeshLayers(textMesh, node);
       textMesh.position.z = 0.005;
       parentMesh.add(textMesh);
     }
@@ -297,10 +318,109 @@ export class Renderer {
       "",
       node.rect.width,
       node.rect.height,
+      this.qualityFactor,
+      node.isTraveler ? this.renderTarget?.texture : undefined,
     );
   }
 
+  private updateMeshLayers(mesh: THREE.Mesh, node: SceneNode) {
+    const layerNum = (1 - (node.visibility & USER_LAYER)) * 30;
+    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 (travelers.length === 0) 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.clear();
+
+    this.renderer.autoClear = false;
+    this.renderer.setScissorTest(true);
+    this.camera.layers.set(29);
+
+    const vector = new THREE.Vector3();
+    const canvasWidth = this.targetRect.width;
+    const canvasHeight = this.targetRect.height;
+
+    const pixelRatio = this.renderer.getPixelRatio();
+
+    for (const traveler of travelers) {
+      vector.setFromMatrixPosition(traveler.matrixWorld);
+      vector.project(this.camera);
+
+      const centerX = ((vector.x + 1) / 2) * canvasWidth;
+      const centerY = ((vector.y + 1) / 2) * canvasHeight;
+
+      let clipDiff = 0;
+      let clipRadito = 1;
+      if (typeof this.clipArea === "number") {
+        clipRadito = this.clipArea;
+      } else if (this.clipArea.endsWith("%")) {
+        clipRadito = parseFloat(this.clipArea) / 100;
+      } else if (this.clipArea.endsWith("px")) {
+        clipDiff = parseFloat(this.clipArea);
+      }
+
+      const width = traveler.scale.x * clipRadito + 0.5;
+      const height = traveler.scale.y * clipRadito + 0.5;
+
+      const localX = centerX - width / 2;
+      const localY = centerY - height / 2;
+
+      const scissorX = (localX * this.qualityFactor - clipDiff) / pixelRatio;
+      const scissorY = (localY * this.qualityFactor - clipDiff) / pixelRatio;
+      const scissorW = (width * this.qualityFactor + clipDiff * 2) / pixelRatio;
+      const scissorH =
+        (height * this.qualityFactor + clipDiff * 2) / pixelRatio;
+
+      this.renderer.setScissor(scissorX, scissorY, scissorW, scissorH);
+      this.renderer.render(this.scene, this.camera);
+    }
+    this.renderer.setScissorTest(false);
+    this.renderer.autoClear = true;
+    this.renderer.setRenderTarget(null);
+    this.camera.layers.set(28);
+    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);
+
+    debugMesh.position.set(0, 0, 90);
+    debugMesh.layers.set(28);
+
+    this.scene.add(debugMesh);
+  }
 }

package/src/types/common.ts

@@ -1,7 +1,7 @@
-import { TextStyles, BoxStyles } from "@mirage-engine/painter";
+import { TextStyles, BoxStyles, ShaderHooks } from "@mirage-engine/painter";
 import { Visibility } from "./flags";
 
-export type NodeType = "BOX" | "TEXT"
+export type NodeType = "BOX" | "TEXT";
 
 export interface NodeRect {
   x: number;
@@ -14,7 +14,7 @@ export interface SceneNode {
   id: string;
   type: NodeType;
   element: HTMLElement;
-  
+
   rect: NodeRect;
   styles: BoxStyles;
 
@@ -25,7 +25,8 @@ export interface SceneNode {
   // TODO: SceneNode의 sort 로직 추가(아마도)
 
   visibility: Visibility;
-  
+  isTraveler: boolean;
+  shaderHooks?: ShaderHooks;
+
   children: SceneNode[];
 }
-

package/src/types/config.ts

@@ -1,6 +1,8 @@
-export type TextQuality = "low" | "medium" | "high" | number;
+export type Quality = "low" | "medium" | "high" | number;
 export type MirageMode = "overlay" | "duplicate";
-
+export type PxUnit = `${number}px`;
+export type PercentUnit = `${number}%`;
+export type travelerClipArea = PxUnit | PercentUnit | number;
 export interface FilterConfig {
   includeTree?: string[];
   excludeTree?: string[];
@@ -9,13 +11,21 @@ export interface FilterConfig {
   end?: string[];
 }
 
+export interface ResizeConfig {
+  delay?: number;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
 interface BaseConfig {
   debug?: boolean;
-  textQuality?: TextQuality;
+  quality?: Quality;
   style?: {
     zIndex?: string;
   };
   filter?: FilterConfig;
+  resizeDebounce?: boolean | ResizeConfig;
+  travelerClipArea? : travelerClipArea;
 }
 
 export interface OverlayConfig extends BaseConfig {

package/src/types/flags.ts

@@ -7,12 +7,11 @@ export const DIRTY_STRUCTURE = 1 << 3; // 8: childNode add / delete (00001000)
 export const DIRTY_CONTENT = 1 << 4; // 16: text content changed (00010000)
 
 // Filtering Flag
-export const INCLUDED = 0;
-export const SYSTEM = 29;
-export const EXCLUDED = 30;
+export const USER_LAYER = 1 << 0;
+export const SYSTEM_LAYER = 1 << 1;
+export const EXCLUDED = 0;
 
-// 다른 파일에서 파라미터 타입 지정용으로 사용
-export type Visibility = typeof EXCLUDED | typeof SYSTEM | typeof INCLUDED;
+export type Visibility = 0 | 1 | 2 | 3;
 
 export const ALLOWED_FILTERS = [
   "include-tree",