@mirage-engine/painter 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mirage-engine/painter
 
+## 0.4.0
+
+### Minor Changes
+
+- 4b9e1b0: shader hooks pipeline
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/mirage-painter.js

@@ -175,11 +175,11 @@ function E(e, r, o, i, a) {
   e.uniforms.uSize.value.set(o, i), b(e.uniforms.uBorderRadius.value, r.borderRadius), e.uniforms.uBorderWidth.value = f(r.borderWidth), e.uniforms.uBgColor.value.copy(n.color), e.uniforms.uBorderColor.value.copy(t.color), e.uniforms.uOpacity.value = r.opacity ?? 1, e.uniforms.uBgOpacity.value = n.alpha, e.uniforms.uBorderOpacity.value = t.alpha, e.uniforms.uTexture && a !== void 0 && (e.uniforms.uTexture.value = a);
 }
 const S = {
-  create(e, r, o, i, a, n = 2, t = null) {
+  create(e, r, o, i, a, n = 2, t = null, c) {
     if (e === "BOX")
-      return R(r, i, a, t);
+      return R(r, i, a, t, c);
     if (e === "TEXT") {
-      const c = m(
+      const u = m(
         o || "",
         r,
         i,
@@ -187,7 +187,7 @@ const S = {
         n
       );
       return new l.MeshBasicMaterial({
-        map: c,
+        map: u,
         transparent: !0,
         side: l.FrontSide,
         color: 16777215

package/dist/mirage-painter.umd.js

@@ -82,4 +82,4 @@
     ${(t==null?void 0:t.uvModifier)||""}
   `:"",u=n?`
     baseColor = texture2D(uTexture, resultUv);
-  `:"",d=(t==null?void 0:t.colorModifier)||"",x=w.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",l).replace("#INJECT_BASE_COLOR",u).replace("#INJECT_COLOR_MODIFIER",d),f=g(e.backgroundColor),b=g(e.borderColor),B={uSize:{value:new c.Vector2(r,o)},uBorderRadius:{value:new c.Vector4(0,0,0,0)},uBorderWidth:{value:p(e.borderWidth)},uBgColor:{value:f.color},uBorderColor:{value:b.color},uOpacity:{value:e.opacity??1},uBgOpacity:{value:f.alpha},uBorderOpacity:{value:b.alpha},uTexture:{value:null}};return h(B.uBorderRadius.value,e.borderRadius),n&&(B.uTexture.value=i),new c.ShaderMaterial({uniforms:B,vertexShader:M,fragmentShader:x,transparent:!0,side:c.FrontSide})}function T(e,r,o,i,t){const n=g(r.backgroundColor),a=g(r.borderColor);e.uniforms.uSize.value.set(o,i),h(e.uniforms.uBorderRadius.value,r.borderRadius),e.uniforms.uBorderWidth.value=p(r.borderWidth),e.uniforms.uBgColor.value.copy(n.color),e.uniforms.uBorderColor.value.copy(a.color),e.uniforms.uOpacity.value=r.opacity??1,e.uniforms.uBgOpacity.value=n.alpha,e.uniforms.uBorderOpacity.value=a.alpha,e.uniforms.uTexture&&t!==void 0&&(e.uniforms.uTexture.value=t)}const y={create(e,r,o,i,t,n=2,a=null){if(e==="BOX")return O(r,i,t,a);if(e==="TEXT"){const l=m(o||"",r,i,t,n);return new c.MeshBasicMaterial({map:l,transparent:!0,side:c.FrontSide,color:16777215})}return new c.MeshBasicMaterial({visible:!1})},update(e,r,o,i,t,n,a=2,l){if(r==="BOX")T(e,o,t,n,l);else if(r==="TEXT"){const u=e;u.map&&u.map.dispose();const d=m(i||"",o,t,n,a);u.map=d,u.needsUpdate=!0}}};s.Painter=y,s.createBoxMaterial=O,s.createTextTexture=m,s.updateBoxMaterial=T,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+  `:"",d=(t==null?void 0:t.colorModifier)||"",x=w.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",l).replace("#INJECT_BASE_COLOR",u).replace("#INJECT_COLOR_MODIFIER",d),f=g(e.backgroundColor),b=g(e.borderColor),B={uSize:{value:new c.Vector2(r,o)},uBorderRadius:{value:new c.Vector4(0,0,0,0)},uBorderWidth:{value:p(e.borderWidth)},uBgColor:{value:f.color},uBorderColor:{value:b.color},uOpacity:{value:e.opacity??1},uBgOpacity:{value:f.alpha},uBorderOpacity:{value:b.alpha},uTexture:{value:null}};return h(B.uBorderRadius.value,e.borderRadius),n&&(B.uTexture.value=i),new c.ShaderMaterial({uniforms:B,vertexShader:M,fragmentShader:x,transparent:!0,side:c.FrontSide})}function T(e,r,o,i,t){const n=g(r.backgroundColor),a=g(r.borderColor);e.uniforms.uSize.value.set(o,i),h(e.uniforms.uBorderRadius.value,r.borderRadius),e.uniforms.uBorderWidth.value=p(r.borderWidth),e.uniforms.uBgColor.value.copy(n.color),e.uniforms.uBorderColor.value.copy(a.color),e.uniforms.uOpacity.value=r.opacity??1,e.uniforms.uBgOpacity.value=n.alpha,e.uniforms.uBorderOpacity.value=a.alpha,e.uniforms.uTexture&&t!==void 0&&(e.uniforms.uTexture.value=t)}const y={create(e,r,o,i,t,n=2,a=null,l){if(e==="BOX")return O(r,i,t,a,l);if(e==="TEXT"){const u=m(o||"",r,i,t,n);return new c.MeshBasicMaterial({map:u,transparent:!0,side:c.FrontSide,color:16777215})}return new c.MeshBasicMaterial({visible:!1})},update(e,r,o,i,t,n,a=2,l){if(r==="BOX")T(e,o,t,n,l);else if(r==="TEXT"){const u=e;u.map&&u.map.dispose();const d=m(i||"",o,t,n,a);u.map=d,u.needsUpdate=!0}}};s.Painter=y,s.createBoxMaterial=O,s.createTextTexture=m,s.updateBoxMaterial=T,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/src/BoxGenerator.d.ts

@@ -1,7 +1,4 @@
-import { BoxStyles } from './types';
+import { BoxStyles, ShaderHooks } from './types';
 import * as THREE from "three";
-export declare function createBoxMaterial(styles: BoxStyles, width: number, height: number, texture?: THREE.Texture | null, hooks?: {
-    uvModifier?: string;
-    colorModifier?: string;
-}): THREE.ShaderMaterial;
+export declare function createBoxMaterial(styles: BoxStyles, width: number, height: number, texture?: THREE.Texture | null, hooks?: ShaderHooks): THREE.ShaderMaterial;
 export declare function updateBoxMaterial(material: THREE.ShaderMaterial, styles: BoxStyles, width: number, height: number, texture?: THREE.Texture | null): void;

package/dist/src/Painter.d.ts

@@ -1,5 +1,6 @@
+import { ShaderHooks } from './types';
 import * as THREE from "three";
 export declare const Painter: {
-    create(type: "BOX" | "TEXT", styles: any, content: string, width: number, height: number, quality?: number, texture?: THREE.Texture | null): THREE.Material;
+    create(type: "BOX" | "TEXT", styles: any, content: string, width: number, height: number, quality?: number, texture?: THREE.Texture | null, shaderHooks?: ShaderHooks): THREE.Material;
     update(material: THREE.Material, type: "BOX" | "TEXT", styles: any, content: string, width: number, height: number, quality?: number, texture?: THREE.Texture | null): void;
 };

package/dist/src/dev/devShader.d.ts

@@ -0,0 +1,5 @@
+export declare const isTraveler = true;
+export declare const glassHooks: {
+    uvModifier: string;
+    colorModifier: string;
+};

package/dist/src/types/common.d.ts

@@ -15,3 +15,7 @@ export interface BoxStyles {
     borderColor: string;
     borderWidth: string;
 }
+export interface ShaderHooks {
+    uvModifier?: string;
+    colorModifier?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/painter",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {

package/src/BoxGenerator.ts

@@ -1,5 +1,7 @@
 import * as THREE from "three";
-import { BoxStyles } from "./types";
+import { BoxStyles, ShaderHooks } from "./types";
+// [for dev]
+// import { glassHooks } from "./dev/devShader";
 
 function parsePixelValue(value: string | number): number {
   if (typeof value === "number") return value;
@@ -112,10 +114,8 @@ function parseColor(colorStr: string) {
     const g = parseInt(rgbaMatch[2], 10);
     const b = parseInt(rgbaMatch[3], 10);
     const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1.0;
-
     return { color: new THREE.Color(`rgb(${r}, ${g}, ${b})`), alpha: a };
   }
-
   return { color: new THREE.Color(colorStr), alpha: 1.0 };
 }
 
@@ -124,9 +124,11 @@ export function createBoxMaterial(
   width: number,
   height: number,
   texture: THREE.Texture | null = null,
-  hooks?: { uvModifier?: string; colorModifier?: string },
+  hooks?: ShaderHooks,
 ): THREE.ShaderMaterial {
   const hasTexture = texture !== null;
+  // [for dev]
+  // const activeHooks = hasTexture ? glassHooks : hooks;
 
   const declChunk = hasTexture
     ? /* glsl */ `
@@ -135,6 +137,7 @@ export function createBoxMaterial(
   `
     : "";
 
+  // [un dev]
   const uvChunk = hasTexture
     ? /* glsl */ `
     vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
@@ -143,14 +146,30 @@ export function createBoxMaterial(
   `
     : "";
 
+
+  // [for dev]
+  // const uvChunk = hasTexture
+  //   ? /* glsl */ `
+  //   vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+  //   vec2 resultUv = screenUv;
+  //   ${activeHooks?.uvModifier || ""}
+  // `
+  //   : "";
+
   const baseColorChunk = hasTexture
     ? /* glsl */ `
     baseColor = texture2D(uTexture, resultUv);
   `
     : "";
 
+  // [un dev]
   const colorModChunk = hooks?.colorModifier || "";
 
+  // [for dev]
+  // const colorModChunk = hasTexture
+  //   ? activeHooks?.colorModifier || ""
+  //   : hooks?.colorModifier || "";
+
   const fragmentShader = fragmentShaderTemplate
     .replace("#INJECT_DECLARATIONS", declChunk)
     .replace("#INJECT_UV_MODIFIER", uvChunk)
@@ -194,7 +213,7 @@ export function updateBoxMaterial(
   styles: BoxStyles,
   width: number,
   height: number,
-  texture?: THREE.Texture | null
+  texture?: THREE.Texture | null,
 ) {
   const parsedBg = parseColor(styles.backgroundColor);
   const parsedBorder = parseColor(styles.borderColor);

package/src/Painter.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { BoxStyles, TextStyles } from "./types";
+import { BoxStyles, TextStyles, ShaderHooks} from "./types";
 import { createBoxMaterial, updateBoxMaterial } from "./BoxGenerator";
 import { createTextTexture } from "./TextGenerator";
 
@@ -12,9 +12,10 @@ export const Painter = {
     height: number,
     quality: number = 2,
     texture: THREE.Texture | null = null,
+    shaderHooks?: ShaderHooks
   ): THREE.Material {
     if (type === "BOX") {
-      return createBoxMaterial(styles as BoxStyles, width, height, texture);
+      return createBoxMaterial(styles as BoxStyles, width, height, texture, shaderHooks);
     } else if (type === "TEXT") {
       const texture = createTextTexture(
         content || "",

package/src/dev/devShader.ts

@@ -0,0 +1,114 @@
+export const isTraveler = true;
+
+export const glassHooks = {
+  uvModifier: /* glsl */ `
+    // 1. 박스 크기에 비례한 두께감
+    // float thickness_uv = min(uSize.x, uSize.y) * 0.5; 
+    float thickness_uv = 25.0; 
+    float index = 1.3; // 굴절률 (공기: 1.0, 유리: 1.5~1.9)
+    float base_height = thickness_uv * 1.5;
+
+    // 2. 로컬 SDF 계산 (p는 픽셀 단위)
+    vec2 xRadii_uv = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+    float r_uv = mix(xRadii_uv.y, xRadii_uv.x, step(0.0, p.y));
+    float d_uv = sdRoundedBox(p, halfSize, r_uv);
+
+    // 3. 3D 노말(Normal) 계산
+    float dx_uv = dFdx(d_uv);
+    float dy_uv = dFdy(d_uv);
+    if (abs(dx_uv) < 0.001 && abs(dy_uv) < 0.001) {
+        vec2 fallbackDir = normalize(p);
+        dx_uv = fallbackDir.x; dy_uv = fallbackDir.y;
+    }
+    float n_cos_uv = max(thickness_uv + d_uv, 0.0) / max(thickness_uv, 0.001);
+    float n_sin_uv = sqrt(max(1.0 - n_cos_uv * n_cos_uv, 0.0));
+    vec3 normal_uv = normalize(vec3(dx_uv * n_cos_uv, dy_uv * n_cos_uv, n_sin_uv));
+
+    // 4. Z 높이 계산
+    float h = 0.0;
+    if (d_uv < -thickness_uv) {
+        h = thickness_uv;
+    } else if (d_uv < 0.0) {
+        float x = thickness_uv + d_uv;
+        h = sqrt(max(thickness_uv * thickness_uv - x * x, 0.0));
+    }
+
+    // 5. 굴절(Refraction) 적용
+    vec3 incident = vec3(0.0, 0.0, -1.0);
+    vec3 refract_vec = refract(incident, normal_uv, 1.0 / index);
+    
+    float denom = dot(vec3(0.0, 0.0, -1.0), refract_vec);
+    float refract_length = (h + base_height) / max(denom, 0.001); 
+    
+    // offsetPx는 '박스 내부의 픽셀 단위' 왜곡 거리입니다.
+    vec2 offsetPx = refract_vec.xy * refract_length;
+    
+    // [다시 복구!] 큰 배경 텍스쳐를 자르기 위해 screenUv를 사용
+    // 화면 1픽셀이 전체 screenUv(0~1)에서 차지하는 비율을 편미분으로 동적 계산
+    vec2 pixelToUv = vec2(dFdx(screenUv.x), dFdy(screenUv.y));
+    if (abs(pixelToUv.x) < 0.000001) pixelToUv.x = 1.0 / 1920.0; // 안전 장치
+    if (abs(pixelToUv.y) < 0.000001) pixelToUv.y = 1.0 / 1080.0; // 안전 장치
+    
+    // 픽셀 오프셋을 화면 UV 오프셋으로 변환
+    vec2 distortOffset = offsetPx * pixelToUv;
+
+    // vUv 대신 screenUv에서 왜곡값을 빼서 최종 배경 픽셀을 당겨옵니다.
+    resultUv = screenUv - distortOffset; 
+  `,
+
+  //   colorModifier: /* glsl */ `
+  //     // float thickness_c = min(uSize.x, uSize.y) * 0.5;
+  //     float thickness_c = 25.0;
+  //     float dx_c = dFdx(d);
+  //     float dy_c = dFdy(d);
+  //     if (abs(dx_c) < 0.001 && abs(dy_c) < 0.001) {
+  //         vec2 fallbackDir = normalize(p);
+  //         dx_c = fallbackDir.x; dy_c = fallbackDir.y;
+  //     }
+  //     float n_cos_c = max(thickness_c + d, 0.0) / max(thickness_c, 0.001);
+  //     float n_sin_c = sqrt(max(1.0 - n_cos_c * n_cos_c, 0.0));
+  //     vec3 normal_c = normalize(vec3(dx_c * n_cos_c, dy_c * n_cos_c, n_sin_c));
+
+  //     float edgeReflection = smoothstep(-5.0, 0.0, d) * smoothstep(0.0, -5.0, d);
+  //     float fresnel = pow(1.0 - max(dot(normal_c, vec3(0.0, 0.0, 1.0)), 0.0), 3.0);
+
+  //     finalColor.rgb += vec3(1.0) * (edgeReflection * 0.4 + fresnel * 0.5);
+  //   `,
+  colorModifier: /* glsl */ `
+    // 1. 노말 계산 (기존과 동일)
+    float thickness_c = 25.0;
+    float dx_c = dFdx(d);
+    float dy_c = dFdy(d);
+    if (abs(dx_c) < 0.001 && abs(dy_c) < 0.001) {
+        vec2 fallbackDir = normalize(p);
+        dx_c = fallbackDir.x; dy_c = fallbackDir.y;
+    }
+    float n_cos_c = max(thickness_c + d, 0.0) / max(thickness_c, 0.001);
+    float n_sin_c = sqrt(max(1.0 - n_cos_c * n_cos_c, 0.0));
+    vec3 normal_c = normalize(vec3(dx_c * n_cos_c, dy_c * n_cos_c, n_sin_c));
+
+    // ==========================================
+    // [애플 스타일 리퀴드 글래스 틴트 & 질감 추가]
+    // ==========================================
+
+    // A. 틴트(Tint) 조작
+    // 밝은 테마라면 vec3(1.0), 어두운 테마라면 vec3(0.1) 등을 사용
+    vec3 tintColor = vec3(0.03, 0.03, 0.8); 
+    float tintStrength = 0.3; // 틴트 강도 (0.1 ~ 0.3 사이 추천)
+    finalColor.rgb = mix(finalColor.rgb, tintColor, tintStrength);
+
+    // B. 프로스트 글래스 노이즈 (시각적 밀도감)
+    // vUv를 이용한 간단한 난수 생성으로 화면 픽셀 단위의 미세한 질감을 줌
+    float noise = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453) * 2.0 - 1.0;
+    finalColor.rgb += noise * 0.01; // 노이즈 강도 (너무 강하면 지저분해짐)
+
+    // C. 프레넬(Fresnel) 및 날카로운 단면 반사광
+    float fresnel = pow(1.0 - max(dot(normal_c, vec3(0.0, 0.0, 1.0)), 0.0), 4.0);
+    
+    // 기존의 두꺼운 15px 빛 맺힘 대신 1.5px~2px 수준의 예리한 테두리 하이라이트
+    float sharpEdge = smoothstep(-5.0, 0.0, d) * smoothstep(0.0, -5.0, d); 
+    
+    // 빛 합성 (테두리가 살짝 빛나며 유리 질감을 완성)
+    finalColor.rgb += vec3(1.0) * (sharpEdge * 0.6 + fresnel * 0.3);
+  `,
+};

package/src/types/common.ts

@@ -18,3 +18,9 @@ export interface BoxStyles {
   borderColor: string;
   borderWidth: string;
 }
+
+export interface ShaderHooks {
+  uvModifier?: string; 
+  colorModifier?: string; 
+}
+