@lightningjs/renderer 3.0.0-beta5 → 3.0.0-beta7

package/dist/src/core/renderers/webgl/shaders/effects/BorderTopEffect.js

@@ -47,25 +47,25 @@ export class BorderTopEffect extends ShaderEffect {
         },
     };
     static methods = {
-        fillMask: `
-      float function(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
     `,
-        rectDist: `
-      float function(vec2 p, vec2 size) {
-        vec2 d = abs(p) - size;
-        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
-      }
+        rectDist: `
+      float function(vec2 p, vec2 size) {
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+      }
     `,
     };
-    static onEffectMask = `
-  vec2 pos = vec2(0.0, width * 0.5);
-  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
-  return mix(shaderColor, maskColor, $fillMask(mask));
+    static onEffectMask = `
+  vec2 pos = vec2(0.0, width * 0.5);
+  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
+  return mix(shaderColor, maskColor, $fillMask(mask));
   `;
-    static onColorize = `
-    return color;
+    static onColorize = `
+    return color;
   `;
 }
 //# sourceMappingURL=BorderTopEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/FadeOutEffect.js

@@ -38,48 +38,48 @@ export class FadeOutEffect extends ShaderEffect {
             fade: props.fade ?? 10,
         };
     }
-    static onColorize = `
-  vec2 point = v_textureCoordinate.xy * u_dimensions.xy;
-  vec2 pos1;
-  vec2 pos2;
-  vec2 d;
-  float c;
-  vec4 result = maskColor;
-
-
-  if(fade[0] > 0.0) {
-    pos1 = vec2(point.x, point.y);
-    pos2 = vec2(point.x, point.y + fade[0]);
-    d = pos2 - pos1;
-    c = dot(pos1, d) / dot(d, d);
-    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
-  }
-
-  if(fade[1] > 0.0) {
-    pos1 = vec2(point.x - u_dimensions.x - fade[1], v_textureCoordinate.y);
-    pos2 = vec2(point.x - u_dimensions.x, v_textureCoordinate.y);
-    d = pos1 - pos2;
-    c = dot(pos2, d) / dot(d, d);
-    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
-  }
-
-  if(fade[2] > 0.0) {
-    pos1 = vec2(v_textureCoordinate.x, point.y - u_dimensions.y - fade[2]);
-    pos2 = vec2(v_textureCoordinate.x, point.y - u_dimensions.y);
-    d = pos1 - pos2;
-    c = dot(pos2, d) / dot(d, d);
-    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
-  }
-
-  if(fade[3] > 0.0) {
-    pos1 = vec2(point.x, point.y);
-    pos2 = vec2(point.x + fade[3], point.y);
-    d = pos2 - pos1;
-    c = dot(pos1, d) / dot(d, d);
-    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
-  }
-
-  return result;
+    static onColorize = `
+  vec2 point = v_textureCoordinate.xy * u_dimensions.xy;
+  vec2 pos1;
+  vec2 pos2;
+  vec2 d;
+  float c;
+  vec4 result = maskColor;
+
+
+  if(fade[0] > 0.0) {
+    pos1 = vec2(point.x, point.y);
+    pos2 = vec2(point.x, point.y + fade[0]);
+    d = pos2 - pos1;
+    c = dot(pos1, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  if(fade[1] > 0.0) {
+    pos1 = vec2(point.x - u_dimensions.x - fade[1], v_textureCoordinate.y);
+    pos2 = vec2(point.x - u_dimensions.x, v_textureCoordinate.y);
+    d = pos1 - pos2;
+    c = dot(pos2, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  if(fade[2] > 0.0) {
+    pos1 = vec2(v_textureCoordinate.x, point.y - u_dimensions.y - fade[2]);
+    pos2 = vec2(v_textureCoordinate.x, point.y - u_dimensions.y);
+    d = pos1 - pos2;
+    c = dot(pos2, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  if(fade[3] > 0.0) {
+    pos1 = vec2(point.x, point.y);
+    pos2 = vec2(point.x + fade[3], point.y);
+    d = pos2 - pos1;
+    c = dot(pos1, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  return result;
   `;
 }
 //# sourceMappingURL=FadeOutEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/GlitchEffect.js

