@lightningjs/renderer 2.9.0-beta2 → 2.9.0-beta4

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

@@ -24,10 +24,10 @@ export class RadialGradientEffect extends ShaderEffect {
     name = 'radialGradient';
     static getEffectKey(props) {
         if (props.colors.value) {
-            return `linearGradient${props.colors.value
+            return `radialGradient${props.colors.value
                 .length}`;
         }
-        return `linearGradient${props.colors.length}`;
+        return `radialGradient${props.colors.length}`;
     }
     static resolveDefaults(props) {
         const colors = props.colors ?? [0xff000000, 0xffffffff];
@@ -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/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js

@@ -40,7 +40,7 @@ export class SdfTrFontFace extends TrFontFace {
         const renderer = stage.renderer;
         assertTruthy(renderer instanceof WebGlCoreRenderer, 'SDF Font Faces can only be used with the WebGL Renderer');
         // Load image
-        this.texture = stage.txManager.loadTexture('ImageTexture', {
+        this.texture = stage.txManager.createTexture('ImageTexture', {
             src: atlasUrl,
             // IMPORTANT: The SDF shader requires the alpha channel to NOT be
             // premultiplied on the atlas texture. If it is premultiplied, the
@@ -48,15 +48,19 @@ export class SdfTrFontFace extends TrFontFace {
             // be very jagged.
             premultiplyAlpha: false,
         });
+        // Load the texture
+        stage.txManager.loadTexture(this.texture, true);
+        // FIXME This is a stop-gap solution to avoid Font Face textures to be cleaned up
+        // Ideally we do want to clean up the textures if they're not being used to save as much memory as possible
+        // However, we need to make sure that the font face is reloaded if the texture is cleaned up and needed again
+        // and make sure the SdfFontRenderer is properly guarded against textures being reloaded
+        // for now this will do the trick and the increase on memory is not that big
+        this.texture.preventCleanup = true;
         this.texture.on('loaded', () => {
             this.checkLoaded();
             // Make sure we mark the stage for a re-render (in case the font's texture was freed and reloaded)
             stage.requestRender();
         });
-        // Pre-load it
-        stage.txManager.once('initialized', () => {
-            this.texture.ctxTexture.load();
-        });
         // Set this.data to the fetched data from dataUrl
         fetch(atlasDataUrl)
             .then(async (response) => {

package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js.map

@@ -1 +1 @@
-{"version":3,"file":"SdfTrFontFace.js","sourceRoot":"","sources":["../../../../../../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SdfTrFontFace.js","sourceRoot":"","sources":["../../../../../../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts"],"names":[],"mappings":"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"}

package/dist/src/core/text-rendering/renderers/CanvasTextRenderer.js

@@ -261,7 +261,8 @@ export class CanvasTextRenderer extends TextRenderer {
     renderSingleCanvasPage(state) {
         assertTruthy(state.renderInfo);
         const node = state.node;
-        const texture = this.stage.txManager.loadTexture('ImageTexture', {
+        const texture = this.stage.txManager.createTexture('ImageTexture', {
+            premultiplyAlpha: true,
             src: function (lightning2TextRenderer, renderInfo) {
                 // load the canvas texture
                 assertTruthy(renderInfo);