@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

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

@@ -35,8 +35,7 @@ import {
 } from './internal/ShaderUtils.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
-  protected boundBufferCollection: BufferCollection | null = null;
-  protected program: WebGLProgram;
+  protected program: WebGLProgram | null;
   /**
    * Vertex Array Object
    *
@@ -47,9 +46,11 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
   protected attributeLocations: Record<string, number>;
+  protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  public isDestroyed = false;
   supportsIndexedTextures = false;
 
   constructor(
@@ -117,10 +118,10 @@ 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.lifecycle = {
       update: config.update,
@@ -133,7 +134,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   disableAttributes() {
-    const { glw } = this;
+    const glw = this.glw;
     const attribs = Object.keys(this.attributeLocations);
     const attribLen = attribs.length;
     for (let i = 0; i < attribLen; i++) {
@@ -141,31 +142,45 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
   }
 
-  reuseRenderOp(renderOpA: QuadOptions, renderOpB: QuadOptions): boolean {
-    const lifecycleCheck = this.lifecycle.canBatch
-      ? this.lifecycle.canBatch(renderOpA, renderOpB)
-      : true;
-    if (!lifecycleCheck) {
-      return false;
+  reuseRenderOp(
+    incomingQuad: QuadOptions,
+    currentRenderOp: WebGlRenderOp,
+  ): boolean {
+    if (this.lifecycle.canBatch !== undefined) {
+      return this.lifecycle.canBatch(incomingQuad, currentRenderOp);
     }
 
-    if (this.useSystemAlpha) {
-      if (renderOpA.alpha !== renderOpB.alpha) {
+    if (this.useSystemAlpha === true) {
+      if (incomingQuad.alpha !== currentRenderOp.alpha) {
         return false;
       }
     }
 
-    if (this.useSystemDimensions) {
+    if (this.useSystemDimensions === true) {
       if (
-        renderOpA.width !== renderOpB.width ||
-        renderOpA.height !== renderOpB.height
+        incomingQuad.width !== currentRenderOp.width ||
+        incomingQuad.height !== currentRenderOp.height
       ) {
         return false;
       }
     }
+    let shaderPropsA: Record<string, unknown> | undefined = undefined;
+    let shaderPropsB: Record<string, unknown> | undefined = undefined;
+
+    if (incomingQuad.shader !== null) {
+      shaderPropsA = incomingQuad.shader.resolvedProps;
+    }
+    if (currentRenderOp.shader !== null) {
+      shaderPropsB = currentRenderOp.shader.resolvedProps;
+    }
+
+    if (
+      (shaderPropsA === undefined && shaderPropsB !== undefined) ||
+      (shaderPropsA !== undefined && shaderPropsB === undefined)
+    ) {
+      return false;
+    }
 
-    const shaderPropsA = renderOpA.shader?.getResolvedProps();
-    const shaderPropsB = renderOpB.shader?.getResolvedProps();
     if (shaderPropsA !== undefined && shaderPropsB !== undefined) {
       for (const key in shaderPropsA) {
         if (shaderPropsA[key] !== shaderPropsB[key]) {
@@ -181,17 +196,17 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.bindBufferCollection(renderOp.buffers);
     this.bindTextures(renderOp.textures);
 
-    const { parentHasRenderTexture } = renderOp.quad;
+    const { parentHasRenderTexture } = renderOp;
 
     // Skip if the parent and current operation both have render textures
-    if (renderOp.quad.rtt && parentHasRenderTexture) {
+    if (renderOp.rtt === true && parentHasRenderTexture === true) {
       return;
     }
 
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
-    if (parentHasRenderTexture) {
-      const { width, height } = renderOp.quad.framebufferDimensions!;
+    if (parentHasRenderTexture === true) {
+      const { width, height } = renderOp.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);
@@ -207,18 +222,12 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    this.glw.uniform1f('u_rtt', renderOp.quad.rtt ? 1 : 0);
-
-    if (this.useSystemAlpha) {
-      this.glw.uniform1f('u_alpha', renderOp.quad.alpha);
+    if (this.useSystemAlpha === true) {
+      this.glw.uniform1f('u_alpha', renderOp.alpha);
     }
 
-    if (this.useSystemDimensions) {
-      this.glw.uniform2f(
-        'u_dimensions',
-        renderOp.quad.width,
-        renderOp.quad.height,
-      );
+    if (this.useSystemDimensions === true) {
+      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
     }
 
     /**temporary fix to make sdf texts work */