@@ -51,54 +51,54 @@ export class GlitchEffect extends ShaderEffect {
         },
     };
     static methods = {
-        rand: `
-      float function(vec2 p, float time) {
-        float t = floor(time * 20.) / 10.;
-        return fract(sin(dot(p, vec2(t * 12.9898, t * 78.233))) * 43758.5453);
-      }
+        rand: `
+      float function(vec2 p, float time) {
+        float t = floor(time * 20.) / 10.;
+        return fract(sin(dot(p, vec2(t * 12.9898, t * 78.233))) * 43758.5453);
+      }
     `,
-        noise: `
-      float function(vec2 uv, float blockiness, float time) {
-        vec2 lv = fract(uv);
-        vec2 id = floor(uv);
-
-        float n1 = rand(id, time);
-        float n2 = rand(id+vec2(1,0), time);
-        float n3 = rand(id+vec2(0,1), time);
-        float n4 = rand(id+vec2(1,1), time);
-        vec2 u = smoothstep(0.0, 1.0 + blockiness, lv);
-        return mix(mix(n1, n2, u.x), mix(n3, n4, u.x), u.y);
-      }
+        noise: `
+      float function(vec2 uv, float blockiness, float time) {
+        vec2 lv = fract(uv);
+        vec2 id = floor(uv);
+
+        float n1 = rand(id, time);
+        float n2 = rand(id+vec2(1,0), time);
+        float n3 = rand(id+vec2(0,1), time);
+        float n4 = rand(id+vec2(1,1), time);
+        vec2 u = smoothstep(0.0, 1.0 + blockiness, lv);
+        return mix(mix(n1, n2, u.x), mix(n3, n4, u.x), u.y);
+      }
     `,
-        fbm: `
-      float function(vec2 uv, int count, float blockiness, float complexity, float time) {
-        float val = 0.0;
-        float amp = 0.5;
-        const int MAX_ITERATIONS = 10;
-
-        for(int i = 0; i < MAX_ITERATIONS; i++) {
-          if(i >= count) {break;}
-          val += amp * noise(uv, blockiness, time);
-          amp *= 0.5;
-          uv *= complexity;
-        }
-        return val;
-      }
+        fbm: `
+      float function(vec2 uv, int count, float blockiness, float complexity, float time) {
+        float val = 0.0;
+        float amp = 0.5;
+        const int MAX_ITERATIONS = 10;
+
+        for(int i = 0; i < MAX_ITERATIONS; i++) {
+          if(i >= count) {break;}
+          val += amp * noise(uv, blockiness, time);
+          amp *= 0.5;
+          uv *= complexity;
+        }
+        return val;
+      }
     `,
     };
-    static onColorize = `
-    vec2 uv = v_textureCoordinate.xy;
-    float aspect = u_dimensions.x / u_dimensions.y;
-    vec2 a = vec2(uv.x * aspect , uv.y);
-    vec2 uv2 = vec2(a.x / u_dimensions.x, exp(a.y));
-
-    float shift = amplitude * pow($fbm(uv2, 4, blockiness, narrowness, time), minimizer);
-    float colR = texture2D(u_texture, vec2(uv.x + shift, uv.y)).r * (1. - shift);
-    float colG = texture2D(u_texture, vec2(uv.x - shift, uv.y)).g * (1. - shift);
-    float colB = texture2D(u_texture, vec2(uv.x - shift, uv.y)).b * (1. - shift);
-
-    vec3 f = vec3(colR, colG, colB);
-    return vec4(f, texture2D(u_texture, vec2(uv.x - shift, uv.y)).a);
+    static onColorize = `
+    vec2 uv = v_textureCoordinate.xy;
+    float aspect = u_dimensions.x / u_dimensions.y;
+    vec2 a = vec2(uv.x * aspect , uv.y);
+    vec2 uv2 = vec2(a.x / u_dimensions.x, exp(a.y));
+
+    float shift = amplitude * pow($fbm(uv2, 4, blockiness, narrowness, time), minimizer);
+    float colR = texture2D(u_texture, vec2(uv.x + shift, uv.y)).r * (1. - shift);
+    float colG = texture2D(u_texture, vec2(uv.x - shift, uv.y)).g * (1. - shift);
+    float colB = texture2D(u_texture, vec2(uv.x - shift, uv.y)).b * (1. - shift);
+
+    vec3 f = vec3(colR, colG, colB);
+    return vec4(f, texture2D(u_texture, vec2(uv.x - shift, uv.y)).a);
   `;
 }
 //# sourceMappingURL=GlitchEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/GrayscaleEffect.js

@@ -37,9 +37,9 @@ export class GrayscaleEffect extends ShaderEffect {
             type: 'float',
         },
     };
