@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

package/src/core/lib/utils.ts

@@ -82,8 +82,8 @@ export function getRgbaString(color: RGBA) {
 export interface Rect {
   x: number;
   y: number;
-  width: number;
-  height: number;
+  w: number;
+  h: number;
 }
 
 export interface RectWithValid extends Rect {
@@ -97,6 +97,11 @@ export interface Bound {
   y2: number;
 }
 
+export interface Coord {
+  x: number;
+  y: number;
+}
+
 export interface BoundWithValid extends Bound {
   valid: boolean;
 }
@@ -154,15 +159,15 @@ export function convertBoundToRect(bound: Bound, out?: Rect): Rect {
   if (out) {
     out.x = bound.x1;
     out.y = bound.y1;
-    out.width = bound.x2 - bound.x1;
-    out.height = bound.y2 - bound.y1;
+    out.w = bound.x2 - bound.x1;
+    out.h = bound.y2 - bound.y1;
     return out;
   }
   return {
     x: bound.x1,
     y: bound.y1,
-    width: bound.x2 - bound.x1,
-    height: bound.y2 - bound.y1,
+    w: bound.x2 - bound.x1,
+    h: bound.y2 - bound.y1,
   };
 }
 
@@ -175,35 +180,35 @@ export function intersectRect<T extends Rect = Rect>(
 export function intersectRect(a: Rect, b: Rect, out?: Rect): Rect {
   const x = Math.max(a.x, b.x);
   const y = Math.max(a.y, b.y);
-  const width = Math.min(a.x + a.width, b.x + b.width) - x;
-  const height = Math.min(a.y + a.height, b.y + b.height) - y;
-  if (width > 0 && height > 0) {
+  const w = Math.min(a.x + a.w, b.x + b.w) - x;
+  const h = Math.min(a.y + a.h, b.y + b.h) - y;
+  if (w > 0 && h > 0) {
     if (out) {
       out.x = x;
       out.y = y;
-      out.width = width;
-      out.height = height;
+      out.w = w;
+      out.h = h;
       return out;
     }
     return {
       x,
       y,
-      width,
-      height,
+      w,
+      h,
     };
   }
   if (out) {
     out.x = 0;
     out.y = 0;
-    out.width = 0;
-    out.height = 0;
+    out.w = 0;
+    out.h = 0;
     return out;
   }
   return {
     x: 0,
     y: 0,
-    width: 0,
-    height: 0,
+    w: 0,
+    h: 0,
   };
 }
 
@@ -213,15 +218,15 @@ export function copyRect(a: Rect, out?: Rect): Rect {
   if (out) {
     out.x = a.x;
     out.y = a.y;
-    out.width = a.width;
-    out.height = a.height;
+    out.w = a.w;
+    out.h = a.h;
     return out;
   }
   return {
     x: a.x,
     y: a.y,
-    width: a.width,
-    height: a.height,
+    w: a.w,
+    h: a.h,
   };
 }
 
@@ -232,9 +237,7 @@ export function compareRect(a: Rect | null, b: Rect | null): boolean {
   if (a === null || b === null) {
     return false;
   }
-  return (
-    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
-  );
+  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
 }
 
 export function boundInsideBound(bound1: Bound, bound2: Bound) {
@@ -255,12 +258,16 @@ 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;
 }
 
 export function isRectPositive(rect: Rect): boolean {
-  return rect.width > 0 && rect.height > 0;
+  return rect.w > 0 && rect.h > 0;
 }
 
 /**
@@ -384,3 +391,25 @@ export function dataURIToBlob(dataURI: string): Blob {
   }
   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,83 @@
+/*
+ * 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;
+
+  /**
+   * Adds a FontFace to the platforms FontFaceSet
+   * @param font - The FontFace to add
+   */
+  abstract addFont(font: FontFace): void;
+}

package/src/core/platforms/web/WebPlatform.ts

@@ -0,0 +1,132 @@
+import { Platform } from '../Platform.js';
+import type { Stage } from '../../Stage.js';
+
+/**
+ * make fontface add not show errors
+ */
+interface FontFaceSetWithAdd extends FontFaceSet {
+  add(font: FontFace): void;
+}
+
+export class WebPlatform extends Platform {
+  ////////////////////////
+  // Platform-specific methods
+  ////////////////////////
+
+  override createCanvas(): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    return canvas;
+  }
+
+  override getElementById(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  ////////////////////////
+  // Update loop
+  ////////////////////////
+
+  override startLoop(stage: Stage): void {
+    let isIdle = false;
+    let lastFrameTime = 0;
+
+    const runLoop = (currentTime: number = 0) => {
+      const targetFrameTime = stage.targetFrameTime;
+
+      // Check if we should throttle this frame
+      if (
+        targetFrameTime > 0 &&
+        currentTime - lastFrameTime < targetFrameTime
+      ) {
+        // Too early for next frame, schedule with setTimeout for precise timing
+        const delay = targetFrameTime - (currentTime - lastFrameTime);
+        setTimeout(() => requestAnimationFrame(runLoop), delay);
+        return;
+      }
+
+      stage.updateFrameTime();
+      stage.updateAnimations();
+
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
+
+        if (targetFrameTime > 0) {
+          // Use setTimeout for throttled idle frames
+          setTimeout(
+            () => requestAnimationFrame(runLoop),
+            Math.max(targetFrameTime, 16.666666666666668),
+          );
+        } else {
+          // Use standard idle timeout when not throttling
+          setTimeout(() => requestAnimationFrame(runLoop), 16.666666666666668);
+        }
+
+        if (isIdle === false) {
+          stage.shManager.cleanup();
+          stage.eventBus.emit('idle');
+          isIdle = true;
+        }
+
+        if (stage.txMemManager.checkCleanup() === true) {
+          stage.txMemManager.cleanup();
+        }
+
+        stage.flushFrameEvents();
+        return;
+      }
+
+      isIdle = false;
+      stage.drawFrame();
+      stage.flushFrameEvents();
+
+      // Schedule next frame
+      if (targetFrameTime > 0) {
+        // Use setTimeout + rAF combination for precise FPS control
+        const nextFrameDelay = Math.max(
+          0,
+          targetFrameTime - (performance.now() - currentTime),
+        );
+        setTimeout(() => requestAnimationFrame(runLoop), nextFrameDelay);
+      } else {
+        // Use standard rAF when not throttling
+        requestAnimationFrame(runLoop);
+      }
+    };
+    requestAnimationFrame(runLoop);
+  }
+
+  ////////////////////////
+  // ImageBitmap
+  ////////////////////////
+
+  override createImageBitmap(
+    blob: ImageBitmapSource,
+    sxOrOptions?: number | ImageBitmapOptions,
+    sy?: number,
+    sw?: number,
+    sh?: number,
+    options?: ImageBitmapOptions,
+  ): Promise<ImageBitmap> {
+    if (typeof sxOrOptions === 'number') {
+      return createImageBitmap(
+        blob,
+        sxOrOptions,
+        sy ?? 0,
+        sw ?? 0,
+        sh ?? 0,
+        options,
+      );
+    } else {
+      return createImageBitmap(blob, sxOrOptions);
+    }
+  }
+
+  getTimeStamp(): number {
+    return performance ? performance.now() : Date.now();
+  }
+
+  override addFont(font: FontFace): void {
+    (document.fonts as FontFaceSetWithAdd).add(font);
+  }
+}

package/src/core/renderers/CoreContextTexture.ts

@@ -34,7 +34,8 @@ export abstract class CoreContextTexture {
     this.memManager.setTextureMemUse(this.textureSource, byteSize);
   }
 
-  abstract load(): void;
+  abstract load(): Promise<void>;
+  abstract release(): void;
   abstract free(): void;
 
   get renderable(): boolean {

package/src/core/renderers/CoreRenderer.ts

@@ -17,43 +17,14 @@
  * limitations under the License.
  */
 
-import type { Dimensions } from '../../common/CommonTypes.js';
 import type { CoreNode } from '../CoreNode.js';
-import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
 import type { ContextSpy } from '../lib/ContextSpy.js';
-import type { RenderCoords } from '../lib/RenderCoords.js';
-import type { RectWithValid } from '../lib/utils.js';
 import type { CoreShaderProgram } from './CoreShaderProgram.js';
-import type { Texture } from '../textures/Texture.js';
+import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
-export interface QuadOptions {
-  width: number;
-  height: number;
-  colorTl: number;
-  colorTr: number;
-  colorBl: number;
-  colorBr: number;
-  texture: Texture | null;
-  textureOptions: TextureOptions | null;
-  zIndex: number;
-  shader: CoreShaderNode | null;
-  alpha: number;
-  clippingRect: RectWithValid;
-  tx: number;
-  ty: number;
-  ta: number;
-  tb: number;
-  tc: number;
-  td: number;
-  renderCoords?: RenderCoords;
-  rtt: boolean;
-  parentHasRenderTexture: boolean;
-  framebufferDimensions: Dimensions;
-}
-
 export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;
@@ -69,7 +40,7 @@ export interface BufferInfo {
 export abstract class CoreRenderer {
   public options: CoreRendererOptions;
   public mode: 'webgl' | 'canvas' | undefined;
-
+  defaultTextureCoords: TextureCoords | undefined = undefined;
   readonly stage: Stage;
 
   //// Core Managers
@@ -82,7 +53,7 @@ export abstract class CoreRenderer {
 
   abstract reset(): void;
   abstract render(surface?: 'screen' | CoreContextTexture): void;
-  abstract addQuad(quad: QuadOptions): void;
+  abstract addQuad(node: CoreNode): void;
   abstract createCtxTexture(textureSource: Texture): CoreContextTexture;
   abstract createShaderProgram(
     shaderConfig: Readonly<CoreShaderType>,
@@ -103,5 +74,7 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
+  abstract updateViewport(): void;
   abstract updateClearColor(color: number): void;
+  getTextureCoords?(node: CoreNode): TextureCoords | undefined;
 }

package/src/core/renderers/CoreShaderNode.ts

@@ -66,9 +66,7 @@ export function resolveShaderProps(
  * You could view a ShaderType as a configuration object that contains methods,
  * and values that you can use to alter the way a node is drawn by the Renderer.
  */
-export interface CoreShaderType<
-  Props extends object = Record<string, unknown>,
-> {
+export interface CoreShaderType<Props extends object = any> {
   /**
    * Values you use to draw the Shader
    */
@@ -77,6 +75,11 @@ export interface CoreShaderType<
    * used for making a cache key to check for reusability, currently only used for webgl ShaderTypes but might be needed for other types of renderer
    */
   getCacheMarkers?: (props: Props) => string;
+  /**
+   * timer that updates every loop, by default uses the stage elapsed time If you want to do a special calculation you can define a function.
+   * When you calculate your own value you can use the Stage timing values deltaTime, lastFrameTime, and currentFrameTime;
+   */
+  time?: boolean | ((stage: Stage) => number);
 }
 
 /**
@@ -91,7 +94,12 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   readonly resolvedProps: Props | undefined = undefined;
   protected definedProps: Props | undefined = undefined;
   protected node: CoreNode | null = null;
+  readonly time: CoreShaderType['time'] = undefined;
   update: (() => void) | undefined = undefined;
+  private _valueKeyCache = '';
+  private _valueKeyDirty = true;
+  private _lastW = 0;
+  private _lastH = 0;
 
   constructor(
     readonly shaderKey: string,
@@ -101,6 +109,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   ) {
     this.stage = stage;
     this.shaderType = type;
+    this.time = type.time;
 
     if (props !== undefined) {
       /**
@@ -136,6 +145,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
           } else {
             this.resolvedProps![key] = value;
           }
+          this._valueKeyDirty = true;
 
           if (this.update !== undefined && this.node !== null) {
             this.node.setUpdateType(UpdateType.RecalcUniforms);
@@ -152,6 +162,31 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
+  createValueKey() {
+    if (
+      this._valueKeyDirty === false &&
+      this.node !== null &&
+      this.node.w === this._lastW &&
+      this.node.h === this._lastH
+    ) {
+      return this._valueKeyCache;
+    }
+
+    let valueKey = '';
+    for (const key in this.resolvedProps) {
+      valueKey += `${key}:${this.resolvedProps[key]!};`;
+    }
+    valueKey += `node-width:${this.node!.w}`;
+    valueKey += `node-height:${this.node!.h}`;
+
+    this._valueKeyCache = valueKey;
+    this._valueKeyDirty = false;
+    this._lastW = this.node!.w;
+    this._lastH = this.node!.h;
+
+    return valueKey;
+  }
+
   get props(): Props | undefined {
     return this.definedProps;
   }