@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

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

@@ -20,19 +20,11 @@ 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 { CoreRenderer, type CoreRendererOptions } 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 +34,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 {
@@ -73,44 +62,32 @@ export class CanvasRenderer extends CoreRenderer {
     // noop
   }
 
-  addQuad(quad: QuadOptions): void {
+  addQuad(node: CoreNode): void {
     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') {
+    const { tx, ty, ta, tb, tc, td } = node.globalTransform!;
+    const clippingRect = node.clippingRect;
+    let texture = (node.props.texture || this.stage.defaultTexture) as Texture;
+    // 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 hasShader = quad.shader !== null;
+    const hasClipping = clippingRect.w !== 0 && clippingRect.h !== 0;
+    const shader = node.props.shader;
+    const hasShader = shader !== null;
 
     let saveAndRestore = hasTransform === true || hasClipping === true;
     if (hasShader === true) {
-      saveAndRestore =
-        saveAndRestore || (quad.shader as CanvasShaderNode).applySNR;
+      saveAndRestore = saveAndRestore || (shader as CanvasShaderNode).applySNR;
     }
 
     if (saveAndRestore) {
@@ -119,8 +96,8 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (hasClipping === true) {
       const path = new Path2D();
-      const { x, y, width, height } = clippingRect;
-      path.rect(x, y, width, height);
+      const { x, y, w, h } = clippingRect;
+      path.rect(x, y, w, h);
       ctx.clip(path);
     }
 
@@ -141,12 +118,13 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (hasShader === true) {
       let renderContext: (() => void) | null = () => {
-        this.renderContext(quad);
+        this.renderContext(node, texture);
       };
-      (quad.shader as CanvasShaderNode).render(ctx, quad, renderContext);
+
+      (shader as CanvasShaderNode).render(ctx, node, renderContext);
       renderContext = null;
     } else {
-      this.renderContext(quad);
+      this.renderContext(node, texture);
     }
 
     if (saveAndRestore) {
@@ -154,79 +132,69 @@ 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
-    ) {
+  renderContext(node: CoreNode, texture: Texture) {
+    const color = node.premultipliedColorTl;
+    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);
-      const image = (quad.texture.ctxTexture as CanvasTexture).getImage(
-        tintColor,
-      );
-      this.context.globalAlpha = tintColor.a ?? quad.alpha;
-      if (textureType === TextureType.subTexture) {
-        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
-        }
+      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 =
-      quad.colorTl !== quad.colorTr || quad.colorTl !== quad.colorBr;
-    if (textureType === TextureType.color && hasGradient) {
-      let endX: number = quad.tx;
-      let endY: number = quad.ty;
+      node.premultipliedColorTl !== node.premultipliedColorTr ||
+      node.premultipliedColorTl !== node.premultipliedColorBr;
+    if (hasGradient === true) {
+      let endX: number = tx;
+      let endY: number = ty;
       let endColor: number;
-      if (quad.colorTl === quad.colorTr) {
+      if (node.premultipliedColorTl === node.premultipliedColorTr) {
         // vertical
-        endX = quad.tx;
-        endY = quad.ty + quad.height;
-        endColor = quad.colorBr;
+        endX = tx;
+        endY = ty + height;
+        endColor = node.premultipliedColorBr;
       } else {
         // horizontal
-        endX = quad.tx + quad.width;
-        endY = quad.ty;
-        endColor = quad.colorTr;
+        endX = tx + width;
+        endY = ty;
+        endColor = node.premultipliedColorTr;
       }
-      const gradient = this.context.createLinearGradient(
-        quad.tx,
-        quad.ty,
-        endX,
-        endY,
-      );
-      gradient.addColorStop(0, this.getParsedColor(color));
-      gradient.addColorStop(1, this.getParsedColor(endColor));
+      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(quad.tx, quad.ty, quad.width, quad.height);
-    } else if (textureType === TextureType.color) {
-      this.context.fillStyle = this.getParsedColor(color);
-      this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+      this.context.fillRect(tx, ty, width, height);
+    } else {
+      this.context.fillStyle = normalizeCanvasColor(color);
+      this.context.fillRect(tx, ty, width, height);
     }
   }
 
@@ -269,30 +237,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,9 @@
  */
 
 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>,
@@ -28,7 +27,7 @@ export type CanvasShaderType<
   render: (
     this: CanvasShaderNode<T, C>,
     ctx: CanvasRenderingContext2D,
-    quad: QuadOptions,
+    node: CoreNode,
     renderContext: () => void,
   ) => void;
   update?: (this: CanvasShaderNode<T, C>, node: CoreNode) => void;
@@ -67,10 +66,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 +90,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 };
   }
 }

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

@@ -0,0 +1,105 @@
+/*
+ * 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 { CoreRenderOp } from '../CoreRenderOp.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,
+    readonly sdfShaderProps: Record<string, unknown>,
+    readonly quadBufferCollection: BufferCollection,
+    readonly worldAlpha: number,
+    readonly clippingRect: RectWithValid,
+    readonly w: number,
+    readonly h: number,
+    readonly rtt: boolean,
+    readonly parentHasRenderTexture: boolean,
+    readonly 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 = this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+      const clipX = Math.round(this.clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.h * 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 (this.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.h - this.h
+          : 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/WebGlCtxRenderTexture.ts

@@ -18,9 +18,9 @@
  */
 
 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 { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
@@ -29,6 +29,13 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
 
   public framebuffer: WebGLFramebuffer | null = null;
 
+  override txCoords: Bound = {
+    x1: 0,
+    y1: 1,
+    x2: 1,
+    y2: 0,
+  };
+
   constructor(
     glw: WebGlContextWrapper,
     memManager: TextureMemoryManager,
@@ -41,25 +48,21 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
     const { glw } = this;
     const nativeTexture = (this._nativeCtxTexture =
       this.createNativeCtxTexture());
-    const { width, height } = this.textureSource;
+
+    if (!nativeTexture) {
+      throw new Error('Failed to create native texture for RenderTexture');
+    }
+
+    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);
@@ -71,8 +74,8 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
     glw.bindFramebuffer(null);
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 

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

@@ -22,6 +22,8 @@ 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 {
@@ -39,12 +41,55 @@ export class WebGlCtxSubTexture extends WebGlCtxTexture {
 
     if (props.data instanceof Uint8Array) {
       // its a 1x1 Color Texture
-      return { width: 1, height: 1 };
+      return { w: 1, h: 1 };
     }
 
-    return {
-      width: props.data?.width || 0,
-      height: props.data?.height || 0,
-    };
+    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';
   }
 }