-    static onColorize = `
-    float grayness = 0.2 * maskColor.r + 0.6 * maskColor.g + 0.2 * maskColor.b;
-    return vec4(amount * vec3(grayness) + (1.0 - amount) * maskColor.rgb, maskColor.a);
+    static onColorize = `
+    float grayness = 0.2 * maskColor.r + 0.6 * maskColor.g + 0.2 * maskColor.b;
+    return vec4(amount * vec3(grayness) + (1.0 - amount) * maskColor.rgb, maskColor.a);
   `;
 }
 //# sourceMappingURL=GrayscaleEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/HolePunchEffect.js

@@ -49,32 +49,32 @@ export class HolePunchEffect extends ShaderEffect {
         };
     }
     static methods = {
-        fillMask: `
-      float function(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
     `,
-        boxDist: `
-      float function(vec2 p, vec2 size, float radius) {
-        size -= vec2(radius);
-        vec2 d = abs(p) - size;
-        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
-      }
+        boxDist: `
+      float function(vec2 p, vec2 size, float radius) {
+        size -= vec2(radius);
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
+      }
     `,
     };
-    static onShaderMask = `
-  vec2 halfDimensions = u_dimensions * 0.5;
-  vec2 size = vec2(width, height) * 0.5;
-  vec2 basePos = v_textureCoordinate.xy * u_dimensions.xy - vec2(x, y);
-  vec2 pos = basePos - size;
-  float r = radius[0] * step(pos.x, 0.5) * step(pos.y, 0.5);
-  r = r + radius[1] * step(0.5, pos.x) * step(pos.y, 0.5);
-  r = r + radius[2] * step(0.5, pos.x) * step(0.5, pos.y);
-  r = r + radius[3] * step(pos.x, 0.5) * step(0.5, pos.y);
-  return $boxDist(pos, size, r);
+    static onShaderMask = `
+  vec2 halfDimensions = u_dimensions * 0.5;
+  vec2 size = vec2(width, height) * 0.5;
+  vec2 basePos = v_textureCoordinate.xy * u_dimensions.xy - vec2(x, y);
+  vec2 pos = basePos - size;
+  float r = radius[0] * step(pos.x, 0.5) * step(pos.y, 0.5);
+  r = r + radius[1] * step(0.5, pos.x) * step(pos.y, 0.5);
+  r = r + radius[2] * step(0.5, pos.x) * step(0.5, pos.y);
+  r = r + radius[3] * step(pos.x, 0.5) * step(0.5, pos.y);
+  return $boxDist(pos, size, r);
   `;
-    static onEffectMask = `
-  return mix(maskColor, vec4(0.0), $fillMask(shaderMask));
+    static onEffectMask = `
+  return mix(maskColor, vec4(0.0), $fillMask(shaderMask));
   `;
 }
 //# sourceMappingURL=HolePunchEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.js