@@ -230,7 +239,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return;
     }
 
-    if (renderOp.shader.props) {
+    if (renderOp.shader.props !== undefined) {
       /**
        * loop over all precalculated uniform types
        */
@@ -276,7 +285,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       const name = attribs[i]!;
       const resolvedBuffer = buffer.getBuffer(name);
       const resolvedInfo = buffer.getAttributeInfo(name);
-      if (!resolvedBuffer || !resolvedInfo) {
+      if (resolvedBuffer === undefined || resolvedInfo === undefined) {
         continue;
       }
       glw.enableVertexAttribArray(i);
@@ -298,7 +307,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);
     }
@@ -307,4 +319,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 = Object.keys(this.attributeLocations);
+    const attribLen = attribs.length;
+    for (let i = 0; i < attribLen; i++) {
+      this.glw.deleteBuffer(attribs[i]!);
+    }
+  }
 }

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

@@ -15,12 +15,9 @@
  * 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,

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

@@ -53,15 +53,17 @@ export const LinearGradient: CanvasShaderType<
   },
   render(ctx, quad, renderContext) {
     renderContext();
+    const computed = this.computed as ComputedLinearGradientValues;
     const gradient = ctx.createLinearGradient(
-      quad.tx + this.computed.x0!,
-      quad.ty + this.computed.y0!,
-      quad.tx + this.computed.x1!,
-      quad.ty + this.computed.y1!,
+      quad.tx + computed.x0,
+      quad.ty + computed.y0,
+      quad.tx + computed.x1,
+      quad.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);

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.width;
+    const pHeight = props.height;
     if (pWidth > pHeight) {
       scaleX = pWidth / pHeight;
     } else if (pHeight > pWidth) {
@@ -48,34 +48,27 @@ 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.width,
+      pivotY: props.pivot[1] * node.height,
       scaleX,
       scaleY,
       size: Math.min(pWidth, pHeight) * 0.5,
-      colors: this.props!.colors.map((value) => this.toColorString(value)),
+      colors: props.colors.map((value) => this.toColorString(value)),
     };
   },
   render(ctx, quad, 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;
+    let x = quad.tx + pivotX;
+    let y = quad.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;
@@ -84,28 +77,21 @@ export const RadialGradient: CanvasShaderType<
     }
 
     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!,
+      quad.tx / scaleX,
+      quad.ty / scaleY,
+      quad.width / scaleX,
+      quad.height / scaleY,
     );
 
     ctx.restore();

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

@@ -35,33 +35,39 @@ export const RoundedWithBorder: CanvasShaderType<
   props: RoundedWithBorderTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
+      props.radius as Vec4,
       node.width,
       node.height,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
+    this.computed.borderColor = this.toColorString(props['border-color']);
     this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
+      props['border-width'] as number[],
     );
