@lightningtv/renderer 2.16.1 → 3.2.3

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,64 @@
+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 buffer = 4;
+
+    const runLoop = (currentTime: number = 0) => {
+      const targetFrameTime = stage.targetFrameTime;
+
+      // Frame Limiting logic
+      if (targetFrameTime > 0) {
+        // Calculate elapsed time since the last frame
+        const elapsed = currentTime - lastFrameTime;
+
+        // If not enough time has passed, skip this frame
+        if (elapsed < targetFrameTime) {
+          const wait = targetFrameTime - elapsed;
+
+          if (wait > buffer) {
+            setTimeout(requestLoop, wait - buffer);
+          } else {
+            requestAnimationFrame(runLoop);
+          }
+          return;
+        }
+
+        // Adjust lastFrameTime to maintain the target FPS
+        lastFrameTime = currentTime - (elapsed % targetFrameTime);
+      } else {
+        lastFrameTime = currentTime;
+      }
+
+      stage.updateFrameTime();
+      const hasActiveAnimations = stage.updateAnimations();
+
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
+
+        // We use 15ms instead of 16.6ms to provide a safety buffer.
+        // This ensures we wake up slightly before the next frame to check for updates,
+        // preventing us from missing a frame due to timer variances.
+        setTimeout(requestLoop, Math.max(targetFrameTime, 15));
+
+        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(hasActiveAnimations);
+      stage.flushFrameEvents();
+
+      // Schedule next frame
+      requestAnimationFrame(runLoop);
+    };
+
+    const requestLoop = () => 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 Date.now();
+  }
+
+  override addFont(font: FontFace): void {
+    (document.fonts as FontFaceSetWithAdd).add(font);
+  }
+}

package/src/core/renderers/CoreContextTexture.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.
- */
-
 import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { Texture } from '../textures/Texture.js';
 
@@ -35,6 +16,7 @@ export abstract class CoreContextTexture {
   }
 
   abstract load(): Promise<void>;
+  abstract release(): void;
   abstract free(): void;
 
   get renderable(): boolean {

package/src/core/renderers/CoreRenderOp.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 abstract class CoreRenderOp {
   abstract draw(): void;
 }

package/src/core/renderers/CoreRenderer.ts

@@ -1,38 +1,14 @@
-/*
- * 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 { Dimensions } from '../../common/CommonTypes.js';
-import type { BaseShaderController } from '../../main-api/ShaderController.js';
 import type { CoreNode } from '../CoreNode.js';
-import type { CoreShaderManager } from '../CoreShaderManager.js';
-import type {
-  CoreTextureManager,
-  TextureOptions,
-} from '../CoreTextureManager.js';
+import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
-import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { ContextSpy } from '../lib/ContextSpy.js';
 import type { RenderCoords } from '../lib/RenderCoords.js';
 import type { RectWithValid } from '../lib/utils.js';
-import type { Texture } from '../textures/Texture.js';
+import type { CoreShaderProgram } from './CoreShaderProgram.js';
+import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
-import type { CoreShader } from './CoreShader.js';
+import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
 export interface QuadOptions {
   width: number;
@@ -43,9 +19,9 @@ export interface QuadOptions {
   colorBr: number;
   texture: Texture | null;
   textureOptions: TextureOptions | null;
+  textureCoords: TextureCoords | undefined;
   zIndex: number;
-  shader: CoreShader | null;
-  shaderProps: Record<string, unknown> | null;
+  shader: CoreShaderNode | null;
   alpha: number;
   clippingRect: RectWithValid;
   tx: number;
@@ -55,20 +31,15 @@ export interface QuadOptions {
   tc: number;
   td: number;
   renderCoords?: RenderCoords;
-  rtt?: boolean;
-  parentHasRenderTexture?: boolean;
-  framebufferDimensions?: Dimensions;
+  rtt: boolean;
+  parentHasRenderTexture: boolean;
+  framebufferDimensions: Dimensions | null;
+  time?: number | null;
 }
 
 export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;
-  pixelRatio: number;
-  txManager: CoreTextureManager;
-  txMemManager: TextureMemoryManager;
-  shManager: CoreShaderManager;
-  clearColor: number;
-  bufferMemory: number;
   contextSpy: ContextSpy | null;
   forceWebGL2: boolean;
 }
@@ -81,28 +52,33 @@ export interface BufferInfo {
 export abstract class CoreRenderer {
   public options: CoreRendererOptions;
   public mode: 'webgl' | 'canvas' | undefined;
-
+  defaultTextureCoords: TextureCoords | undefined = undefined;
   readonly stage: Stage;
 
   //// Core Managers
-  txManager: CoreTextureManager;
-  txMemManager: TextureMemoryManager;
-  shManager: CoreShaderManager;
   rttNodes: CoreNode[] = [];
 
   constructor(options: CoreRendererOptions) {
     this.options = options;
     this.stage = options.stage;
-    this.txManager = options.txManager;
-    this.txMemManager = options.txMemManager;
-    this.shManager = options.shManager;
   }
 
   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 getShaderManager(): CoreShaderManager;
+  abstract createShaderProgram(
+    shaderConfig: Readonly<CoreShaderType>,
+    props?: Record<string, unknown>,
+  ): CoreShaderProgram | null;
+  abstract createShaderNode(
+    shaderKey: string,
+    shaderType: Readonly<CoreShaderType>,
+    props?: Record<string, unknown>,
+    program?: CoreShaderProgram,
+  ): CoreShaderNode;
+  abstract supportsShaderType(shaderType: Readonly<CoreShaderType>): boolean;
+  abstract getDefaultShaderNode(): CoreShaderNode | null;
   abstract get renderToTextureActive(): boolean;
   abstract get activeRttNode(): CoreNode | null;
   abstract renderRTTNodes(): void;
@@ -110,6 +86,15 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
-  abstract getDefShaderCtr(): BaseShaderController;
+  abstract updateViewport(): void;
   abstract updateClearColor(color: number): void;
+  getTextureCoords?(node: CoreNode): TextureCoords | undefined;
+
+  /**
+   * Optional hook called when the render list changes structurally
+   * (node added / removed / reordered). Implementations may use this to
+   * invalidate any cached GPU buffer layouts and force a full re-upload
+   * on the next render call.
+   */
+  invalidateQuadBuffer?(): void;
 }

