@lightningjs/renderer 2.13.1 → 2.13.3

package/dist/src/core/renderers/webgl/shaders/RoundedRectangle.js

@@ -61,70 +61,70 @@ export class RoundedRectangle extends WebGlCoreShader {
             propsA.$dimensions.height === propsB.$dimensions.height);
     }
     static shaderSources = {
-        vertex: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      attribute vec2 a_position;
-      attribute vec2 a_textureCoordinate;
-      attribute vec4 a_color;
-      attribute float a_textureIndex;
-      attribute float a_depth;
-
-      uniform vec2 u_resolution;
-      uniform float u_pixelRatio;
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-
-      void main() {
-        vec2 normalized = a_position * u_pixelRatio / u_resolution;
-        vec2 zero_two = normalized * 2.0;
-        vec2 clip_space = zero_two - 1.0;
-
-        // pass to fragment
-        v_color = a_color;
-        v_textureCoordinate = a_textureCoordinate;
-
-        // flip y
-        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
-      }
+        vertex: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      attribute vec2 a_position;
+      attribute vec2 a_textureCoordinate;
+      attribute vec4 a_color;
+      attribute float a_textureIndex;
+      attribute float a_depth;
+
+      uniform vec2 u_resolution;
+      uniform float u_pixelRatio;
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoordinate;
+
+      void main() {
+        vec2 normalized = a_position * u_pixelRatio / u_resolution;
+        vec2 zero_two = normalized * 2.0;
+        vec2 clip_space = zero_two - 1.0;
+
+        // pass to fragment
+        v_color = a_color;
+        v_textureCoordinate = a_textureCoordinate;
+
+        // flip y
+        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+      }
     `,
-        fragment: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      uniform vec2 u_resolution;
-      uniform vec2 u_dimensions;
-      uniform float u_radius;
-      uniform sampler2D u_texture;
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-
-      float boxDist(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;
-      }
-
-      float fillMask(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
-
-      void main() {
-        vec4 color = texture2D(u_texture, v_textureCoordinate) * v_color;
-        vec2 halfDimensions = u_dimensions * 0.5;
-
-        float d = boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions + 0.5, u_radius);
-        gl_FragColor = mix(vec4(0.0), color, fillMask(d));
-      }
+        fragment: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      uniform vec2 u_resolution;
+      uniform vec2 u_dimensions;
+      uniform float u_radius;
+      uniform sampler2D u_texture;
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoordinate;
+
+      float boxDist(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;
+      }
+
+      float fillMask(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+
+      void main() {
+        vec4 color = texture2D(u_texture, v_textureCoordinate) * v_color;
+        vec2 halfDimensions = u_dimensions * 0.5;
+
+        float d = boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions + 0.5, u_radius);
+        gl_FragColor = mix(vec4(0.0), color, fillMask(d));
+      }
     `,
     };
 }

package/dist/src/core/renderers/webgl/shaders/SdfShader.js

