@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

package/src/core/lib/WebGlContextWrapper.ts

@@ -2,7 +2,7 @@
 /* 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,
@@ -50,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
@@ -72,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;
@@ -163,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;
@@ -689,16 +692,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;
   }
@@ -708,16 +718,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;
   }
@@ -730,12 +741,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;
   }
 
   /**
@@ -745,10 +760,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);
   }
 
   /**
@@ -758,10 +770,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);
   }
 
   /**
@@ -771,10 +780,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);
   }
 
   /**
@@ -784,10 +790,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);
   }
 
   /**
@@ -798,11 +801,7 @@ export class WebGlContextWrapper {
    * @param v1 - The second component of the vector.
    */
   uniform2f(location: string, v0: number, v1: number) {
-    this.gl.uniform2f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-    );
+    this.gl.uniform2f(this.curUniformLocations[location] || null, v0, v1);
   }
 
   /**
@@ -813,7 +812,7 @@ export class WebGlContextWrapper {
    */
   uniform2fa(location: string, value: Vec2) {
     this.gl.uniform2f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       value[0],
       value[1],
     );
@@ -826,10 +825,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);
   }
 
   /**
@@ -840,11 +836,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);
   }
 
   /**
@@ -854,10 +846,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);
   }
 
   /**
@@ -869,12 +858,7 @@ export class WebGlContextWrapper {
    * @param v2 - The third component of the vector.
    */
   uniform3f(location: string, v0: number, v1: number, v2: number) {
-    this.gl.uniform3f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-      v2,
-    );
+    this.gl.uniform3f(this.curUniformLocations[location] || null, v0, v1, v2);
   }
 
   /**
@@ -885,7 +869,7 @@ export class WebGlContextWrapper {
    */
   uniform3fa(location: string, value: Vec3) {
     this.gl.uniform3f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       value[0],
       value[1],
       value[2],
@@ -899,10 +883,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);
   }
 
   /**
@@ -914,12 +895,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);
   }
 
   /**
@@ -929,10 +905,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);
   }
 
   /**
@@ -946,7 +919,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,
@@ -962,7 +935,7 @@ export class WebGlContextWrapper {
    */
   uniform4fa(location: string, value: Vec4) {
     this.gl.uniform4f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       value[0],
       value[1],
       value[2],
@@ -977,10 +950,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);
   }
 
   /**
@@ -994,7 +964,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,
@@ -1009,10 +979,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);
   }
 
   /**
@@ -1024,7 +991,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix2fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix2fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1037,7 +1004,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix3fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix3fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1050,7 +1017,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix4fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix4fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1082,6 +1049,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);
@@ -1319,6 +1299,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,118 @@
+/*
+ * 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.
+ */
+
+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}

@@ -47,7 +47,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 +55,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;