@mirage-engine/painter 1.0.9 → 1.0.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mirage-engine/painter
 
+## 1.0.10
+
+### Patch Changes
+
+- 97c7b2a: shader sampling
+
 ## 1.0.9
 
 ### Patch Changes

package/dist/mirage-painter.js

@@ -59,11 +59,11 @@ class L extends l.MeshBasicMaterial {
     t !== void 0 && (this.qualityFactor = t);
     const c = (window.devicePixelRatio || 1) * this.qualityFactor, u = o * c, d = a * c;
     this.canvas.width !== u || this.canvas.height !== d ? (this.canvas.width = u, this.canvas.height = d) : this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.setTransform(c, 0, 0, c, 0, 0), this.ctx.font = i.font, this.ctx.fillStyle = i.color, this.ctx.textBaseline = "alphabetic", this.ctx.globalAlpha = 1;
-    const p = this.wrapText(n, o), g = i.lineHeight, f = I.getBaseline(i.font);
-    p.forEach((h, B) => {
-      const C = B * g + f;
+    const g = this.wrapText(n, o), b = i.lineHeight, f = I.getBaseline(i.font);
+    g.forEach((p, y) => {
+      const C = y * b + f;
       let m = 0;
-      i.textAlign === "center" ? m = o / 2 : i.textAlign === "right" && (m = o), this.ctx.textAlign = i.textAlign, this.ctx.fillText(h, m, C);
+      i.textAlign === "center" ? m = o / 2 : i.textAlign === "right" && (m = o), this.ctx.textAlign = i.textAlign, this.ctx.fillText(p, m, C);
     }), this.map && (this.map.needsUpdate = !0);
   }
   dispose() {
@@ -123,16 +123,16 @@ function z(r) {
   const s = [];
   for (let c = a; c < i.length && !(s.length >= 8); c++) {
     const u = i[c].trim(), d = u.lastIndexOf(" ");
-    let p = u, g = null;
+    let g = u, b = null;
     if (d !== -1 && !u.endsWith(")")) {
-      const h = u.substring(d + 1);
-      (h.endsWith("%") || h.endsWith("px") || !isNaN(parseFloat(h))) && (p = u.substring(0, d).trim(), g = h);
+      const p = u.substring(d + 1);
+      (p.endsWith("%") || p.endsWith("px") || !isNaN(parseFloat(p))) && (g = u.substring(0, d).trim(), b = p);
     }
-    const f = w(p);
+    const f = w(g);
     s.push({
       color: f.color,
       alpha: f.alpha,
-      rawStop: g,
+      rawStop: b,
       stop: 0
     });
   }
@@ -145,9 +145,9 @@ function z(r) {
       if (s[u].rawStop !== null || u === s.length - 1) {
         const d = u - c;
         if (d > 1) {
-          const p = s[c].stop, f = (s[u].stop - p) / d;
-          for (let h = 1; h < d; h++)
-            s[c + h].stop = p + f * h;
+          const g = s[c].stop, f = (s[u].stop - g) / d;
+          for (let p = 1; p < d; p++)
+            s[c + p].stop = g + f * p;
         }
         c = u;
       }
@@ -167,8 +167,8 @@ function E(r) {
     (f.startsWith("rgb") || f.startsWith("#") || f === "black" || f === "white" || f === "transparent") && (a = f, t = n.replace(f, "").trim());
   }
   t = t.replace("inset", "").trim();
-  const s = t.split(/\s+/).map((f) => parseFloat(f) || 0), c = s[0] || 0, u = s[1] || 0, d = s[2] || 0, p = s[3] || 0, g = w(a);
-  return { offsetX: c, offsetY: u, blurRadius: d, spreadRadius: p, color: g.color, alpha: g.alpha };
+  const s = t.split(/\s+/).map((f) => parseFloat(f) || 0), c = s[0] || 0, u = s[1] || 0, d = s[2] || 0, g = s[3] || 0, b = w(a);
+  return { offsetX: c, offsetY: u, blurRadius: d, spreadRadius: g, color: b.color, alpha: b.alpha };
 }
 const F = `varying vec2 vUv;
 varying vec4 vScreenPos;
@@ -355,19 +355,20 @@ function D(r, e, n, i = null, o) {
   let t = "";
   const s = {};
   if (o != null && o.uniforms)
-    for (const [v, b] of Object.entries(o.uniforms))
-      typeof b == "number" ? (t += `uniform float ${v};
-`, s[v] = { value: b }) : Array.isArray(b) ? b.length === 2 ? (t += `uniform vec2 ${v};
-`, s[v] = { value: new l.Vector2(...b) }) : b.length === 3 ? (t += `uniform vec3 ${v};
-`, s[v] = { value: new l.Vector3(...b) }) : b.length === 4 && (t += `uniform vec4 ${v};
-`, s[v] = { value: new l.Vector4(...b) }) : (t += `uniform float ${v};
-`, s[v] = { value: b });
+    for (const [v, h] of Object.entries(o.uniforms))
+      typeof h == "number" ? (t += `uniform float ${v};
+`, s[v] = { value: h }) : Array.isArray(h) ? h.length === 2 ? (t += `uniform vec2 ${v};
+`, s[v] = { value: new l.Vector2(...h) }) : h.length === 3 ? (t += `uniform vec3 ${v};
+`, s[v] = { value: new l.Vector3(...h) }) : h.length === 4 && (t += `uniform vec4 ${v};
+`, s[v] = { value: new l.Vector4(...h) }) : h && typeof h == "object" && h.type ? (t += `uniform ${h.type} ${v};
+`, s[v] = h) : (t += `uniform float ${v};
+`, s[v] = { value: h });
   const c = o !== void 0, u = (a || c ? M.declChunk : "") + `
 ` + t, d = `vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-`, p = r.isTraveler ? `vec2 resultUv = screenUv;
+`, g = r.isTraveler ? `vec2 resultUv = screenUv;
 ` : `vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`, g = a || c ? d + p + ((o == null ? void 0 : o.uvModifier) || "") : "", f = a || c ? M.baseColorChunk : "", h = (o == null ? void 0 : o.colorModifier) || "", B = R.fragmentShader.replace("#INJECT_DECLARATIONS", u).replace("#INJECT_UV_MODIFIER", g).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", h), C = w(r.backgroundColor), m = w(r.borderColor), y = {
+`, b = a || c ? d + g + ((o == null ? void 0 : o.uvModifier) || "") : "", f = a || c ? M.baseColorChunk : "", p = (o == null ? void 0 : o.colorModifier) || "", y = R.fragmentShader.replace("#INJECT_DECLARATIONS", u).replace("#INJECT_UV_MODIFIER", b).replace("#INJECT_BASE_COLOR", f).replace("#INJECT_COLOR_MODIFIER", p), C = w(r.backgroundColor), m = w(r.borderColor), B = {
     uSize: { value: new l.Vector2(e, n) },
     uMeshSize: { value: new l.Vector2(e, n) },
     uShadowColor: { value: new l.Vector4(0, 0, 0, 0) },
@@ -403,11 +404,11 @@ vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
     },
     uGradientStops: { value: new Float32Array(8) }
   };
-  k(y.uBorderRadius.value, r.borderRadius, Math.min(e, n)), a && (y.uTexture.value = i);
+  k(B.uBorderRadius.value, r.borderRadius, Math.min(e, n)), a && (B.uTexture.value = i);
   const O = new l.ShaderMaterial({
-    uniforms: { ...y, ...s },
+    uniforms: { ...B, ...s },
     vertexShader: R.vertexShader,
-    fragmentShader: B,
+    fragmentShader: y,
     transparent: !0,
     side: l.FrontSide
     // for better performance

package/dist/mirage-painter.umd.js

@@ -1,5 +1,5 @@
-(function(f,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],p):(f=typeof globalThis<"u"?globalThis:f||self,p(f.MiragePainter={},f.THREE))})(this,function(f,p){"use strict";var j=Object.defineProperty;var J=(f,p,w)=>p in f?j(f,p,{enumerable:!0,configurable:!0,writable:!0,value:w}):f[p]=w;var T=(f,p,w)=>(J(f,typeof p!="symbol"?p+"":p,w),w);function w(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>r[n]})}}return o.default=r,Object.freeze(o)}const l=w(p);class P{static getBaseline(o){if(this.cache.has(o))return this.cache.get(o);const n=this.calculateBaselineFromDOM(o);return this.cache.set(o,n),n}static calculateBaselineFromDOM(o){if(typeof document>"u")return 0;const n=document.createElement("div"),t=document.createElement("span"),e=document.createElement("img");n.style.visibility="hidden",n.style.position="absolute",n.style.top="0px",n.style.left="0px",n.style.font=o,n.style.margin="0",n.style.padding="0",n.style.border="none",t.style.margin="0",t.style.padding="0",t.style.border="none",t.style.lineHeight="normal",e.width=1,e.height=1,e.style.verticalAlign="baseline",t.appendChild(document.createTextNode("Hidden Text")),n.appendChild(t),n.appendChild(e),document.body.appendChild(n);const a=e.offsetTop-t.offsetTop;return document.body.removeChild(n),a}}T(P,"cache",new Map);class A extends l.MeshBasicMaterial{constructor(n,t,e,a,i=2){super({transparent:!0,side:l.FrontSide,color:16777215});T(this,"canvas");T(this,"ctx");T(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=i,this.map=new l.CanvasTexture(this.canvas),this.map.colorSpace=l.LinearSRGBColorSpace,this.map.minFilter=l.LinearFilter,this.map.magFilter=l.LinearFilter,this.updateText(n,t,e,a)}wrapText(n,t){const e=n.split(`
-`),a=[];return e.forEach(i=>{const s=i.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(s.length===0){a.push("");return}let c=s[0];for(let u=1;u<s.length;u++){const d=s[u];this.ctx.measureText(c+d).width<=t+2?c+=d:(c&&a.push(c),c=d.trimStart())}c&&a.push(c)}),a}updateText(n,t,e,a,i){i!==void 0&&(this.qualityFactor=i);const c=(window.devicePixelRatio||1)*this.qualityFactor,u=e*c,d=a*c;this.canvas.width!==u||this.canvas.height!==d?(this.canvas.width=u,this.canvas.height=d):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(c,0,0,c,0,0),this.ctx.font=t.font,this.ctx.fillStyle=t.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const b=this.wrapText(n,e),v=t.lineHeight,h=P.getBaseline(t.font);b.forEach((g,M)=>{const B=M*v+h;let x=0;t.textAlign==="center"?x=e/2:t.textAlign==="right"&&(x=e),this.ctx.textAlign=t.textAlign,this.ctx.fillText(g,x,B)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function S(r,o=0){if(typeof r=="number")return r;const n=parseFloat(r)||0;return typeof r=="string"&&r.includes("%")?n/100*o:n}function y(r){if(!r||r==="transparent")return{color:new l.Color(16777215),alpha:0};const o=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(o){const n=parseInt(o[1],10),t=parseInt(o[2],10),e=parseInt(o[3],10),a=o[4]!==void 0?parseFloat(o[4]):1;return{color:new l.Color(`rgb(${n}, ${t}, ${e})`),alpha:a}}return{color:new l.Color(r),alpha:1}}function R(r){const o=[];let n="",t=0;for(let e=0;e<r.length;e++){const a=r[e];if(a==="(")t++;else if(a===")")t--;else if(a===","&&t===0){o.push(n.trim()),n="";continue}n+=a}return n&&o.push(n.trim()),o}function k(r){if(!r||typeof r!="string"||!r.includes("linear-gradient"))return null;const o=r.match(/linear-gradient\((.*)\)/);if(!o)return null;const n=o[1],t=R(n);let e=Math.PI,a=0;const i=t[0].trim();if(i.startsWith("to "))i==="to top"?e=0:i==="to right"?e=Math.PI/2:i==="to bottom"?e=Math.PI:i==="to left"?e=Math.PI*1.5:i==="to top right"||i==="to right top"?e=Math.PI/4:i==="to bottom right"||i==="to right bottom"?e=Math.PI*.75:i==="to bottom left"||i==="to left bottom"?e=Math.PI*1.25:(i==="to top left"||i==="to left top")&&(e=Math.PI*1.75),a=1;else if(i.endsWith("deg")||i.endsWith("rad")||i.endsWith("turn")){const c=parseFloat(i);i.endsWith("deg")?e=c*(Math.PI/180):i.endsWith("rad")?e=c:i.endsWith("turn")&&(e=c*Math.PI*2),a=1}const s=[];for(let c=a;c<t.length&&!(s.length>=8);c++){const u=t[c].trim(),d=u.lastIndexOf(" ");let b=u,v=null;if(d!==-1&&!u.endsWith(")")){const g=u.substring(d+1);(g.endsWith("%")||g.endsWith("px")||!isNaN(parseFloat(g)))&&(b=u.substring(0,d).trim(),v=g)}const h=y(b);s.push({color:h.color,alpha:h.alpha,rawStop:v,stop:0})}if(s.length>0){for(let u=0;u<s.length;u++)s[u].rawStop!==null&&(s[u].stop=parseFloat(s[u].rawStop)/100);s[0].rawStop===null&&(s[0].stop=0),s.length>1&&s[s.length-1].rawStop===null&&(s[s.length-1].stop=1);let c=0;for(let u=1;u<s.length;u++)if(s[u].rawStop!==null||u===s.length-1){const d=u-c;if(d>1){const b=s[c].stop,h=(s[u].stop-b)/d;for(let g=1;g<d;g++)s[c+g].stop=b+h*g}c=u}}return{angle:e,stops:s}}function G(r){if(!r||r==="none")return null;const o=R(r);if(o.length===0)return null;const n=o[0].trim(),t=/(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/,e=n.match(t);let a="transparent",i=n;if(e&&e[1]!=="inset"){const h=e[1];(h.startsWith("rgb")||h.startsWith("#")||h==="black"||h==="white"||h==="transparent")&&(a=h,i=n.replace(h,"").trim())}i=i.replace("inset","").trim();const s=i.split(/\s+/).map(h=>parseFloat(h)||0),c=s[0]||0,u=s[1]||0,d=s[2]||0,b=s[3]||0,v=y(a);return{offsetX:c,offsetY:u,blurRadius:d,spreadRadius:b,color:v.color,alpha:v.alpha}}const U=`varying vec2 vUv;
+(function(f,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],g):(f=typeof globalThis<"u"?globalThis:f||self,g(f.MiragePainter={},f.THREE))})(this,function(f,g){"use strict";var q=Object.defineProperty;var $=(f,g,w)=>g in f?q(f,g,{enumerable:!0,configurable:!0,writable:!0,value:w}):f[g]=w;var T=(f,g,w)=>($(f,typeof g!="symbol"?g+"":g,w),w);function w(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(o,n,i.get?i:{enumerable:!0,get:()=>r[n]})}}return o.default=r,Object.freeze(o)}const l=w(g);class P{static getBaseline(o){if(this.cache.has(o))return this.cache.get(o);const n=this.calculateBaselineFromDOM(o);return this.cache.set(o,n),n}static calculateBaselineFromDOM(o){if(typeof document>"u")return 0;const n=document.createElement("div"),i=document.createElement("span"),e=document.createElement("img");n.style.visibility="hidden",n.style.position="absolute",n.style.top="0px",n.style.left="0px",n.style.font=o,n.style.margin="0",n.style.padding="0",n.style.border="none",i.style.margin="0",i.style.padding="0",i.style.border="none",i.style.lineHeight="normal",e.width=1,e.height=1,e.style.verticalAlign="baseline",i.appendChild(document.createTextNode("Hidden Text")),n.appendChild(i),n.appendChild(e),document.body.appendChild(n);const a=e.offsetTop-i.offsetTop;return document.body.removeChild(n),a}}T(P,"cache",new Map);class A extends l.MeshBasicMaterial{constructor(n,i,e,a,t=2){super({transparent:!0,side:l.FrontSide,color:16777215});T(this,"canvas");T(this,"ctx");T(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=t,this.map=new l.CanvasTexture(this.canvas),this.map.colorSpace=l.LinearSRGBColorSpace,this.map.minFilter=l.LinearFilter,this.map.magFilter=l.LinearFilter,this.updateText(n,i,e,a)}wrapText(n,i){const e=n.split(`
+`),a=[];return e.forEach(t=>{const s=t.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(s.length===0){a.push("");return}let c=s[0];for(let u=1;u<s.length;u++){const d=s[u];this.ctx.measureText(c+d).width<=i+2?c+=d:(c&&a.push(c),c=d.trimStart())}c&&a.push(c)}),a}updateText(n,i,e,a,t){t!==void 0&&(this.qualityFactor=t);const c=(window.devicePixelRatio||1)*this.qualityFactor,u=e*c,d=a*c;this.canvas.width!==u||this.canvas.height!==d?(this.canvas.width=u,this.canvas.height=d):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(c,0,0,c,0,0),this.ctx.font=i.font,this.ctx.fillStyle=i.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const v=this.wrapText(n,e),C=i.lineHeight,h=P.getBaseline(i.font);v.forEach((b,M)=>{const B=M*C+h;let x=0;i.textAlign==="center"?x=e/2:i.textAlign==="right"&&(x=e),this.ctx.textAlign=i.textAlign,this.ctx.fillText(b,x,B)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function S(r,o=0){if(typeof r=="number")return r;const n=parseFloat(r)||0;return typeof r=="string"&&r.includes("%")?n/100*o:n}function y(r){if(!r||r==="transparent")return{color:new l.Color(16777215),alpha:0};const o=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(o){const n=parseInt(o[1],10),i=parseInt(o[2],10),e=parseInt(o[3],10),a=o[4]!==void 0?parseFloat(o[4]):1;return{color:new l.Color(`rgb(${n}, ${i}, ${e})`),alpha:a}}return{color:new l.Color(r),alpha:1}}function R(r){const o=[];let n="",i=0;for(let e=0;e<r.length;e++){const a=r[e];if(a==="(")i++;else if(a===")")i--;else if(a===","&&i===0){o.push(n.trim()),n="";continue}n+=a}return n&&o.push(n.trim()),o}function k(r){if(!r||typeof r!="string"||!r.includes("linear-gradient"))return null;const o=r.match(/linear-gradient\((.*)\)/);if(!o)return null;const n=o[1],i=R(n);let e=Math.PI,a=0;const t=i[0].trim();if(t.startsWith("to "))t==="to top"?e=0:t==="to right"?e=Math.PI/2:t==="to bottom"?e=Math.PI:t==="to left"?e=Math.PI*1.5:t==="to top right"||t==="to right top"?e=Math.PI/4:t==="to bottom right"||t==="to right bottom"?e=Math.PI*.75:t==="to bottom left"||t==="to left bottom"?e=Math.PI*1.25:(t==="to top left"||t==="to left top")&&(e=Math.PI*1.75),a=1;else if(t.endsWith("deg")||t.endsWith("rad")||t.endsWith("turn")){const c=parseFloat(t);t.endsWith("deg")?e=c*(Math.PI/180):t.endsWith("rad")?e=c:t.endsWith("turn")&&(e=c*Math.PI*2),a=1}const s=[];for(let c=a;c<i.length&&!(s.length>=8);c++){const u=i[c].trim(),d=u.lastIndexOf(" ");let v=u,C=null;if(d!==-1&&!u.endsWith(")")){const b=u.substring(d+1);(b.endsWith("%")||b.endsWith("px")||!isNaN(parseFloat(b)))&&(v=u.substring(0,d).trim(),C=b)}const h=y(v);s.push({color:h.color,alpha:h.alpha,rawStop:C,stop:0})}if(s.length>0){for(let u=0;u<s.length;u++)s[u].rawStop!==null&&(s[u].stop=parseFloat(s[u].rawStop)/100);s[0].rawStop===null&&(s[0].stop=0),s.length>1&&s[s.length-1].rawStop===null&&(s[s.length-1].stop=1);let c=0;for(let u=1;u<s.length;u++)if(s[u].rawStop!==null||u===s.length-1){const d=u-c;if(d>1){const v=s[c].stop,h=(s[u].stop-v)/d;for(let b=1;b<d;b++)s[c+b].stop=v+h*b}c=u}}return{angle:e,stops:s}}function G(r){if(!r||r==="none")return null;const o=R(r);if(o.length===0)return null;const n=o[0].trim(),i=/(rgba?\([^)]+\)|#[0-9a-fA-F]+|[a-zA-Z]+)/,e=n.match(i);let a="transparent",t=n;if(e&&e[1]!=="inset"){const h=e[1];(h.startsWith("rgb")||h.startsWith("#")||h==="black"||h==="white"||h==="transparent")&&(a=h,t=n.replace(h,"").trim())}t=t.replace("inset","").trim();const s=t.split(/\s+/).map(h=>parseFloat(h)||0),c=s[0]||0,u=s[1]||0,d=s[2]||0,v=s[3]||0,C=y(a);return{offsetX:c,offsetY:u,blurRadius:d,spreadRadius:v,color:C.color,alpha:C.alpha}}const U=`varying vec2 vUv;
 varying vec4 vScreenPos;
 void main() {
   vUv = uv;
@@ -171,14 +171,15 @@ uniform vec2 uTextureOffset;`,H=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w)
 vec2 resultUv = screenUv;
 
 `,N=`vec4 texColor = texture2D(uTexture, resultUv);
-baseColor = blendSrcOver(baseColor, texColor);`,E={vertexShader:U,fragmentShader:V},L={declChunk:D,uvChunk:H,baseColorChunk:N};function z(r,o,n,t=null,e){const a=t!==null||!!r.imageSrc;let i="";const s={};if(e!=null&&e.uniforms)for(const[m,C]of Object.entries(e.uniforms))typeof C=="number"?(i+=`uniform float ${m};
-`,s[m]={value:C}):Array.isArray(C)?C.length===2?(i+=`uniform vec2 ${m};
-`,s[m]={value:new l.Vector2(...C)}):C.length===3?(i+=`uniform vec3 ${m};
-`,s[m]={value:new l.Vector3(...C)}):C.length===4&&(i+=`uniform vec4 ${m};
-`,s[m]={value:new l.Vector4(...C)}):(i+=`uniform float ${m};
-`,s[m]={value:C});const c=e!==void 0,u=(a||c?L.declChunk:"")+`
-`+i,d=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-`,b=r.isTraveler?`vec2 resultUv = screenUv;
+baseColor = blendSrcOver(baseColor, texColor);`,E={vertexShader:U,fragmentShader:V},L={declChunk:D,uvChunk:H,baseColorChunk:N};function z(r,o,n,i=null,e){const a=i!==null||!!r.imageSrc;let t="";const s={};if(e!=null&&e.uniforms)for(const[m,p]of Object.entries(e.uniforms))typeof p=="number"?(t+=`uniform float ${m};
+`,s[m]={value:p}):Array.isArray(p)?p.length===2?(t+=`uniform vec2 ${m};
+`,s[m]={value:new l.Vector2(...p)}):p.length===3?(t+=`uniform vec3 ${m};
+`,s[m]={value:new l.Vector3(...p)}):p.length===4&&(t+=`uniform vec4 ${m};
+`,s[m]={value:new l.Vector4(...p)}):p&&typeof p=="object"&&p.type?(t+=`uniform ${p.type} ${m};
+`,s[m]=p):(t+=`uniform float ${m};
+`,s[m]={value:p});const c=e!==void 0,u=(a||c?L.declChunk:"")+`
+`+t,d=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+`,v=r.isTraveler?`vec2 resultUv = screenUv;
 `:`vec2 localUv = (p / uSize) + 0.5;
 vec2 resultUv = localUv * uTextureRepeat + uTextureOffset;
-`,v=a||c?d+b+((e==null?void 0:e.uvModifier)||""):"",h=a||c?L.baseColorChunk:"",g=(e==null?void 0:e.colorModifier)||"",M=E.fragmentShader.replace("#INJECT_DECLARATIONS",u).replace("#INJECT_UV_MODIFIER",v).replace("#INJECT_BASE_COLOR",h).replace("#INJECT_COLOR_MODIFIER",g),B=y(r.backgroundColor),x=y(r.borderColor),I={uSize:{value:new l.Vector2(o,n)},uMeshSize:{value:new l.Vector2(o,n)},uShadowColor:{value:new l.Vector4(0,0,0,0)},uShadowOffset:{value:new l.Vector2(0,0)},uShadowBlur:{value:0},uShadowSpread:{value:0},uBgColor:{value:new l.Vector4(B.color.r,B.color.g,B.color.b,B.alpha)},uBorderColor:{value:new l.Vector4(x.color.r,x.color.g,x.color.b,x.alpha)},uBorderRadius:{value:new l.Vector4(0,0,0,0)},uBorderWidth:{value:S(r.borderWidth)},uOpacity:{value:r.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new l.Vector2(1,1)},uTextureOffset:{value:new l.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new l.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};W(I.uBorderRadius.value,r.borderRadius,Math.min(o,n)),a&&(I.uTexture.value=t);const _=new l.ShaderMaterial({uniforms:{...I,...s},vertexShader:E.vertexShader,fragmentShader:M,transparent:!0,side:l.FrontSide});return r.backgroundImage&&O(_,{backgroundImage:r.backgroundImage}),_}function F(r,o,n,t,e){const a=S(o.borderWidth);O(r,{width:n,height:t,borderRadius:o.borderRadius,borderWidth:a,backgroundColor:o.backgroundColor,borderColor:o.borderColor,opacity:o.opacity,texture:e,backgroundImage:o.backgroundImage,boxShadow:o.boxShadow})}function O(r,o){var t;if(o.boxShadow!==void 0){const e=G(o.boxShadow);e?(r.uniforms.uShadowColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha),r.uniforms.uShadowOffset.value.set(e.offsetX,e.offsetY),r.uniforms.uShadowBlur.value=e.blurRadius,r.uniforms.uShadowSpread.value=e.spreadRadius,r.userData.shadowPadding=e.blurRadius+e.spreadRadius+Math.max(Math.abs(e.offsetX),Math.abs(e.offsetY))):(r.uniforms.uShadowColor.value.w=0,r.userData.shadowPadding=0)}if(o.width!==void 0&&o.height!==void 0&&r.uniforms.uSize.value.set(o.width,o.height),r.uniforms.uMeshSize){const e=r.userData.shadowPadding||0,a=o.width!==void 0?o.width:r.uniforms.uSize.value.x,i=o.height!==void 0?o.height:r.uniforms.uSize.value.y;r.uniforms.uMeshSize.value.set(a+e*2,i+e*2)}if(o.borderRadius!==void 0){const e=o.width!==void 0&&o.height!==void 0?Math.min(o.width,o.height):Math.min(r.uniforms.uSize.value.x,r.uniforms.uSize.value.y);W(r.uniforms.uBorderRadius.value,o.borderRadius,e)}if(o.borderWidth!==void 0&&(r.uniforms.uBorderWidth.value=o.borderWidth),o.backgroundColor!==void 0)if(Array.isArray(o.backgroundColor)){const e=o.backgroundColor[3]!==void 0?o.backgroundColor[3]:r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor[0],o.backgroundColor[1],o.backgroundColor[2],e)}else if(typeof o.backgroundColor=="string"){const e=y(o.backgroundColor);r.uniforms.uBgColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor.r,o.backgroundColor.g,o.backgroundColor.b,e)}if(o.borderColor!==void 0)if(Array.isArray(o.borderColor)){const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor[0],o.borderColor[1],o.borderColor[2],e)}else if(typeof o.borderColor=="string"){const e=y(o.borderColor);r.uniforms.uBorderColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor.r,o.borderColor.g,o.borderColor.b,e)}o.opacity!==void 0&&(r.uniforms.uOpacity.value=o.opacity),o.bgOpacity!==void 0&&(r.uniforms.uBgColor.value.w=o.bgOpacity),o.borderOpacity!==void 0&&(r.uniforms.uBorderColor.value.w=o.borderOpacity),r.uniforms.uTexture&&o.texture!==void 0&&(r.uniforms.uTexture.value=o.texture);const n=o.texture!==void 0?o.texture:(t=r.uniforms.uTexture)==null?void 0:t.value;if(n&&(n.image instanceof ImageBitmap||n.image instanceof HTMLImageElement||n.image instanceof HTMLCanvasElement)){const e=n.image.naturalWidth||n.image.videoWidth||n.image.width,a=n.image.naturalHeight||n.image.videoHeight||n.image.height,i=o.width??r.uniforms.uSize.value.x,s=o.height??r.uniforms.uSize.value.y;if(e&&a&&i&&s){const c=e/a,u=i/s;if(c>u){const d=u/c;r.uniforms.uTextureRepeat.value.set(d,1),r.uniforms.uTextureOffset.value.set((1-d)/2,0)}else{const d=c/u;r.uniforms.uTextureRepeat.value.set(1,d),r.uniforms.uTextureOffset.value.set(0,(1-d)/2)}}}else r.uniforms.uTextureRepeat&&(r.uniforms.uTextureRepeat.value.set(1,1),r.uniforms.uTextureOffset.value.set(0,0));if(o.backgroundImage!==void 0){const e=k(o.backgroundImage);if(e){r.uniforms.uGradientCount.value=e.stops.length,r.uniforms.uGradientAngle.value=e.angle;for(let a=0;a<8;a++)if(a<e.stops.length){const i=e.stops[a];r.uniforms.uGradientColors.value[a].set(i.color.r,i.color.g,i.color.b,i.alpha),r.uniforms.uGradientStops.value[a]=i.stop}else r.uniforms.uGradientColors.value[a].set(0,0,0,0),r.uniforms.uGradientStops.value[a]=1}else r.uniforms.uGradientCount.value=0}for(const e of Object.keys(o))e!=="width"&&e!=="height"&&e!=="borderRadius"&&e!=="borderWidth"&&e!=="backgroundColor"&&e!=="borderColor"&&e!=="opacity"&&e!=="bgOpacity"&&e!=="borderOpacity"&&e!=="texture"&&e!=="backgroundImage"&&e!=="boxShadow"&&r.uniforms[e]!==void 0&&(r.uniforms[e].value!==void 0&&r.uniforms[e].value!==null&&typeof r.uniforms[e].value.set=="function"?Array.isArray(o[e])?r.uniforms[e].value.set(...o[e]):o[e]!==void 0&&(o[e].copy?r.uniforms[e].value.copy(o[e]):r.uniforms[e].value=o[e]):r.uniforms[e].value=o[e])}function W(r,o,n=0){if(o==null){r.set(0,0,0,0);return}if(typeof o=="number"){r.set(o,o,o,o);return}if(Array.isArray(o)){r.set(o[0],o[1],o[2],o[3]);return}const t=o.split("/")[0].trim().split(/\s+/),e=S(t[0],n),a=S(t[1]??t[0],n),i=S(t[2]??t[0],n),s=S(t[3]??t[1]??t[0],n);r.set(e,a,i,s)}const q={create(r,o,n,t,e,a=2,i=null,s){return r==="BOX"?z(o,t,e,i,s):r==="TEXT"?new A(n||"",o,t,e,a):new l.MeshBasicMaterial({visible:!1})},update(r,o,n,t,e,a,i=2,s){o==="BOX"?F(r,n,e,a,s):o==="TEXT"&&r.updateText(t||"",n,e,a,i)},forceUpdateUniforms(r,o){O(r,o)}};f.Painter=q,f.TextGenerator=A,f.createBoxMaterial=z,f.parseBoxShadow=G,f.parseColor=y,f.parseLinearGradient=k,f.parsePixelValue=S,f.setBoxUniforms=O,f.splitByComma=R,f.updateBoxMaterial=F,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+`,C=a||c?d+v+((e==null?void 0:e.uvModifier)||""):"",h=a||c?L.baseColorChunk:"",b=(e==null?void 0:e.colorModifier)||"",M=E.fragmentShader.replace("#INJECT_DECLARATIONS",u).replace("#INJECT_UV_MODIFIER",C).replace("#INJECT_BASE_COLOR",h).replace("#INJECT_COLOR_MODIFIER",b),B=y(r.backgroundColor),x=y(r.borderColor),I={uSize:{value:new l.Vector2(o,n)},uMeshSize:{value:new l.Vector2(o,n)},uShadowColor:{value:new l.Vector4(0,0,0,0)},uShadowOffset:{value:new l.Vector2(0,0)},uShadowBlur:{value:0},uShadowSpread:{value:0},uBgColor:{value:new l.Vector4(B.color.r,B.color.g,B.color.b,B.alpha)},uBorderColor:{value:new l.Vector4(x.color.r,x.color.g,x.color.b,x.alpha)},uBorderRadius:{value:new l.Vector4(0,0,0,0)},uBorderWidth:{value:S(r.borderWidth)},uOpacity:{value:r.opacity??1},uTexture:{value:null},uTextureRepeat:{value:new l.Vector2(1,1)},uTextureOffset:{value:new l.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new l.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};W(I.uBorderRadius.value,r.borderRadius,Math.min(o,n)),a&&(I.uTexture.value=i);const _=new l.ShaderMaterial({uniforms:{...I,...s},vertexShader:E.vertexShader,fragmentShader:M,transparent:!0,side:l.FrontSide});return r.backgroundImage&&O(_,{backgroundImage:r.backgroundImage}),_}function F(r,o,n,i,e){const a=S(o.borderWidth);O(r,{width:n,height:i,borderRadius:o.borderRadius,borderWidth:a,backgroundColor:o.backgroundColor,borderColor:o.borderColor,opacity:o.opacity,texture:e,backgroundImage:o.backgroundImage,boxShadow:o.boxShadow})}function O(r,o){var i;if(o.boxShadow!==void 0){const e=G(o.boxShadow);e?(r.uniforms.uShadowColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha),r.uniforms.uShadowOffset.value.set(e.offsetX,e.offsetY),r.uniforms.uShadowBlur.value=e.blurRadius,r.uniforms.uShadowSpread.value=e.spreadRadius,r.userData.shadowPadding=e.blurRadius+e.spreadRadius+Math.max(Math.abs(e.offsetX),Math.abs(e.offsetY))):(r.uniforms.uShadowColor.value.w=0,r.userData.shadowPadding=0)}if(o.width!==void 0&&o.height!==void 0&&r.uniforms.uSize.value.set(o.width,o.height),r.uniforms.uMeshSize){const e=r.userData.shadowPadding||0,a=o.width!==void 0?o.width:r.uniforms.uSize.value.x,t=o.height!==void 0?o.height:r.uniforms.uSize.value.y;r.uniforms.uMeshSize.value.set(a+e*2,t+e*2)}if(o.borderRadius!==void 0){const e=o.width!==void 0&&o.height!==void 0?Math.min(o.width,o.height):Math.min(r.uniforms.uSize.value.x,r.uniforms.uSize.value.y);W(r.uniforms.uBorderRadius.value,o.borderRadius,e)}if(o.borderWidth!==void 0&&(r.uniforms.uBorderWidth.value=o.borderWidth),o.backgroundColor!==void 0)if(Array.isArray(o.backgroundColor)){const e=o.backgroundColor[3]!==void 0?o.backgroundColor[3]:r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor[0],o.backgroundColor[1],o.backgroundColor[2],e)}else if(typeof o.backgroundColor=="string"){const e=y(o.backgroundColor);r.uniforms.uBgColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBgColor.value.w;r.uniforms.uBgColor.value.set(o.backgroundColor.r,o.backgroundColor.g,o.backgroundColor.b,e)}if(o.borderColor!==void 0)if(Array.isArray(o.borderColor)){const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor[0],o.borderColor[1],o.borderColor[2],e)}else if(typeof o.borderColor=="string"){const e=y(o.borderColor);r.uniforms.uBorderColor.value.set(e.color.r,e.color.g,e.color.b,e.alpha)}else{const e=r.uniforms.uBorderColor.value.w;r.uniforms.uBorderColor.value.set(o.borderColor.r,o.borderColor.g,o.borderColor.b,e)}o.opacity!==void 0&&(r.uniforms.uOpacity.value=o.opacity),o.bgOpacity!==void 0&&(r.uniforms.uBgColor.value.w=o.bgOpacity),o.borderOpacity!==void 0&&(r.uniforms.uBorderColor.value.w=o.borderOpacity),r.uniforms.uTexture&&o.texture!==void 0&&(r.uniforms.uTexture.value=o.texture);const n=o.texture!==void 0?o.texture:(i=r.uniforms.uTexture)==null?void 0:i.value;if(n&&(n.image instanceof ImageBitmap||n.image instanceof HTMLImageElement||n.image instanceof HTMLCanvasElement)){const e=n.image.naturalWidth||n.image.videoWidth||n.image.width,a=n.image.naturalHeight||n.image.videoHeight||n.image.height,t=o.width??r.uniforms.uSize.value.x,s=o.height??r.uniforms.uSize.value.y;if(e&&a&&t&&s){const c=e/a,u=t/s;if(c>u){const d=u/c;r.uniforms.uTextureRepeat.value.set(d,1),r.uniforms.uTextureOffset.value.set((1-d)/2,0)}else{const d=c/u;r.uniforms.uTextureRepeat.value.set(1,d),r.uniforms.uTextureOffset.value.set(0,(1-d)/2)}}}else r.uniforms.uTextureRepeat&&(r.uniforms.uTextureRepeat.value.set(1,1),r.uniforms.uTextureOffset.value.set(0,0));if(o.backgroundImage!==void 0){const e=k(o.backgroundImage);if(e){r.uniforms.uGradientCount.value=e.stops.length,r.uniforms.uGradientAngle.value=e.angle;for(let a=0;a<8;a++)if(a<e.stops.length){const t=e.stops[a];r.uniforms.uGradientColors.value[a].set(t.color.r,t.color.g,t.color.b,t.alpha),r.uniforms.uGradientStops.value[a]=t.stop}else r.uniforms.uGradientColors.value[a].set(0,0,0,0),r.uniforms.uGradientStops.value[a]=1}else r.uniforms.uGradientCount.value=0}for(const e of Object.keys(o))e!=="width"&&e!=="height"&&e!=="borderRadius"&&e!=="borderWidth"&&e!=="backgroundColor"&&e!=="borderColor"&&e!=="opacity"&&e!=="bgOpacity"&&e!=="borderOpacity"&&e!=="texture"&&e!=="backgroundImage"&&e!=="boxShadow"&&r.uniforms[e]!==void 0&&(r.uniforms[e].value!==void 0&&r.uniforms[e].value!==null&&typeof r.uniforms[e].value.set=="function"?Array.isArray(o[e])?r.uniforms[e].value.set(...o[e]):o[e]!==void 0&&(o[e].copy?r.uniforms[e].value.copy(o[e]):r.uniforms[e].value=o[e]):r.uniforms[e].value=o[e])}function W(r,o,n=0){if(o==null){r.set(0,0,0,0);return}if(typeof o=="number"){r.set(o,o,o,o);return}if(Array.isArray(o)){r.set(o[0],o[1],o[2],o[3]);return}const i=o.split("/")[0].trim().split(/\s+/),e=S(i[0],n),a=S(i[1]??i[0],n),t=S(i[2]??i[0],n),s=S(i[3]??i[1]??i[0],n);r.set(e,a,t,s)}const j={create(r,o,n,i,e,a=2,t=null,s){return r==="BOX"?z(o,i,e,t,s):r==="TEXT"?new A(n||"",o,i,e,a):new l.MeshBasicMaterial({visible:!1})},update(r,o,n,i,e,a,t=2,s){o==="BOX"?F(r,n,e,a,s):o==="TEXT"&&r.updateText(i||"",n,e,a,t)},forceUpdateUniforms(r,o){O(r,o)}};f.Painter=j,f.TextGenerator=A,f.createBoxMaterial=z,f.parseBoxShadow=G,f.parseColor=y,f.parseLinearGradient=k,f.parsePixelValue=S,f.setBoxUniforms=O,f.splitByComma=R,f.updateBoxMaterial=F,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json

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

package/src/Box/BoxGenerator.ts

@@ -36,6 +36,9 @@ export function createBoxMaterial(
           customUniformsCode += `uniform vec4 ${key};\n`;
           customUniforms[key] = { value: new THREE.Vector4(...value) };
         }
+      } else if (value && typeof value === "object" && value.type) {
+        customUniformsCode += `uniform ${value.type} ${key};\n`;
+        customUniforms[key] = value;
       } else {
         customUniformsCode += `uniform float ${key};\n`;
         customUniforms[key] = { value };