@lightningjs/renderer 2.19.0 → 2.20.0

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -136,7 +136,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.defaultShader = this.defShaderCtrl.shader as WebGlCoreShader;
     const quadBuffer = glw.createBuffer();
     assertTruthy(quadBuffer);
-    const stride = 6 * Float32Array.BYTES_PER_ELEMENT;
+    const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
     this.quadBufferCollection = new BufferCollection([
       {
         buffer: quadBuffer,
@@ -173,6 +173,14 @@ export class WebGlCoreRenderer extends CoreRenderer {
             stride,
             offset: 5 * Float32Array.BYTES_PER_ELEMENT,
           },
+          a_nodeCoordinate: {
+            name: 'a_nodeCoordinate',
+            size: 2,
+            type: glw.FLOAT,
+            normalized: false,
+            stride,
+            offset: 6 * Float32Array.BYTES_PER_ELEMENT,
+          },
         },
       },
     ]);
@@ -230,7 +238,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
      * If the shader props contain any automatic properties, update it with the
      * current dimensions and or alpha that will be used to render the quad.
      */
-    if (params.shaderProps !== null) {
+    if (params.shader !== this.defaultShader) {
       if (hasOwn(params.shaderProps, '$dimensions') == true) {
         const dimensions = params.shaderProps.$dimensions as Dimensions;
         dimensions.width = params.width;
@@ -243,20 +251,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
     }
 
     let { curBufferIdx: bufferIdx, curRenderOp } = this;
-    const targetDims = { width: -1, height: -1 };
-    targetDims.width = params.width;
-    targetDims.height = params.height;
-
-    const targetShader =
-      (params.shader as WebGlCoreShader) || this.defaultShader;
-    assertTruthy(
-      targetShader.getUniformLocation !== undefined,
-      'Invalid WebGL shader',
-    );
+    const targetDims = { width: params.width, height: params.height };
 
     if (this.reuseRenderOp(params) === false) {
       this.newRenderOp(
-        targetShader,
+        params.shader as WebGlCoreShader,
         params.shaderProps as Record<string, unknown>,
         params.alpha,
         targetDims,
@@ -270,6 +269,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       assertTruthy(curRenderOp);
     }
 
+    let ctxTexture = undefined;
+
     let texCoordX1 = 0;
     let texCoordY1 = 0;
     let texCoordX2 = 1;
@@ -290,6 +291,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
       texCoordY1 = ty / parentH;
       texCoordY2 = texCoordY1 + th / parentH;
       texture = (texture as SubTexture).parentTexture;
+      ctxTexture = texture.ctxTexture as WebGlCoreCtxTexture;
+    } else {
+      ctxTexture = texture.ctxTexture as WebGlCoreCtxTexture;
+      texCoordX1 = ctxTexture.txCoordX1;
+      texCoordY1 = ctxTexture.txCoordY1;
+      texCoordX2 = ctxTexture.txCoordX2;
+      texCoordY2 = ctxTexture.txCoordY2;
     }
 
     if (
@@ -336,14 +344,6 @@ export class WebGlCoreRenderer extends CoreRenderer {
       [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
     }
 
-    let ctxTexture = texture.ctxTexture as WebGlCoreCtxTexture;
-    if (ctxTexture === undefined) {
-      ctxTexture = this.stage.defaultTexture?.ctxTexture as WebGlCoreCtxTexture;
-      console.warn(
-        'WebGL Renderer: Texture does not have a ctxTexture, using default texture instead',
-      );
-    }
-
     const textureIdx = this.addTexture(ctxTexture, bufferIdx);
 
     assertTruthy(this.curRenderOp !== null);
@@ -355,6 +355,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
       uiQuadBuffer[bufferIdx++] = params.colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+      fQuadBuffer[bufferIdx++] = 0;
+      fQuadBuffer[bufferIdx++] = 0;
 
       // Upper-Right
       fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
@@ -363,6 +365,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY1;
       uiQuadBuffer[bufferIdx++] = params.colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 1;
+      fQuadBuffer[bufferIdx++] = 0;
 
       // Lower-Left
       fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
@@ -371,6 +375,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = params.colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 0;
+      fQuadBuffer[bufferIdx++] = 1;
 
       // Lower-Right
       fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
@@ -379,6 +385,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = params.colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
+
+      fQuadBuffer[bufferIdx++] = 1;
+      fQuadBuffer[bufferIdx++] = 1;
     } else if (params.tb !== 0 || params.tc !== 0) {
       // Upper-Left
       fQuadBuffer[bufferIdx++] = params.tx; // vertexX
@@ -387,6 +396,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
       uiQuadBuffer[bufferIdx++] = params.colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+      fQuadBuffer[bufferIdx++] = 0;
+      fQuadBuffer[bufferIdx++] = 0;
 
       // Upper-Right
       fQuadBuffer[bufferIdx++] = params.tx + params.width * params.ta;
@@ -395,6 +406,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY1;
       uiQuadBuffer[bufferIdx++] = params.colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 1;
+      fQuadBuffer[bufferIdx++] = 0;
 
       // Lower-Left
       fQuadBuffer[bufferIdx++] = params.tx + params.height * params.tb;
@@ -403,6 +416,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = params.colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 0;
+      fQuadBuffer[bufferIdx++] = 1;
 
       // Lower-Right
       fQuadBuffer[bufferIdx++] =
@@ -413,6 +428,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = params.colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 1;
+      fQuadBuffer[bufferIdx++] = 1;
     } else {
       // Calculate the right corner of the quad
       // multiplied by the scale
@@ -426,6 +443,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
       uiQuadBuffer[bufferIdx++] = params.colorTl; // color
       fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+      fQuadBuffer[bufferIdx++] = 0;
+      fQuadBuffer[bufferIdx++] = 0;
 
       // Upper-Right
       fQuadBuffer[bufferIdx++] = rightCornerX;
@@ -434,6 +453,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY1;
       uiQuadBuffer[bufferIdx++] = params.colorTr;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 1;
+      fQuadBuffer[bufferIdx++] = 0;
 
       // Lower-Left
       fQuadBuffer[bufferIdx++] = params.tx;
@@ -442,6 +463,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = params.colorBl;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 0;
+      fQuadBuffer[bufferIdx++] = 1;
 
       // Lower-Right
       fQuadBuffer[bufferIdx++] = rightCornerX;
@@ -450,9 +473,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
       fQuadBuffer[bufferIdx++] = texCoordY2;
       uiQuadBuffer[bufferIdx++] = params.colorBr;
       fQuadBuffer[bufferIdx++] = textureIdx;
+      fQuadBuffer[bufferIdx++] = 1;
+      fQuadBuffer[bufferIdx++] = 1;
     }
     // Update the length of the current render op
-    this.curRenderOp.length += WORDS_PER_QUAD;
     this.curRenderOp.numQuads++;
     this.curBufferIdx = bufferIdx;
   }
@@ -542,10 +566,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const { shader, shaderProps, parentHasRenderTexture, rtt, clippingRect } =
       params;
 
-    const targetShader = shader || this.defaultShader;
-
     // Switching shader program will require a new render operation
-    if (this.curRenderOp?.shader !== targetShader) {
+    if (this.curRenderOp?.shader !== shader) {
       return false;
     }
 
@@ -557,18 +579,17 @@ export class WebGlCoreRenderer extends CoreRenderer {
     // Force new render operation if rendering to texture
     // @todo: This needs to be improved, render operations could also be reused
     // for rendering to texture
-    if (parentHasRenderTexture !== undefined || rtt !== undefined) {
+    if (parentHasRenderTexture === true || rtt === true) {
       return false;
     }
 
     // Check if the shader can batch the shader properties
     if (
       this.curRenderOp.shader !== this.defaultShader &&
-      (shaderProps === null ||
-        this.curRenderOp.shader.canBatchShaderProps(
-          this.curRenderOp.shaderProps,
-          shaderProps,
-        ) === false)
+      this.curRenderOp.shader.canBatchShaderProps(
+        this.curRenderOp.shaderProps,
+        shaderProps,
+      ) === false
     ) {
       return false;
     }
@@ -607,7 +628,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
 
     // Calculate the size of each quad in bytes (4 vertices per quad) times the size of each vertex in bytes
-    const QUAD_SIZE_IN_BYTES = 4 * (6 * arr.BYTES_PER_ELEMENT); // 6 attributes per vertex
+    const QUAD_SIZE_IN_BYTES = 4 * (8 * arr.BYTES_PER_ELEMENT); // 8 attributes per vertex
     this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
   }
 

package/src/core/renderers/webgl/WebGlCoreShader.ts

@@ -65,7 +65,6 @@ export interface AlphaShaderProp {
 }
 
 export abstract class WebGlCoreShader extends CoreShader {
-  protected boundBufferCollection: BufferCollection | null = null;
   protected buffersBound = false;
   protected program: WebGLProgram;
   /**
@@ -77,11 +76,8 @@ export abstract class WebGlCoreShader extends CoreShader {
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlCoreRenderer;
   protected glw: WebGlContextWrapper;
-  protected attributeBuffers: Record<string, WebGLBuffer>;
-  protected attributeLocations: Record<string, number>;
-  protected attributeNames: string[];
+  protected attributeLocations: string[];
   protected uniformLocations: Record<string, WebGLUniformLocation>;
-  protected uniformTypes: Record<string, keyof UniformMethodMap>;
   readonly supportsIndexedTextures: boolean;
 
   constructor(options: ShaderOptions) {
@@ -160,61 +156,8 @@ export abstract class WebGlCoreShader extends CoreShader {
     }
     this.program = program;
 
-    this.attributeLocations = {} as Record<string, number>;
-    this.attributeBuffers = {} as Record<string, number>;
-    this.attributeNames = [];
-
-    [...options.attributes].forEach((attributeName) => {
-      const location = glw.getAttribLocation(this.program, attributeName);
-      if (location < 0) {
-        throw new Error(
-          `${this.constructor.name}: Vertex shader must have an attribute "${attributeName}"!`,
-        );
-      }
-      const buffer = glw.createBuffer();
-      if (!buffer) {
-        throw new Error(
-          `${this.constructor.name}: Could not create buffer for attribute "${attributeName}"`,
-        );
-      }
-
-      this.attributeLocations[attributeName] = location;
-      this.attributeBuffers[attributeName] = buffer;
-      this.attributeNames.push(attributeName);
-    });
-
-    this.uniformLocations = {} as Record<string, WebGLRenderingContext>;
-    this.uniformTypes = {} as Record<string, keyof UniformMethodMap>;
-    options.uniforms.forEach((uniform: UniformInfo) => {
-      const location = glw.getUniformLocation(this.program, uniform.name);
-      this.uniformTypes[uniform.name] = uniform.uniform;
-      if (!location) {
-        console.warn(
-          `Shader "${this.constructor.name}" could not get uniform location for "${uniform.name}"`,
-        );
-        return;
-      }
-      this.uniformLocations[uniform.name] = location;
-    });
-  }
-
-  private bindBufferAttribute(
-    location: number,
-    buffer: WebGLBuffer,
-    attribute: AttributeInfo,
-  ) {
-    const { glw } = this;
-    glw.enableVertexAttribArray(location);
-
-    glw.vertexAttribPointer(
-      buffer,
-      location,
-      attribute.size,
-      attribute.type,
-      attribute.normalized,
-      attribute.stride,
-      attribute.offset,
-    );
+    this.attributeLocations = glw.getAttributeLocations(this.program);
+    this.uniformLocations = glw.getUniformLocations(this.program);
   }
 
   disableAttribute(location: number) {
@@ -222,10 +165,11 @@ export abstract class WebGlCoreShader extends CoreShader {
   }
 
   disableAttributes() {
-    for (const loc in this.attributeLocations) {
-      this.disableAttribute(this.attributeLocations[loc] as number);
+    const glw = this.glw;
+    const attribLen = this.attributeLocations.length;
+    for (let i = 0; i < attribLen; i++) {
+      glw.disableVertexAttribArray(i);
     }
-    this.boundBufferCollection = null;
   }
 
   /**
@@ -325,21 +269,29 @@ export abstract class WebGlCoreShader extends CoreShader {
   }
 
   bindBufferCollection(buffer: BufferCollection) {
-    if (this.boundBufferCollection === buffer) {
-      return;
-    }
-    for (const attributeName in this.attributeLocations) {
-      const resolvedBuffer = buffer.getBuffer(attributeName);
-      const resolvedInfo = buffer.getAttributeInfo(attributeName);
-      assertTruthy(resolvedBuffer, `Buffer for "${attributeName}" not found`);
-      assertTruthy(resolvedInfo);
-      this.bindBufferAttribute(
-        this.attributeLocations[attributeName]!,
+    const { glw } = this;
+    const attribs = this.attributeLocations;
+    const attribLen = attribs.length;
+
+    for (let i = 0; i < attribLen; i++) {
+      const name = attribs[i]!;
+
+      const resolvedBuffer = buffer.getBuffer(name);
+      const resolvedInfo = buffer.getAttributeInfo(name);
+      if (resolvedBuffer === undefined || resolvedInfo === undefined) {
+        continue;
+      }
+      glw.enableVertexAttribArray(i);
+      glw.vertexAttribPointer(
         resolvedBuffer,
-        resolvedInfo,
+        i,
+        resolvedInfo.size,
+        resolvedInfo.type,
+        resolvedInfo.normalized,
+        resolvedInfo.stride,
+        resolvedInfo.offset,
       );
     }
-    this.boundBufferCollection = buffer;
   }
 
   protected override bindProps(props: Record<string, unknown>) {

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -37,8 +37,6 @@ export interface UniformInfo {
 
 export interface ShaderOptions {
   renderer: WebGlCoreRenderer;
-  attributes: string[];
-  uniforms: UniformInfo[];
   shaderSources?: ShaderProgramSources;
   supportsIndexedTextures?: boolean;
   webgl1Extensions?: string[];

package/src/core/renderers/webgl/shaders/DefaultShader.ts

@@ -26,12 +26,6 @@ export class DefaultShader extends WebGlCoreShader {
   constructor(renderer: WebGlCoreRenderer) {
     super({
       renderer,
-      attributes: ['a_position', 'a_textureCoordinate', 'a_color'],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_texture', uniform: 'uniform2fv' },
-      ],
     });
   }
 
@@ -51,6 +45,7 @@ export class DefaultShader extends WebGlCoreShader {
 
       attribute vec2 a_position;
       attribute vec2 a_textureCoordinate;
+      attribute vec2 a_nodeCoordinate;
       attribute vec4 a_color;
 
       uniform vec2 u_resolution;
@@ -59,6 +54,7 @@ export class DefaultShader extends WebGlCoreShader {
 
       varying vec4 v_color;
       varying vec2 v_textureCoordinate;
+      varying vec2 v_nodeCoordinate;
 
       void main() {
         vec2 normalized = a_position * u_pixelRatio;
@@ -66,6 +62,7 @@ export class DefaultShader extends WebGlCoreShader {
 
         v_color = a_color;
         v_textureCoordinate = a_textureCoordinate;
+        v_nodeCoordinate = a_nodeCoordinate;
 
         gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
         gl_Position.y = -sign(screenSpace.y) * gl_Position.y;

package/src/core/renderers/webgl/shaders/DefaultShaderBatched.ts

@@ -29,17 +29,6 @@ export class DefaultShaderBatched extends WebGlCoreShader {
   constructor(renderer: WebGlCoreRenderer) {
     super({
       renderer,
-      attributes: [
-        'a_position',
-        'a_textureCoordinate',
-        'a_color',
-        'a_textureIndex',
-      ],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_textures[0]', uniform: 'uniform1iv' },
-      ],
     });
   }
 

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -118,15 +118,6 @@ export class DynamicShader extends WebGlCoreShader {
     const shader = DynamicShader.createShader(props, effectContructors);
     super({
       renderer,
-      attributes: ['a_position', 'a_textureCoordinate', 'a_color'],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_texture', uniform: 'uniform2fv' },
-        { name: 'u_dimensions', uniform: 'uniform2fv' },
-        { name: 'u_alpha', uniform: 'uniform1f' },
-        ...shader.uniforms,
-      ],
       shaderSources: {
         vertex: shader.vertex,
         fragment: shader.fragment,
@@ -504,6 +495,7 @@ export class DynamicShader extends WebGlCoreShader {
     # endif
 
     attribute vec2 a_textureCoordinate;
+    attribute vec2 a_nodeCoordinate;
     attribute vec2 a_position;
     attribute vec4 a_color;
     attribute float a_textureIndex;
@@ -514,6 +506,7 @@ export class DynamicShader extends WebGlCoreShader {
     varying vec4 v_color;
     varying vec2 v_textureCoordinate;
     varying float v_textureIndex;
+    varying vec2 v_nodeCoordinate;
 
     void main(){
       vec2 normalized = a_position * u_pixelRatio / u_resolution;
@@ -524,6 +517,7 @@ export class DynamicShader extends WebGlCoreShader {
       v_color = a_color;
       v_textureCoordinate = a_textureCoordinate;
       v_textureIndex = a_textureIndex;
+      v_nodeCoordinate = a_nodeCoordinate;
 
       // flip y
       gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
@@ -555,13 +549,14 @@ export class DynamicShader extends WebGlCoreShader {
 
     varying vec4 v_color;
     varying vec2 v_textureCoordinate;
+    varying vec2 v_nodeCoordinate;
 
     ${methods}
 
     ${effectMethods}
 
     void main() {
-      vec2 p = v_textureCoordinate.xy * u_dimensions - u_dimensions * 0.5;
+      vec2 p = v_nodeCoordinate.xy * u_dimensions - u_dimensions * 0.5;
       vec2 d = abs(p) - (u_dimensions) * 0.5;
       float lng_DefaultMask = min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
 

package/src/core/renderers/webgl/shaders/RoundedRectangle.ts

@@ -45,14 +45,6 @@ export class RoundedRectangle extends WebGlCoreShader {
   constructor(renderer: WebGlCoreRenderer) {
     super({
       renderer,
-      attributes: ['a_position', 'a_textureCoordinate', 'a_color'],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_texture', uniform: 'uniform2f' },
-        { name: 'u_dimensions', uniform: 'uniform2fv' },
-        { name: 'u_radius', uniform: 'uniform1f' },
-      ],
     });
   }
 
@@ -109,13 +101,14 @@ export class RoundedRectangle extends WebGlCoreShader {
       attribute vec2 a_textureCoordinate;
       attribute vec4 a_color;
       attribute float a_textureIndex;
-      attribute float a_depth;
+      attribute vec2 a_nodeCoordinate;
 
       uniform vec2 u_resolution;
       uniform float u_pixelRatio;
 
       varying vec4 v_color;
       varying vec2 v_textureCoordinate;
+      varying vec2 v_nodeCoordinate;
 
       void main() {
         vec2 normalized = a_position * u_pixelRatio / u_resolution;
@@ -125,6 +118,7 @@ export class RoundedRectangle extends WebGlCoreShader {
         // pass to fragment
         v_color = a_color;
         v_textureCoordinate = a_textureCoordinate;
+        v_nodeCoordinate = a_nodeCoordinate;
 
         // flip y
         gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
@@ -144,6 +138,7 @@ export class RoundedRectangle extends WebGlCoreShader {
 
       varying vec4 v_color;
       varying vec2 v_textureCoordinate;
+      varying vec2 v_nodeCoordinate;
 
       float boxDist(vec2 p, vec2 size, float radius){
         size -= vec2(radius);
@@ -159,7 +154,7 @@ export class RoundedRectangle extends WebGlCoreShader {
         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);
+        float d = boxDist(v_nodeCoordinate.xy * u_dimensions - halfDimensions, halfDimensions + 0.5, u_radius);
         gl_FragColor = mix(vec4(0.0), color, fillMask(d));
       }
     `,

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -64,18 +64,6 @@ export class SdfShader extends WebGlCoreShader {
   constructor(renderer: WebGlCoreRenderer) {
     super({
       renderer,
-      attributes: ['a_position', 'a_textureCoordinate'],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_transform', uniform: 'uniformMatrix3fv' },
-        { name: 'u_scrollY', uniform: 'uniform1f' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_texture', uniform: 'uniform2f' },
-        { name: 'u_color', uniform: 'uniform4fv' },
-        { name: 'u_size', uniform: 'uniform1f' },
-        { name: 'u_distanceRange', uniform: 'uniform1f' },
-        { name: 'u_debug', uniform: 'uniform1i' },
-      ],
     });
   }
 

package/src/core/renderers/webgl/shaders/effects/BorderBottomEffect.ts

@@ -91,7 +91,7 @@ export class BorderBottomEffect extends ShaderEffect {
 
   static override 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));
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
   return mix(shaderColor, maskColor, $fillMask(mask));
   `;
 

package/src/core/renderers/webgl/shaders/effects/BorderLeftEffect.ts

@@ -91,7 +91,7 @@ export class BorderLeftEffect extends ShaderEffect {
 
   static override 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));
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
   return mix(shaderColor, maskColor, $fillMask(mask));
   `;
 

package/src/core/renderers/webgl/shaders/effects/BorderRightEffect.ts

@@ -91,7 +91,7 @@ export class BorderRightEffect extends ShaderEffect {
 
   static override 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));
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
   return mix(shaderColor, maskColor, $fillMask(mask));
   `;
 

package/src/core/renderers/webgl/shaders/effects/BorderTopEffect.ts

@@ -91,7 +91,7 @@ export class BorderTopEffect extends ShaderEffect {
 
   static override 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));
+  float mask = $rectDist(v_nodeCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
   return mix(shaderColor, maskColor, $fillMask(mask));
   `;
 

package/src/core/renderers/webgl/shaders/effects/FadeOutEffect.ts

@@ -82,7 +82,7 @@ export class FadeOutEffect extends ShaderEffect {
   }
 
   static override onColorize = `
-  vec2 point = v_textureCoordinate.xy * u_dimensions.xy;
+  vec2 point = v_nodeCoordinate.xy * u_dimensions.xy;
   vec2 pos1;
   vec2 pos2;
   vec2 d;
@@ -99,16 +99,16 @@ export class FadeOutEffect extends ShaderEffect {
   }
 
   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);
+    pos1 = vec2(point.x - u_dimensions.x - fade[1], v_nodeCoordinate.y);
+    pos2 = vec2(point.x - u_dimensions.x, v_nodeCoordinate.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);
+    pos1 = vec2(v_nodeCoordinate.x, point.y - u_dimensions.y - fade[2]);
+    pos2 = vec2(v_nodeCoordinate.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)));

package/src/core/renderers/webgl/shaders/effects/HolePunchEffect.ts

@@ -142,7 +142,7 @@ export class HolePunchEffect extends ShaderEffect {
   static override 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 basePos = v_nodeCoordinate.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);

package/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -146,7 +146,7 @@ export class LinearGradientEffect extends ShaderEffect {
       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 dist = dot(v_nodeCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
 
       //return early if dist is lower or equal to first stop
       if(dist <= stops[0]) {