@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta21

package/src/core/lib/ImageWorker.ts

@@ -178,7 +178,7 @@ export class ImageWorkerManager {
   imageWorkersEnabled = true;
   messageManager: Record<number, MessageCallback> = {};
   workers: Worker[] = [];
-  workerIndex = 0;
+  workerLoad: number[] = [];
   nextId = 0;
 
   constructor(
@@ -189,14 +189,19 @@ export class ImageWorkerManager {
       numImageWorkers,
       createImageBitmapSupport,
     );
-    this.workers.forEach((worker) => {
-      worker.onmessage = this.handleMessage.bind(this);
+    this.workers.forEach((worker, index) => {
+      worker.onmessage = (event) => this.handleMessage(event, index);
     });
   }
 
-  private handleMessage(event: MessageEvent) {
+  private handleMessage(event: MessageEvent, workerIndex: number) {
     const { id, data, error } = event.data as ImageWorkerMessage;
     const msg = this.messageManager[id];
+
+    if (this.workerLoad[workerIndex]) {
+      this.workerLoad[workerIndex]--;
+    }
+
     if (msg) {
       const [resolve, reject] = msg;
       delete this.messageManager[id];
@@ -242,14 +247,30 @@ export class ImageWorkerManager {
     const workers: Worker[] = [];
     for (let i = 0; i < numWorkers; i++) {
       workers.push(new Worker(blobURL));
+      this.workerLoad.push(0);
     }
     return workers;
   }
 
-  private getNextWorker(): Worker | undefined {
-    const worker = this.workers[this.workerIndex];
-    this.workerIndex = (this.workerIndex + 1) % this.workers.length;
-    return worker;
+  private getNextWorkerIndex(): number {
+    if (this.workers.length === 0) return -1;
+
+    let minLoad = 99;
+    let workerIndex = 0;
+
+    for (let i = 0; i < this.workers.length; i++) {
+      const load = this.workerLoad[i] || 0;
+
+      if (load === 0) {
+        return i;
+      }
+
+      if (load < minLoad) {
+        minLoad = load;
+        workerIndex = i;
+      }
+    }
+    return workerIndex;
   }
 
   getImage(
@@ -265,9 +286,13 @@ export class ImageWorkerManager {
         if (this.workers) {
           const id = this.nextId++;
           this.messageManager[id] = [resolve, reject];
-          const nextWorker = this.getNextWorker();
-          if (nextWorker) {
-            nextWorker.postMessage({
+          const nextWorkerIndex = this.getNextWorkerIndex();
+
+          if (nextWorkerIndex !== -1) {
+            const worker = this.workers[nextWorkerIndex];
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.workerLoad[nextWorkerIndex]!++;
+            worker!.postMessage({
               id,
               src: src,
               premultiplyAlpha,

package/src/core/lib/WebGlContextWrapper.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 
-import { assertTruthy } from '../../utils.js';
+import { assertTruthy, isProductionEnvironment } from '../../utils.js';
 import type {
   Vec2,
   Vec3,

package/src/core/lib/utils.ts

@@ -82,8 +82,8 @@ export function getRgbaString(color: RGBA) {
 export interface Rect {
   x: number;
   y: number;
-  width: number;
-  height: number;
+  w: number;
+  h: number;
 }
 
 export interface RectWithValid extends Rect {
@@ -97,6 +97,11 @@ export interface Bound {
   y2: number;
 }
 
+export interface Coord {
+  x: number;
+  y: number;
+}
+
 export interface BoundWithValid extends Bound {
   valid: boolean;
 }
@@ -154,15 +159,15 @@ export function convertBoundToRect(bound: Bound, out?: Rect): Rect {
   if (out) {
     out.x = bound.x1;
     out.y = bound.y1;
-    out.width = bound.x2 - bound.x1;
-    out.height = bound.y2 - bound.y1;
+    out.w = bound.x2 - bound.x1;
+    out.h = bound.y2 - bound.y1;
     return out;
   }
   return {
     x: bound.x1,
     y: bound.y1,
-    width: bound.x2 - bound.x1,
-    height: bound.y2 - bound.y1,
+    w: bound.x2 - bound.x1,
+    h: bound.y2 - bound.y1,
   };
 }
 
@@ -175,35 +180,35 @@ export function intersectRect<T extends Rect = Rect>(
 export function intersectRect(a: Rect, b: Rect, out?: Rect): Rect {
   const x = Math.max(a.x, b.x);
   const y = Math.max(a.y, b.y);
-  const width = Math.min(a.x + a.width, b.x + b.width) - x;
-  const height = Math.min(a.y + a.height, b.y + b.height) - y;
-  if (width > 0 && height > 0) {
+  const w = Math.min(a.x + a.w, b.x + b.w) - x;
+  const h = Math.min(a.y + a.h, b.y + b.h) - y;
+  if (w > 0 && h > 0) {
     if (out) {
       out.x = x;
       out.y = y;
-      out.width = width;
-      out.height = height;
+      out.w = w;
+      out.h = h;
       return out;
     }
     return {
       x,
       y,
-      width,
-      height,
+      w,
+      h,
     };
   }
   if (out) {
     out.x = 0;
     out.y = 0;
-    out.width = 0;
-    out.height = 0;
+    out.w = 0;
+    out.h = 0;
     return out;
   }
   return {
     x: 0,
     y: 0,
-    width: 0,
-    height: 0,
+    w: 0,
+    h: 0,
   };
 }
 
@@ -213,15 +218,15 @@ export function copyRect(a: Rect, out?: Rect): Rect {
   if (out) {
     out.x = a.x;
     out.y = a.y;
-    out.width = a.width;
-    out.height = a.height;
+    out.w = a.w;
+    out.h = a.h;
     return out;
   }
   return {
     x: a.x,
     y: a.y,
-    width: a.width,
-    height: a.height,
+    w: a.w,
+    h: a.h,
   };
 }
 
@@ -232,9 +237,7 @@ export function compareRect(a: Rect | null, b: Rect | null): boolean {
   if (a === null || b === null) {
     return false;
   }
-  return (
-    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
-  );
+  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
 }
 
 export function boundInsideBound(bound1: Bound, bound2: Bound) {
@@ -264,7 +267,7 @@ export function isBoundPositive(bound: Bound): boolean {
 }
 
 export function isRectPositive(rect: Rect): boolean {
-  return rect.width > 0 && rect.height > 0;
+  return rect.w > 0 && rect.h > 0;
 }
 
 /**

package/src/core/renderers/CoreRenderer.ts

@@ -17,45 +17,14 @@
  * limitations under the License.
  */
 
-import type { Dimensions } from '../../common/CommonTypes.js';
 import type { CoreNode } from '../CoreNode.js';
-import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
 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, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
-export interface QuadOptions {
-  width: number;
-  height: number;
-  colorTl: number;
-  colorTr: number;
-  colorBl: number;
-  colorBr: number;
-  texture: Texture | null;
-  textureOptions: TextureOptions | null;
-  textureCoords: TextureCoords | undefined;
-  zIndex: number;
-  shader: CoreShaderNode | null;
-  alpha: number;
-  clippingRect: RectWithValid;
-  tx: number;
-  ty: number;
-  ta: number;
-  tb: number;
-  tc: number;
-  td: number;
-  renderCoords?: RenderCoords;
-  rtt: boolean;
-  parentHasRenderTexture: boolean;
-  framebufferDimensions: Dimensions | null;
-  time?: number | null;
-}
-
 export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;
@@ -84,7 +53,7 @@ export abstract class CoreRenderer {
 
   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 createShaderProgram(
     shaderConfig: Readonly<CoreShaderType>,

package/src/core/renderers/CoreShaderNode.ts

@@ -96,6 +96,10 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   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,
@@ -141,6 +145,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
           } else {
             this.resolvedProps![key] = value;
           }
+          this._valueKeyDirty = true;
 
           if (this.update !== undefined && this.node !== null) {
             this.node.setUpdateType(UpdateType.RecalcUniforms);
@@ -158,12 +163,27 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   }
 
   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;
   }
 

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

@@ -20,11 +20,7 @@ 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 } from '../../lib/colorParser.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
@@ -66,10 +62,11 @@ 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 { 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;
@@ -84,13 +81,13 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     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) {
@@ -99,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);
     }
 
@@ -121,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) {
@@ -134,22 +132,20 @@ export class CanvasRenderer extends CoreRenderer {
     }
   }
 
-  renderContext(quad: QuadOptions) {
-    const color = quad.colorTl;
-    const texture = quad.texture!;
+  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);
       if (textureType !== TextureType.subTexture) {
         const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
-        this.context.globalAlpha = tintColor.a ?? quad.alpha;
-        this.context.drawImage(
-          image,
-          quad.tx,
-          quad.ty,
-          quad.width,
-          quad.height,
-        );
+        this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
+        this.context.drawImage(image, tx, ty, width, height);
         this.context.globalAlpha = 1;
         return;
       }
@@ -158,51 +154,47 @@ export class CanvasRenderer extends CoreRenderer {
       ).getImage(tintColor);
       const props = (texture as SubTexture).props;
 
-      this.context.globalAlpha = tintColor.a ?? quad.alpha;
+      this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
       this.context.drawImage(
         image,
         props.x,
         props.y,
         props.w,
         props.h,
-        quad.tx,
-        quad.ty,
-        quad.width,
-        quad.height,
+        tx,
+        ty,
+        width,
+        height,
       );
       this.context.globalAlpha = 1;
       return;
     }
     const hasGradient =
-      quad.colorTl !== quad.colorTr || quad.colorTl !== quad.colorBr;
+      node.premultipliedColorTl !== node.premultipliedColorTr ||
+      node.premultipliedColorTl !== node.premultipliedColorBr;
     if (hasGradient === true) {
-      let endX: number = quad.tx;
-      let endY: number = quad.ty;
+      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,
-      );
+      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);
+      this.context.fillRect(tx, ty, width, height);
     } else {
       this.context.fillStyle = normalizeCanvasColor(color);
-      this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+      this.context.fillRect(tx, ty, width, height);
     }
   }
 

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

@@ -18,7 +18,6 @@
 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<
@@ -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;

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/WebGlCtxTexture.ts

@@ -25,6 +25,7 @@ import { uploadCompressedTexture } from '../../lib/textureCompression.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 import type { Bound } from '../../lib/utils.js';
+import { isProductionEnvironment } from '../../../utils.js';
 
 const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
 
@@ -69,11 +70,16 @@ export class WebGlCtxTexture extends CoreContextTexture {
       return true;
     }
 
-    const error = this.glw.getError();
-    if (error !== 0) {
-      this.state = 'failed';
-      this.textureSource.setState('failed', new Error(`WebGL Error: ${error}`));
-      return true;
+    if (isProductionEnvironment === false) {
+      const error = this.glw.getError();
+      if (error !== 0) {
+        this.state = 'failed';
+        this.textureSource.setState(
+          'failed',
+          new Error(`WebGL Error: ${error}`),
+        );
+        return true;
+      }
     }
     return false;
   }
@@ -187,11 +193,13 @@ export class WebGlCtxTexture extends CoreContextTexture {
     const format = glw.RGBA;
     const formatBytes = 4;
     const memoryPadding = 1.1; // Add padding to account for GPU Padding
+    const isImageBitmap =
+      typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap;
 
     // If textureData is null, the texture is empty (0, 0) and we don't need to
     // upload any data to the GPU.
     if (
-      (typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) ||
+      isImageBitmap ||
       tdata instanceof ImageData ||
       // not using typeof HTMLI mageElement due to web worker
       isHTMLImageElement(tdata) === true
@@ -201,7 +209,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
       glw.bindTexture(this._nativeCtxTexture);
       glw.pixelStorei(
         glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
-        !!textureData.premultiplyAlpha,
+        isImageBitmap ? false : !!textureData.premultiplyAlpha,
       );
 
       glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
@@ -265,9 +273,8 @@ export class WebGlCtxTexture extends CoreContextTexture {
 
       this.setTextureMemUse(w * h * formatBytes);
     } else {
-      console.error(
+      throw new Error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
-        textureData,
       );
     }