@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

package/src/core/lib/WebGlContextWrapper.ts

@@ -3,6 +3,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 
 import { assertTruthy } 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
@@ -684,16 +690,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;
   }
@@ -725,12 +738,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 +757,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 +767,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 +777,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 +787,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 +798,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 +822,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 +833,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 +843,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 +855,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 +880,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 +892,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 +902,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 +916,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 +924,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 +947,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 +961,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 +976,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 +988,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 +1001,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 +1014,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 +1046,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 +1296,36 @@ 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);
+    }
+  }
 }
 
 // prettier-ignore

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;

package/src/core/lib/utils.ts

@@ -255,6 +255,10 @@ export function boundLargeThanBound(bound1: Bound, bound2: Bound) {
   );
 }
 
+export function pointInBound(x: number, y: number, bound: Bound) {
+  return !(x < bound.x1 || x > bound.x2 || y < bound.y1 || y > bound.y2);
+}
+
 export function isBoundPositive(bound: Bound): boolean {
   return bound.x1 < bound.x2 && bound.y1 < bound.y2;
 }
@@ -359,3 +363,50 @@ export function calcFactoredRadiusArray(
   result[3] *= factor;
   return result;
 }
+
+export function dataURIToBlob(dataURI: string): Blob {
+  dataURI = dataURI.replace(/^data:/, '');
+
+  const type = dataURI.match(/image\/[^;]+/)?.[0] || '';
+  const base64 = dataURI.replace(/^[^,]+,/, '');
+
+  const sliceSize = 1024;
+  const byteCharacters = atob(base64);
+  const bytesLength = byteCharacters.length;
+  const slicesCount = Math.ceil(bytesLength / sliceSize);
+  const byteArrays = new Array(slicesCount);
+
+  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+    const begin = sliceIndex * sliceSize;
+    const end = Math.min(begin + sliceSize, bytesLength);
+
+    const bytes = new Array(end - begin);
+    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+      bytes[i] = byteCharacters[offset]?.charCodeAt(0);
+    }
+    byteArrays[sliceIndex] = new Uint8Array(bytes);
+  }
+  return new Blob(byteArrays, { type });
+}
+
+export function fetchJson(
+  url: string,
+  responseType: XMLHttpRequestResponseType = '',
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = responseType;
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) {
+          resolve(xhr.response);
+        } else {
+          reject(xhr.statusText);
+        }
+      }
+    };
+    xhr.open('GET', url, true);
+    xhr.send(null);
+  });
+}

package/src/core/lib/validateImageBitmap.ts

@@ -1,10 +1,14 @@
+import type { Platform } from '../platforms/Platform.js';
+
 export interface CreateImageBitmapSupport {
   basic: boolean; // Supports createImageBitmap(image)
   options: boolean; // Supports createImageBitmap(image, options)
   full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
 }
 
-export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupport> {
+export async function validateCreateImageBitmap(
+  platform: Platform,
+): Promise<CreateImageBitmapSupport> {
   // Test if createImageBitmap is supported using a simple 1x1 PNG image
   // prettier-ignore
   const pngBinaryData = new Uint8Array([
@@ -47,14 +51,14 @@ export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupp
 
   // Test basic createImageBitmap support
   const blob = new Blob([pngBinaryData], { type: 'image/png' });
-  const bitmap = await createImageBitmap(blob);
+  const bitmap = await platform.createImageBitmap(blob);
   bitmap.close?.();
   support.basic = true;
 
   // Test createImageBitmap with options support
   try {
     const options = { premultiplyAlpha: 'none' as const };
-    const bitmapWithOptions = await createImageBitmap(blob, options);
+    const bitmapWithOptions = await platform.createImageBitmap(blob, options);
     bitmapWithOptions.close?.();
     support.options = true;
   } catch (e) {
@@ -63,9 +67,16 @@ export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupp
 
   // Test createImageBitmap with full options support
   try {
-    const bitmapWithFullOptions = await createImageBitmap(blob, 0, 0, 1, 1, {
-      premultiplyAlpha: 'none',
-    });
+    const bitmapWithFullOptions = await platform.createImageBitmap(
+      blob,
+      0,
+      0,
+      1,
+      1,
+      {
+        premultiplyAlpha: 'none',
+      },
+    );
     bitmapWithFullOptions.close?.();
     support.full = true;
   } catch (e) {

package/src/core/platforms/Platform.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 Stage } from '../Stage.js';
+
+export abstract class Platform {
+  /**
+   * Creates a new canvas element.
+   * @returns The created HTMLCanvasElement.
+   */
+  abstract createCanvas(): HTMLCanvasElement;
+
+  /**
+   * Get a DOM element by ID
+   * @returns The DOM element (or null)
+   */
+  abstract getElementById(id: string): HTMLElement | null;
+
+  /**
+   * Starts the main rendering loop, calling the provided update function every frame.
+   * @param Stage - The stage for rendering
+   */
+  abstract startLoop(stage: Stage): void;
+
+  /**
+   * Abstracted createImageBitmap method.
+   * @param blob - The image source to create the ImageBitmap from.
+   * @param sxOrOptions - The source rectangle x coordinate or ImageBitmapOptions.
+   * @param sy - The source rectangle y coordinate.
+   * @param sw - The source rectangle width.
+   * @param sh - The source rectangle height.
+   * @param options - The ImageBitmapOptions.
+   * @returns A promise that resolves with the created ImageBitmap.
+   */
+  abstract createImageBitmap(blob: ImageBitmapSource): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+
+  /**
+   * Retrieves the current timestamp.
+   * @returns The current timestamp.
+   */
+  abstract getTimeStamp(): number;
+}