-    const borderWidth = this.props!['border-width'] as Vec4;
-    this.computed.borderRadius = radius.map((value, index) =>
-      Math.max(0, value - borderWidth[index]! * 0.5),
-    ) as Vec4;
+    //following vec4 convention 0, 1, 2, 3 => x, y, z, w;
+    const [x, y, z, w] = props['border-width'] as Vec4;
+    this.computed.borderRadius = [
+      Math.max(0.0, radius[0] - Math.max(x, w) * 0.5),
+      Math.max(0.0, radius[1] - Math.max(x, y) * 0.5),
+      Math.max(0.0, radius[2] - Math.max(z, y) * 0.5),
+      Math.max(0.0, radius[3] - Math.max(z, w) * 0.5),
+    ];
   },
   render(ctx, quad, renderContext) {
+    const computed = this.computed as ComputedValues;
     roundedRectWithBorder(
       ctx,
       quad.tx,
       quad.ty,
       quad.width,
       quad.height,
-      this.computed.radius!,
+      computed.radius,
       this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      computed.borderRadius,
+      computed.borderColor,
+      computed.borderAsym,
       renderContext,
     );
   },

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

@@ -38,37 +38,39 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
   props: RoundedWithBorderAndShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
+      props.radius as Vec4,
       node.width,
       node.height,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
+    this.computed.borderColor = this.toColorString(props['border-color']);
     this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
+      props['border-width'] as number[],
     );
-    const borderWidth = this.props!['border-width'] as Vec4;
+    const borderWidth = props['border-width'] as Vec4;
     this.computed.borderRadius = radius.map((value, index) =>
       Math.max(0, value - borderWidth[index]! * 0.5),
     ) as Vec4;
 
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
   render(ctx, quad, renderContext) {
     const { tx, ty, width, height } = quad;
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
       height,
       width,
-      this.computed.shadowColor!,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
     render.roundedRectWithBorder(
@@ -77,11 +79,11 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
       quad.ty,
       quad.width,
       quad.height,
-      this.computed.radius!,
+      computed.radius,
       this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      computed.borderRadius,
+      computed.borderColor,
+      computed.borderAsym,
       renderContext,
     );
   },

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

@@ -35,34 +35,35 @@ export const RoundedWithShadow: CanvasShaderType<
   props: RoundedWithShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
+      props.radius as Vec4,
       node.width,
       node.height,
     );
     this.computed.radius = radius;
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
   render(ctx, quad, renderContext) {
     const { tx, ty, width, height } = quad;
-
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
       width,
       height,
-      this.computed.shadowColor!,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
 
     const path = new Path2D();
-    render.roundRect(path, tx, ty, width, height, this.computed.radius!);
+    render.roundRect(path, tx, ty, width, height, computed.radius);
     ctx.clip(path);
     renderContext();
   },

package/src/core/shaders/templates/BorderTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4, type PrefixedType } from './shaderUtils.js';
+import { validateArrayLength4, type PrefixedType } from '../utils.js';
 
 /**
  * Properties of the {@link Border} shader

package/src/core/shaders/templates/HolePunchTemplate.ts

@@ -16,7 +16,7 @@
  */
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link HolePunch} shader

package/src/core/shaders/templates/RoundedTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link RoundedRectangle} shader

package/src/core/shaders/templates/RoundedWithBorderAndShadowTemplate.ts

@@ -18,7 +18,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { getBorderProps, type BorderProps } from './BorderTemplate.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
 
 export type RoundedWithBorderAndShadowProps = RoundedProps &

package/src/core/shaders/templates/RoundedWithBorderTemplate.ts

@@ -18,7 +18,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { getBorderProps, type BorderProps } from './BorderTemplate.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export type RoundedWithBorderProps = RoundedProps &
   PrefixedType<BorderProps, 'border'>;

package/src/core/shaders/templates/RoundedWithShadowTemplate.ts

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
 
 export type RoundedWithShadowProps = RoundedProps &

package/src/core/shaders/templates/ShadowTemplate.ts

@@ -16,7 +16,7 @@
  */
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export interface ShadowProps {
   /**

package/src/core/shaders/{templates/shaderUtils.ts → utils.ts}

@@ -14,9 +14,8 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { assertTruthy } from '../../../utils.js';
-import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { assertTruthy } from '../../utils.js';
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
 
 export const validateArrayLength4 = (value: number | number[]): Vec4 => {
   if (!Array.isArray(value)) {