@lightningjs/renderer 3.0.0-beta12 → 3.0.0-beta13

package/src/core/CoreNode.test.ts

@@ -17,9 +17,10 @@
  * limitations under the License.
  */
 
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { CoreNode, type CoreNodeProps, UpdateType } from './CoreNode.js';
 import { Stage } from './Stage.js';
+import { CoreRenderer } from './renderers/CoreRenderer.js';
 import { mock } from 'vitest-mock-extended';
 import { type TextureOptions } from './CoreTextureManager.js';
 import { createBound } from './lib/utils.js';
@@ -62,7 +63,6 @@ describe('set color()', () => {
     y: 0,
     zIndex: 0,
     zIndexLocked: 0,
-    strictBounds: false,
   };
 
   const clippingRect = {
@@ -79,6 +79,7 @@ describe('set color()', () => {
     defaultTexture: {
       state: 'loaded',
     },
+    renderer: mock<CoreRenderer>() as CoreRenderer,
   });
 
   describe('set color()', () => {

package/src/core/CoreNode.ts

@@ -672,21 +672,6 @@ export interface CoreNodeProps {
    * @default false
    */
   interactive?: boolean;
-  /**
-   * By enabling Strict bounds the renderer will not process & render child nodes of a node that is out of the visible area
-   *
-   * @remarks
-   * When enabled out of bound nodes, i.e. nodes that are out of the visible area, will
-   * **NOT** have their children processed and renderer anymore. This means the children of a out of bound
-   * node will not receive update processing such as positioning updates and will not be drawn on screen.
-   * As such the rest of the branch of the update tree that sits below this node will not be processed anymore
-   *
-   * This is a big performance gain but may be disabled in cases where the width of the parent node is
-   * unknown and the render must process the child nodes regardless of the viewport status of the parent node
-   *
-   * @default true
-   */
-  strictBounds: boolean;
 }
 
 /**
@@ -742,7 +727,8 @@ export class CoreNode extends EventEmitter {
     valid: false,
   };
   public textureCoords?: TextureCoords;
-  public updateTextureCoords?: boolean = false;
+  public updateTextureCoords: boolean = false;
+  public updateShaderUniforms: boolean = false;
   public isRenderable = false;
   public renderState: CoreNodeRenderState = CoreNodeRenderState.Init;
 
@@ -795,7 +781,6 @@ export class CoreNode extends EventEmitter {
     p.mountY = props.mountY;
     p.mount = props.mount;
     p.pivot = props.pivot;
-    p.strictBounds = props.strictBounds;
 
     p.zIndex = props.zIndex;
     p.zIndexLocked = props.zIndexLocked;
@@ -983,6 +968,7 @@ export class CoreNode extends EventEmitter {
     const mountTranslateY = p.mountY * h;
 
     if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+      const scaleRotate = Matrix3d.rotate(p.rotation).scale(p.scaleX, p.scaleY);
       const pivotTranslateX = p.pivotX * w;
       const pivotTranslateY = p.pivotY * h;
 
@@ -991,8 +977,7 @@ export class CoreNode extends EventEmitter {
         y - mountTranslateY + pivotTranslateY,
         this.localTransform,
       )
-        .rotate(p.rotation)
-        .scale(p.scaleX, p.scaleY)
+        .multiply(scaleRotate)
         .translate(-pivotTranslateX, -pivotTranslateY);
     } else {
       this.localTransform = Matrix3d.translate(
@@ -1148,7 +1133,7 @@ export class CoreNode extends EventEmitter {
     }
 
     if (updateType & UpdateType.WorldAlpha) {
-      this.worldAlpha = ((parent && parent.worldAlpha) || 1) * props.alpha;
+      this.worldAlpha = (parent?.worldAlpha ?? 1) * this.props.alpha;
       updateType |=
         UpdateType.PremultipliedColors |
         UpdateType.Children |
@@ -1184,7 +1169,7 @@ export class CoreNode extends EventEmitter {
 
       this.premultipliedColorTl = merged;
 
-      if (same) {
+      if (same === true) {
         this.premultipliedColorTr =
           this.premultipliedColorBl =
           this.premultipliedColorBr =
@@ -1218,10 +1203,7 @@ export class CoreNode extends EventEmitter {
       parent.setUpdateType(UpdateType.ZIndexSortedChildren);
     }
 
-    if (
-      props.strictBounds === true &&
-      this.renderState === CoreNodeRenderState.OutOfBounds
-    ) {
+    if (this.renderState === CoreNodeRenderState.OutOfBounds) {
       updateType &= ~UpdateType.RenderBounds; // remove render bounds update
       return;
     }
@@ -1230,6 +1212,11 @@ export class CoreNode extends EventEmitter {
       updateType & UpdateType.RecalcUniforms &&
       this.hasShaderUpdater === true
     ) {
+      this.updateShaderUniforms = true;
+    }
+
+    if (this.isRenderable === true && this.updateShaderUniforms === true) {
+      this.updateShaderUniforms = false;
       //this exists because the boolean hasShaderUpdater === true
       this.shader!.update!();
     }
@@ -1707,6 +1694,12 @@ export class CoreNode extends EventEmitter {
     const coords = this.renderCoords;
     const texture = p.texture || this.stage.defaultTexture;
 
+    // There is a race condition where the texture can be null
+    // with RTT nodes. Adding this defensively to avoid errors.
+    if (texture && texture.state !== 'loaded') {
+      return;
+    }
+
     renderer.addQuad({
       width: p.w,
       height: p.h,
@@ -1793,7 +1786,7 @@ export class CoreNode extends EventEmitter {
 
   set w(value: number) {
     if (this.props.w !== value) {
-      this.textureCoords = undefined;
+      this.updateTextureCoords = true;
       this.props.w = value;
       this.setUpdateType(UpdateType.Local);
 
@@ -1815,7 +1808,7 @@ export class CoreNode extends EventEmitter {
 
   set h(value: number) {
     if (this.props.h !== value) {
-      this.textureCoords = undefined;
+      this.updateTextureCoords = true;
       this.props.h = value;
       this.setUpdateType(UpdateType.Local);
 
@@ -2152,6 +2145,10 @@ export class CoreNode extends EventEmitter {
   }
 
   set zIndex(value: number) {
+    if (this.props.zIndex === value) {
+      return;
+    }
+
     this.props.zIndex = value;
     this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
     for (let i = 0, length = this.children.length; i < length; i++) {
@@ -2445,20 +2442,6 @@ export class CoreNode extends EventEmitter {
     this.parent?.setRTTUpdates(type);
   }
 
-  get strictBounds(): boolean {
-    return this.props.strictBounds;
-  }
-
-  set strictBounds(v) {
-    if (v === this.props.strictBounds) {
-      return;
-    }
-
-    this.props.strictBounds = v;
-    this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
-    this.childUpdateType |= UpdateType.RenderBounds | UpdateType.Children;
-  }
-
   animate(
     props: Partial<CoreNodeAnimateProps>,
     settings: Partial<AnimationSettings>,

package/src/core/CoreTextNode.ts

@@ -268,7 +268,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   override destroy(): void {
-    if (this._waitingForFont === true) {
+    if (this._waitingForFont === true && this.fontHandler) {
       this.fontHandler.stopWaitingForFont(this.textProps.fontFamily, this);
     }
 

package/src/core/Stage.ts

@@ -102,7 +102,6 @@ export class Stage {
   public readonly defShaderNode: CoreShaderNode | null = null;
   public strictBound: Bound;
   public preloadBound: Bound;
-  public readonly strictBounds: boolean;
   public readonly defaultTexture: Texture | null = null;
   public pixelRatio: number;
   public readonly bufferMemory: number = 2e6;
@@ -197,7 +196,6 @@ export class Stage {
 
     this.animationManager = new AnimationManager();
     this.contextSpy = enableContextSpy ? new ContextSpy() : null;
-    this.strictBounds = options.strictBounds;
 
     let bm = [0, 0, 0, 0] as [number, number, number, number];
     if (boundsMargin) {
@@ -354,7 +352,6 @@ export class Stage {
       rtt: false,
       src: null,
       scale: 1,
-      strictBounds: this.strictBounds,
     });
 
     this.root = rootNode;
@@ -589,8 +586,7 @@ export class Stage {
 
       if (
         child.worldAlpha === 0 ||
-        (child.strictBounds === true &&
-          child.renderState === CoreNodeRenderState.OutOfBounds)
+        child.renderState === CoreNodeRenderState.OutOfBounds
       ) {
         continue;
       }
@@ -847,7 +843,6 @@ export class Stage {
       data,
       imageType: props.imageType,
       interactive: props.interactive ?? false,
-      strictBounds: props.strictBounds ?? this.strictBounds,
     };
   }
 

package/src/core/lib/WebGlContextWrapper.ts

@@ -725,7 +725,7 @@ export class WebGlContextWrapper {
     const result = {} as Record<string, number>;
     for (let i = 0; i < length; i++) {
       const { name } = gl.getActiveAttrib(program, i) as WebGLActiveInfo;
-      result[name] = i;
+      result[name] = gl.getAttribLocation(program, name);
     }
     return result;
   }

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

@@ -554,8 +554,7 @@ export class WebGlRenderer extends CoreRenderer {
       // Skip nodes that are not visible
       if (
         node.worldAlpha === 0 ||
-        (node.strictBounds === true &&
-          node.renderState === CoreNodeRenderState.OutOfBounds)
+        node.renderState === CoreNodeRenderState.OutOfBounds
       ) {
         continue;
       }

package/src/core/text-rendering/sdf/Utils.ts

@@ -36,13 +36,13 @@ export const measureLines = (
 
   while (remainingLines > 0) {
     const line = lines[i];
+    i++;
+    remainingLines--;
     if (line === undefined) {
       continue;
     }
     const width = measureText(line, fontFamily, designLetterSpacing);
     measuredLines.push([line, width]);
-    i++;
-    remainingLines--;
   }
 
   return [

package/src/main-api/Renderer.ts

@@ -250,17 +250,6 @@ export type RendererMainSettings = RendererRuntimeSettings & {
    */
   forceWebGL2: boolean;
 
-  /**
-   * Enable strictBounds
-   *
-   * @remarks
-   * Enable strict bounds for the renderer. This will ensure that the renderer
-   * will not render outside the bounds of the canvas.
-   *
-   * @defaultValue `true`
-   */
-  strictBounds: boolean;
-
   /**
    * Canvas object to use for rendering
    *
@@ -400,7 +389,6 @@ export class RendererMain extends EventEmitter {
       renderEngine: settings.renderEngine,
       quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,
       fontEngines: settings.fontEngines ?? [],
-      strictBounds: settings.strictBounds ?? true,
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 42,
       canvas: settings.canvas || document.createElement('canvas'),
       createImageBitmapSupport: settings.createImageBitmapSupport || 'full',
@@ -457,7 +445,6 @@ export class RendererMain extends EventEmitter {
       quadBufferSize: settings.quadBufferSize!,
       fontEngines: settings.fontEngines!,
       inspector: settings.inspector !== null,
-      strictBounds: settings.strictBounds!,
       targetFPS: settings.targetFPS!,
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit!,
       createImageBitmapSupport: settings.createImageBitmapSupport!,

package/dist/src/core/platform.d.ts

@@ -1,10 +0,0 @@
-import type { Stage } from './Stage.js';
-/**
- * Platform render loop initiator
- */
-export declare const startLoop: (stage: Stage) => void;
-/**
- * Return unix timestamp
- * @return {number}
- */
-export declare const getTimeStamp: () => number;

package/dist/src/core/platform.js

@@ -1,81 +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.
- */
-/**
- * Platform render loop initiator
- */
-export const startLoop = (stage) => {
-    let isIdle = false;
-    let lastFrameTime = 0;
-    const runLoop = (currentTime = 0) => {
-        const targetFrameTime = stage.targetFrameTime;
-        // Check if we should throttle this frame
-        if (targetFrameTime > 0 && currentTime - lastFrameTime < targetFrameTime) {
-            // Too early for next frame, schedule with setTimeout for precise timing
-            const delay = targetFrameTime - (currentTime - lastFrameTime);
-            setTimeout(() => requestAnimationFrame(runLoop), delay);
-            return;
-        }
-        lastFrameTime = currentTime;
-        stage.updateFrameTime();
-        stage.updateAnimations();
-        if (!stage.hasSceneUpdates()) {
-            // We still need to calculate the fps else it looks like the app is frozen
-            stage.calculateFps();
-            if (targetFrameTime > 0) {
-                // Use setTimeout for throttled idle frames
-                setTimeout(() => requestAnimationFrame(runLoop), Math.max(targetFrameTime, 16.666666666666668));
-            }
-            else {
-                // Use standard idle timeout when not throttling
-                setTimeout(() => requestAnimationFrame(runLoop), 16.666666666666668);
-            }
-            if (!isIdle) {
-                stage.eventBus.emit('idle');
-                isIdle = true;
-            }
-            if (stage.txMemManager.checkCleanup() === true) {
-                stage.txMemManager.cleanup(false);
-            }
-            stage.flushFrameEvents();
-            return;
-        }
-        isIdle = false;
-        stage.drawFrame();
-        stage.flushFrameEvents();
-        // Schedule next frame
-        if (targetFrameTime > 0) {
-            // Use setTimeout + rAF combination for precise FPS control
-            const nextFrameDelay = Math.max(0, targetFrameTime - (performance.now() - currentTime));
-            setTimeout(() => requestAnimationFrame(runLoop), nextFrameDelay);
-        }
-        else {
-            // Use standard rAF when not throttling
-            requestAnimationFrame(runLoop);
-        }
-    };
-    requestAnimationFrame(runLoop);
-};
-/**
- * Return unix timestamp
- * @return {number}
- */
-export const getTimeStamp = () => {
-    return performance ? performance.now() : Date.now();
-};
-//# sourceMappingURL=platform.js.map

package/dist/src/core/platform.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"platform.js","sourceRoot":"","sources":["../../../src/core/platform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,aAAa,GAAG,CAAC,CAAC;IAEtB,MAAM,OAAO,GAAG,CAAC,cAAsB,CAAC,EAAE,EAAE;QAC1C,MAAM,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC;QAE9C,yCAAyC;QACzC,IAAI,eAAe,GAAG,CAAC,IAAI,WAAW,GAAG,aAAa,GAAG,eAAe,EAAE,CAAC;YACzE,wEAAwE;YACxE,MAAM,KAAK,GAAG,eAAe,GAAG,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;YAC9D,UAAU,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;YACxD,OAAO;QACT,CAAC;QAED,aAAa,GAAG,WAAW,CAAC;QAE5B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,gBAAgB,EAAE,CAAC;QAEzB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,CAAC;YAC7B,0EAA0E;YAC1E,KAAK,CAAC,YAAY,EAAE,CAAC;YAErB,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;gBACxB,2CAA2C;gBAC3C,UAAU,CACR,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAC9C,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,gDAAgD;gBAChD,UAAU,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC;YACvE,CAAC;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC5B,MAAM,GAAG,IAAI,CAAC;YAChB,CAAC;YAED,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC;gBAC/C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACpC,CAAC;YAED,KAAK,CAAC,gBAAgB,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,GAAG,KAAK,CAAC;QACf,KAAK,CAAC,SAAS,EAAE,CAAC;QAClB,KAAK,CAAC,gBAAgB,EAAE,CAAC;QAEzB,sBAAsB;QACtB,IAAI,eAAe,GAAG,CAAC,EAAE,CAAC;YACxB,2DAA2D;YAC3D,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAC7B,CAAC,EACD,eAAe,GAAG,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,WAAW,CAAC,CACpD,CAAC;YACF,UAAU,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,uCAAuC;YACvC,qBAAqB,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,qBAAqB,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AACtD,CAAC,CAAC"}

package/dist/src/core/renderers/CoreShader.d.ts

@@ -1,9 +0,0 @@
-import type { CoreRenderOp } from './CoreRenderOp.js';
-export declare abstract class CoreShader {
-    static makeCacheKey(props: Record<string, unknown>): string | false;
-    static resolveDefaults(props: Record<string, unknown>): Record<string, unknown>;
-    abstract bindRenderOp(renderOp: CoreRenderOp, props: Record<string, unknown> | null): void;
-    protected abstract bindProps(props: Record<string, unknown>): void;
-    abstract attach(): void;
-    abstract detach(): void;
-}

package/dist/src/core/renderers/CoreShader.js

@@ -1,28 +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.
- */
-export class CoreShader {
-    // abstract draw(): void;
-    static makeCacheKey(props) {
-        return false;
-    }
-    static resolveDefaults(props) {
-        return {};
-    }
-}
-//# sourceMappingURL=CoreShader.js.map

package/dist/src/core/renderers/CoreShader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CoreShader.js","sourceRoot":"","sources":["../../../../src/core/renderers/CoreShader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,OAAgB,UAAU;IAC9B,yBAAyB;IACzB,MAAM,CAAC,YAAY,CAAC,KAA8B;QAChD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,CAAC,eAAe,CACpB,KAA8B;QAE9B,OAAO,EAAE,CAAC;IACZ,CAAC;CASF"}

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

@@ -1,33 +0,0 @@
-import type { BaseShaderController } from '../../../main-api/ShaderController.js';
-import type { CoreNode } from '../../CoreNode.js';
-import type { CoreShaderManager } from '../../CoreShaderManager.js';
-import { type Texture } from '../../textures/Texture.js';
-import type { CoreContextTexture } from '../CoreContextTexture.js';
-import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from '../CoreRenderer.js';
-export declare class CanvasCoreRenderer extends CoreRenderer {
-    private context;
-    private canvas;
-    private pixelRatio;
-    private clearColor;
-    renderToTextureActive: boolean;
-    activeRttNode: CoreNode | null;
-    private defShaderCtr;
-    constructor(options: CoreRendererOptions);
-    reset(): void;
-    render(): void;
-    addQuad(quad: QuadOptions): void;
-    createCtxTexture(textureSource: Texture): CoreContextTexture;
-    getShaderManager(): CoreShaderManager;
-    getDefShaderCtr(): BaseShaderController;
-    renderRTTNodes(): void;
-    removeRTTNode(node: CoreNode): void;
-    renderToTexture(node: CoreNode): void;
-    getBufferInfo(): null;
-    getQuadCount(): null;
-    /**
-     * Updates the clear color of the canvas renderer.
-     *
-     * @param color - The color to set as the clear color.
-     */
-    updateClearColor(color: number): void;
-}