@mirage-engine/painter 0.4.0 → 1.0.0

package/dist/mirage-painter.umd.js

@@ -1,85 +1,145 @@
-(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;
+(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.MiragePainter={},d.THREE))})(this,function(d,h){"use strict";var V=Object.defineProperty;var D=(d,h,m)=>h in d?V(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m;var S=(d,h,m)=>(D(d,typeof h!="symbol"?h+"":h,m),m);function m(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const f=m(h);class y{static getBaseline(e){if(this.cache.has(e))return this.cache.get(e);const t=this.calculateBaselineFromDOM(e);return this.cache.set(e,t),t}static calculateBaselineFromDOM(e){if(typeof document>"u")return 0;const t=document.createElement("div"),n=document.createElement("span"),r=document.createElement("img");t.style.visibility="hidden",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.font=e,t.style.margin="0",t.style.padding="0",t.style.border="none",n.style.margin="0",n.style.padding="0",n.style.border="none",n.style.lineHeight="normal",r.width=1,r.height=1,r.style.verticalAlign="baseline",n.appendChild(document.createTextNode("Hidden Text")),t.appendChild(n),t.appendChild(r),document.body.appendChild(t);const i=r.offsetTop-n.offsetTop;return document.body.removeChild(t),i}}S(y,"cache",new Map);class I extends f.MeshBasicMaterial{constructor(t,n,r,i,a=2){super({transparent:!0,side:f.FrontSide,color:16777215});S(this,"canvas");S(this,"ctx");S(this,"qualityFactor");if(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),!this.ctx)throw new Error("[Mirage] Failed to create canvas context");this.qualityFactor=a,this.map=new f.CanvasTexture(this.canvas),this.map.colorSpace=f.LinearSRGBColorSpace,this.map.minFilter=f.LinearFilter,this.map.magFilter=f.LinearFilter,this.updateText(t,n,r,i)}wrapText(t,n){const r=t.split(`
+`),i=[];return r.forEach(a=>{const c=a.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(c.length===0){i.push("");return}let l=c[0];for(let s=1;s<c.length;s++){const u=c[s];this.ctx.measureText(l+u).width<=n+2?l+=u:(l&&i.push(l),l=u.trimStart())}l&&i.push(l)}),i}updateText(t,n,r,i,a){a!==void 0&&(this.qualityFactor=a);const l=(window.devicePixelRatio||1)*this.qualityFactor,s=r*l,u=i*l;this.canvas.width!==s||this.canvas.height!==u?(this.canvas.width=s,this.canvas.height=u):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(l,0,0,l,0,0),this.ctx.font=n.font,this.ctx.fillStyle=n.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const b=this.wrapText(t,r),v=n.lineHeight,g=y.getBaseline(n.font);b.forEach((p,B)=>{const z=B*v+g;let O=0;n.textAlign==="center"?O=r/2:n.textAlign==="right"&&(O=r),this.ctx.textAlign=n.textAlign,this.ctx.fillText(p,O,z)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function C(o){return typeof o=="number"?o:parseFloat(o)||0}function x(o){if(!o||o==="transparent")return{color:new f.Color(16777215),alpha:0};const e=o.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 f.Color(`rgb(${t}, ${n}, ${r})`),alpha:i}}return{color:new f.Color(o),alpha:1}}function M(o){const e=[];let t="",n=0;for(let r=0;r<o.length;r++){const i=o[r];if(i==="(")n++;else if(i===")")n--;else if(i===","&&n===0){e.push(t.trim()),t="";continue}t+=i}return t&&e.push(t.trim()),e}function R(o){if(!o||typeof o!="string"||!o.includes("linear-gradient"))return null;const e=o.match(/linear-gradient\((.*)\)/);if(!e)return null;const t=e[1],n=M(t);let r=Math.PI,i=0;const a=n[0].trim();if(a.startsWith("to "))a==="to top"?r=0:a==="to right"?r=Math.PI/2:a==="to bottom"?r=Math.PI:a==="to left"?r=Math.PI*1.5:a==="to top right"||a==="to right top"?r=Math.PI/4:a==="to bottom right"||a==="to right bottom"?r=Math.PI*.75:a==="to bottom left"||a==="to left bottom"?r=Math.PI*1.25:(a==="to top left"||a==="to left top")&&(r=Math.PI*1.75),i=1;else if(a.endsWith("deg")||a.endsWith("rad")||a.endsWith("turn")){const l=parseFloat(a);a.endsWith("deg")?r=l*(Math.PI/180):a.endsWith("rad")?r=l:a.endsWith("turn")&&(r=l*Math.PI*2),i=1}const c=[];for(let l=i;l<n.length&&!(c.length>=8);l++){const s=n[l].trim(),u=s.lastIndexOf(" ");let b=s,v=null;if(u!==-1&&!s.endsWith(")")){const p=s.substring(u+1);(p.endsWith("%")||p.endsWith("px")||!isNaN(parseFloat(p)))&&(b=s.substring(0,u).trim(),v=p)}const g=x(b);c.push({color:g.color,alpha:g.alpha,rawStop:v,stop:0})}if(c.length>0){for(let s=0;s<c.length;s++)c[s].rawStop!==null&&(c[s].stop=parseFloat(c[s].rawStop)/100);c[0].rawStop===null&&(c[0].stop=0),c.length>1&&c[c.length-1].rawStop===null&&(c[c.length-1].stop=1);let l=0;for(let s=1;s<c.length;s++)if(c[s].rawStop!==null||s===c.length-1){const u=s-l;if(u>1){const b=c[l].stop,g=(c[s].stop-b)/u;for(let p=1;p<u;p++)c[l+p].stop=b+g*p}l=s}}return{angle:r,stops:c}}const E=`varying vec2 vUv;
+varying vec4 vScreenPos;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  vScreenPos = gl_Position;
+}`,L=`varying vec2 vUv;
+uniform vec2 uSize;
+uniform vec4 uBorderRadius;
+uniform float uBorderWidth;
+uniform vec4 uBgColor;
+uniform vec4 uBorderColor;
+uniform float uOpacity;
+
+uniform int uGradientCount;
+uniform float uGradientAngle;
+uniform vec4 uGradientColors[8];
+uniform float uGradientStops[8];
+
+#INJECT_DECLARATIONS
+
+vec3 linearToSrgb(vec3 linearColor) {
+    vec3 linearPart = 12.92 * linearColor;
+    vec3 curvePart = 1.055 * pow(linearColor, vec3(1.0 / 2.4)) - 0.055;
+    vec3 switchCondition = step(vec3(0.0031308), linearColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
+
+vec3 srgbToLinear(vec3 srgbColor) {
+    vec3 linearPart = srgbColor / 12.92;
+    vec3 curvePart = pow((srgbColor + vec3(0.055)) / 1.055, vec3(2.4));
+    vec3 switchCondition = step(vec3(0.04045), srgbColor);
+    return mix(linearPart, curvePart, switchCondition);
+}
+
+vec4 blendSrcOverInLinear(vec4 front, vec4 back) {
+  front.rgb = srgbToLinear(front.rgb);
+  back.rgb  = srgbToLinear(back.rgb);
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(linearToSrgb(cOut), aOut);
+}
+
+vec4 blendSrcOver(vec4 front, vec4 back) {
+  float aOut = front.a + back.a * (1.0 - front.a);
+  float safeAlpha = max(aOut, 0.0001);
+  vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
+  return vec4(cOut, aOut);
+}
+
+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;
+}
+
+float sdVisualBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  float n = 2.01; 
+  float d = pow(pow(max(q.x, 0.0), n) + pow(max(q.y, 0.0), n), 1.0/n) - r;
+  return min(max(q.x, q.y), 0.0) + d;
+}
+
+vec4 calculateGradientLayer(vec2 uv) {
+  if (uGradientCount < 2) return uGradientColors[0];
+
+  vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
+  vec2 p = (uv - 0.5) * uSize;
+  float proj = dot(p, dir);
+  float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
+  float t = clamp((proj / L) + 0.5, 0.0, 1.0);
+  
+  vec4 color = uGradientColors[0];
+  for (int i = 1; i < 8; i++) {
+    if (i >= uGradientCount) break;
+    float prevStop = uGradientStops[i-1];
+    float currStop = uGradientStops[i];
+    
+    float factor = clamp((t - prevStop) / (currStop - prevStop + 0.00001), 0.0, 1.0);
+    color = mix(color, uGradientColors[i], factor);
   }
-`,w=`
+  // return vec4(linearToSrgb(color.rgb), color.a);
+  return vec4(color);
+}
 
-  varying vec2 vUv;
-  
-  uniform vec2 uSize;
-  uniform vec4 uBorderRadius;
-  uniform float uBorderWidth;
-  uniform vec3 uBgColor;
-  uniform vec3 uBorderColor;
-  uniform float uOpacity;
-  uniform float uBgOpacity;
-  uniform float uBorderOpacity;
+void main() {
+  vec2 p = (vUv - 0.5) * uSize;
+  vec2 halfSize = uSize * 0.5;
 
-  #INJECT_DECLARATIONS
+  #INJECT_UV_MODIFIER
 
-  float sdRoundedBox(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - b + r;
+  // color decision pipeline
+  vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
 
-    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+  if (uGradientCount > 0) {
+    vec4 gradColor = calculateGradientLayer(vUv);
+    baseColor = blendSrcOver(gradColor, baseColor);
   }
 
-  void main() {
-    vec2 p = (vUv - 0.5) * uSize;
-    vec2 halfSize = uSize * 0.5;
+  #INJECT_BASE_COLOR
 
-    #INJECT_UV_MODIFIER
-    
-    // color decision pipeline
-    vec4 baseColor = vec4(uBgColor, uBgOpacity);
+  // Hybrid SDF
+  vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
+  float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
+  r = min(r, min(halfSize.x, halfSize.y));
 
-    #INJECT_BASE_COLOR
+  float d = sdRoundedBox(p, halfSize, r);
 
-    // 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 d_smooth = sdVisualBox(p, halfSize, r);
+  float d_visual = d_smooth / fwidth(d_smooth);
 
-    float aa = 1.0; 
-    float bgMask = 1.0 - smoothstep(0.0, aa, d);
+  // rendering pipeline
+  float bgMask = 1.0 - smoothstep(-0.5, 0.5, d_visual);
 
-    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 halfBorder = uBorderWidth * 0.5;
+  float borderD = abs(d + halfBorder) - halfBorder;
+  float borderAlpha = (1.0 - smoothstep(0.0, 1.0, borderD)) * uBorderColor.a; 
+  if (uBorderWidth <= 0.01) {
+    borderAlpha = 0.0;
+  }
 
-    // final blending (border + background)
-    float aFront = borderAlpha;
-    float aBack = baseColor.a;
-    float aOut = aFront + aBack * (1.0 - aFront);
+  // final blending (border + background) using blendSrcOver
+  vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
+  vec4 finalColor = blendSrcOver(borderLayer, baseColor);
+  // final color control (Tint, Noise)
+  #INJECT_COLOR_MODIFIER
 
-    float safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
-    vec4 finalColor = vec4(cOut, aOut);
+  float finalOpacity = finalColor.a * bgMask * uOpacity;
+  if (finalOpacity < 0.001) discard;
 
-    // final color control (Tint, Noise)
-    #INJECT_COLOR_MODIFIER
+  gl_FragColor = vec4(finalColor.rgb, finalOpacity);
 
-    float finalOpacity = finalColor.a * bgMask * uOpacity;
-    if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
+  // #include <colorspace_fragment>
+}
+`,_=`uniform sampler2D uTexture;
+varying vec4 vScreenPos;
+uniform vec2 uTextureRepeat;
+uniform vec2 uTextureOffset;`,F=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+vec2 resultUv = screenUv;
 
-    #include <colorspace_fragment>
-  }
-`;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"})});
+`,W=`vec4 texColor = texture2D(uTexture, resultUv);
+baseColor = blendSrcOver(baseColor, texColor);`,k={vertexShader:E,fragmentShader:L},w={declChunk:_,uvChunk:F,baseColorChunk:W};function A(o,e,t,n=null,r){const i=n!==null||!!o.imageSrc,a=i?w.declChunk:"",c=o.isTraveler?w.uvChunk:`vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
+`,l=i?c+((r==null?void 0:r.uvModifier)||""):"",s=i?w.baseColorChunk:"",u=(r==null?void 0:r.colorModifier)||"",b=k.fragmentShader.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",l).replace("#INJECT_BASE_COLOR",s).replace("#INJECT_COLOR_MODIFIER",u),v=x(o.backgroundColor),g=x(o.borderColor),p={uSize:{value:new f.Vector2(e,t)},uBgColor:{value:new f.Vector4(v.color.r,v.color.g,v.color.b,v.alpha)},uBorderColor:{value:new f.Vector4(g.color.r,g.color.g,g.color.b,g.alpha)},uBorderRadius:{value:new f.Vector4(0,0,0,0)},uBorderWidth:{value:C(o.borderWidth)},uOpacity:{value:o.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new f.Vector2(1,1)},uTextureOffset:{value:new f.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new f.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};G(p.uBorderRadius.value,o.borderRadius),i&&(p.uTexture.value=n);const B=new f.ShaderMaterial({uniforms:p,vertexShader:k.vertexShader,fragmentShader:b,transparent:!0,side:f.FrontSide});return o.backgroundImage&&T(B,{backgroundImage:o.backgroundImage}),B}function P(o,e,t,n,r){const i=C(e.borderWidth);T(o,{width:t,height:n,borderRadius:e.borderRadius,borderWidth:i,backgroundColor:e.backgroundColor,borderColor:e.borderColor,opacity:e.opacity,texture:r,backgroundImage:e.backgroundImage})}function T(o,e){var n;if(e.width!==void 0&&e.height!==void 0&&o.uniforms.uSize.value.set(e.width,e.height),e.borderRadius!==void 0&&G(o.uniforms.uBorderRadius.value,e.borderRadius),e.borderWidth!==void 0&&(o.uniforms.uBorderWidth.value=e.borderWidth),e.backgroundColor!==void 0)if(Array.isArray(e.backgroundColor)){const r=o.uniforms.uBgColor.value.w;o.uniforms.uBgColor.value.set(e.backgroundColor[0],e.backgroundColor[1],e.backgroundColor[2],r)}else if(typeof e.backgroundColor=="string"){const r=x(e.backgroundColor);o.uniforms.uBgColor.value.set(r.color.r,r.color.g,r.color.b,r.alpha)}else{const r=o.uniforms.uBgColor.value.w;o.uniforms.uBgColor.value.set(e.backgroundColor.r,e.backgroundColor.g,e.backgroundColor.b,r)}if(e.borderColor!==void 0)if(Array.isArray(e.borderColor)){const r=o.uniforms.uBorderColor.value.w;o.uniforms.uBorderColor.value.set(e.borderColor[0],e.borderColor[1],e.borderColor[2],r)}else if(typeof e.borderColor=="string"){const r=x(e.borderColor);o.uniforms.uBorderColor.value.set(r.color.r,r.color.g,r.color.b,r.alpha)}else{const r=o.uniforms.uBorderColor.value.w;o.uniforms.uBorderColor.value.set(e.borderColor.r,e.borderColor.g,e.borderColor.b,r)}e.opacity!==void 0&&(o.uniforms.uOpacity.value=e.opacity),e.bgOpacity!==void 0&&(o.uniforms.uBgColor.value.w=e.bgOpacity),e.borderOpacity!==void 0&&(o.uniforms.uBorderColor.value.w=e.borderOpacity),o.uniforms.uTexture&&e.texture!==void 0&&(o.uniforms.uTexture.value=e.texture);const t=e.texture!==void 0?e.texture:(n=o.uniforms.uTexture)==null?void 0:n.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const r=t.image.width,i=t.image.height,a=e.width??o.uniforms.uSize.value.x,c=e.height??o.uniforms.uSize.value.y;if(r&&i&&a&&c){const l=r/i,s=a/c;if(l>s){const u=s/l;o.uniforms.uTextureRepeat.value.set(u,1),o.uniforms.uTextureOffset.value.set((1-u)/2,0)}else{const u=l/s;o.uniforms.uTextureRepeat.value.set(1,u),o.uniforms.uTextureOffset.value.set(0,(1-u)/2)}}}else o.uniforms.uTextureRepeat&&(o.uniforms.uTextureRepeat.value.set(1,1),o.uniforms.uTextureOffset.value.set(0,0));if(e.backgroundImage!==void 0){const r=R(e.backgroundImage);if(r){o.uniforms.uGradientCount.value=r.stops.length,o.uniforms.uGradientAngle.value=r.angle;for(let i=0;i<8;i++)if(i<r.stops.length){const a=r.stops[i];o.uniforms.uGradientColors.value[i].set(a.color.r,a.color.g,a.color.b,a.alpha),console.log(a.color.r,a.color.g,a.color.b),o.uniforms.uGradientStops.value[i]=a.stop}else o.uniforms.uGradientColors.value[i].set(0,0,0,0),o.uniforms.uGradientStops.value[i]=1}else o.uniforms.uGradientCount.value=0}}function G(o,e){if(e==null){o.set(0,0,0,0);return}if(typeof e=="number"){o.set(e,e,e,e);return}if(Array.isArray(e)){o.set(e[0],e[1],e[2],e[3]);return}const t=e.split("/")[0].trim().split(/\s+/),n=C(t[0]),r=C(t[1]??t[0]),i=C(t[2]??t[0]),a=C(t[3]??t[1]??t[0]);o.set(n,r,i,a)}const U={create(o,e,t,n,r,i=2,a=null,c){return o==="BOX"?A(e,n,r,a,c):o==="TEXT"?new I(t||"",e,n,r,i):new f.MeshBasicMaterial({visible:!1})},update(o,e,t,n,r,i,a=2,c){e==="BOX"?P(o,t,r,i,c):e==="TEXT"&&o.updateText(n||"",t,r,i,a)},forceUpdateUniforms(o,e){T(o,e)}};d.Painter=U,d.TextGenerator=I,d.createBoxMaterial=A,d.parseColor=x,d.parseLinearGradient=R,d.parsePixelValue=C,d.setBoxUniforms=T,d.splitByComma=M,d.updateBoxMaterial=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/dist/src/Box/BoxGenerator.d.ts

@@ -0,0 +1,18 @@
+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?: ShaderHooks): THREE.ShaderMaterial;
+export declare function updateBoxMaterial(material: THREE.ShaderMaterial, styles: BoxStyles, width: number, height: number, texture?: THREE.Texture | null): void;
+export interface BoxUniformValues {
+    width?: number;
+    height?: number;
+    borderRadius?: string | number | [number, number, number, number];
+    borderWidth?: number;
+    backgroundColor?: THREE.Color | [number, number, number] | string;
+    borderColor?: THREE.Color | [number, number, number] | string;
+    opacity?: number;
+    bgOpacity?: number;
+    borderOpacity?: number;
+    texture?: THREE.Texture | null;
+    backgroundImage?: string;
+}
+export declare function setBoxUniforms(material: THREE.ShaderMaterial, values: BoxUniformValues): void;

package/dist/src/Painter.d.ts

@@ -1,6 +1,8 @@
-import { ShaderHooks } from './types';
+import { BoxStyles, TextStyles, ShaderHooks } from './types';
+import { BoxUniformValues } from './Box/BoxGenerator';
 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, 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;
+    create(type: "BOX" | "TEXT", styles: BoxStyles | TextStyles, content: string, width: number, height: number, quality?: number, texture?: THREE.Texture | null, shaderHooks?: ShaderHooks): THREE.Material;
+    update(material: THREE.Material, type: "BOX" | "TEXT", styles: BoxStyles | TextStyles, content: string, width: number, height: number, quality?: number, texture?: THREE.Texture | null): void;
+    forceUpdateUniforms(material: THREE.ShaderMaterial, values: BoxUniformValues): void;
 };

package/dist/src/Text/FontMetricsManager.d.ts

@@ -0,0 +1,10 @@
+export declare class FontMetricsManager {
+    private static cache;
+    /**
+     * Calculates or retrieves the exact alphabetic baseline (in pixels) for the given font.
+     * @param font CSS font shorthand string (e.g., "400 16px Inter")
+     * @returns Baseline Y offset in pixels
+     */
+    static getBaseline(font: string): number;
+    private static calculateBaselineFromDOM;
+}

package/dist/src/Text/TextGenerator.d.ts

@@ -0,0 +1,11 @@
+import { TextStyles } from '../types';
+import * as THREE from "three";
+export declare class TextGenerator extends THREE.MeshBasicMaterial {
+    private canvas;
+    private ctx;
+    private qualityFactor;
+    constructor(text: string, styles: TextStyles, rectWidth: number, rectHeight: number, qualityFactor?: number);
+    private wrapText;
+    updateText(text: string, styles: TextStyles, rectWidth: number, rectHeight: number, qualityFactor?: number): void;
+    dispose(): void;
+}

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
-export * from './TextGenerator';
+export * from './Text/TextGenerator';
 export * from './types';
-export * from './BoxGenerator';
+export * from './Box/BoxGenerator';
 export * from './Painter';
+export * from './tools/parser';

package/dist/src/shaders/index.d.ts

@@ -0,0 +1,9 @@
+export declare const BoxShader: {
+    vertexShader: string;
+    fragmentShader: string;
+};
+export declare const BoxChunk: {
+    declChunk: string;
+    uvChunk: string;
+    baseColorChunk: string;
+};

package/dist/src/tools/parser.d.ts

@@ -0,0 +1,16 @@
+import * as THREE from "three";
+export declare function parsePixelValue(value: string | number): number;
+export declare function parseColor(colorStr: string): {
+    color: THREE.Color;
+    alpha: number;
+};
+export declare function splitByComma(str: string): string[];
+export declare function parseLinearGradient(value: string | null | undefined): {
+    angle: number;
+    stops: {
+        color: THREE.Color;
+        alpha: number;
+        rawStop: string | null;
+        stop: number;
+    }[];
+} | null;

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

@@ -1,5 +1,6 @@
 export interface TextStyles {
     font: string;
+    fontSize: string;
     color: string;
     textAlign: CanvasTextAlign;
     textBaseline: CanvasTextBaseline;
@@ -9,6 +10,9 @@ export interface TextStyles {
 }
 export interface BoxStyles {
     backgroundColor: string;
+    backgroundImage: string;
+    imageSrc?: string;
+    isTraveler?: boolean;
     opacity: number;
     zIndex: number;
     borderRadius: string;

package/package.json

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

package/src/Box/BoxGenerator.ts

@@ -0,0 +1,286 @@
+import * as THREE from "three";
+import { BoxStyles, ShaderHooks } from "../types";
+import {
+  parsePixelValue,
+  parseColor,
+  parseLinearGradient,
+} from "../tools/parser";
+import { BoxShader, BoxChunk } from "../shaders/index";
+
+export function createBoxMaterial(
+  styles: BoxStyles,
+  width: number,
+  height: number,
+  texture: THREE.Texture | null = null,
+  hooks?: ShaderHooks,
+): THREE.ShaderMaterial {
+  const hasTexture = texture !== null || !!styles.imageSrc;
+
+  const declChunk = hasTexture ? BoxChunk.declChunk : "";
+  const baseUvCode = styles.isTraveler ? BoxChunk.uvChunk : "vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;\n";
+  const uvChunk = hasTexture ? baseUvCode + (hooks?.uvModifier || "") : "";
+  const baseColorChunk = hasTexture ? BoxChunk.baseColorChunk : "";
+  const colorModChunk = hooks?.colorModifier || "";
+
+  const fragmentShader = BoxShader.fragmentShader
+    .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) },
+    uBgColor: {
+      value: new THREE.Vector4(
+        parsedBg.color.r,
+        parsedBg.color.g,
+        parsedBg.color.b,
+        parsedBg.alpha,
+      ),
+    },
+    uBorderColor: {
+      value: new THREE.Vector4(
+        parsedBorder.color.r,
+        parsedBorder.color.g,
+        parsedBorder.color.b,
+        parsedBorder.alpha,
+      ),
+    },
+    uBorderRadius: { value: new THREE.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: parsePixelValue(styles.borderWidth) },
+    uOpacity: { value: styles.opacity ?? 1.0 },
+    uTexture: { value: null as THREE.Texture | null },
+    uTextureRepeat: { value: new THREE.Vector2(1.0, 1.0) },
+    uTextureOffset: { value: new THREE.Vector2(0.0, 0.0) },
+
+    uGradientCount: { value: 0 },
+    uGradientAngle: { value: 0 },
+    uGradientColors: {
+      value: Array.from({ length: 8 }, () => new THREE.Vector4(0, 0, 0, 0)),
+    },
+    uGradientStops: { value: new Float32Array(8) },
+  };
+  // border radius value initialize
+  setBorderRadius(uniforms.uBorderRadius.value, styles.borderRadius);
+
+  if (hasTexture) {
+    uniforms.uTexture.value = texture;
+  }
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: uniforms,
+    vertexShader: BoxShader.vertexShader,
+    fragmentShader: fragmentShader,
+    transparent: true,
+    side: THREE.FrontSide, // for better performance
+  });
+
+  // Initial gradient setup
+  if (styles.backgroundImage) {
+    setBoxUniforms(material, { backgroundImage: styles.backgroundImage });
+  }
+
+  return material;
+}
+
+export function updateBoxMaterial(
+  material: THREE.ShaderMaterial,
+  styles: BoxStyles,
+  width: number,
+  height: number,
+  texture?: THREE.Texture | null,
+) {
+  const parsedBorderWidth = parsePixelValue(styles.borderWidth);
+  setBoxUniforms(material, {
+    width,
+    height,
+    borderRadius: styles.borderRadius,
+    borderWidth: parsedBorderWidth,
+    backgroundColor: styles.backgroundColor,
+    borderColor: styles.borderColor,
+    opacity: styles.opacity,
+    texture,
+    backgroundImage: styles.backgroundImage,
+  });
+}
+
+export interface BoxUniformValues {
+  width?: number;
+  height?: number;
+  borderRadius?: string | number | [number, number, number, number];
+  borderWidth?: number;
+  backgroundColor?: THREE.Color | [number, number, number] | string;
+  borderColor?: THREE.Color | [number, number, number] | string;
+  opacity?: number;
+  bgOpacity?: number;
+  borderOpacity?: number;
+  texture?: THREE.Texture | null;
+  backgroundImage?: string;
+}
+
+export function setBoxUniforms(
+  material: THREE.ShaderMaterial,
+  values: BoxUniformValues,
+) {
+  if (values.width !== undefined && values.height !== undefined) {
+    material.uniforms.uSize.value.set(values.width, values.height);
+  }
+  if (values.borderRadius !== undefined) {
+    setBorderRadius(material.uniforms.uBorderRadius.value, values.borderRadius);
+  }
+  if (values.borderWidth !== undefined) {
+    material.uniforms.uBorderWidth.value = values.borderWidth;
+  }
+
+  if (values.backgroundColor !== undefined) {
+    if (Array.isArray(values.backgroundColor)) {
+      const currentAlpha = material.uniforms.uBgColor.value.w;
+      material.uniforms.uBgColor.value.set(
+        values.backgroundColor[0],
+        values.backgroundColor[1],
+        values.backgroundColor[2],
+        currentAlpha,
+      );
+    } else if (typeof values.backgroundColor === "string") {
+      const parsed = parseColor(values.backgroundColor);
+      material.uniforms.uBgColor.value.set(
+        parsed.color.r,
+        parsed.color.g,
+        parsed.color.b,
+        parsed.alpha,
+      );
+    } else {
+      const currentAlpha = material.uniforms.uBgColor.value.w;
+      material.uniforms.uBgColor.value.set(
+        values.backgroundColor.r,
+        values.backgroundColor.g,
+        values.backgroundColor.b,
+        currentAlpha,
+      );
+    }
+  }
+
+  if (values.borderColor !== undefined) {
+    if (Array.isArray(values.borderColor)) {
+      const currentAlpha = material.uniforms.uBorderColor.value.w;
+      material.uniforms.uBorderColor.value.set(
+        values.borderColor[0],
+        values.borderColor[1],
+        values.borderColor[2],
+        currentAlpha,
+      );
+    } else if (typeof values.borderColor === "string") {
+      const parsed = parseColor(values.borderColor);
+      material.uniforms.uBorderColor.value.set(
+        parsed.color.r,
+        parsed.color.g,
+        parsed.color.b,
+        parsed.alpha,
+      );
+    } else {
+      const currentAlpha = material.uniforms.uBorderColor.value.w;
+      material.uniforms.uBorderColor.value.set(
+        values.borderColor.r,
+        values.borderColor.g,
+        values.borderColor.b,
+        currentAlpha,
+      );
+    }
+  }
+
+  if (values.opacity !== undefined) {
+    material.uniforms.uOpacity.value = values.opacity;
+  }
+  if (values.bgOpacity !== undefined) {
+    material.uniforms.uBgColor.value.w = values.bgOpacity;
+  }
+  if (values.borderOpacity !== undefined) {
+    material.uniforms.uBorderColor.value.w = values.borderOpacity;
+  }
+  if (material.uniforms.uTexture && values.texture !== undefined) {
+    material.uniforms.uTexture.value = values.texture;
+  }
+
+  const currentTex = values.texture !== undefined ? values.texture : material.uniforms.uTexture?.value;
+  if (currentTex && (currentTex.image instanceof ImageBitmap || currentTex.image instanceof HTMLImageElement || currentTex.image instanceof HTMLCanvasElement)) {
+    const imgWidth = currentTex.image.width;
+    const imgHeight = currentTex.image.height;
+    const domWidth = values.width ?? material.uniforms.uSize.value.x;
+    const domHeight = values.height ?? material.uniforms.uSize.value.y;
+    
+    if (imgWidth && imgHeight && domWidth && domHeight) {
+      const imageAspect = imgWidth / imgHeight;
+      const domAspect = domWidth / domHeight;
+
+      if (imageAspect > domAspect) {
+        const repeatX = domAspect / imageAspect;
+        material.uniforms.uTextureRepeat.value.set(repeatX, 1);
+        material.uniforms.uTextureOffset.value.set((1 - repeatX) / 2, 0);
+      } else {
+        const repeatY = imageAspect / domAspect;
+        material.uniforms.uTextureRepeat.value.set(1, repeatY);
+        material.uniforms.uTextureOffset.value.set(0, (1 - repeatY) / 2);
+      }
+    }
+  } else if (material.uniforms.uTextureRepeat) {
+    material.uniforms.uTextureRepeat.value.set(1, 1);
+    material.uniforms.uTextureOffset.value.set(0, 0);
+  }
+
+  if (values.backgroundImage !== undefined) {
+    const gradient = parseLinearGradient(values.backgroundImage);
+    if (gradient) {
+      material.uniforms.uGradientCount.value = gradient.stops.length;
+      material.uniforms.uGradientAngle.value = gradient.angle;
+      for (let i = 0; i < 8; i++) {
+        if (i < gradient.stops.length) {
+          const s = gradient.stops[i];
+          material.uniforms.uGradientColors.value[i].set(
+            s.color.r,
+            s.color.g,
+            s.color.b,
+            s.alpha,
+          );
+          console.log(s.color.r, s.color.g, s.color.b);
+          material.uniforms.uGradientStops.value[i] = s.stop;
+        } else {
+          material.uniforms.uGradientColors.value[i].set(0, 0, 0, 0);
+          material.uniforms.uGradientStops.value[i] = 1.0;
+        }
+      }
+    } else {
+      material.uniforms.uGradientCount.value = 0;
+    }
+  }
+}
+
+function setBorderRadius(
+  target: THREE.Vector4,
+  radius?: string | number | [number, number, number, number],
+) {
+  if (radius === undefined || radius === null) {
+    target.set(0, 0, 0, 0);
+    return;
+  }
+
+  if (typeof radius === "number") {
+    target.set(radius, radius, radius, radius);
+    return;
+  }
+
+  if (Array.isArray(radius)) {
+    target.set(radius[0], radius[1], radius[2], radius[3]);
+    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);
+}