package/src/core/renderers/CoreShaderNode.ts

@@ -0,0 +1,202 @@
+import { deepClone } from '../../utils.js';
+import { UpdateType, type CoreNode } from '../CoreNode.js';
+import type { Stage } from '../Stage.js';
+
+export interface AdvShaderProp<T = any, Props = Record<string, unknown>> {
+  /**
+   * default value
+   */
+  default: T;
+  resolve?: (this: AdvShaderProp<T, Props>, value: T, props: Props) => T;
+  transform?: (start: T, end: T, progress: number) => T;
+}
+
+export type AdvancedShaderProp<T = any, Props = Record<string, unknown>> =
+  | (AdvShaderProp<T, Props> & {
+      set: (value: T, props: Props) => void;
+      get: (props: Props) => T;
+    })
+  | (AdvShaderProp<T, Props> & { set?: never; get?: never });
+
+export type ShaderProp<T, Props> = T | AdvancedShaderProp<T, Props>;
+
+export type ShaderProps<Props> = {
+  [K in keyof Props]: ShaderProp<Props[K], Props>;
+};
+
+export function isAdvancedShaderProp(obj: any): obj is AdvancedShaderProp {
+  return obj !== null && typeof obj === 'object' && obj.default !== undefined;
+}
+
+export function resolveShaderProps(
+  props: Record<string, unknown>,
+  propsConfig: ShaderProps<Record<string, unknown>>,
+) {
+  for (const key in propsConfig) {
+    if (!isAdvancedShaderProp(propsConfig[key]) && props[key] === undefined) {
+      props[key] = propsConfig[key];
+      continue;
+    }
+
+    const pConfig = propsConfig[key]! as AdvancedShaderProp;
+    const hasValue = props[key] !== undefined;
+
+    if (pConfig.resolve !== undefined) {
+      props[key] = pConfig.resolve!(props[key], props);
+      continue;
+    }
+    if (hasValue && pConfig.set !== undefined) {
+      pConfig.set(props[key], props);
+      continue;
+    }
+    if (hasValue) {
+      continue;
+    }
+
+    if (props[key] === undefined && pConfig.get === undefined) {
+      props[key] = deepClone(pConfig.default);
+      continue;
+    }
+    props[key] = pConfig.get!(props);
+  }
+}
+
+/**
+ * CoreShaderType is a template for ShaderTypes the renderer.
+ * 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 = any> {
+  /**
+   * Values you use to draw the Shader
+   */
+  props?: ShaderProps<Props>;
+  /**
+   * 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);
+}
+
+/**
+ * CoreShaderNode is a base class that manages the shader prop values.
+ * When a prop is being updated the CoreShaderNode will notify either the associated CoreNode,
+ * or the Stage that there has been a change and a new render of the scene.
+ */
+export class CoreShaderNode<Props extends object = Record<string, unknown>> {
+  readonly stage: Stage;
+  readonly shaderType: CoreShaderType<Props>;
+  protected propsConfig: ShaderProps<Props> | undefined;
+  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,
+    type: CoreShaderType<Props>,
+    stage: Stage,
+    props?: Props,
+  ) {
+    this.stage = stage;
+    this.shaderType = type;
+    this.time = type.time;
+
+    if (props !== undefined) {
+      /**
+       * props are already resolved by shadermanager
+       */
+      this.resolvedProps = props;
+      this.defineProps(props);
+    }
+  }
+
+  private defineProps(props: Props) {
+    const definedProps = {};
+    for (const key in props) {
+      const propConfig = this.shaderType.props![key];
+      const isAdvancedProp = isAdvancedShaderProp(propConfig);
+
+      Object.defineProperty(definedProps, key, {
+        get: () => {
+          return this.resolvedProps![key as keyof Props];
+        },
+        set: (value) => {
+          // this.resolvedProps![key as keyof Props] = value;
+          if (isAdvancedProp === true && propConfig.resolve !== undefined) {
+            this.resolvedProps![key] = propConfig.resolve(
+              value,
+              this.resolvedProps as Record<string, unknown>,
+            );
+          } else if (isAdvancedProp === true && propConfig.set !== undefined) {
+            propConfig.set(
+              value,
+              this.resolvedProps as Record<string, unknown>,
+            );
+          } else {
+            this.resolvedProps![key] = value;
+          }
+          this._valueKeyDirty = true;
+
+          if (this.update !== undefined && this.node !== null) {
+            this.node.setUpdateType(UpdateType.RecalcUniforms);
+          } else {
+            this.stage.requestRender();
+          }
+        },
+      });
+    }
+    this.definedProps = definedProps as Props;
+  }
+
+  attachNode(node: CoreNode) {
+    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;
+  }
+
+  set props(props: Props | undefined) {
+    if (props === undefined) {
+      return;
+    }
+    for (const key in props) {
+      this.props![key] = props[key];
+    }
+  }
+}

package/src/core/renderers/CoreShaderProgram.ts

@@ -0,0 +1,4 @@
+export interface CoreShaderProgram {
+  attach?: () => void;
+  detach?: () => void;
+}