@lightningtv/renderer 3.0.0-beta1 → 3.2.3

package/src/core/lib/WebGlContextWrapper.ts

@@ -2,7 +2,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 
-import { assertTruthy } from '../../utils.js';
+import { assertTruthy, isProductionEnvironment } from '../../utils.js';
+import type {
+  Vec2,
+  Vec3,
+  Vec4,
+} from '../renderers/webgl/internal/ShaderUtils.js';
 import { isWebGl2 } from '../renderers/webgl/internal/WebGlUtils.js';
 
 /**
@@ -45,6 +50,7 @@ export class WebGlContextWrapper {
   private boundArrayBuffer: WebGLBuffer | null;
   private boundElementArrayBuffer: WebGLBuffer | null;
   private curProgram: WebGLProgram | null;
+  private curUniformLocations: Record<string, WebGLUniformLocation> = {};
   //#endregion Cached WebGL State
 
   //#region Canvas
@@ -67,6 +73,7 @@ export class WebGlContextWrapper {
   public readonly TEXTURE_WRAP_S;
   public readonly TEXTURE_WRAP_T;
   public readonly LINEAR;
+  public readonly LINEAR_MIPMAP_LINEAR;
   public readonly CLAMP_TO_EDGE;
   public readonly RGB;
   public readonly RGBA;
@@ -158,6 +165,7 @@ export class WebGlContextWrapper {
     this.TEXTURE_WRAP_S = gl.TEXTURE_WRAP_S;
     this.TEXTURE_WRAP_T = gl.TEXTURE_WRAP_T;
     this.LINEAR = gl.LINEAR;
+    this.LINEAR_MIPMAP_LINEAR = gl.LINEAR_MIPMAP_LINEAR;
     this.CLAMP_TO_EDGE = gl.CLAMP_TO_EDGE;
     this.RGB = gl.RGB;
     this.RGBA = gl.RGBA;
@@ -621,6 +629,32 @@ export class WebGlContextWrapper {
     this.gl.bufferData(this.gl.ARRAY_BUFFER, data, usage);
   }
 
+  /**
+   * ```
+   * gl.bindBuffer(gl.ARRAY_BUFFER, buffer);  // if needed
+   * gl.bufferSubData(gl.ARRAY_BUFFER, dstByteOffset, data);
+   * ```
+   *
+   * @remarks
+   * **WebGL Combo**: `gl.bindBuffer` is only called when the buffer changes.
+   * Used to surgically update a subset of the GPU buffer without reallocating it.
+   *
+   * @param buffer
+   * @param dstByteOffset - Byte offset into the GPU buffer where `data` will be written
+   * @param data
+   */
+  arrayBufferSubData(
+    buffer: WebGLBuffer | null,
+    dstByteOffset: number,
+    data: ArrayBufferView,
+  ) {
+    if (this.boundArrayBuffer !== buffer) {
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+      this.boundArrayBuffer = buffer;
+    }
+    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, dstByteOffset, data);
+  }
+
   /**
    * ```
    * gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
@@ -684,16 +718,23 @@ export class WebGlContextWrapper {
    * @param program
    * @returns object with numbers
    */
