@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

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

@@ -18,12 +18,11 @@
  */
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { Default } from '../../shaders/webgl/Default.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import type { CoreShaderProgram } from '../CoreShaderProgram.js';
 import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import type { WebGlRenderOp } from './WebGlRenderOp.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlRenderer, WebGlRenderOp } from './WebGlRenderer.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
+import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { BufferCollection } from './internal/BufferCollection.js';
 import {
   createProgram,
@@ -33,10 +32,10 @@ import {
   type UniformSet3Params,
   type UniformSet4Params,
 } from './internal/ShaderUtils.js';
+import { CoreNode } from '../../CoreNode.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
-  protected boundBufferCollection: BufferCollection | null = null;
-  protected program: WebGLProgram;
+  protected program: WebGLProgram | null;
   /**
    * Vertex Array Object
    *
@@ -46,10 +45,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
-  protected attributeLocations: Record<string, number>;
+  protected attributeLocations: string[];
+  protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  protected useTimeValue = false;
+  public isDestroyed = false;
   supportsIndexedTextures = false;
 
   constructor(
@@ -117,10 +119,14 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.program = program;
     this.attributeLocations = glw.getAttributeLocations(program);
 
-    this.useSystemAlpha =
-      this.glw.getUniformLocation(program, 'u_alpha') !== null;
-    this.useSystemDimensions =
-      this.glw.getUniformLocation(program, 'u_dimensions') !== null;
+    const uniLocs = (this.uniformLocations = glw.getUniformLocations(program));
+
+    this.useSystemAlpha = uniLocs['u_alpha'] !== undefined;
+    this.useSystemDimensions = uniLocs['u_dimensions'] !== undefined;
+
+    this.useTimeValue =
+      this.glw.getUniformLocation(program, 'u_dimensions') !== null &&
+      config.time !== undefined;
 
     this.lifecycle = {
       update: config.update,
@@ -133,44 +139,50 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   disableAttributes() {
-    const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
-    const attribLen = attribs.length;
+    const glw = this.glw;
+    const attribLen = this.attributeLocations.length;
     for (let i = 0; i < attribLen; i++) {
       glw.disableVertexAttribArray(i);
     }
   }
 
-  reuseRenderOp(
-    incomingQuad: QuadOptions,
-    currentRenderOp: WebGlRenderOp,
-  ): boolean {
+  reuseRenderOp(node: CoreNode, currentRenderOp: WebGlRenderOp): boolean {
     if (this.lifecycle.canBatch !== undefined) {
-      return this.lifecycle.canBatch(incomingQuad, currentRenderOp);
+      return this.lifecycle.canBatch(node, currentRenderOp);
+    }
+
+    const { time, worldAlpha, w, h } = node;
+
+    if (this.useTimeValue === true) {
+      if (time !== currentRenderOp.time) {
+        return false;
+      }
     }
 
     if (this.useSystemAlpha === true) {
-      if (incomingQuad.alpha !== currentRenderOp.alpha) {
+      if (worldAlpha !== currentRenderOp.worldAlpha) {
         return false;
       }
     }
 
     if (this.useSystemDimensions === true) {
-      if (
-        incomingQuad.width !== currentRenderOp.width ||
-        incomingQuad.height !== currentRenderOp.height
-      ) {
+      if (w !== currentRenderOp.w || h !== currentRenderOp.h) {
         return false;
       }
     }
+
     let shaderPropsA: Record<string, unknown> | undefined = undefined;
     let shaderPropsB: Record<string, unknown> | undefined = undefined;
 
-    if (incomingQuad.shader !== null) {
-      shaderPropsA = incomingQuad.shader.resolvedProps;
+    const shader = node.props.shader;
+
+    if (shader !== null) {
+      shaderPropsA = (shader as WebGlShaderNode).resolvedProps;
     }
-    if (currentRenderOp.shader !== null) {
-      shaderPropsB = currentRenderOp.shader.resolvedProps;
+
+    const opShader = currentRenderOp.shader;
+    if (opShader !== null) {
+      shaderPropsB = (opShader as WebGlShaderNode).resolvedProps;
     }
 
     if (
@@ -192,10 +204,15 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   bindRenderOp(renderOp: WebGlRenderOp) {
-    this.bindBufferCollection(renderOp.buffers);
-    this.bindTextures(renderOp.textures);
+    const isCoreNode = renderOp.isCoreNode;
 
-    const { parentHasRenderTexture } = renderOp;
+    this.bindTextures(renderOp.renderOpTextures);
+    this.bindBufferCollection(renderOp.quadBufferCollection);
+
+    const parentHasRenderTexture = renderOp.parentHasRenderTexture;
+    const framebufferDimensions = isCoreNode
+      ? renderOp.parentFramebufferDimensions
+      : renderOp.framebufferDimensions;
 
     // Skip if the parent and current operation both have render textures
     if (renderOp.rtt === true && parentHasRenderTexture === true) {
@@ -204,16 +221,17 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
-    if (parentHasRenderTexture === true) {
-      const { width, height } = renderOp.framebufferDimensions!;
+    if (parentHasRenderTexture === true && framebufferDimensions) {
+      const { w, h } = framebufferDimensions;
       // Force pixel ratio to 1.0 for render textures since they are always 1:1
       // the final render texture will be rendered to the screen with the correct pixel ratio
       this.glw.uniform1f('u_pixelRatio', 1.0);
 
       // Set resolution to the framebuffer dimensions
-      this.glw.uniform2f('u_resolution', width, height);
+      this.glw.uniform2f('u_resolution', w, h);
     } else {
-      this.glw.uniform1f('u_pixelRatio', renderOp.renderer.stage.pixelRatio);
+      this.glw.uniform1f('u_pixelRatio', renderOp.stage.pixelRatio);
+
       this.glw.uniform2f(
         'u_resolution',
         this.glw.canvas.width,
@@ -221,39 +239,47 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    // if (this.useSystemAlpha) {
-    this.glw.uniform1f('u_alpha', renderOp.alpha);
-    // }
+    if (this.useTimeValue === true) {
+      this.glw.uniform1f('u_time', renderOp.time);
+    }
+
+    if (this.useSystemAlpha === true) {
+      this.glw.uniform1f('u_alpha', renderOp.worldAlpha);
+    }
 
-    // if (this.useSystemDimensions) {
-    this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
-    // }
+    if (this.useSystemDimensions === true) {
+      this.glw.uniform2f('u_dimensions', renderOp.w, renderOp.h);
+    }
 
     /**temporary fix to make sdf texts work */
-    if (renderOp.sdfShaderProps !== undefined) {
-      (renderOp.shader.shaderType as WebGlShaderType).onSdfBind?.call(
+    if (isCoreNode === false && renderOp.sdfShaderProps !== undefined) {
+      const opShader = renderOp.shader; // SdfRenderOp has .shader
+      (opShader.shaderType as WebGlShaderType).onSdfBind?.call(
         this.glw,
         renderOp.sdfShaderProps,
       );
       return;
     }
 
-    if (renderOp.shader.props !== undefined) {
+    const shader = renderOp.shader as WebGlShaderNode;
+    if (shader.props !== undefined) {
       /**
        * loop over all precalculated uniform types
        */
-      for (const key in renderOp.shader.uniforms.single) {
-        const { method, value } = renderOp.shader.uniforms.single[key]!;
+      const uniforms = shader.uniforms;
+
+      for (const key in uniforms.single) {
+        const { method, value } = uniforms.single[key]!;
         this.glw[method as keyof UniformSet1Param](key, value as never);
       }
 
-      for (const key in renderOp.shader.uniforms.vec2) {
-        const { method, value } = renderOp.shader.uniforms.vec2[key]!;
+      for (const key in uniforms.vec2) {
+        const { method, value } = uniforms.vec2[key]!;
         this.glw[method as keyof UniformSet2Params](key, value[0], value[1]);
       }
 
-      for (const key in renderOp.shader.uniforms.vec3) {
-        const { method, value } = renderOp.shader.uniforms.vec3[key]!;
+      for (const key in uniforms.vec3) {
+        const { method, value } = uniforms.vec3[key]!;
         this.glw[method as keyof UniformSet3Params](
           key,
           value[0],
@@ -262,8 +288,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
         );
       }
 
-      for (const key in renderOp.shader.uniforms.vec4) {
-        const { method, value } = renderOp.shader.uniforms.vec4[key]!;
+      for (const key in uniforms.vec4) {
+        const { method, value } = uniforms.vec4[key]!;
         this.glw[method as keyof UniformSet4Params](
           key,
           value[0],
@@ -277,7 +303,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
   bindBufferCollection(buffer: BufferCollection) {
     const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
+    const attribs = this.attributeLocations;
     const attribLen = attribs.length;
 
     for (let i = 0; i < attribLen; i++) {
@@ -306,7 +332,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   attach(): void {
-    this.glw.useProgram(this.program);
+    if (this.isDestroyed === true) {
+      return;
+    }
+    this.glw.useProgram(this.program, this.uniformLocations!);
     if (this.glw.isWebGl2() && this.vao) {
       this.glw.bindVertexArray(this.vao);
     }
@@ -315,4 +344,23 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   detach(): void {
     this.disableAttributes();
   }
+
+  destroy() {
+    if (this.isDestroyed === true) {
+      return;
+    }
+    const glw = this.glw;
+
+    this.detach();
+
+    glw.deleteProgram(this.program!);
+    this.program = null;
+    this.uniformLocations = null;
+
+    const attribs = this.attributeLocations;
+    const attribLen = this.attributeLocations.length;
+    for (let i = 0; i < attribLen; i++) {
+      this.glw.deleteBuffer(attribs[i]!);
+    }
+  }
 }

package/src/core/shaders/canvas/Border.ts

@@ -15,64 +15,118 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { formatRgba, parseColorRgba } from '../../lib/colorParser.js';
 import { valuesAreEqual } from '../../lib/utils.js';
 import type { CanvasShaderType } from '../../renderers/canvas/CanvasShaderNode.js';
-import {
-  formatRgba,
-  parseColorRgba,
-} from '../../renderers/canvas/internal/ColorUtils.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
 import {
   BorderTemplate,
   type BorderProps,
 } from '../templates/BorderTemplate.js';
-import { strokeLine } from './utils/render.js';
 
 export interface ComputedBorderValues {
   borderColor: string;
   borderAsym: boolean;
-  borderRadius: Vec4;
+  innerX: number;
+  innerY: number;
+  innerW: number;
+  innerH: number;
+  outerX: number;
+  outerY: number;
+  outerW: number;
+  outerH: number;
 }
 
 export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
   props: BorderTemplate.props,
   update() {
     this.computed.borderColor = formatRgba(parseColorRgba(this.props!.color));
-    this.computed.borderAsym = !valuesAreEqual(this.props!.width as number[]);
-  },
-  render(ctx, quad, renderContext) {
-    renderContext();
-    ctx.strokeStyle = this.computed.borderColor!;
-    if (this.computed.borderAsym === false && this.props!.width[0] > 0) {
-      const bWidth = this.props!.width[0];
-      const bHalfWidth = bWidth * 0.5;
-      ctx.lineWidth = bWidth;
-      ctx.beginPath();
-      ctx.strokeRect(
-        quad.tx + bHalfWidth,
-        quad.ty + bHalfWidth,
-        quad.width - bWidth,
-        quad.height - bWidth,
-      );
+    this.computed.borderAsym = !valuesAreEqual(this.props!.w as number[]);
+    const borderAlign = this.props!.align as number;
+    const borderGap = this.props!.gap as number;
+
+    const borderW = this.props!.w as Vec4;
+
+    if (this.computed.borderAsym === false) {
+      const bWidth = borderW[0] * 0.5;
+      //inside
+      const baseline = bWidth - borderW[0] * borderAlign - borderGap;
+      this.computed.outerX = baseline;
+      this.computed.outerY = baseline;
+
+      this.computed.outerW = -baseline * 2;
+      this.computed.outerH = -baseline * 2;
       return;
     }
 
-    const { 0: t, 1: r, 2: b, 3: l } = this.props!.width as Vec4;
-    if (t > 0) {
-      const y = quad.ty + t * 0.5;
-      strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);
-    }
+    // Calculate outer and inner rectangle dimensions
+    const [t, r, b, l] = this.props!.w as Vec4;
+
+    const outerX = (this.computed.outerX = -l * borderAlign - borderGap);
+    const outerY = (this.computed.outerY = -t * borderAlign - borderGap);
+    let outerW = 0;
+    let outerH = 0;
+
     if (r > 0) {
-      const x = quad.tx + quad.width - r * 0.5;
-      strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, r);
+      outerW += r * borderAlign + borderGap;
+    }
+    if (l > 0) {
+      outerW += l * borderAlign + borderGap;
     }
+
     if (b > 0) {
-      const y = quad.ty + quad.height - b * 0.5;
-      strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, b);
+      outerH += b * borderAlign + borderGap;
     }
-    if (l > 0) {
-      const x = quad.tx + l * 0.5;
-      strokeLine(ctx, x, quad.ty, x, quad.ty + quad.height, l);
+    if (t > 0) {
+      outerH += t * borderAlign + borderGap;
     }
+
+    this.computed.outerW = outerW;
+    this.computed.outerH = outerH;
+
+    this.computed.innerX = outerX + l;
+    this.computed.innerY = outerY + t;
+    this.computed.innerW = outerW - l - r;
+    this.computed.innerH = outerH - t - b;
+  },
+  render(ctx, node, renderContext) {
+    renderContext();
+    const computed = this.computed as ComputedBorderValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
+    ctx.strokeStyle = computed.borderColor!;
+    if (computed.borderAsym === false && this.props!.w[0] > 0) {
+      ctx.lineWidth = this.props!.w[0];
+      ctx.beginPath();
+      ctx.strokeRect(
+        tx + computed.outerX,
+        ty + computed.outerY,
+        w + computed.outerW,
+        h + computed.outerH,
+      );
+      return;
+    }
+
+    // Calculate outer rectangle (including border)
+    const outerX = tx + computed.outerX;
+    const outerY = ty + computed.outerY;
+    const outerW = w + computed.outerW;
+    const outerH = h + computed.outerH;
+
+    // Calculate inner rectangle (excluding border)
+    const innerX = tx + computed.innerX;
+    const innerY = ty + computed.innerY;
+    const innerW = w + computed.innerW;
+    const innerH = h + computed.innerH;
+
+    // Use clip to subtract inner from outer
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(outerX, outerY, outerW, outerH);
+    ctx.rect(innerX, innerY, innerW, innerH);
+    ctx.clip('evenodd');
+    ctx.fillStyle = this.computed.borderColor!;
+    ctx.fillRect(outerX, outerY, outerW, outerH);
+    ctx.restore();
   },
 };

package/src/core/shaders/canvas/HolePunch.ts

@@ -36,23 +36,17 @@ export const HolePunch: CanvasShaderType<
   update() {
     this.computed.radius = calcFactoredRadiusArray(
       this.props!.radius as Vec4,
-      this.props!.width,
-      this.props!.height,
+      this.props!.w,
+      this.props!.h,
     );
   },
   render(ctx, quad, renderContext) {
     ctx.save();
     renderContext();
-    const { x, y, width, height } = this.props!;
+    const { x, y, w, h } = this.props!;
+    const gt = quad.globalTransform!;
     ctx.beginPath();
-    roundRect(
-      ctx,
-      quad.tx + x,
-      quad.ty + y,
-      width,
-      height,
-      this.computed.radius!,
-    );
+    roundRect(ctx, gt.tx + x, gt.ty + y, w, h, this.computed.radius!);
     ctx.closePath();
     ctx.fillStyle = 'black';
     ctx.globalCompositeOperation = 'destination-out';

package/src/core/shaders/canvas/LinearGradient.ts

@@ -36,8 +36,8 @@ export const LinearGradient: CanvasShaderType<
   props: LinearGradientTemplate.props,
   update(node) {
     const angle = this.props!.angle - (Math.PI / 180) * 90;
-    const nWidth = node.width;
-    const nHeight = node.height;
+    const nWidth = node.w;
+    const nHeight = node.h;
     const line =
       (Math.abs(nWidth * Math.sin(angle)) +
         Math.abs(nHeight * Math.cos(angle))) *
@@ -51,19 +51,23 @@ export const LinearGradient: CanvasShaderType<
       colors: this.props!.colors.map((value) => this.toColorString(value)),
     };
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
+    const computed = this.computed as ComputedLinearGradientValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     const gradient = ctx.createLinearGradient(
-      quad.tx + this.computed.x0!,
-      quad.ty + this.computed.y0!,
-      quad.tx + this.computed.x1!,
-      quad.ty + this.computed.y1!,
+      tx + computed.x0,
+      ty + computed.y0,
+      tx + computed.x1,
+      ty + computed.y1,
     );
-    const colors = this.computed.colors!;
+    const colors = computed.colors;
+    const stops = this.props!.stops;
     for (let i = 0; i < colors.length; i++) {
-      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      gradient.addColorStop(stops[i]!, colors[i]!);
     }
     ctx.fillStyle = gradient;
-    ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    ctx.fillRect(tx, ty, w, h);
   },
 };

package/src/core/shaders/canvas/RadialGradient.ts

@@ -38,9 +38,9 @@ export const RadialGradient: CanvasShaderType<
   update(node) {
     let scaleX = 1;
     let scaleY = 1;
-
-    const pWidth = this.props!.width;
-    const pHeight = this.props!.height;
+    const props = this.props as RadialGradientProps;
+    const pWidth = props.w;
+    const pHeight = props.h;
     if (pWidth > pHeight) {
       scaleX = pWidth / pHeight;
     } else if (pHeight > pWidth) {
@@ -48,65 +48,48 @@ export const RadialGradient: CanvasShaderType<
     }
 
     this.computed = {
-      pivotX: this.props!.pivot[0] * node.width,
-      pivotY: this.props!.pivot[1] * node.height,
+      pivotX: props.pivot[0] * node.w,
+      pivotY: props.pivot[1] * node.h,
       scaleX,
       scaleY,
-      size: Math.min(pWidth, pHeight) * 0.5,
-      colors: this.props!.colors.map((value) => this.toColorString(value)),
+      size: Math.min(pWidth, pHeight),
+      colors: props.colors.map((value) => this.toColorString(value)),
     };
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
-
-    const { scaleX, scaleY, pivotX, pivotY } = this.computed!;
-    const colors = this.computed.colors!;
-    let x = quad.tx + pivotX!;
-    let y = quad.ty + pivotY!;
+    const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
+      .computed as ComputedRadialGradientValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
+    let x = tx + pivotX;
+    let y = ty + pivotY;
+    const stops = this.props!.stops;
 
     if (scaleX === scaleY) {
-      const gradient = ctx.createRadialGradient(
-        x,
-        y,
-        0,
-        x,
-        y,
-        this.computed.size!,
-      );
+      const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
 
       for (let i = 0; i < colors.length; i++) {
-        gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+        gradient.addColorStop(stops[i]!, colors[i]!);
       }
 
       ctx.fillStyle = gradient;
-      ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+      ctx.fillRect(tx, ty, w, h);
       return;
     }
 
     ctx.save();
-    ctx.scale(scaleX!, scaleY!);
-    x = x / scaleX!;
-    y = y / scaleY!;
-    const gradient = ctx.createRadialGradient(
-      x,
-      y,
-      0,
-      x,
-      y,
-      this.computed.size!,
-    );
+    ctx.scale(scaleX, scaleY);
+    x = x / scaleX;
+    y = y / scaleY;
+    const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
 
     for (let i = 0; i < colors.length; i++) {
-      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      gradient.addColorStop(stops[i]!, colors[i]!);
     }
 
     ctx.fillStyle = gradient;
-    ctx.fillRect(
-      quad.tx / scaleX!,
-      quad.ty / scaleY!,
-      quad.width / scaleX!,
-      quad.height / scaleY!,
-    );
+    ctx.fillRect(tx / scaleX, ty / scaleY, w / scaleX, h / scaleY);
 
     ctx.restore();
   },

package/src/core/shaders/canvas/Rounded.ts

@@ -34,18 +34,18 @@ export const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues> = {
   update(node) {
     this.computed.radius = calcFactoredRadiusArray(
       this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      node.w,
+      node.h,
     );
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     const path = new Path2D();
     roundRect(
       path,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      node.globalTransform!.tx,
+      node.globalTransform!.ty,
+      node.props.w,
+      node.props.h,
       this.computed.radius!,
     );
     ctx.clip(path);