@@ -82,24 +82,24 @@ export class LinearGradientEffect extends ShaderEffect {
         },
     };
     static methods = {
-        fromLinear: `
-      vec4 function(vec4 linearRGB) {
-        vec4 higher = vec4(1.055)*pow(linearRGB, vec4(1.0/2.4)) - vec4(0.055);
-        vec4 lower = linearRGB * vec4(12.92);
-        return mix(higher, lower, 1.0);
-      }
+        fromLinear: `
+      vec4 function(vec4 linearRGB) {
+        vec4 higher = vec4(1.055)*pow(linearRGB, vec4(1.0/2.4)) - vec4(0.055);
+        vec4 lower = linearRGB * vec4(12.92);
+        return mix(higher, lower, 1.0);
+      }
     `,
-        toLinear: `
-      vec4 function(vec4 sRGB) {
-        vec4 higher = pow((sRGB + vec4(0.055))/vec4(1.055), vec4(2.4));
-        vec4 lower = sRGB/vec4(12.92);
-        return mix(higher, lower, 1.0);
-      }
+        toLinear: `
+      vec4 function(vec4 sRGB) {
+        vec4 higher = pow((sRGB + vec4(0.055))/vec4(1.055), vec4(2.4));
+        vec4 lower = sRGB/vec4(12.92);
+        return mix(higher, lower, 1.0);
+      }
     `,
-        calcPoint: `
-      vec2 function(float d, float angle) {
-        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-      }
+        calcPoint: `
+      vec2 function(float d, float angle) {
+        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+      }
     `,
     };
     static ColorLoop = (amount) => {
@@ -111,18 +111,18 @@ export class LinearGradientEffect extends ShaderEffect {
     };
     static onColorize = (props) => {
         const colors = props.colors.length || 1;
-        return `
-      float a = angle - (PI / 180.0 * 90.0);
-      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
-      vec2 f = $calcPoint(lineDist * 0.5, a);
-      vec2 t = $calcPoint(lineDist * 0.5, a + PI);
-      vec2 gradVec = t - f;
-      float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-
-      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
-      vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
-      ${this.ColorLoop(colors)}
-      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        return `
+      float a = angle - (PI / 180.0 * 90.0);
+      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
+      vec2 f = $calcPoint(lineDist * 0.5, a);
+      vec2 t = $calcPoint(lineDist * 0.5, a + PI);
+      vec2 gradVec = t - f;
+      float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
+
+      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
+      vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
+      ${this.ColorLoop(colors)}
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
     };
 }

package/dist/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.js

@@ -100,16 +100,16 @@ export class RadialGradientEffect extends ShaderEffect {
     };
     static onColorize = (props) => {
         const colors = props.colors.length || 1;
-        return `
-      vec2 point = v_textureCoordinate.xy * u_dimensions;
-      vec2 projection = vec2(pivot.x * u_dimensions.x, pivot.y * u_dimensions.y);
-
-      float dist = length((point - projection) / vec2(width, height));
-
-      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
-      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
-      ${this.ColorLoop(colors)}
-      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        return `
+      vec2 point = v_textureCoordinate.xy * u_dimensions;
+      vec2 projection = vec2(pivot.x * u_dimensions.x, pivot.y * u_dimensions.y);
+
+      float dist = length((point - projection) / vec2(width, height));
+
+      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
+      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
+      ${this.ColorLoop(colors)}
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
     };
 }

package/dist/src/core/renderers/webgl/shaders/effects/RadialProgressEffect.js

@@ -81,47 +81,47 @@ export class RadialProgressEffect extends ShaderEffect {
         },
     };
     static methods = {
-        rotateUV: `
-    vec2 function(vec2 uv, float d) {
-      float s = sin(d);
-      float c = cos(d);
-      mat2 rotMatrix = mat2(c, -s, s, c);
-      return uv * rotMatrix;
-    }
+        rotateUV: `
+    vec2 function(vec2 uv, float d) {
+      float s = sin(d);
+      float c = cos(d);
+      mat2 rotMatrix = mat2(c, -s, s, c);
+      return uv * rotMatrix;
+    }
     `,
-        drawDot: `
-    float function(vec2 uv, vec2 p, float r) {
-      uv += p;
-      float circle = length(uv) - r;
-      return clamp(-circle, 0.0, 1.0);
-    }
+        drawDot: `
+    float function(vec2 uv, vec2 p, float r) {
+      uv += p;
+      float circle = length(uv) - r;
+      return clamp(-circle, 0.0, 1.0);
+    }
     `,
     };
-    static onEffectMask = `
-    float outerRadius = radius * u_dimensions.y * 0.5;
-
-    float endAngle = range * progress - 0.0005;
-
-    vec2 uv = v_textureCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
-
-    uv = $rotateUV(uv, -(offset));
-    float linewidth = width * u_pixelRatio;
-    float circle = length(uv) - (outerRadius - linewidth) ;
-    circle = abs(circle) - linewidth;
-    circle = clamp(-circle, 0.0, 1.0);
-
-    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
-    float p = endAngle / (PI * 2.);
-
-    circle *= step(fract(angle), fract(p));
-
-    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
-    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
-
-    return mix(shaderColor, maskColor, circle);
+    static onEffectMask = `
+    float outerRadius = radius * u_dimensions.y * 0.5;
+
+    float endAngle = range * progress - 0.0005;
+
+    vec2 uv = v_textureCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
+
+    uv = $rotateUV(uv, -(offset));
+    float linewidth = width * u_pixelRatio;
+    float circle = length(uv) - (outerRadius - linewidth) ;
+    circle = abs(circle) - linewidth;
+    circle = clamp(-circle, 0.0, 1.0);
+
+    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
+    float p = endAngle / (PI * 2.);
+
+    circle *= step(fract(angle), fract(p));
+
+    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
+    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
+
+    return mix(shaderColor, maskColor, circle);
   `;
-    static onColorize = `
-    return color;
+    static onColorize = `
+    return color;
   `;
 }
 //# sourceMappingURL=RadialProgressEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/RadiusEffect.js

@@ -38,17 +38,17 @@ export class RadiusEffect extends ShaderEffect {
         },
     };
     static methods = {
-        fillMask: `
-      float function(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
     `,
-        boxDist: `
-      float function(vec2 p, vec2 size, float radius) {
-        size -= vec2(radius);
-        vec2 d = abs(p) - size;
-        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
-      }
+        boxDist: `
+      float function(vec2 p, vec2 size, float radius) {
+        size -= vec2(radius);
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
+      }
     `,
     };
     static resolveDefaults(props) {
@@ -56,16 +56,16 @@ export class RadiusEffect extends ShaderEffect {
             radius: props.radius ?? 10,
         };
     }
-    static onShaderMask = `
-  vec2 halfDimensions = u_dimensions * 0.5;
-  float r = radius[0] * step(v_textureCoordinate.x, 0.5) * step(v_textureCoordinate.y, 0.5);
-  r = r + radius[1] * step(0.5, v_textureCoordinate.x) * step(v_textureCoordinate.y, 0.5);
-  r = r + radius[2] * step(0.5, v_textureCoordinate.x) * step(0.5, v_textureCoordinate.y);
-  r = r + radius[3] * step(v_textureCoordinate.x, 0.5) * step(0.5, v_textureCoordinate.y);
-  return $boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions, r);
+    static onShaderMask = `
+  vec2 halfDimensions = u_dimensions * 0.5;
+  float r = radius[0] * step(v_textureCoordinate.x, 0.5) * step(v_textureCoordinate.y, 0.5);
+  r = r + radius[1] * step(0.5, v_textureCoordinate.x) * step(v_textureCoordinate.y, 0.5);
+  r = r + radius[2] * step(0.5, v_textureCoordinate.x) * step(0.5, v_textureCoordinate.y);
+  r = r + radius[3] * step(v_textureCoordinate.x, 0.5) * step(0.5, v_textureCoordinate.y);
+  return $boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions, r);
   `;
-    static onEffectMask = `
-  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
+    static onEffectMask = `
+  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
   `;
 }
 //# sourceMappingURL=RadiusEffect.js.map

