@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

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

@@ -25,7 +25,7 @@ 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';
 
@@ -38,6 +38,7 @@ export interface QuadOptions {
   colorBr: number;
   texture: Texture | null;
   textureOptions: TextureOptions | null;
+  textureCoords: TextureCoords | undefined;
   zIndex: number;
   shader: CoreShaderNode | null;
   alpha: number;
@@ -51,7 +52,8 @@ export interface QuadOptions {
   renderCoords?: RenderCoords;
   rtt: boolean;
   parentHasRenderTexture: boolean;
-  framebufferDimensions: Dimensions;
+  framebufferDimensions: Dimensions | null;
+  time?: number | null;
 }
 
 export interface CoreRendererOptions {
@@ -69,7 +71,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
@@ -103,5 +105,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,6 +94,7 @@ 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;
 
   constructor(
@@ -101,6 +105,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   ) {
     this.stage = stage;
     this.shaderType = type;
+    this.time = type.time;
 
     if (props !== undefined) {
       /**
@@ -152,6 +157,16 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
+  createValueKey() {
+    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}`;
+    return valueKey;
+  }
+
   get props(): Props | undefined {
     return this.definedProps;
   }

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -26,13 +26,9 @@ import {
   type QuadOptions,
 } from '../CoreRenderer.js';
 import { CanvasTexture } from './CanvasTexture.js';
-import {
-  parseColor,
-  parseToAbgrString,
-  parseToRgbaString,
-} from './internal/ColorUtils.js';
-import { assertTruthy } from '../../../utils.js';
+import { parseColor } from '../../lib/colorParser.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
+import { normalizeCanvasColor } from '../../lib/colorCache.js';
 
 export class CanvasRenderer extends CoreRenderer {
   private context: CanvasRenderingContext2D;
@@ -42,18 +38,15 @@ export class CanvasRenderer extends CoreRenderer {
   public renderToTextureActive = false;
   activeRttNode: CoreNode | null = null;
 
-  private parsedColorCache: Map<number, string> = new Map();
-
   constructor(options: CoreRendererOptions) {
     super(options);
 
     this.mode = 'canvas';
-
     const { canvas } = options;
     this.canvas = canvas as HTMLCanvasElement;
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
     this.pixelRatio = this.stage.pixelRatio;
-    this.clearColor = this.getParsedColor(this.stage.clearColor);
+    this.clearColor = normalizeCanvasColor(this.stage.clearColor);
   }
 
   reset(): void {
@@ -77,28 +70,15 @@ export class CanvasRenderer extends CoreRenderer {
     const ctx = this.context;
     const { tx, ty, ta, tb, tc, td, clippingRect } = quad;
     let texture = quad.texture;
-    const textureType = texture?.type;
-    assertTruthy(textureType, 'Texture type is not defined');
-
-    // The Canvas2D renderer only supports image and color textures
-    if (
-      textureType !== TextureType.image &&
-      textureType !== TextureType.color &&
-      textureType !== TextureType.subTexture &&
-      textureType !== TextureType.noise
-    ) {
-      return;
-    }
-
-    if (texture) {
-      if (texture instanceof SubTexture) {
-        texture = texture.parentTexture;
-      }
-
-      if (texture.state === 'freed') {
-        return;
-      }
-      if (texture.state !== 'loaded') {
+    // The Canvas2D renderer only supports image textures, no textures are used for color blocks
+    if (texture !== null) {
+      const textureType = texture.type;
+      if (
+        textureType !== TextureType.image &&
+        textureType !== TextureType.subTexture &&
+        textureType !== TextureType.color &&
+        textureType !== TextureType.noise
+      ) {
         return;
       }
     }
@@ -156,50 +136,46 @@ export class CanvasRenderer extends CoreRenderer {
 
   renderContext(quad: QuadOptions) {
     const color = quad.colorTl;
-    const textureType = quad.texture?.type;
-    if (
-      (textureType === TextureType.image ||
-        textureType === TextureType.subTexture ||
-        textureType === TextureType.noise) &&
-      quad.texture?.ctxTexture
-    ) {
+    const texture = quad.texture!;
+    const textureType = texture.type;
+    if (textureType !== TextureType.color) {
       const tintColor = parseColor(color);
-      const image = (quad.texture.ctxTexture as CanvasTexture).getImage(
-        tintColor,
-      );
-      this.context.globalAlpha = tintColor.a ?? quad.alpha;
-      if (textureType === TextureType.subTexture) {
+      if (textureType !== TextureType.subTexture) {
+        const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
+        this.context.globalAlpha = tintColor.a ?? quad.alpha;
         this.context.drawImage(
           image,
-          (quad.texture as SubTexture).props.x,
-          (quad.texture as SubTexture).props.y,
-          (quad.texture as SubTexture).props.width,
-          (quad.texture as SubTexture).props.height,
           quad.tx,
           quad.ty,
           quad.width,
           quad.height,
         );
-      } else {
-        try {
-          this.context.drawImage(
-            image,
-            quad.tx,
-            quad.ty,
-            quad.width,
-            quad.height,
-          );
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-          // noop
-        }
+        this.context.globalAlpha = 1;
+        return;
       }
+      const image = (
+        (texture as SubTexture).parentTexture.ctxTexture as CanvasTexture
+      ).getImage(tintColor);
+      const props = (texture as SubTexture).props;
+
+      this.context.globalAlpha = tintColor.a ?? quad.alpha;
+      this.context.drawImage(
+        image,
+        props.x,
+        props.y,
+        props.w,
+        props.h,
+        quad.tx,
+        quad.ty,
+        quad.width,
+        quad.height,
+      );
       this.context.globalAlpha = 1;
       return;
     }
     const hasGradient =
       quad.colorTl !== quad.colorTr || quad.colorTl !== quad.colorBr;
-    if (textureType === TextureType.color && hasGradient) {
+    if (hasGradient === true) {
       let endX: number = quad.tx;
       let endY: number = quad.ty;
       let endColor: number;
@@ -220,12 +196,12 @@ export class CanvasRenderer extends CoreRenderer {
         endX,
         endY,
       );
-      gradient.addColorStop(0, this.getParsedColor(color));
-      gradient.addColorStop(1, this.getParsedColor(endColor));
+      gradient.addColorStop(0, normalizeCanvasColor(color));
+      gradient.addColorStop(1, normalizeCanvasColor(endColor));
       this.context.fillStyle = gradient;
       this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
-    } else if (textureType === TextureType.color) {
-      this.context.fillStyle = this.getParsedColor(color);
+    } else {
+      this.context.fillStyle = normalizeCanvasColor(color);
       this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
     }
   }
@@ -269,30 +245,20 @@ export class CanvasRenderer extends CoreRenderer {
     return null;
   }
 
-  getParsedColor(color: number, isRGBA: boolean = false) {
-    let out = this.parsedColorCache.get(color);
-    if (out !== undefined) {
-      return out;
-    }
-    if (isRGBA) {
-      out = parseToRgbaString(color);
-    } else {
-      out = parseToAbgrString(color);
-    }
-    this.parsedColorCache.set(color, out);
-    return out;
-  }
-
   /**
    * Updates the clear color of the canvas renderer.
    *
    * @param color - The color to set as the clear color.
    */
   updateClearColor(color: number) {
-    this.clearColor = this.getParsedColor(color);
+    this.clearColor = normalizeCanvasColor(color);
+  }
+
+  override updateViewport(): void {
+    // noop
   }
 
-  override getDefaultShaderNode() {
+  getDefaultShaderNode() {
     return null;
   }
 }

package/src/core/renderers/canvas/CanvasShaderNode.ts

@@ -16,10 +16,10 @@
  */
 
 import type { CoreNode } from '../../CoreNode.js';
+import { normalizeCanvasColor } from '../../lib/colorCache.js';
 import type { Stage } from '../../Stage.js';
 import type { QuadOptions } from '../CoreRenderer.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
-import type { CanvasRenderer } from './CanvasRenderer.js';
 
 export type CanvasShaderType<
   T extends object = Record<string, unknown>,
@@ -67,10 +67,7 @@ export class CanvasShaderNode<
 
       this.update = () => {
         const prevKey = this.valueKey;
-        this.valueKey = '';
-        for (const key in this.resolvedProps) {
-          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
-        }
+        this.valueKey = this.createValueKey();
 
         if (prevKey === this.valueKey) {
           return;
@@ -94,6 +91,6 @@ export class CanvasShaderNode<
   }
 
   toColorString(rgba: number) {
-    return (this.stage.renderer as CanvasRenderer).getParsedColor(rgba, true);
+    return normalizeCanvasColor(rgba, true);
   }
 }

package/src/core/renderers/canvas/CanvasTexture.ts

@@ -19,8 +19,8 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
+import { formatRgba, type IParsedColor } from '../../lib/colorParser.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
-import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
 
 export class CanvasTexture extends CoreContextTexture {
   protected image:
@@ -35,24 +35,28 @@ export class CanvasTexture extends CoreContextTexture {
       }
     | undefined;
 
-  load(): void {
+  async load(): Promise<void> {
     this.textureSource.setState('loading');
 
-    this.onLoadRequest()
-      .then((size) => {
-        this.textureSource.setState('loaded', size);
-        this.textureSource.freeTextureData();
-        this.updateMemSize();
-      })
-      .catch((err) => {
-        this.textureSource.setState('failed', err as Error);
-        this.textureSource.freeTextureData();
-      });
+    try {
+      const size = await this.onLoadRequest();
+      this.textureSource.setState('loaded', size);
+      this.textureSource.freeTextureData();
+      this.updateMemSize();
+    } catch (err) {
+      this.textureSource.setState('failed', err as Error);
+      this.textureSource.freeTextureData();
+      throw err;
+    }
   }
 
-  free(): void {
+  release(): void {
     this.image = undefined;
     this.tintCache = undefined;
+  }
+
+  free(): void {
+    this.release();
     this.textureSource.setState('freed');
     this.setTextureMemUse(0);
     this.textureSource.freeTextureData();
@@ -65,8 +69,8 @@ export class CanvasTexture extends CoreContextTexture {
     const mult = this.tintCache ? 8 : 4;
     if (this.textureSource.dimensions) {
       this.setTextureMemUse(
-        this.textureSource.dimensions.width *
-          this.textureSource.dimensions.height *
+        this.textureSource.dimensions.w *
+          this.textureSource.dimensions.h *
           mult,
       );
     }
@@ -142,15 +146,15 @@ export class CanvasTexture extends CoreContextTexture {
       const ctx = canvas.getContext('2d');
       if (ctx) ctx.putImageData(data, 0, 0);
       this.image = canvas;
-      return { width: data.width, height: data.height };
+      return { w: data.width, h: data.height };
     } else if (
       (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
       data instanceof HTMLImageElement
     ) {
       this.image = data;
-      return { width: data.width, height: data.height };
+      return { w: data.width, h: data.height };
     }
 
-    return { width: 0, height: 0 };
+    return { w: 0, h: 0 };
   }
 }