-  getUniformLocations(program: WebGLProgram): Record<string, number> {
+  getUniformLocations(
+    program: WebGLProgram,
+  ): Record<string, WebGLUniformLocation> {
     const gl = this.gl;
     const length = gl.getProgramParameter(
       program,
       gl.ACTIVE_UNIFORMS,
     ) as number;
-    const result = {} as Record<string, number>;
+    const result = {} as Record<string, WebGLUniformLocation>;
     for (let i = 0; i < length; i++) {
-      const { name } = gl.getActiveUniform(program, i) as WebGLActiveInfo;
-      result[name] = i;
+      const info = gl.getActiveUniform(program, i) as WebGLActiveInfo;
+      //remove bracket + value from uniform name;
+      let name = info.name.replace(/\[.*?\]/g, '');
+      result[name] = gl.getUniformLocation(
+        program,
+        name,
+      ) as WebGLUniformLocation;
     }
     return result;
   }
@@ -703,16 +744,17 @@ export class WebGlContextWrapper {
    * @param program
    * @returns object with numbers
    */
-  getAttributeLocations(program: WebGLProgram): Record<string, number> {
+  getAttributeLocations(program: WebGLProgram): string[] {
     const gl = this.gl;
     const length = gl.getProgramParameter(
       program,
       gl.ACTIVE_ATTRIBUTES,
     ) as number;
-    const result = {} as Record<string, number>;
+
+    const result: string[] = [];
     for (let i = 0; i < length; i++) {
       const { name } = gl.getActiveAttrib(program, i) as WebGLActiveInfo;
-      result[name] = i;
+      result[gl.getAttribLocation(program, name)] = name;
     }
     return result;
   }
@@ -725,12 +767,16 @@ export class WebGlContextWrapper {
    * @param program
    * @returns
    */
-  useProgram(program: WebGLProgram | null) {
+  useProgram(
+    program: WebGLProgram | null,
+    uniformLocations: Record<string, WebGLUniformLocation>,
+  ) {
     if (this.curProgram === program) {
       return;
     }
     this.gl.useProgram(program);
     this.curProgram = program;
+    this.curUniformLocations = uniformLocations;
   }
 
   /**
@@ -740,10 +786,7 @@ export class WebGlContextWrapper {
    * @param v0 - The value to set.
    */
   uniform1f(location: string, v0: number) {
-    this.gl.uniform1f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-    );
+    this.gl.uniform1f(this.curUniformLocations[location] || null, v0);
   }
 
   /**
@@ -753,10 +796,7 @@ export class WebGlContextWrapper {
    * @param value - The array of values to set.
    */
   uniform1fv(location: string, value: Float32Array) {
-    this.gl.uniform1fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform1fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -766,10 +806,7 @@ export class WebGlContextWrapper {
    * @param v0 - The value to set.
    */
   uniform1i(location: string, v0: number) {
-    this.gl.uniform1i(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-    );
+    this.gl.uniform1i(this.curUniformLocations[location] || null, v0);
   }
 
   /**
@@ -779,10 +816,7 @@ export class WebGlContextWrapper {
    * @param value - The array of values to set.
    */
   uniform1iv(location: string, value: Int32Array) {
-    this.gl.uniform1iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform1iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -793,10 +827,20 @@ export class WebGlContextWrapper {
    * @param v1 - The second component of the vector.
    */
   uniform2f(location: string, v0: number, v1: number) {
+    this.gl.uniform2f(this.curUniformLocations[location] || null, v0, v1);
+  }
+
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v - array of 4 numbers.
+   */
+  uniform2fa(location: string, value: Vec2) {
     this.gl.uniform2f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
+      this.curUniformLocations[location] || null,
+      value[0],
+      value[1],
     );
   }
 
@@ -807,10 +851,7 @@ export class WebGlContextWrapper {
    * @param value - The array of vec2 values to set.
    */
   uniform2fv(location: string, value: Float32Array) {
-    this.gl.uniform2fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform2fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -821,11 +862,7 @@ export class WebGlContextWrapper {
    * @param v1 - The second component of the vector.
    */
   uniform2i(location: string, v0: number, v1: number) {
-    this.gl.uniform2i(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-    );
+    this.gl.uniform2i(this.curUniformLocations[location] || null, v0, v1);
   }
 
   /**
@@ -835,10 +872,7 @@ export class WebGlContextWrapper {
    * @param value - The array of ivec2 values to set.
    */
   uniform2iv(location: string, value: Int32Array) {
-    this.gl.uniform2iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform2iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -850,11 +884,21 @@ export class WebGlContextWrapper {
    * @param v2 - The third component of the vector.
    */
   uniform3f(location: string, v0: number, v1: number, v2: number) {
+    this.gl.uniform3f(this.curUniformLocations[location] || null, v0, v1, v2);
+  }
+
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v - array of 4 numbers.
+   */
+  uniform3fa(location: string, value: Vec3) {
     this.gl.uniform3f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-      v2,
+      this.curUniformLocations[location] || null,
+      value[0],
+      value[1],
+      value[2],
     );
   }
 
@@ -865,10 +909,7 @@ export class WebGlContextWrapper {
    * @param value - The array of vec3 values to set.
    */
   uniform3fv(location: string, value: Float32Array) {
-    this.gl.uniform3fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform3fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -880,12 +921,7 @@ export class WebGlContextWrapper {
    * @param v2 - The third component of the vector.
    */
   uniform3i(location: string, v0: number, v1: number, v2: number) {
-    this.gl.uniform3i(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-      v2,
-    );
+    this.gl.uniform3i(this.curUniformLocations[location] || null, v0, v1, v2);
   }
 
   /**
@@ -895,10 +931,7 @@ export class WebGlContextWrapper {
    * @param value - The array of ivec3 values to set.
    */
   uniform3iv(location: string, value: Int32Array) {
-    this.gl.uniform3iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform3iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -912,7 +945,7 @@ export class WebGlContextWrapper {
    */
   uniform4f(location: string, v0: number, v1: number, v2: number, v3: number) {
     this.gl.uniform4f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       v0,
       v1,
       v2,
@@ -920,6 +953,22 @@ export class WebGlContextWrapper {
     );
   }
 
+  /**
+   * Sets the value of a vec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v - array of 4 numbers.
+   */
+  uniform4fa(location: string, value: Vec4) {
+    this.gl.uniform4f(
+      this.curUniformLocations[location] || null,
+      value[0],
+      value[1],
+      value[2],
+      value[3],
+    );
+  }
+
   /**
    * Sets the value of a vec4 array uniform variable.
    *
@@ -927,10 +976,7 @@ export class WebGlContextWrapper {
    * @param value - The array of vec4 values to set.
    */
   uniform4fv(location: string, value: Float32Array) {
-    this.gl.uniform4fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform4fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -944,7 +990,7 @@ export class WebGlContextWrapper {
    */
   uniform4i(location: string, v0: number, v1: number, v2: number, v3: number) {
     this.gl.uniform4i(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       v0,
       v1,
       v2,
@@ -959,10 +1005,7 @@ export class WebGlContextWrapper {
    * @param value - The array of ivec4 values to set.
    */
   uniform4iv(location: string, value: Int32Array) {
-    this.gl.uniform4iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform4iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -974,7 +1017,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix2fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix2fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -987,7 +1030,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix3fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix3fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1000,7 +1043,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix4fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix4fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1032,6 +1075,19 @@ export class WebGlContextWrapper {
     this.gl.drawElements(mode, count, type, offset);
   }
 
+  /**
+   * ```
+   * gl.drawArrays(mode, first, count);
+   * ```
+   *
+   * @param mode
+   * @param first
+   * @param count
+   */
+  drawArrays(mode: GLenum, first: GLint, count: GLsizei) {
+    this.gl.drawArrays(mode, first, count);
+  }
+
   /**
    * ```
    * gl.drawArrays(mode, first, count);
@@ -1269,6 +1325,74 @@ export class WebGlContextWrapper {
   deleteShader(shader: WebGLShader) {
     this.gl.deleteShader(shader);
   }
+
+  /**
+   * ```
+   * gl.deleteBuffer(buffer);
+   * ```
+   *
+   * @param buffer - The buffer to delete
+   */
+  deleteBuffer(buffer: WebGLBuffer) {
+    const { gl } = this;
+    gl.deleteBuffer(buffer);
+
+    // Reset bound buffers if they match the deleted buffer
+    if (this.boundArrayBuffer === buffer) {
+      this.boundArrayBuffer = null;
+    }
+  }
+
+  /**
+   * ```
+   * gl.deleteVertexArray(vertexArray);
+   * ```
+   *
+   * @param vertexArray - The vertex array object to delete
+   */
+  deleteVertexArray(vertexArray: WebGLVertexArrayObject) {
+    if (this.isWebGl2()) {
+      (this.gl as WebGL2RenderingContext).deleteVertexArray(vertexArray);
+    }
+  }
+
+  /**
+   * Check for WebGL errors and return error information
+   * @param operation Description of the operation for error reporting
+   * @returns Object with error information or null if no error
+   */
+  checkError(
+    operation: string,
+  ): { error: number; errorName: string; message: string } | null {
+    const error = this.getError();
+    if (error !== 0) {
+      // 0 is GL_NO_ERROR
+      let errorName = 'UNKNOWN_ERROR';
+      switch (error) {
+        case this.INVALID_ENUM:
+          errorName = 'INVALID_ENUM';
+          break;
+        case 0x0501: // GL_INVALID_VALUE
+          errorName = 'INVALID_VALUE';
+          break;
+        case this.INVALID_OPERATION:
+          errorName = 'INVALID_OPERATION';
+          break;
+        case 0x0505: // GL_OUT_OF_MEMORY
+          errorName = 'OUT_OF_MEMORY';
+          break;
+        case 0x9242: // GL_CONTEXT_LOST_WEBGL
+          errorName = 'CONTEXT_LOST_WEBGL';
+          break;
+      }
+
+      const message = `WebGL ${errorName} (0x${error.toString(
+        16,
+      )}) during ${operation}`;
+      return { error, errorName, message };
+    }
+    return null;
+  }
 }
 
 // prettier-ignore

package/src/core/lib/collectionUtils.ts

@@ -0,0 +1,99 @@
+import type { CoreNode } from '../CoreNode.js';
+
+//Bucket sort implementation for sorting CoreNode arrays by zIndex
+export const bucketSortByZIndex = (nodes: CoreNode[], min: number): void => {
+  const buckets: CoreNode[][] = [];
+  const bucketIndices: number[] = [];
+  //distribute nodes into buckets
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]!;
+    const index = node.props.zIndex - min;
+    //create bucket if it doesn't exist
+    if (buckets[index] === undefined) {
+      buckets[index] = [];
+      bucketIndices.push(index);
+    }
+    buckets[index]!.push(node);
+  }
+
+  //sort each bucket using insertion sort
+  for (let i = 1; i < bucketIndices.length; i++) {
+    const key = bucketIndices[i]!;
+    let j = i - 1;
+    while (j >= 0 && bucketIndices[j]! > key) {
+      bucketIndices[j + 1] = bucketIndices[j]!;
+      j--;
+    }
+    bucketIndices[j + 1] = key;
+  }
+
+  //flatten buckets
+  let idx = 0;
+  for (let i = 0; i < bucketIndices.length; i++) {
+    const bucket = buckets[bucketIndices[i]!]!;
+    for (let j = 0; j < bucket.length; j++) {
+      nodes[idx++] = bucket[j]!;
+    }
+  }
+
+  //clean up
+  buckets.length = 0;
+  bucketIndices.length = 0;
+};
+
+export const incrementalRepositionByZIndex = (
+  changedNodes: CoreNode[],
+  nodes: CoreNode[],
+): void => {
+  for (let i = 0; i < changedNodes.length; i++) {
+    const node = changedNodes[i]!;
+    const currentIndex = findChildIndexById(node, nodes);
+    if (currentIndex === -1) continue;
+
+    const targetZIndex = node.props.zIndex;
+
+    //binary search for correct insertion position
+    let left = 0;
+    let right = nodes.length;
+
+    while (left < right) {
+      const mid = (left + right) >>> 1;
+      if (nodes[mid]!.props.zIndex <= targetZIndex) {
+        left = mid + 1;
+      } else {
+        right = mid;
+      }
+    }
+
+    //adjust target position if it's after the current position
+    const targetIndex = left > currentIndex ? left - 1 : left;
+
+    //only reposition if target is different from current
+    if (targetIndex !== currentIndex) {
+      nodes.splice(currentIndex, 1);
+      nodes.splice(targetIndex, 0, node);
+    }
+  }
+};
+
+export const findChildIndexById = (
+  node: CoreNode,
+  children: CoreNode[],
+): number => {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]!;
+
+    // @ts-ignore - accessing protected property
+    if (child._id === node._id) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+export const removeChild = (node: CoreNode, children: CoreNode[]): void => {
+  const index = findChildIndexById(node, children);
+  if (index !== -1) {
+    children.splice(index, 1);
+  }
+};

package/src/core/lib/colorCache.ts

@@ -0,0 +1,20 @@
+import { parseToAbgrString, parseToRgbaString } from './colorParser.js';
+
+const parsedArgbColors: Map<number, string> = new Map();
+const parsedRgbaColors: Map<number, string> = new Map();
+
+export function normalizeCanvasColor(color: number, isRGBA: boolean = false) {
+  let targetCache = isRGBA === true ? parsedRgbaColors : parsedArgbColors;
+  let out = targetCache.get(color);
+  if (out !== undefined) {
+    return out;
+  }
+
+  if (isRGBA === true) {
+    out = parseToRgbaString(color);
+  } else {
+    out = parseToAbgrString(color);
+  }
+  targetCache.set(color, out);
+  return out;
+}

package/src/core/{renderers/canvas/internal/ColorUtils.ts → lib/colorParser.ts}

@@ -1,22 +1,3 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 export interface IParsedColor {
   isWhite: boolean;
   a: number;
@@ -47,7 +28,7 @@ export function parseColor(abgr: number): IParsedColor {
   return { isWhite: false, a, r, g, b };
 }
 
-export function parseToAbgrString(abgr: number) {
+export function parseToAbgrString(abgr: number): string {
   const a = ((abgr >>> 24) & 0xff) / 255;
   const b = (abgr >>> 16) & 0xff & 0xff;
   const g = (abgr >>> 8) & 0xff & 0xff;
@@ -55,7 +36,7 @@ export function parseToAbgrString(abgr: number) {
   return `rgba(${r},${g},${b},${a})`;
 }
 
-export function parseToRgbaString(rgba: number) {
+export function parseToRgbaString(rgba: number): string {
   const r = (rgba >>> 24) & 0xff;
   const g = (rgba >>> 16) & 0xff & 0xff;
   const b = (rgba >>> 8) & 0xff & 0xff;