package/dist/src/core/shaders/canvas/RoundedWithBorder.js

@@ -25,8 +25,14 @@ export const RoundedWithBorder = {
         this.computed.radius = radius;
         this.computed.borderColor = this.toColorString(this.props['border-color']);
         this.computed.borderAsym = !valuesAreEqual(this.props['border-width']);
-        const borderWidth = this.props['border-width'];
-        this.computed.borderRadius = radius.map((value, index) => Math.max(0, value - borderWidth[index] * 0.5));
+        //following vec4 convention 0, 1, 2, 3 => x, y, z, w;
+        const [x, y, z, w] = this.props['border-width'];
+        this.computed.borderRadius = [
+            Math.max(0.0, radius[0] - Math.max(x, w) * 0.5),
+            Math.max(0.0, radius[1] - Math.max(x, y) * 0.5),
+            Math.max(0.0, radius[2] - Math.max(z, y) * 0.5),
+            Math.max(0.0, radius[3] - Math.max(z, w) * 0.5),
+        ];
     },
     render(ctx, quad, renderContext) {
         roundedRectWithBorder(ctx, quad.tx, quad.ty, quad.width, quad.height, this.computed.radius, this.props['border-width'], this.computed.borderRadius, this.computed.borderColor, this.computed.borderAsym, renderContext);

package/dist/src/core/shaders/canvas/RoundedWithBorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,MAAM,GAAG,uBAAuB,CACpC,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CACxC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAa,CACxC,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,CAAC;QACxD,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAE,GAAG,GAAG,CAAC,CACvC,CAAC;IACZ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,EACrB,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,EACnC,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,QAAQ,CAAC,UAAW,EACzB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/canvas/RoundedWithBorder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAG7E,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,cAAc,EAAE,IAAI;IACpB,MAAM,CAAC,IAAI;QACT,MAAM,MAAM,GAAG,uBAAuB,CACpC,IAAI,CAAC,KAAM,CAAC,MAAc,EAC1B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACZ,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,cAAc,CACxC,IAAI,CAAC,KAAM,CAAC,cAAc,CAAa,CACxC,CAAC;QACF,qDAAqD;QACrD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,CAAC;QACzD,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG;YAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;SAChD,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa;QAC7B,qBAAqB,CACnB,GAAG,EACH,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,CAAC,MAAO,EACrB,IAAI,CAAC,KAAM,CAAC,cAAc,CAAS,EACnC,IAAI,CAAC,QAAQ,CAAC,YAAa,EAC3B,IAAI,CAAC,QAAQ,CAAC,WAAY,EAC1B,IAAI,CAAC,QAAQ,CAAC,UAAW,EACzB,aAAa,CACd,CAAC;IACJ,CAAC;CACF,CAAC"}