@lightningjs/renderer 2.12.1 → 3.0.0-beta1

package/src/main-api/Renderer.ts

@@ -17,66 +17,25 @@
  * limitations under the License.
  */
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import type { EffectMap, ShaderMap } from '../core/CoreShaderManager.js';
 import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
 import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
-import type {
-  BaseShaderController,
-  ShaderController,
-} from './ShaderController.js';
 import type { INode, INodeProps, ITextNode, ITextNodeProps } from './INode.js';
-import type {
-  DynamicEffects,
-  DynamicShaderController,
-} from './DynamicShaderController.js';
-import type {
-  EffectDesc,
-  EffectDescUnion,
-} from '../core/renderers/webgl/shaders/effects/ShaderEffect.js';
 import type { TextureMemoryManagerSettings } from '../core/TextureMemoryManager.js';
 import type { CanvasTextRenderer } from '../core/text-rendering/renderers/CanvasTextRenderer.js';
 import type { SdfTextRenderer } from '../core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
-import type { WebGlCoreRenderer } from '../core/renderers/webgl/WebGlCoreRenderer.js';
-import type { CanvasCoreRenderer } from '../core/renderers/canvas/CanvasCoreRenderer.js';
+import type { WebGlRenderer } from '../core/renderers/webgl/WebGlRenderer.js';
+import type { CanvasRenderer } from '../core/renderers/canvas/CanvasRenderer.js';
 import type { Inspector } from './Inspector.js';
-
-/**
- * An immutable reference to a specific Shader type
- *
- * @remarks
- * See {@link ShaderRef} for more details.
- */
-export interface SpecificShaderRef<ShType extends keyof ShaderMap> {
-  readonly descType: 'shader';
-  readonly shType: ShType;
-  readonly props: ExtractProps<ShaderMap[ShType]>;
-}
-
-type MapShaderRefs<ShType extends keyof ShaderMap> =
-  ShType extends keyof ShaderMap ? SpecificShaderRef<ShType> : never;
-
-/**
- * An immutable reference to a Shader
- *
- * @remarks
- * This structure should only be created by the RendererMain's `createShader`
- * method. The structure is immutable and should not be modified once created.
- *
- * A `ShaderRef` exists in the Main API Space and is used to point to an actual
- * `Shader` instance in the Core API Space. The `ShaderRef` is used to
- * communicate with the Core API Space to create, load, and destroy the
- * `Shader` instance.
- *
- * This type is technically a discriminated union of all possible shader types.
- * If you'd like to represent a specific shader type, you can use the
- * `SpecificShaderRef` generic type.
- */
-export type ShaderRef = MapShaderRefs<keyof ShaderMap>;
+import type { CoreShaderNode } from '../core/renderers/CoreShaderNode.js';
+import type {
+  ExtractShaderProps,
+  OptionalShaderProps,
+  ShaderMap,
+} from '../core/CoreShaderManager.js';
 
 /**
  * Configuration settings for {@link RendererMain}
@@ -207,7 +166,7 @@ export interface RendererMainSettings {
    * both CanvasTextRenderer and SdfTextRenderer for Text Rendering.
    *
    */
-  renderEngine: typeof CanvasCoreRenderer | typeof WebGlCoreRenderer;
+  renderEngine: typeof CanvasRenderer | typeof WebGlRenderer;
 
   /**
    * Quad buffer size in bytes
@@ -288,6 +247,31 @@ export interface RendererMainSettings {
    * element will be created and appended to the target element.
    */
   canvas?: HTMLCanvasElement;
