@mirage-engine/painter 0.2.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @mirage-engine/painter
 
+## 0.4.0
+
+### Minor Changes
+
+- 4b9e1b0: shader hooks pipeline
+
+## 0.3.0
+
+### Minor Changes
+
+- e4efe5c: travel api
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/mirage-painter.js

@@ -1,138 +1,193 @@
 import * as l from "three";
-function b(o, e, t) {
-  const n = e.split(`
-`), r = [];
-  return n.forEach((i) => {
-    const a = i.split(" ");
-    let u = a[0];
-    for (let c = 1; c < a.length; c++) {
-      const d = a[c];
-      o.measureText(u + " " + d).width < t ? u += " " + d : (r.push(u), u = d);
+function h(e, r, o) {
+  const i = r.split(`
+`), a = [];
+  return i.forEach((n) => {
+    const t = n.split(" ");
+    let c = t[0];
+    for (let u = 1; u < t.length; u++) {
+      const s = t[u];
+      e.measureText(c + " " + s).width < o ? c += " " + s : (a.push(c), c = s);
     }
-    r.push(u);
-  }), r;
+    a.push(c);
+  }), a;
 }
-function m(o, e, t, n, r = 2) {
-  const i = document.createElement("canvas"), a = i.getContext("2d");
-  if (!a)
+function m(e, r, o, i, a = 2) {
+  const n = document.createElement("canvas"), t = n.getContext("2d");
+  if (!t)
     throw new Error("[Mirage] Failed to create canvas context");
-  const c = (window.devicePixelRatio || 1) * r;
-  i.width = t * c, i.height = n * c, a.scale(c, c), a.font = e.font, a.fillStyle = e.color, a.textBaseline = "top", a.globalAlpha = 1;
-  const d = b(a, o, t), v = e.lineHeight;
-  d.forEach((x, g) => {
-    const B = g * v + 2;
-    let h = 0;
-    e.textAlign === "center" ? h = t / 2 : e.textAlign === "right" && (h = t), a.textAlign = e.textAlign, a.fillText(x, h, B);
+  const u = (window.devicePixelRatio || 1) * a;
+  n.width = o * u, n.height = i * u, t.scale(u, u), t.font = r.font, t.fillStyle = r.color, t.textBaseline = "top", t.globalAlpha = 1;
+  const s = h(t, e, o), v = r.lineHeight;
+  s.forEach((B, p) => {
+    const g = p * v + 2;
+    let C = 0;
+    r.textAlign === "center" ? C = o / 2 : r.textAlign === "right" && (C = o), t.textAlign = r.textAlign, t.fillText(B, C, g);
   });
-  const s = new l.CanvasTexture(i);
-  return s.colorSpace = l.SRGBColorSpace, s.minFilter = l.LinearFilter, s.magFilter = l.LinearFilter, s.needsUpdate = !0, s;
+  const d = new l.CanvasTexture(n);
+  return d.colorSpace = l.SRGBColorSpace, d.minFilter = l.LinearFilter, d.magFilter = l.LinearFilter, d.needsUpdate = !0, d;
 }
-function p(o) {
-  return typeof o == "number" ? o : parseFloat(o) || 0;
+function f(e) {
+  return typeof e == "number" ? e : parseFloat(e) || 0;
 }
-const C = `
+function b(e, r) {
+  if (!r) {
+    e.set(0, 0, 0, 0);
+    return;
+  }
+  const o = r.split("/")[0].trim().split(/\s+/), i = f(o[0]), a = f(o[1] ?? o[0]), n = f(o[2] ?? o[0]), t = f(o[3] ?? o[1] ?? o[0]);
+  e.set(i, a, n, t);
+}
+const O = (
+  /* glsl */
+  `
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
-`, w = `
+`
+), T = (
+  /* glsl */
+  `
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uBorderRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
+
+  #INJECT_DECLARATIONS
 
-  // SDF 박스 함수
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
+
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
-    
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
 
-    float fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
-    
-    float borderAlpha = 0.0;
+    #INJECT_UV_MODIFIER
     
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // color decision pipeline
+    vec4 baseColor = vec4(uBgColor, uBgOpacity);
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    #INJECT_BASE_COLOR
+
+    // sdf shape pipeline
+    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+    float d = sdRoundedBox(p, halfSize, r);
+
+    float aa = 1.0; 
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    float halfBorder = uBorderWidth * 0.5;
+    float borderD = abs(d + halfBorder) - halfBorder;
+    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
+    if (uBorderWidth <= 0.01) {
+      borderAlpha = 0.0;
     }
-    
-    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
-    float finalOpacity = shapeAlpha * uOpacity;
-    
+
+    // final blending (border + background)
+    float aFront = borderAlpha;
+    float aBack = baseColor.a;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
+    vec4 finalColor = vec4(cOut, aOut);
+
+    // final color control (Tint, Noise)
+    #INJECT_COLOR_MODIFIER
+
+    float finalOpacity = finalColor.a * bgMask * uOpacity;
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+    #include <colorspace_fragment>
   }
-`;
-function f(o) {
-  if (!o || o === "transparent")
+`
+);
+function x(e) {
+  if (!e || e === "transparent")
     return { color: new l.Color(16777215), alpha: 0 };
-  const e = o.match(
+  const r = e.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
-  if (e) {
-    const t = parseInt(e[1], 10), n = parseInt(e[2], 10), r = parseInt(e[3], 10), i = e[4] !== void 0 ? parseFloat(e[4]) : 1;
-    return { color: new l.Color(`rgb(${t}, ${n}, ${r})`), alpha: i };
+  if (r) {
+    const o = parseInt(r[1], 10), i = parseInt(r[2], 10), a = parseInt(r[3], 10), n = r[4] !== void 0 ? parseFloat(r[4]) : 1;
+    return { color: new l.Color(`rgb(${o}, ${i}, ${a})`), alpha: n };
   }
-  return { color: new l.Color(o), alpha: 1 };
+  return { color: new l.Color(e), alpha: 1 };
 }
-function A(o, e, t) {
-  const n = f(o.backgroundColor), r = f(o.borderColor), i = {
-    uSize: { value: new l.Vector2(e, t) },
-    uRadius: { value: p(o.borderRadius) },
-    uBorderWidth: { value: p(o.borderWidth) },
-    uColor: { value: n.color },
-    uBorderColor: { value: r.color },
-    uOpacity: { value: o.opacity ?? 1 },
-    uBgOpacity: { value: n.alpha }
+function R(e, r, o, i = null, a) {
+  const n = i !== null, t = n ? (
+    /* glsl */
+    `
+    uniform sampler2D uTexture;
+    varying vec4 vScreenPos;
+  `
+  ) : "", c = n ? (
+    /* glsl */
+    `
+    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+    vec2 resultUv = screenUv;
+    ${(a == null ? void 0 : a.uvModifier) || ""}
+  `
+  ) : "", u = n ? (
+    /* glsl */
+    `
+    baseColor = texture2D(uTexture, resultUv);
+  `
+  ) : "", s = (a == null ? void 0 : a.colorModifier) || "", v = T.replace("#INJECT_DECLARATIONS", t).replace("#INJECT_UV_MODIFIER", c).replace("#INJECT_BASE_COLOR", u).replace("#INJECT_COLOR_MODIFIER", s), d = x(e.backgroundColor), B = x(e.borderColor), p = {
+    uSize: { value: new l.Vector2(r, o) },
+    uBorderRadius: { value: new l.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: f(e.borderWidth) },
+    uBgColor: { value: d.color },
+    uBorderColor: { value: B.color },
+    uOpacity: { value: e.opacity ?? 1 },
+    uBgOpacity: { value: d.alpha },
+    uBorderOpacity: { value: B.alpha },
+    uTexture: { value: null }
   };
-  return new l.ShaderMaterial({
-    uniforms: i,
-    vertexShader: C,
-    fragmentShader: w,
+  return b(p.uBorderRadius.value, e.borderRadius), n && (p.uTexture.value = i), new l.ShaderMaterial({
+    uniforms: p,
+    vertexShader: O,
+    fragmentShader: v,
     transparent: !0,
     side: l.FrontSide
     // for better performance
   });
 }
-function S(o, e, t, n) {
-  const r = f(e.backgroundColor), i = f(e.borderColor);
-  o.uniforms.uSize.value.set(t, n), o.uniforms.uRadius.value = p(e.borderRadius), o.uniforms.uBorderWidth.value = p(e.borderWidth), o.uniforms.uColor.value.copy(r.color), o.uniforms.uBorderColor.value.copy(i.color), o.uniforms.uOpacity.value = e.opacity ?? 1, o.uniforms.uBgOpacity.value = r.alpha;
+function E(e, r, o, i, a) {
+  const n = x(r.backgroundColor), t = x(r.borderColor);
+  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 O = {
-  create(o, e, t, n, r, i = 2) {
-    if (o === "BOX")
-      return A(e, n, r);
-    if (o === "TEXT") {
-      const a = m(
-        t || "",
-        e,
-        n,
+const S = {
+  create(e, r, o, i, a, n = 2, t = null, c) {
+    if (e === "BOX")
+      return R(r, i, a, t, c);
+    if (e === "TEXT") {
+      const u = m(
+        o || "",
         r,
-        i
+        i,
+        a,
+        n
       );
       return new l.MeshBasicMaterial({
-        map: a,
+        map: u,
         transparent: !0,
         side: l.FrontSide,
         color: 16777215
@@ -140,31 +195,32 @@ const O = {
     }
     return new l.MeshBasicMaterial({ visible: !1 });
   },
-  update(o, e, t, n, r, i, a = 2) {
-    if (e === "BOX")
-      S(
+  update(e, r, o, i, a, n, t = 2, c) {
+    if (r === "BOX")
+      E(
+        e,
         o,
-        t,
-        r,
-        i
+        a,
+        n,
+        c
       );
-    else if (e === "TEXT") {
-      const u = o;
+    else if (r === "TEXT") {
+      const u = e;
       u.map && u.map.dispose();
-      const c = m(
-        n || "",
-        t,
-        r,
-        i,
-        a
+      const s = m(
+        i || "",
+        o,
+        a,
+        n,
+        t
       );
-      u.map = c, u.needsUpdate = !0;
+      u.map = s, u.needsUpdate = !0;
     }
   }
 };
 export {
-  O as Painter,
-  A as createBoxMaterial,
+  S as Painter,
+  R as createBoxMaterial,
   m as createTextTexture,
-  S as updateBoxMaterial
+  E as updateBoxMaterial
 };

package/dist/mirage-painter.umd.js

@@ -1,55 +1,85 @@
-(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.MiragePainter={},c.THREE))})(this,function(c,s){"use strict";function C(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const l=C(s);function w(e,o,r){const t=o.split(`
-`),a=[];return t.forEach(i=>{const n=i.split(" ");let u=n[0];for(let d=1;d<n.length;d++){const f=n[d];e.measureText(u+" "+f).width<r?u+=" "+f:(a.push(u),u=f)}a.push(u)}),a}function m(e,o,r,t,a=2){const i=document.createElement("canvas"),n=i.getContext("2d");if(!n)throw new Error("[Mirage] Failed to create canvas context");const d=(window.devicePixelRatio||1)*a;i.width=r*d,i.height=t*d,n.scale(d,d),n.font=o.font,n.fillStyle=o.color,n.textBaseline="top",n.globalAlpha=1;const f=w(n,e,r),B=o.lineHeight;f.forEach((S,M)=>{const R=M*B+2;let g=0;o.textAlign==="center"?g=r/2:o.textAlign==="right"&&(g=r),n.textAlign=o.textAlign,n.fillText(S,g,R)});const p=new l.CanvasTexture(i);return p.colorSpace=l.SRGBColorSpace,p.minFilter=l.LinearFilter,p.magFilter=l.LinearFilter,p.needsUpdate=!0,p}function h(e){return typeof e=="number"?e:parseFloat(e)||0}const A=`
+(function(s,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],v):(s=typeof globalThis<"u"?globalThis:s||self,v(s.MiragePainter={},s.THREE))})(this,function(s,v){"use strict";function S(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,i.get?i:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const c=S(v);function E(e,r,o){const i=r.split(`
+`),t=[];return i.forEach(n=>{const a=n.split(" ");let l=a[0];for(let u=1;u<a.length;u++){const d=a[u];e.measureText(l+" "+d).width<o?l+=" "+d:(t.push(l),l=d)}t.push(l)}),t}function m(e,r,o,i,t=2){const n=document.createElement("canvas"),a=n.getContext("2d");if(!a)throw new Error("[Mirage] Failed to create canvas context");const u=(window.devicePixelRatio||1)*t;n.width=o*u,n.height=i*u,a.scale(u,u),a.font=r.font,a.fillStyle=r.color,a.textBaseline="top",a.globalAlpha=1;const d=E(a,e,o),x=r.lineHeight;d.forEach((b,B)=>{const R=B*x+2;let C=0;r.textAlign==="center"?C=o/2:r.textAlign==="right"&&(C=o),a.textAlign=r.textAlign,a.fillText(b,C,R)});const f=new c.CanvasTexture(n);return f.colorSpace=c.SRGBColorSpace,f.minFilter=c.LinearFilter,f.magFilter=c.LinearFilter,f.needsUpdate=!0,f}function p(e){return typeof e=="number"?e:parseFloat(e)||0}function h(e,r){if(!r){e.set(0,0,0,0);return}const o=r.split("/")[0].trim().split(/\s+/),i=p(o[0]),t=p(o[1]??o[0]),n=p(o[2]??o[0]),a=p(o[3]??o[1]??o[0]);e.set(i,t,n,a)}const M=`
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
-`,O=`
+`,w=`
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uBorderRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
+
+  #INJECT_DECLARATIONS
 
-  // SDF 박스 함수
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
+
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
-    
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
 
-    float fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
+    #INJECT_UV_MODIFIER
     
-    float borderAlpha = 0.0;
-    
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // color decision pipeline
+    vec4 baseColor = vec4(uBgColor, uBgOpacity);
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    #INJECT_BASE_COLOR
+
+    // sdf shape pipeline
+    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+    float d = sdRoundedBox(p, halfSize, r);
+
+    float aa = 1.0; 
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    float halfBorder = uBorderWidth * 0.5;
+    float borderD = abs(d + halfBorder) - halfBorder;
+    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
+    if (uBorderWidth <= 0.01) {
+      borderAlpha = 0.0;
     }
-    
-    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
-    float finalOpacity = shapeAlpha * uOpacity;
-    
+
+    // final blending (border + background)
+    float aFront = borderAlpha;
+    float aBack = baseColor.a;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
+    vec4 finalColor = vec4(cOut, aOut);
+
+    // final color control (Tint, Noise)
+    #INJECT_COLOR_MODIFIER
+
+    float finalOpacity = finalColor.a * bgMask * uOpacity;
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+    #include <colorspace_fragment>
   }
-`;function v(e){if(!e||e==="transparent")return{color:new l.Color(16777215),alpha:0};const o=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(o){const r=parseInt(o[1],10),t=parseInt(o[2],10),a=parseInt(o[3],10),i=o[4]!==void 0?parseFloat(o[4]):1;return{color:new l.Color(`rgb(${r}, ${t}, ${a})`),alpha:i}}return{color:new l.Color(e),alpha:1}}function x(e,o,r){const t=v(e.backgroundColor),a=v(e.borderColor),i={uSize:{value:new l.Vector2(o,r)},uRadius:{value:h(e.borderRadius)},uBorderWidth:{value:h(e.borderWidth)},uColor:{value:t.color},uBorderColor:{value:a.color},uOpacity:{value:e.opacity??1},uBgOpacity:{value:t.alpha}};return new l.ShaderMaterial({uniforms:i,vertexShader:A,fragmentShader:O,transparent:!0,side:l.FrontSide})}function b(e,o,r,t){const a=v(o.backgroundColor),i=v(o.borderColor);e.uniforms.uSize.value.set(r,t),e.uniforms.uRadius.value=h(o.borderRadius),e.uniforms.uBorderWidth.value=h(o.borderWidth),e.uniforms.uColor.value.copy(a.color),e.uniforms.uBorderColor.value.copy(i.color),e.uniforms.uOpacity.value=o.opacity??1,e.uniforms.uBgOpacity.value=a.alpha}const T={create(e,o,r,t,a,i=2){if(e==="BOX")return x(o,t,a);if(e==="TEXT"){const n=m(r||"",o,t,a,i);return new l.MeshBasicMaterial({map:n,transparent:!0,side:l.FrontSide,color:16777215})}return new l.MeshBasicMaterial({visible:!1})},update(e,o,r,t,a,i,n=2){if(o==="BOX")b(e,r,a,i);else if(o==="TEXT"){const u=e;u.map&&u.map.dispose();const d=m(t||"",r,a,i,n);u.map=d,u.needsUpdate=!0}}};c.Painter=T,c.createBoxMaterial=x,c.createTextTexture=m,c.updateBoxMaterial=b,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+`;function g(e){if(!e||e==="transparent")return{color:new c.Color(16777215),alpha:0};const r=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(r){const o=parseInt(r[1],10),i=parseInt(r[2],10),t=parseInt(r[3],10),n=r[4]!==void 0?parseFloat(r[4]):1;return{color:new c.Color(`rgb(${o}, ${i}, ${t})`),alpha:n}}return{color:new c.Color(e),alpha:1}}function O(e,r,o,i=null,t){const n=i!==null,a=n?`
+    uniform sampler2D uTexture;
+    varying vec4 vScreenPos;
+  `:"",l=n?`
+    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+    vec2 resultUv = screenUv;
+    ${(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,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,4 +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): THREE.ShaderMaterial;
-export declare function updateBoxMaterial(material: THREE.ShaderMaterial, styles: BoxStyles, width: number, height: number): void;
+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): THREE.Material;
-    update(material: THREE.Material, type: "BOX" | "TEXT", styles: any, content: string, width: number, height: number, quality?: number): void;
+    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.2.3",
+  "version": "0.4.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {

package/src/BoxGenerator.ts

@@ -1,65 +1,102 @@
 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;
   return parseFloat(value) || 0;
 }
 
-const vertexShader = `
+function setBorderRadius(target: THREE.Vector4, radius: string) {
+  if (!radius) {
+    target.set(0, 0, 0, 0);
+    return;
+  }
+  const arr = radius.split("/")[0].trim().split(/\s+/);
+  const tl = parsePixelValue(arr[0]);
+  const tr = parsePixelValue(arr[1] ?? arr[0]);
+  const br = parsePixelValue(arr[2] ?? arr[0]);
+  const bl = parsePixelValue(arr[3] ?? arr[1] ?? arr[0]);
+
+  target.set(tl, tr, br, bl);
+}
+
+const vertexShader = /* glsl */ `
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
 `;
 
-const fragmentShader = `
+const fragmentShaderTemplate = /* glsl */ `
+
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform float uRadius;
+  uniform vec4 uBorderRadius;
   uniform float uBorderWidth;
-  uniform vec3 uColor;
+  uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
   uniform float uOpacity;
   uniform float uBgOpacity;
+  uniform float uBorderOpacity;
+
+  #INJECT_DECLARATIONS
 
-  // SDF 박스 함수
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
+
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
-    
-    float d = sdRoundedBox(p, halfSize, uRadius);
-    
-    float smoothEdge = 1.0; 
 
-    float fillAlpha = 1.0 - smoothstep(-uBorderWidth - smoothEdge, -uBorderWidth, d);
+    #INJECT_UV_MODIFIER
     
-    float borderAlpha = 0.0;
-    
-    if (uBorderWidth > 0.01) {
-      borderAlpha = (1.0 - smoothstep(0.0, smoothEdge, d)) - fillAlpha;
-    }
+    // color decision pipeline
+    vec4 baseColor = vec4(uBgColor, uBgOpacity);
 
-    vec3 color = uColor;
-    float totalAlpha = borderAlpha + fillAlpha;
-    
-    if (totalAlpha > 0.001) {
-       color = mix(uColor, uBorderColor, borderAlpha / totalAlpha);
+    #INJECT_BASE_COLOR
+
+    // sdf shape pipeline
+    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+    float d = sdRoundedBox(p, halfSize, r);
+
+    float aa = 1.0; 
+    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+
+    float halfBorder = uBorderWidth * 0.5;
+    float borderD = abs(d + halfBorder) - halfBorder;
+    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
+    if (uBorderWidth <= 0.01) {
+      borderAlpha = 0.0;
     }
-    
-    float shapeAlpha = borderAlpha + (fillAlpha * uBgOpacity);
-    float finalOpacity = shapeAlpha * uOpacity;
-    
+
+    // final blending (border + background)
+    float aFront = borderAlpha;
+    float aBack = baseColor.a;
+    float aOut = aFront + aBack * (1.0 - aFront);
+
+    float safeAlpha = max(aOut, 0.0001);
+    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
+    vec4 finalColor = vec4(cOut, aOut);
+
+    // final color control (Tint, Noise)
+    #INJECT_COLOR_MODIFIER
+
+    float finalOpacity = finalColor.a * bgMask * uOpacity;
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(color, finalOpacity);
+    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+
+    #include <colorspace_fragment>
   }
 `;
 
@@ -77,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 };
 }
 
@@ -88,19 +123,79 @@ export function createBoxMaterial(
   styles: BoxStyles,
   width: number,
   height: number,
+  texture: THREE.Texture | null = null,
+  hooks?: ShaderHooks,
 ): THREE.ShaderMaterial {
+  const hasTexture = texture !== null;
+  // [for dev]
+  // const activeHooks = hasTexture ? glassHooks : hooks;
+
+  const declChunk = hasTexture
+    ? /* glsl */ `
+    uniform sampler2D uTexture;
+    varying vec4 vScreenPos;
+  `
+    : "";
+
+  // [un dev]
+  const uvChunk = hasTexture
+    ? /* glsl */ `
+    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+    vec2 resultUv = screenUv;
+    ${hooks?.uvModifier || ""}
+  `
+    : "";
+
+
+  // [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)
+    .replace("#INJECT_BASE_COLOR", baseColorChunk)
+    .replace("#INJECT_COLOR_MODIFIER", colorModChunk);
+
+  // uniform setting
   const parsedBg = parseColor(styles.backgroundColor);
   const parsedBorder = parseColor(styles.borderColor);
-
   const uniforms = {
     uSize: { value: new THREE.Vector2(width, height) },
-    uRadius: { value: parsePixelValue(styles.borderRadius) },
+    uBorderRadius: { value: new THREE.Vector4(0, 0, 0, 0) },
     uBorderWidth: { value: parsePixelValue(styles.borderWidth) },
-    uColor: { value: parsedBg.color },
+    uBgColor: { value: parsedBg.color },
     uBorderColor: { value: parsedBorder.color },
     uOpacity: { value: styles.opacity ?? 1.0 },
     uBgOpacity: { value: parsedBg.alpha },
+    uBorderOpacity: { value: parsedBorder.alpha },
+    uTexture: { value: null as THREE.Texture | null },
   };
+  // border radius value initialize
+  setBorderRadius(uniforms.uBorderRadius.value, styles.borderRadius);
+
+  if (hasTexture) {
+    uniforms.uTexture.value = texture;
+  }
 
   const material = new THREE.ShaderMaterial({
     uniforms: uniforms,
@@ -118,18 +213,24 @@ export function updateBoxMaterial(
   styles: BoxStyles,
   width: number,
   height: number,
+  texture?: THREE.Texture | null,
 ) {
   const parsedBg = parseColor(styles.backgroundColor);
   const parsedBorder = parseColor(styles.borderColor);
 
   material.uniforms.uSize.value.set(width, height);
 
-  material.uniforms.uRadius.value = parsePixelValue(styles.borderRadius);
+  // material.uniforms.uBorderRadius.value = parsePixelValue(styles.borderRadius);
+  setBorderRadius(material.uniforms.uBorderRadius.value, styles.borderRadius);
   material.uniforms.uBorderWidth.value = parsePixelValue(styles.borderWidth);
 
-  material.uniforms.uColor.value.copy(parsedBg.color);
+  material.uniforms.uBgColor.value.copy(parsedBg.color);
   material.uniforms.uBorderColor.value.copy(parsedBorder.color);
 
   material.uniforms.uOpacity.value = styles.opacity ?? 1.0;
   material.uniforms.uBgOpacity.value = parsedBg.alpha;
+  material.uniforms.uBorderOpacity.value = parsedBorder.alpha;
+  if (material.uniforms.uTexture && texture !== undefined) {
+    material.uniforms.uTexture.value = texture;
+  }
 }

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";
 
@@ -11,9 +11,11 @@ export const Painter = {
     width: number,
     height: number,
     quality: number = 2,
+    texture: THREE.Texture | null = null,
+    shaderHooks?: ShaderHooks
   ): THREE.Material {
     if (type === "BOX") {
-      return createBoxMaterial(styles as BoxStyles, width, height);
+      return createBoxMaterial(styles as BoxStyles, width, height, texture, shaderHooks);
     } else if (type === "TEXT") {
       const texture = createTextTexture(
         content || "",
@@ -42,6 +44,7 @@ export const Painter = {
     width: number,
     height: number,
     quality: number = 2,
+    texture?: THREE.Texture | null
   ) {
     if (type === "BOX") {
       updateBoxMaterial(
@@ -49,6 +52,7 @@ export const Painter = {
         styles as BoxStyles,
         width,
         height,
+        texture
       );
     } else if (type === "TEXT") {
       const basicMat = material as THREE.MeshBasicMaterial;

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; 
+}
+