@lightningtv/renderer 2.16.1 → 3.2.3

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

@@ -0,0 +1,270 @@
+import type { CoreNode } from '../../CoreNode.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 { CanvasTexture } from './CanvasTexture.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;
+  private canvas: HTMLCanvasElement;
+  private pixelRatio: number;
+  private clearColor: string;
+  public renderToTextureActive = false;
+  activeRttNode: CoreNode | null = null;
+
+  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 = normalizeCanvasColor(this.stage.clearColor);
+  }
+
+  reset(): void {
+    this.canvas.width = this.canvas.width; // quick reset canvas
+
+    const ctx = this.context;
+
+    if (this.clearColor) {
+      ctx.fillStyle = this.clearColor;
+      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+  }
+
+  render(): void {
+    // noop
+  }
+
+  addQuad(node: CoreNode): void {
+    const ctx = this.context;
+    const { tx, ty, ta, tb, tc, td } = node.globalTransform!;
+    const clippingRect = node.clippingRect;
+    let texture = node.renderTexture;
+    // 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;
+      }
+    }
+
+    const hasTransform = ta !== 1;
+    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const shader = node.props.shader;
+    const hasShader = shader !== null;
+
+    let saveAndRestore = hasTransform === true || hasClipping === true;
+    if (hasShader === true) {
+      saveAndRestore = saveAndRestore || (shader as CanvasShaderNode).applySNR;
+    }
+
+    if (saveAndRestore) {
+      ctx.save();
+    }
+
+    if (hasClipping === true) {
+      const path = new Path2D();
+      const { x, y, width, height } = clippingRect;
+      path.rect(x, y, width, height);
+      ctx.clip(path);
+    }
+
+    if (hasTransform === true) {
+      // 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 (hasShader === true) {
+      let renderContext: (() => void) | null = () => {
+        this.renderContext(node);
+      };
+      const quad: QuadOptions = {
+        width: node.props.w,
+        height: node.props.h,
+        colorTl: node.premultipliedColorTl,
+        colorTr: node.premultipliedColorTr,
+        colorBl: node.premultipliedColorBl,
+        colorBr: node.premultipliedColorBr,
+        texture: texture,
+        textureOptions: node.props.textureOptions,
+        textureCoords: node.renderTextureCoords,
+        zIndex: node.zIndex, // zIndex usage?
+        shader: shader,
+        alpha: node.worldAlpha,
+        clippingRect: clippingRect,
+        tx,
+        ty,
+        ta,
+        tb,
+        tc,
+        td,
+        renderCoords: node.renderCoords,
+        rtt: node.props.rtt,
+        parentHasRenderTexture: node.parentHasRenderTexture,
+        framebufferDimensions: node.parentHasRenderTexture
+          ? node.parentFramebufferDimensions
+          : null,
+      };
+
+      (shader as CanvasShaderNode).render(ctx, quad, renderContext);
+      renderContext = null;
+    } else {
+      this.renderContext(node);
+    }
+
+    if (saveAndRestore) {
+      ctx.restore();
+    }
+  }
+
+  renderContext(node: CoreNode) {
+    const color = node.premultipliedColorTl;
+    const texture = node.renderTexture!;
+    const textureType = texture.type;
+    const tx = node.globalTransform!.tx;
+    const ty = node.globalTransform!.ty;
+    const width = node.props.w;
+    const height = node.props.h;
+
+    if (textureType !== TextureType.color) {
+      const tintColor = parseColor(color);
+      if (textureType !== TextureType.subTexture) {
+        const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
+        this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
+        this.context.drawImage(image, tx, ty, width, height);
+        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 ?? node.worldAlpha;
+      this.context.drawImage(
+        image,
+        props.x,
+        props.y,
+        props.w,
+        props.h,
+        tx,
+        ty,
+        width,
+        height,
+      );
+      this.context.globalAlpha = 1;
+      return;
+    }
+    const hasGradient =
+      node.premultipliedColorTl !== node.premultipliedColorTr ||
+      node.premultipliedColorTl !== node.premultipliedColorBr;
+    if (hasGradient === true) {
+      let endX: number = tx;
+      let endY: number = ty;
+      let endColor: number;
+      if (node.premultipliedColorTl === node.premultipliedColorTr) {
+        // vertical
+        endX = tx;
+        endY = ty + height;
+        endColor = node.premultipliedColorBr;
+      } else {
+        // horizontal
+        endX = tx + width;
+        endY = ty;
+        endColor = node.premultipliedColorTr;
+      }
+      const gradient = this.context.createLinearGradient(tx, ty, endX, endY);
+      gradient.addColorStop(0, normalizeCanvasColor(color));
+      gradient.addColorStop(1, normalizeCanvasColor(endColor));
+      this.context.fillStyle = gradient;
+      this.context.fillRect(tx, ty, width, height);
+    } else {
+      this.context.fillStyle = normalizeCanvasColor(color);
+      this.context.fillRect(tx, ty, width, height);
+    }
+  }
+
+  createShaderNode(
+    shaderKey: string,
+    shaderType: Readonly<CanvasShaderType>,
+    props?: Record<string, any>,
+  ) {
+    return new CanvasShaderNode(shaderKey, shaderType, this.stage, props);
+  }
+
+  createShaderProgram(shaderConfig) {
+    return null;
+  }
+
+  override supportsShaderType(shaderType: Readonly<CanvasShaderType>): boolean {
+    return shaderType.render !== undefined;
+  }
+
+  createCtxTexture(textureSource: Texture): CoreContextTexture {
+    return new CanvasTexture(this.stage.txMemManager, textureSource);
+  }
+
+  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 = normalizeCanvasColor(color);
+  }
+
+  override updateViewport(): void {
+    // noop
+  }
+
+  getDefaultShaderNode() {
+    return null;
+  }
+}

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