+
+  /**
+   * createImageBitmap support for the runtime
+   *
+   * @remarks
+   * This is used to determine if and which version of the createImageBitmap API
+   * is supported by the runtime. This is used to determine if the renderer can
+   * use createImageBitmap to load images.
+   *
+   * Options supported
+   * - Auto - Automatically determine the supported version
+   * - Basic - Supports createImageBitmap(image)
+   * - Options - Supports createImageBitmap(image, options)
+   * - Full - Supports createImageBitmap(image, sx, sy, sw, sh, options)
+   *
+   * Note with auto detection, the renderer will attempt to use the most advanced
+   * version of the API available. If the API is not available, the renderer will
+   * fall back to the next available version.
+   *
+   * This will affect startup performance as the renderer will need to determine
+   * the supported version of the API.
+   *
+   * @defaultValue `full`
+   */
+  createImageBitmapSupport?: 'auto' | 'basic' | 'options' | 'full';
 }
 
 /**
@@ -341,7 +325,7 @@ export interface RendererMainSettings {
  *     - `criticalThreshold` - The critical threshold (in bytes)
  */
 export class RendererMain extends EventEmitter {
-  readonly root: INode<ShaderController<'DefaultShader'>>;
+  readonly root: INode;
   readonly canvas: HTMLCanvasElement;
   readonly settings: Readonly<Required<RendererMainSettings>>;
   readonly stage: Stage;
@@ -360,10 +344,12 @@ export class RendererMain extends EventEmitter {
     const resolvedTxSettings: TextureMemoryManagerSettings = {
       criticalThreshold: settings.textureMemory?.criticalThreshold || 124e6,
       targetThresholdLevel: settings.textureMemory?.targetThresholdLevel || 0.5,
-      cleanupInterval: settings.textureMemory?.cleanupInterval || 30000,
+      cleanupInterval: settings.textureMemory?.cleanupInterval || 5000,
       debugLogging: settings.textureMemory?.debugLogging || false,
       baselineMemoryAllocation:
         settings.textureMemory?.baselineMemoryAllocation || 26e6,
+      doNotExceedCriticalThreshold:
+        settings.textureMemory?.doNotExceedCriticalThreshold || false,
     };
 
     const resolvedSettings: Required<RendererMainSettings> = {
@@ -387,6 +373,7 @@ export class RendererMain extends EventEmitter {
       strictBounds: settings.strictBounds ?? true,
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 10,
       canvas: settings.canvas || document.createElement('canvas'),
+      createImageBitmapSupport: settings.createImageBitmapSupport || 'full',
     };
     this.settings = resolvedSettings;
 
@@ -430,12 +417,11 @@ export class RendererMain extends EventEmitter {
       inspector: this.settings.inspector !== null,
       strictBounds: this.settings.strictBounds,
       textureProcessingTimeLimit: this.settings.textureProcessingTimeLimit,
+      createImageBitmapSupport: this.settings.createImageBitmapSupport,
     });
 
     // Extract the root node
-    this.root = this.stage.root as unknown as INode<
-      ShaderController<'DefaultShader'>
-    >;
+    this.root = this.stage.root as unknown as INode;
 
     // Get the target element and attach the canvas to it
     let targetEl: HTMLElement | null;
@@ -472,18 +458,20 @@ export class RendererMain extends EventEmitter {
    * @param props
    * @returns
    */
-  createNode<
-    ShCtr extends BaseShaderController = ShaderController<'DefaultShader'>,
-  >(props: Partial<INodeProps<ShCtr>>): INode<ShCtr> {
+  createNode<ShNode extends CoreShaderNode<any>>(
+    props: Partial<INodeProps<ShNode>>,
+  ): INode<ShNode> {
+    assertTruthy(this.stage, 'Stage is not initialized');
+
     const node = this.stage.createNode(props as Partial<CoreNodeProps>);
 
     if (this.inspector) {
-      return this.inspector.createNode(node) as unknown as INode<ShCtr>;
+      return this.inspector.createNode(node) as unknown as INode<ShNode>;
     }
 
     // FIXME onDestroy event? node.once('beforeDestroy'
     // FIXME onCreate event?
-    return node as unknown as INode<ShCtr>;
+    return node as unknown as INode<ShNode>;
   }
 
   /**
@@ -504,7 +492,7 @@ export class RendererMain extends EventEmitter {
     const textNode = this.stage.createTextNode(props as CoreTextNodeProps);
 
     if (this.inspector) {
-      return this.inspector.createTextNode(textNode);
+      return this.inspector.createTextNode(textNode) as unknown as ITextNode;
     }
 
     return textNode as unknown as ITextNode;
@@ -565,73 +553,12 @@ export class RendererMain extends EventEmitter {
    * @returns
    */
   createShader<ShType extends keyof ShaderMap>(
-    shaderType: ShType,
-    props?: ExtractProps<ShaderMap[ShType]>,
-  ): ShaderController<ShType> {
-    return this.stage.shManager.loadShader(shaderType, props);
-  }
-
-  /**
-   * Create a new Dynamic Shader controller
-   *
-   * @remarks
-   * A Dynamic Shader is a shader that can be composed of an array of mulitple
-   * effects. Each effect can be animated or changed after creation (provided
-   * the effect is given a name).
-   *
-   * Example:
-   * ```ts
-   * renderer.createNode({
-   *   shader: renderer.createDynamicShader([
-   *     renderer.createEffect('radius', {
-   *       radius: 0
-   *     }, 'effect1'),
-   *     renderer.createEffect('border', {
-   *       color: 0xff00ffff,
-   *       width: 10,
-   *     }, 'effect2'),
-   *   ]),
-   * });
-   * ```
-   *
-   * @param effects
-   * @returns
-   */
-  createDynamicShader<
-    T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
-  >(effects: [...T]): DynamicShaderController<T> {
-    return this.stage.shManager.loadDynamicShader({
-      effects: effects as EffectDescUnion[],
-    });
-  }
-
-  /**
-   * Create an effect to be used in a Dynamic Shader
-   *
-   * @remark
-   * The {name} parameter is optional but required if you want to animate the effect
-   * or change the effect's properties after creation.
-   *
-   * See {@link createDynamicShader} for an example.
-   *
-   * @param type
-   * @param props
-   * @param name
-   * @returns
-   */
-  createEffect<
-    Type extends keyof EffectMap,
-    Name extends string | undefined = undefined,
-  >(
-    type: Type,
-    props: EffectDesc<{ name: Name; type: Type }>['props'],
-    name?: Name,
-  ): EffectDesc<{ name: Name; type: Type }> {
-    return {
-      name,
-      type,
-      props,
-    };
+    shType: ShType,
+    props?: OptionalShaderProps<ShType>,
+  ) {
+    return this.stage.shManager.createShader(shType, props) as CoreShaderNode<
+      ExtractShaderProps<ShType>
+    >;
   }
 
   /**
@@ -692,6 +619,8 @@ export class RendererMain extends EventEmitter {
   /**
    * Cleanup textures that are not being used
    *
+   * @param aggressive - If true, will cleanup all textures, regardless of render status
+   *
    * @remarks
    * This can be used to free up GFX memory used by textures that are no longer
    * being displayed.
@@ -705,8 +634,8 @@ export class RendererMain extends EventEmitter {
    * **NOTE3**: This will not cleanup textures that are marked as `preventCleanup`.
    * **NOTE4**: This has nothing to do with the garbage collection of JavaScript.
    */
-  cleanup() {
-    this.stage.cleanup();
+  cleanup(aggressive: boolean = false) {
+    this.stage.cleanup(aggressive);
   }
 
   /**

package/src/utils.ts

@@ -246,3 +246,22 @@ let nextId = 1;
 export function getNewId(): number {
   return nextId++;
 }
+
+/**
+ * Makes a deep clone of an object
+ * @param object
+ * @returns
+ */
+export function deepClone<T>(obj: T): T {
+  if (typeof obj !== 'object') {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepClone(item)) as T;
+  }
+  const copy = {} as Record<string, unknown>;
+  for (const key in obj) {
+    copy[key] = deepClone(obj[key]);
+  }
+  return copy as T;
+}

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

@@ -1,375 +0,0 @@
-/*
- * 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 { BaseShaderController } from '../../../main-api/ShaderController.js';
-import type { CoreNode } from '../../CoreNode.js';
-import type { CoreShaderManager } from '../../CoreShaderManager.js';
-import { getRgbaComponents, type RGBA } from '../../lib/utils.js';
-import { SubTexture } from '../../textures/SubTexture.js';
-import { TextureType, type Texture } from '../../textures/Texture.js';
-import type { CoreContextTexture } from '../CoreContextTexture.js';
-import {
-  CoreRenderer,
-  type CoreRendererOptions,
-  type QuadOptions,
-} from '../CoreRenderer.js';
-import { CanvasCoreTexture } from './CanvasCoreTexture.js';
-import {
-  getBorder,
-  getRadius,
-  roundRect,
-  strokeLine,
-} from './internal/C2DShaderUtils.js';
-import {
-  formatRgba,
-  parseColorRgba,
-  parseColor,
-  type IParsedColor,
-} from './internal/ColorUtils.js';
-import { UnsupportedShader } from './shaders/UnsupportedShader.js';
-import { assertTruthy } from '../../../utils.js';
-
-export class CanvasCoreRenderer extends CoreRenderer {
-  private context: CanvasRenderingContext2D;
-  private canvas: HTMLCanvasElement;
-  private pixelRatio: number;
-  private clearColor: RGBA | undefined;
-  public renderToTextureActive = false;
-  activeRttNode: CoreNode | null = null;
-  private defShaderCtr: BaseShaderController;
-
-  constructor(options: CoreRendererOptions) {
-    super(options);
-
-    this.mode = 'canvas';
-    this.shManager.renderer = this;
-
-    const { canvas, pixelRatio, clearColor } = options;
-    this.canvas = canvas as HTMLCanvasElement;
-    this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
-    this.pixelRatio = pixelRatio;
-    this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
-
-    // Stub for default shader controller since the canvas renderer does not
-    // (really) support the concept of a shader (yet)
-    this.defShaderCtr = {
-      type: 'DefaultShader',
-      props: {},
-      shader: new UnsupportedShader('DefaultShader'),
-      getResolvedProps: () => () => {
-        return {};
-      },
-    };
-  }
-
-  reset(): void {
-    this.canvas.width = this.canvas.width; // quick reset canvas
-
-    const ctx = this.context;
-
-    if (this.clearColor) {
-      const [r, g, b, a] = this.clearColor;
-      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
-      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-    }
-
-    ctx.scale(this.pixelRatio, this.pixelRatio);
-  }
-
-  render(): void {
-    // noop
-  }
-
-  addQuad(quad: QuadOptions): void {
-    const ctx = this.context;
-    const {
-      tx,
-      ty,
-      width,
-      height,
-      alpha,
-      colorTl,
-      colorTr,
-      colorBr,
-      ta,
-      tb,
-      tc,
-      td,
-      clippingRect,
-    } = quad;
-    let texture = quad.texture;
-    let ctxTexture: CanvasCoreTexture | undefined = undefined;
-    let frame:
-      | { x: number; y: number; width: number; height: number }
-      | undefined;
-
-    const textureType = texture?.type;
-    assertTruthy(textureType, 'Texture type is not defined');
-
-    // The Canvas2D renderer only supports image and color textures and subTexture images
-    if (
-      textureType !== TextureType.image &&
-      textureType !== TextureType.color &&
-      textureType !== TextureType.subTexture &&
-      textureType !== TextureType.noise
-    ) {
-      return;
-    }
-
-    if (texture) {
-      if (texture instanceof SubTexture) {
-        frame = texture.props;
-        texture = texture.parentTexture;
-      }
-
-      ctxTexture = texture.ctxTexture as CanvasCoreTexture;
-      if (texture.state === 'freed') {
-        return;
-      }
-      if (texture.state !== 'loaded') {
-        return;
-      }
-    }
-
-    const color = parseColor(colorTl);
-    const hasTransform = ta !== 1;
-    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
-    const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
-    const hasQuadShader = Boolean(quad.shader);
-    const radius = hasQuadShader ? getRadius(quad) : 0;
-    const border = hasQuadShader ? getBorder(quad) : undefined;
-
-    if (hasTransform || hasClipping || radius) {
-      ctx.save();
-    }
-
-    if (hasClipping) {
-      const path = new Path2D();
-      const { x, y, width, height } = clippingRect;
-      path.rect(x, y, width, height);
-      ctx.clip(path);
-    }
-
-    if (hasTransform) {
-      // Quad transform:
-      // | ta tb tx |
-      // | tc td ty |
-      // | 0  0  1  |
-      // C2D transform:
-      // | a  c  e  |
-      // | b  d  f  |
-      // | 0  0  1  |
-      const scale = this.pixelRatio;
-      ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
-      ctx.scale(scale, scale);
-      ctx.translate(-tx, -ty);
-    }
-
-    if (radius) {
-      const path = new Path2D();
-      roundRect.call(path, tx, ty, width, height, radius);
-      ctx.clip(path);
-    }
-
-    if (
-      (textureType === TextureType.image ||
-        textureType === TextureType.subTexture ||
-        textureType === TextureType.noise) &&
-      ctxTexture
-    ) {
-      const image = ctxTexture.getImage(color);
-      ctx.globalAlpha = color.a ?? alpha;
-      if (frame) {
-        ctx.drawImage(
-          image,
-          frame.x,
-          frame.y,
-          frame.width,
-          frame.height,
-          tx,
-          ty,
-          width,
-          height,
-        );
-      } else {
-        try {
-          ctx.drawImage(image, tx, ty, width, height);
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-          // noop
-        }
-      }
-      ctx.globalAlpha = 1;
-    } else if (textureType === TextureType.color && hasGradient) {
-      let endX: number = tx;
-      let endY: number = ty;
-      let endColor: IParsedColor;
-      if (colorTl === colorTr) {
-        // vertical
-        endX = tx;
-        endY = ty + height;
-        endColor = parseColor(colorBr);
-      } else {
-        // horizontal
-        endX = tx + width;
-        endY = ty;
-        endColor = parseColor(colorTr);
-      }
-      const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
-      gradient.addColorStop(0, formatRgba(color));
-      gradient.addColorStop(1, formatRgba(endColor));
-      ctx.fillStyle = gradient;
-      ctx.fillRect(tx, ty, width, height);
-    } else if (textureType === TextureType.color) {
-      ctx.fillStyle = formatRgba(color);
-      ctx.fillRect(tx, ty, width, height);
-    }
-
-    if (border && border.width) {
-      const borderWidth = border.width;
-      const borderInnerWidth = border.width / 2;
-      const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
-
-      ctx.beginPath();
-      ctx.lineWidth = borderWidth;
-      ctx.strokeStyle = borderColor;
-      ctx.globalAlpha = alpha;
-      if (radius) {
-        roundRect.call(
-          ctx,
-          tx + borderInnerWidth,
-          ty + borderInnerWidth,
-          width - borderWidth,
-          height - borderWidth,
-          radius,
-        );
-        ctx.stroke();
-      } else {
-        ctx.strokeRect(
-          tx + borderInnerWidth,
-          ty + borderInnerWidth,
-          width - borderWidth,
-          height - borderWidth,
-        );
-      }
-      ctx.globalAlpha = 1;
-    } else if (hasQuadShader) {
-      const borderTop = getBorder(quad, 'Top');
-      const borderRight = getBorder(quad, 'Right');
-      const borderBottom = getBorder(quad, 'Bottom');
-      const borderLeft = getBorder(quad, 'Left');
-
-      if (borderTop) {
-        strokeLine(
-          ctx,
-          tx,
-          ty,
-          width,
-          height,
-          borderTop.width,
-          borderTop.color,
-          'Top',
-        );
-      }
-
-      if (borderRight) {
-        strokeLine(
-          ctx,
-          tx,
-          ty,
-          width,
-          height,
-          borderRight.width,
-          borderRight.color,
-          'Right',
-        );
-      }
-
-      if (borderBottom) {
-        strokeLine(
-          ctx,
-          tx,
-          ty,
-          width,
-          height,
-          borderBottom.width,
-          borderBottom.color,
-          'Bottom',
-        );
-      }
-
-      if (borderLeft) {
-        strokeLine(
-          ctx,
-          tx,
-          ty,
-          width,
-          height,
-          borderLeft.width,
-          borderLeft.color,
-          'Left',
-        );
-      }
-    }
-
-    if (hasTransform || hasClipping || radius) {
-      ctx.restore();
-    }
-  }
-
-  createCtxTexture(textureSource: Texture): CoreContextTexture {
-    return new CanvasCoreTexture(this.txMemManager, textureSource);
-  }
-
-  getShaderManager(): CoreShaderManager {
-    return this.shManager;
-  }
-
-  override getDefShaderCtr(): BaseShaderController {
-    return this.defShaderCtr;
-  }
-
-  renderRTTNodes(): void {
-    // noop
-  }
-
-  removeRTTNode(node: CoreNode): void {
-    // noop
-  }
-
-  renderToTexture(node: CoreNode): void {
-    // noop
-  }
-  getBufferInfo(): null {
-    return null;
-  }
-
-  getQuadCount(): null {
-    return null;
-  }
-
-  /**
-   * Updates the clear color of the canvas renderer.
-   *
-   * @param color - The color to set as the clear color.
-   */
-  updateClearColor(color: number) {
-    this.clearColor = color ? getRgbaComponents(color) : undefined;
-  }
-}