@lightningjs/renderer 2.19.1 → 2.20.1

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

@@ -21,6 +21,7 @@ import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import { uploadCompressedTexture } from '../../lib/textureCompression.js';
 import type { Texture } from '../../textures/Texture.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
@@ -43,6 +44,11 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
   private _w = 0;
   private _h = 0;
 
+  txCoordX1 = 0;
+  txCoordY1 = 0;
+  txCoordX2 = 1;
+  txCoordY2 = 1;
+
   constructor(
     protected glw: WebGlContextWrapper,
     memManager: TextureMemoryManager,
@@ -211,26 +217,22 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
 
       this.setTextureMemUse(height * width * formatBytes * memoryPadding);
     } else if (tdata && 'mipmaps' in tdata && tdata.mipmaps) {
-      const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata;
-      const view =
-        type === 'ktx'
-          ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
-          : (mipmaps[0] as unknown as ArrayBufferView);
-
-      glw.bindTexture(this._nativeCtxTexture);
-
-      glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
-      glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-      glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-      glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-      glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+      const { mipmaps, type, blockInfo } = tdata;
+      uploadCompressedTexture[type]!(glw, this._nativeCtxTexture, tdata);
 
       // Check for errors after compressed texture operations
       if (this.checkGLError() === true) {
         return { width: 0, height: 0 };
       }
 
-      this.setTextureMemUse(view.byteLength);
+      width = tdata.width;
+      height = tdata.height;
+      this.txCoordX2 =
+        width / (Math.ceil(width / blockInfo.width) * blockInfo.width);
+      this.txCoordY2 =
+        height / (Math.ceil(height / blockInfo.height) * blockInfo.height);
+
+      this.setTextureMemUse(mipmaps[0]?.byteLength ?? 0);
     } else if (tdata && tdata instanceof Uint8Array) {
       // Color Texture
       width = 1;

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

@@ -88,7 +88,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     shader.bindRenderOp(this, shaderProps);
 
     // TODO: Reduce calculations required
-    const quadIdx = (this.bufferIdx / 24) * 6 * 2;
+    const quadIdx = (this.bufferIdx / 32) * 6 * 2;
 
     // Clipping
     if (this.clippingRect.valid) {

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,
+          },
         },
       },
     ]);
@@ -261,6 +269,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
       assertTruthy(curRenderOp);
     }
 
+    let ctxTexture = undefined;
+
     let texCoordX1 = 0;
     let texCoordY1 = 0;
     let texCoordX2 = 1;
@@ -281,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 (
@@ -327,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);
@@ -346,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;
@@ -354,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;
@@ -362,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;
@@ -370,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
@@ -378,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;
@@ -386,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;
@@ -394,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++] =
@@ -404,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
@@ -417,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;
@@ -425,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;
@@ -433,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;
@@ -441,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;
   }
@@ -595,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]) {