@@ -0,0 +1,79 @@
+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';
+
+export type CanvasShaderType<
+  T extends object = Record<string, unknown>,
+  C extends object = Record<string, unknown>,
+> = CoreShaderType<T> & {
+  render: (
+    this: CanvasShaderNode<T, C>,
+    ctx: CanvasRenderingContext2D,
+    quad: QuadOptions,
+    renderContext: () => void,
+  ) => void;
+  update?: (this: CanvasShaderNode<T, C>, node: CoreNode) => void;
+  /**
+   * Set this to true when using ctx functions that scale, clip, rotate, etc..
+   */
+  saveAndRestore?: boolean;
+};
+
+export class CanvasShaderNode<
+  Props extends object = Record<string, unknown>,
+  Computed extends object = Record<string, unknown>,
+> extends CoreShaderNode<Props> {
+  private updater: ((node: CoreNode, props?: Props) => void) | undefined =
+    undefined;
+  private valueKey: string = '';
+  computed: Partial<Computed> = {};
+  applySNR: boolean;
+  render: CanvasShaderType<Props>['render'];
+
+  constructor(
+    shaderKey: string,
+    config: CanvasShaderType<Props>,
+    stage: Stage,
+    props?: Props,
+  ) {
+    super(shaderKey, config, stage, props);
+    this.applySNR = config.saveAndRestore || false;
+    this.render = config.render;
+    if (config.update !== undefined) {
+      this.updater = config.update!;
+      if (this.props === undefined) {
+        this.updater!(this.node as CoreNode, this.props);
+        return;
+      }
+
+      this.update = () => {
+        const prevKey = this.valueKey;
+        this.valueKey = this.createValueKey();
+
+        if (prevKey === this.valueKey) {
+          return;
+        }
+
+        if (prevKey.length > 0) {
+          this.stage.shManager.mutateShaderValueUsage(prevKey, -1);
+        }
+
+        const computed = this.stage.shManager.getShaderValues(
+          this.valueKey,
+        ) as Record<string, unknown>;
+        if (computed !== undefined) {
+          this.computed = computed as Computed;
+        }
+        this.computed = {};
+        this.updater!(this.node as CoreNode);
+        this.stage.shManager.setShaderValues(this.valueKey, this.computed);
+      };
+    }
+  }
+
+  toColorString(rgba: number) {
+    return normalizeCanvasColor(rgba, true);
+  }
+}