@@ -91,69 +91,69 @@ export class SdfShader extends WebGlCoreShader {
         };
     }
     static shaderSources = {
-        vertex: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-      // an attribute is an input (in) to a vertex shader.
-      // It will receive data from a buffer
-      attribute vec2 a_position;
-      attribute vec2 a_textureCoordinate;
-
-      uniform vec2 u_resolution;
-      uniform mat3 u_transform;
-      uniform float u_scrollY;
-      uniform float u_pixelRatio;
-      uniform float u_size;
-
-      varying vec2 v_texcoord;
-
-      void main() {
-        vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
-        vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
-
-        // Calculate screen space with pixel ratio
-        vec2 screenSpace = (transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1);
-
-        gl_Position = vec4(screenSpace, 0.0, 1.0);
-        v_texcoord = a_textureCoordinate;
-
-      }
+        vertex: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+      // an attribute is an input (in) to a vertex shader.
+      // It will receive data from a buffer
+      attribute vec2 a_position;
+      attribute vec2 a_textureCoordinate;
+
+      uniform vec2 u_resolution;
+      uniform mat3 u_transform;
+      uniform float u_scrollY;
+      uniform float u_pixelRatio;
+      uniform float u_size;
+
+      varying vec2 v_texcoord;
+
+      void main() {
+        vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
+        vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
+
+        // Calculate screen space with pixel ratio
+        vec2 screenSpace = (transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1);
+
+        gl_Position = vec4(screenSpace, 0.0, 1.0);
+        v_texcoord = a_textureCoordinate;
+
+      }
     `,
-        fragment: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-      uniform vec4 u_color;
-      uniform sampler2D u_texture;
-      uniform float u_distanceRange;
-      uniform float u_pixelRatio;
-      uniform int u_debug;
-
-      varying vec2 v_texcoord;
-
-      float median(float r, float g, float b) {
-          return max(min(r, g), min(max(r, g), b));
-      }
-
-      void main() {
-          vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-          if (u_debug == 1) {
-            gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
-            return;
-          }
-          float scaledDistRange = u_distanceRange * u_pixelRatio;
-          float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
-          float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;
-
-          // Build the final color.
-          // IMPORTANT: We must premultiply the color by the alpha value before returning it.
-          gl_FragColor = vec4(u_color.r * opacity, u_color.g * opacity, u_color.b * opacity, opacity);
-      }
+        fragment: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+      uniform vec4 u_color;
+      uniform sampler2D u_texture;
+      uniform float u_distanceRange;
+      uniform float u_pixelRatio;
+      uniform int u_debug;
+
+      varying vec2 v_texcoord;
+
+      float median(float r, float g, float b) {
+          return max(min(r, g), min(max(r, g), b));
+      }
+
+      void main() {
+          vec3 sample = texture2D(u_texture, v_texcoord).rgb;
+          if (u_debug == 1) {
+            gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
+            return;
+          }
+          float scaledDistRange = u_distanceRange * u_pixelRatio;
+          float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
+          float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;
+
+          // Build the final color.
+          // IMPORTANT: We must premultiply the color by the alpha value before returning it.
+          gl_FragColor = vec4(u_color.r * opacity, u_color.g * opacity, u_color.b * opacity, opacity);
+      }
     `,
     };
 }

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

@@ -47,25 +47,25 @@ export class BorderBottomEffect 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, u_dimensions.y - 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, u_dimensions.y - 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=BorderBottomEffect.js.map

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

@@ -46,13 +46,13 @@ export class BorderEffect extends ShaderEffect {
             type: 'vec4',
         },
     };
-    static onEffectMask = `
-  float intR = shaderMask + 1.0;
-  float mask = clamp(intR + width, 0.0, 1.0) - clamp(intR, 0.0, 1.0);
-  return mix(shaderColor, mix(shaderColor, maskColor, maskColor.a), mask);
+    static onEffectMask = `
+  float intR = shaderMask + 1.0;
+  float mask = clamp(intR + width, 0.0, 1.0) - clamp(intR, 0.0, 1.0);
+  return mix(shaderColor, mix(shaderColor, maskColor, maskColor.a), mask);
   `;
-    static onColorize = `
-    return color;
+    static onColorize = `
+    return color;
   `;
 }
 //# sourceMappingURL=BorderEffect.js.map

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

@@ -47,25 +47,25 @@ export class BorderLeftEffect 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(width * 0.5, 0.0);
-  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
-  return mix(shaderColor, maskColor, $fillMask(mask));
+    static onEffectMask = `
+  vec2 pos = vec2(width * 0.5, 0.0);
+  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
+  return mix(shaderColor, maskColor, $fillMask(mask));
   `;
-    static onColorize = `
-    return color;
+    static onColorize = `
+    return color;
   `;
 }
 //# sourceMappingURL=BorderLeftEffect.js.map

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

@@ -47,25 +47,25 @@ export class BorderRightEffect 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(u_dimensions.x - width * 0.5, 0.0);
-  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
-  return mix(shaderColor, maskColor, $fillMask(mask));
+    static onEffectMask = `
+  vec2 pos = vec2(u_dimensions.x - width * 0.5, 0.0);
+  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
+  return mix(shaderColor, maskColor, $fillMask(mask));
   `;
-    static onColorize = `
-    return color;
+    static onColorize = `
+    return color;
   `;
 }
 //# sourceMappingURL=BorderRightEffect.js.map

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