package/src/core/renderers/canvas/{CanvasCoreTexture.ts → CanvasTexture.ts}

@@ -1,28 +1,9 @@
-/*
- * 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 { 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 CanvasCoreTexture extends CoreContextTexture {
+export class CanvasTexture extends CoreContextTexture {
   protected image:
     | ImageBitmap
     | HTMLCanvasElement
@@ -50,9 +31,13 @@ export class CanvasCoreTexture extends CoreContextTexture {
     }
   }
 
-  free(): void {
+  release(): void {
     this.image = undefined;
     this.tintCache = undefined;
+  }
+
+  free(): void {
+    this.release();
     this.textureSource.setState('freed');
     this.setTextureMemUse(0);
     this.textureSource.freeTextureData();
@@ -64,8 +49,11 @@ export class CanvasCoreTexture extends CoreContextTexture {
     // - tinted image
     const mult = this.tintCache ? 8 : 4;
     if (this.textureSource.dimensions) {
-      const { width, height } = this.textureSource.dimensions;
-      this.setTextureMemUse(width * height * mult);
+      this.setTextureMemUse(
+        this.textureSource.dimensions.w *
+          this.textureSource.dimensions.h *
+          mult,
+      );
     }
   }
 
@@ -139,15 +127,15 @@ export class CanvasCoreTexture 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 };
   }
 }

package/src/core/renderers/webgl/SdfRenderOp.ts

@@ -0,0 +1,88 @@
+import { CoreRenderOp } from '../CoreRenderOp.js';
+import { USE_RTT } from '../../../utils.js';
+import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
+import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { BufferCollection } from './internal/BufferCollection.js';
+import type { WebGlShaderNode } from './WebGlShaderNode.js';
+import type { RectWithValid } from '../../lib/utils.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import type { Stage } from '../../Stage.js';
+
+/**
+ * Can render multiple quads with multiple textures (up to vertex shader texture limit)
+ *
+ */
+export class SdfRenderOp extends CoreRenderOp {
+  public numQuads = 0;
+  public readonly isCoreNode = false as const;
+  public renderOpTextures: WebGlCtxTexture[] = [];
+  public time: number = 0;
+  readonly stage: Stage;
+
+  constructor(
+    readonly renderer: WebGlRenderer,
+    readonly shader: WebGlShaderNode,
+    public sdfShaderProps: Record<string, unknown>,
+    readonly quadBufferCollection: BufferCollection,
+    public worldAlpha: number,
+    public clippingRect: RectWithValid,
+    readonly width: number,
+    readonly height: number,
+    readonly rtt: boolean,
+    public parentHasRenderTexture: boolean,
+    public framebufferDimensions: Dimensions | null,
+  ) {
+    super();
+    this.stage = renderer.stage;
+  }
+
+  addTexture(texture: WebGlCtxTexture): number {
+    const { renderOpTextures } = this;
+    const length = renderOpTextures.length;
+
+    // We only support 1 texture (atlas) for SDF for now, but following the pattern
+    for (let i = 0; i < length; i++) {
+      if (renderOpTextures[i] === texture) {
+        return i;
+      }
+    }
+
+    renderOpTextures.push(texture);
+    return length;
+  }
+
+  draw() {
+    const { glw, options, stage } = this.renderer;
+
+    stage.shManager.useShader(this.shader.program);
+    this.shader.program.bindRenderOp(this);
+
+    // Clipping
+    if (this.clippingRect.valid === true) {
+      const pixelRatio =
+        USE_RTT && this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+      const clipX = Math.round(this.clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.width * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.height * pixelRatio);
+      let clipY = Math.round(
+        options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
+      );
+      // if parent has render texture, we need to adjust the scissor rect
+      // to be relative to the parent's framebuffer
+      if (USE_RTT && this.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.h - this.height
+          : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+    // Note: buffers should be bound by bindRenderOp -> bindBufferCollection
+    glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+  }
+}

package/src/core/renderers/webgl/{WebGlCoreCtxRenderTexture.ts → WebGlCtxRenderTexture.ts}

@@ -1,34 +1,22 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2024 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 { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { Bound } from '../../lib/utils.js';
 import type { RenderTexture } from '../../textures/RenderTexture.js';
-import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
-export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
+export class WebGlCtxRenderTexture extends WebGlCtxTexture {
   declare textureSource: RenderTexture;
 
   public framebuffer: WebGLFramebuffer | null = null;
 
+  override txCoords: Bound = {
+    x1: 0,
+    y1: 1,
+    x2: 1,
+    y2: 0,
+  };
+
   constructor(
     glw: WebGlContextWrapper,
     memManager: TextureMemoryManager,
@@ -46,25 +34,16 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
       throw new Error('Failed to create native texture for RenderTexture');
     }
 
-    const { width, height } = this.textureSource;
+    const { w, h } = this.textureSource;
 
     // Create Framebuffer object
     this.framebuffer = glw.createFramebuffer();
 
     // Set the dimensions of the render texture
-    glw.texImage2D(
-      0,
-      glw.RGBA,
-      width,
-      height,
-      0,
-      glw.RGBA,
-      glw.UNSIGNED_BYTE,
-      null,
-    );
+    glw.texImage2D(0, glw.RGBA, w, h, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
 
     // Update the texture memory manager
-    this.setTextureMemUse(width * height * 4);
+    this.setTextureMemUse(w * h * 4);
 
     // Bind the framebuffer
     glw.bindFramebuffer(this.framebuffer);
@@ -76,8 +55,8 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
     glw.bindFramebuffer(null);
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 

package/src/core/renderers/webgl/WebGlCtxSubTexture.ts

@@ -0,0 +1,76 @@
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import { assertTruthy } from '../../../utils.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { SubTexture } from '../../textures/SubTexture.js';
+import type { SubTextureProps } from '../../textures/SubTexture.js';
+import type { CompressedData } from '../../textures/Texture.js';
+import { WebGlCtxTexture } from './WebGlCtxTexture.js';
+
+export class WebGlCtxSubTexture extends WebGlCtxTexture {
+  constructor(
+    glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: SubTexture,
+  ) {
+    super(glw, memManager, textureSource);
+  }
+
+  override async onLoadRequest(): Promise<Dimensions> {
+    const props = (this.textureSource as SubTexture).textureData;
+    assertTruthy(props, 'SubTexture must have texture data');
+
+    if (props.data instanceof Uint8Array) {
+      // its a 1x1 Color Texture
+      return { w: 1, h: 1 };
+    }
+
+    return this.extractDimensions(props.data);
+  }
+
+  /**
+   * Efficiently extracts width/height from polymorphic texture data
+   * Optimized for performance by using type guards and avoiding unnecessary property access
+   */
+  private extractDimensions(
+    data:
+      | ImageBitmap
+      | ImageData
+      | SubTextureProps
+      | CompressedData
+      | HTMLImageElement
+      | null,
+  ): Dimensions {
+    if (data === null) {
+      return { w: 0, h: 0 };
+    }
+
+    // Check for standard web API objects first (most common case)
+    // These use width/height properties: ImageBitmap, ImageData, HTMLImageElement
+    if (this.hasWidthHeight(data) === true) {
+      return { w: data.width, h: data.height };
+    }
+
+    // Check for internal objects that use w/h properties: SubTextureProps, CompressedData
+    if (this.hasWH(data) === true) {
+      return { w: data.w, h: data.h };
+    }
+
+    // Fallback
+    return { w: 0, h: 0 };
+  }
+
+  /**
+   * Type guard for objects with width/height properties
+   */
+  private hasWidthHeight(data: any): data is { width: number; height: number } {
+    return typeof data.width === 'number' && typeof data.height === 'number';
+  }
+
+  /**
+   * Type guard for objects with w/h properties
+   */
+  private hasWH(data: any): data is { w: number; h: number } {
+    return typeof data.w === 'number' && typeof data.h === 'number';
+  }
+}