@lightningjs/renderer 0.5.0 → 0.6.0

package/src/core/CoreNode.ts

@@ -37,7 +37,7 @@ import type {
   NodeTextureLoadedPayload,
 } from '../common/CommonTypes.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import type { Rect } from './lib/utils.js';
+import { intersectRect, type Rect } from './lib/utils.js';
 import { Matrix3d } from './lib/Matrix3d.js';
 
 export interface CoreNodeProps {
@@ -86,18 +86,13 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   readonly children: CoreNode[] = [];
   protected props: Required<CoreNodeProps>;
 
-  /**
-   * Recalculation type
-   * 0 - no recalculation
-   * 1 - alpha recalculation
-   * 2 - translate recalculation
-   * 4 - transform recalculation
-   */
-  public recalculationType = 6;
+  public recalculationType = 0;
   public hasUpdates = true;
   public globalTransform?: Matrix3d;
   public scaleRotateTransform?: Matrix3d;
   public localTransform?: Matrix3d;
+  public clippingRect: Rect | null = null;
+  private parentClippingRect: Rect | null = null;
 
   private isComplex = false;
 
@@ -179,27 +174,46 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   }
 
   setHasUpdates(): void {
-    if (!this.props.alpha) {
-      return;
-    }
     this.hasUpdates = true;
-    let p = this?.props.parent;
+  }
+
+  setChildrenHasUpdates(): void {
+    this.children.forEach((child) => {
+      child.setRecalculationType(2);
+    });
+  }
 
-    while (p) {
-      p.hasUpdates = true;
-      p = p?.props.parent;
+  setParentHasUpdates(): void {
+    if (!this.props.parent) {
+      return;
     }
+
+    this.props.parent.setRecalculationType(1);
   }
 
   /**
+   * Change types types is used to determine the scope of the changes being applied
    * 1 - alpha recalculation
    * 2 - translate recalculation
    * 4 - transform recalculation
+   * 8 - z-index recalculation
+   *
    * @param type
    */
   setRecalculationType(type: number): void {
     this.recalculationType |= type;
     this.setHasUpdates();
+
+    // always forcing parent updates so the root will have an hasUpdates flag
+    this.setParentHasUpdates();
+
+    if (type & 4) {
+      this.setChildrenHasUpdates();
+    }
+  }
+
+  sortChildren() {
+    this.children.sort((a, b) => a.zIndex - b.zIndex);
   }
 
   updateScaleRotateTransform() {
@@ -235,7 +249,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
    * @todo: test for correct calculation flag
    * @param delta
    */
-  update(delta: number): void {
+  update(delta: number, parentClippingRect: Rect | null = null): void {
     assertTruthy(this.localTransform);
     const parentGlobalTransform = this.parent?.globalTransform;
     if (parentGlobalTransform) {
@@ -250,12 +264,19 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       );
     }
 
+    this.calculateClippingRect(parentClippingRect);
+
     if (this.children.length) {
       this.children.forEach((child) => {
-        child.update(delta);
+        child.update(delta, this.clippingRect);
       });
     }
 
+    if (this.recalculationType & 8) {
+      // reorder z-index
+      this.sortChildren();
+    }
+
     // reset update flag
     this.hasUpdates = false;
 
@@ -263,7 +284,55 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.recalculationType = 0;
   }
 
-  renderQuads(renderer: CoreRenderer, clippingRect: Rect | null): void {
+  /**
+   * This function calculates the clipping rectangle for a node.
+   *
+   * If the node's globalTransform is not set, the function returns immediately.
+   * If the node's props do not require clipping and there is no parent clipping rectangle, the node's clipping rectangle is set to null.
+   * If the parent clipping rectangle has not changed and the node's clipping rectangle is already set, the function returns immediately.
+   *
+   * The function then checks if the node is rotated. If the node requires clipping and is not rotated, a new clipping rectangle is created based on the node's global transform and dimensions.
+   * If a parent clipping rectangle exists, it is intersected with the node's clipping rectangle (if it exists), or replaces the node's clipping rectangle.
+   *
+   * Finally, the node's parentClippingRect and clippingRect properties are updated.
+   */
+  calculateClippingRect(parentClippingRect: Rect | null = null) {
+    if (!this.globalTransform) {
+      return;
+    }
+
+    if (!this.props.clipping && !parentClippingRect) {
+      this.clippingRect = null;
+      return;
+    }
+
+    if (this.parentClippingRect === parentClippingRect && this.clippingRect) {
+      return;
+    }
+
+    const gt = this.globalTransform;
+    const isRotated = gt.tb !== 0 || gt.tc !== 0;
+
+    let clippingRect: Rect | null =
+      this.props.clipping && !isRotated
+        ? {
+            x: gt.tx,
+            y: gt.ty,
+            width: this.width * gt.ta,
+            height: this.height * gt.td,
+          }
+        : null;
+    if (parentClippingRect && clippingRect) {
+      clippingRect = intersectRect(parentClippingRect, clippingRect);
+    } else if (parentClippingRect) {
+      clippingRect = parentClippingRect;
+    }
+
+    this.parentClippingRect = parentClippingRect;
+    this.clippingRect = clippingRect;
+  }
+
+  renderQuads(renderer: CoreRenderer): void {
     const {
       width,
       height,
@@ -276,12 +345,12 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       shader,
       shaderProps,
     } = this.props;
-    const { zIndex, worldAlpha, globalTransform: gt } = this;
+    const { zIndex, worldAlpha, globalTransform: gt, clippingRect } = this;
 
     assertTruthy(gt);
 
     // add to list of renderables to be sorted before rendering
-    renderer.addRenderable({
+    renderer.addQuad({
       width,
       height,
       colorTl,
@@ -494,6 +563,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set alpha(value: number) {
     this.props.alpha = value;
+    this.setRecalculationType(1);
   }
 
   get worldAlpha(): number {
@@ -509,6 +579,8 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set clipping(value: boolean) {
     this.props.clipping = value;
+    this.clippingRect = null;
+    this.setRecalculationType(4);
   }
 
   get color(): number {
@@ -528,6 +600,8 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       this.colorBr = value;
     }
     this.props.color = value;
+
+    this.setRecalculationType(2);
   }
 
   get colorTop(): number {
@@ -540,6 +614,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       this.colorTr = value;
     }
     this.props.colorTop = value;
+    this.setRecalculationType(2);
   }
 
   get colorBottom(): number {
@@ -552,6 +627,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       this.colorBr = value;
     }
     this.props.colorBottom = value;
+    this.setRecalculationType(2);
   }
 
   get colorLeft(): number {
@@ -564,6 +640,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       this.colorBl = value;
     }
     this.props.colorLeft = value;
+    this.setRecalculationType(2);
   }
 
   get colorRight(): number {
@@ -576,6 +653,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       this.colorBr = value;
     }
     this.props.colorRight = value;
+    this.setRecalculationType(2);
   }
 
   get colorTl(): number {
@@ -584,6 +662,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set colorTl(value: number) {
     this.props.colorTl = value;
+    this.setRecalculationType(2);
   }
 
   get colorTr(): number {
@@ -592,6 +671,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set colorTr(value: number) {
     this.props.colorTr = value;
+    this.setRecalculationType(2);
   }
 
   get colorBl(): number {
@@ -600,6 +680,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set colorBl(value: number) {
     this.props.colorBl = value;
+    this.setRecalculationType(2);
   }
 
   get colorBr(): number {
@@ -608,6 +689,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set colorBr(value: number) {
     this.props.colorBr = value;
+    this.setRecalculationType(2);
   }
 
   // we're only interested in parent zIndex to test
@@ -633,6 +715,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
 
   set zIndex(value: number) {
     this.props.zIndex = value;
+    this.props.parent?.setRecalculationType(8);
   }
 
   get parent(): CoreNode | null {
@@ -655,7 +738,10 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     }
     if (newParent) {
       newParent.children.push(this);
+      // force parent to recalculate z-index for its children
+      newParent.setRecalculationType(8);
     }
+
     this.updateScaleRotateTransform();
   }
   //#endregion Properties

package/src/core/CoreShaderManager.ts

@@ -41,6 +41,7 @@ import { GlitchEffect } from './renderers/webgl/shaders/effects/GlitchEffect.js'
 import { FadeOutEffect } from './renderers/webgl/shaders/effects/FadeOutEffect.js';
 import { RadialGradientEffect } from './renderers/webgl/shaders/effects/RadialGradientEffect.js';
 import type { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
+import { RadialProgressEffect } from './renderers/webgl/shaders/effects/RadialProgressEffect.js';
 
 export interface ShaderMap {
   DefaultShader: typeof DefaultShader;
@@ -67,6 +68,7 @@ export interface EffectMap {
   radialGradient: typeof RadialGradientEffect;
   grayscale: typeof GrayscaleEffect;
   glitch: typeof GlitchEffect;
+  radialProgress: typeof RadialProgressEffect;
 }
 
 export class CoreShaderManager {
@@ -95,6 +97,7 @@ export class CoreShaderManager {
     this.registerEffectType('grayscale', GrayscaleEffect);
     this.registerEffectType('glitch', GlitchEffect);
     this.registerEffectType('radius', RadiusEffect);
+    this.registerEffectType('radialProgress', RadialProgressEffect);
   }
 
   registerShaderType<Type extends keyof ShaderMap>(
@@ -111,6 +114,14 @@ export class CoreShaderManager {
     this.effectConstructors[effectType] = effectClass;
   }
 
+  getRegisteredEffects(): Partial<EffectMap> {
+    return this.effectConstructors;
+  }
+
+  getRegisteredShaders(): Partial<ShaderMap> {
+    return this.shConstructors;
+  }
+
   loadShader<Type extends keyof ShaderMap>(
     shType: Type,
     props?: ExtractProps<ShaderMap[Type]>,

package/src/core/CoreTextNode.ts

@@ -48,13 +48,11 @@ type ICoreTextNode = Omit<
 export class CoreTextNode extends CoreNode implements ICoreTextNode {
   textRenderer: TextRenderer;
   trState: TextRendererState;
-  updateScheduled: boolean;
   private _textRendererOverride: CoreTextNodeProps['textRendererOverride'] =
     null;
 
   constructor(stage: Stage, props: CoreTextNodeProps) {
     super(stage, props);
-    this.updateScheduled = false;
     this._textRendererOverride = props.textRendererOverride;
     const { resolvedTextRenderer, textRendererState } =
       this.resolveTextRendererAndState(
@@ -67,8 +65,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
           color: props.color,
           zIndex: props.zIndex,
           contain: props.contain,
-          scaleX: props.scaleX,
-          scaleY: props.scaleY,
           scrollable: props.scrollable,
           scrollY: props.scrollY,
           offsetY: props.offsetY,
@@ -128,7 +124,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   override set width(value: number) {
     this.textRenderer.set.width(this.trState, value);
-    this.updateText();
   }
 
   override get height(): number {
@@ -137,7 +132,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   override set height(value: number) {
     this.textRenderer.set.height(this.trState, value);
-    this.updateText();
   }
 
   override get color(): number {
@@ -146,7 +140,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   override set color(value: number) {
     this.textRenderer.set.color(this.trState, value);
-    this.updateText();
   }
 
   get text(): string {
@@ -155,7 +148,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set text(value: string) {
     this.textRenderer.set.text(this.trState, value);
-    this.updateText();
   }
 
   get textRendererOverride(): CoreTextNodeProps['textRendererOverride'] {
@@ -177,7 +169,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set fontSize(value: CoreTextNodeProps['fontSize']) {
     this.textRenderer.set.fontSize(this.trState, value);
-    this.updateText();
   }
 
   get fontFamily(): CoreTextNodeProps['fontFamily'] {
@@ -186,7 +177,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set fontFamily(value: CoreTextNodeProps['fontFamily']) {
     this.textRenderer.set.fontFamily(this.trState, value);
-    this.updateText();
   }
 
   get fontStretch(): CoreTextNodeProps['fontStretch'] {
@@ -195,7 +185,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set fontStretch(value: CoreTextNodeProps['fontStretch']) {
     this.textRenderer.set.fontStretch(this.trState, value);
-    this.updateText();
   }
 
   get fontStyle(): CoreTextNodeProps['fontStyle'] {
@@ -204,7 +193,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set fontStyle(value: CoreTextNodeProps['fontStyle']) {
     this.textRenderer.set.fontStyle(this.trState, value);
-    this.updateText();
   }
 
   get fontWeight(): CoreTextNodeProps['fontWeight'] {
@@ -213,7 +201,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set fontWeight(value: CoreTextNodeProps['fontWeight']) {
     this.textRenderer.set.fontWeight(this.trState, value);
-    this.updateText();
   }
 
   get textAlign(): CoreTextNodeProps['textAlign'] {
@@ -222,7 +209,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set textAlign(value: CoreTextNodeProps['textAlign']) {
     this.textRenderer.set.textAlign(this.trState, value);
-    this.updateText();
   }
 
   get contain(): CoreTextNodeProps['contain'] {
@@ -231,7 +217,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set contain(value: CoreTextNodeProps['contain']) {
     this.textRenderer.set.contain(this.trState, value);
-    this.updateText();
   }
 
   get scrollable(): CoreTextNodeProps['scrollable'] {
@@ -240,7 +225,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set scrollable(value: CoreTextNodeProps['scrollable']) {
     this.textRenderer.set.scrollable(this.trState, value);
-    this.updateText();
   }
 
   get scrollY(): CoreTextNodeProps['scrollY'] {
@@ -249,7 +233,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set scrollY(value: CoreTextNodeProps['scrollY']) {
     this.textRenderer.set.scrollY(this.trState, value);
-    this.updateText();
   }
 
   get offsetY(): CoreTextNodeProps['offsetY'] {
@@ -258,7 +241,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set offsetY(value: CoreTextNodeProps['offsetY']) {
     this.textRenderer.set.offsetY(this.trState, value);
-    this.updateText();
   }
 
   get letterSpacing(): CoreTextNodeProps['letterSpacing'] {
@@ -267,7 +249,6 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set letterSpacing(value: CoreTextNodeProps['letterSpacing']) {
     this.textRenderer.set.letterSpacing(this.trState, value);
-    this.updateText();
   }
 
   get debug(): CoreTextNodeProps['debug'] {
@@ -276,41 +257,24 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
 
   set debug(value: CoreTextNodeProps['debug']) {
     this.textRenderer.set.debug(this.trState, value);
-    this.updateText();
   }
 
-  override update(delta: number) {
-    super.update(delta);
+  override update(delta: number, parentClippingRect: Rect | null = null) {
+    super.update(delta, parentClippingRect);
 
     assertTruthy(this.globalTransform);
 
     // globalTransform is updated in super.update(delta)
     this.textRenderer.set.x(this.trState, this.globalTransform.tx);
     this.textRenderer.set.y(this.trState, this.globalTransform.ty);
-
-    if (this.trState.status === 'loading') {
-      // Update the text state now
-      this.textRenderer.updateState(this.trState);
-    }
-  }
-
-  private updateText() {
-    if (this.updateScheduled) {
-      return;
-    }
-    this.updateScheduled = true;
-    queueMicrotask(() => {
-      this.updateScheduled = false;
-      this.textRenderer.updateState(this.trState);
-    });
   }
 
-  override renderQuads(renderer: CoreRenderer, clippingRect: Rect | null) {
+  override renderQuads(renderer: CoreRenderer) {
     assertTruthy(this.globalTransform);
     this.textRenderer.renderQuads(
       this.trState,
       this.globalTransform,
-      clippingRect,
+      this.clippingRect,
       this.worldAlpha,
     );
   }
@@ -343,26 +307,9 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
       });
     }
 
-    // Forward basic status events from the text renderer state
-    textRendererState.emitter.on('loading', () => {
-      // This event will be fired only once between the `loading` and `loaded`
-      // event ONLY if the font is not already loaded
-      textRendererState.emitter.once('fontLoaded', () => {
-        // When it's fired we must run update to make sure the text renders
-        this.updateText();
-      });
-
-      textRendererState.emitter.once('loaded', () => {
-        // Make sure we stop listening for fontLoaded events
-        textRendererState.emitter.off('fontLoaded');
-      });
-    });
-
     textRendererState.emitter.on('loaded', this.onTextLoaded);
     textRendererState.emitter.on('failed', this.onTextFailed);
-    this.updateText();
-
-    // TODO: Handle text renderer errors
+    resolvedTextRenderer.scheduleUpdateState(textRendererState);
 
     return {
       resolvedTextRenderer,

package/src/core/Stage.ts

@@ -35,7 +35,7 @@ import type {
 } from './text-rendering/renderers/TextRenderer.js';
 import { SdfTextRenderer } from './text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
 import { CanvasTextRenderer } from './text-rendering/renderers/CanvasTextRenderer.js';
-import { intersectRect, type Rect } from './lib/utils.js';
+import { EventEmitter } from '../common/EventEmitter.js';
 
 export interface StageOptions {
   rootId: number;
@@ -45,6 +45,7 @@ export interface StageOptions {
   devicePhysicalPixelRatio: number;
   canvas: HTMLCanvasElement | OffscreenCanvas;
   clearColor: number;
+  fpsUpdateInterval: number;
   debug?: {
     monitorTextureCache?: boolean;
   };
@@ -53,7 +54,7 @@ export interface StageOptions {
 const bufferMemory = 2e6;
 const autoStart = true;
 
-export class Stage {
+export class Stage extends EventEmitter {
   /// Module Instances
   public readonly animationManager: AnimationManager;
   public readonly txManager: CoreTextureManager;
@@ -67,11 +68,14 @@ export class Stage {
   deltaTime = 0;
   lastFrameTime = 0;
   currentFrameTime = 0;
+  private fpsNumFrames = 0;
+  private fpsElapsedTime = 0;
 
   /**
    * Stage constructor
    */
   constructor(readonly options: StageOptions) {
+    super();
     const { canvas, clearColor, rootId, debug, appWidth, appHeight } = options;
     this.txManager = new CoreTextureManager();
     this.shManager = new CoreShaderManager();
@@ -149,11 +153,12 @@ export class Stage {
       startLoop(this);
     }
   }
+
   /**
-   * Start a new frame draw
+   * Update animations
    */
-  drawFrame() {
-    const { renderer, scene, animationManager } = this;
+  updateAnimations() {
+    const { scene, animationManager } = this;
     if (!scene?.root) {
       return;
     }
@@ -166,48 +171,74 @@ export class Stage {
 
     // step animation
     animationManager.update(this.deltaTime);
+  }
+
+  /**
+   * Check if the scene has updates
+   */
+  hasSceneUpdates() {
+    const { scene } = this;
+
+    if (!scene?.root) {
+      return false;
+    }
+
+    return scene?.root?.hasUpdates;
+  }
+
+  /**
+   * Start a new frame draw
+   */
+  drawFrame() {
+    const { renderer, scene } = this;
+    if (!scene?.root) {
+      return;
+    }
 
     // reset and clear viewport
-    renderer?.reset();
+    scene?.root?.update(this.deltaTime);
 
     // test if we need to update the scene
-    if (scene?.root?.hasUpdates) {
-      scene?.root?.update(this.deltaTime);
-    }
+    renderer?.reset();
 
     this.addQuads(scene.root);
 
-    renderer?.sortRenderables();
     renderer?.render();
+
+    // If there's an FPS update interval, emit the FPS update event
+    // when the specified interval has elapsed.
+    const { fpsUpdateInterval } = this.options;
+    if (fpsUpdateInterval) {
+      this.fpsNumFrames++;
+      this.fpsElapsedTime += this.deltaTime;
+      if (this.fpsElapsedTime >= fpsUpdateInterval) {
+        const fps = Math.round(
+          (this.fpsNumFrames * 1000) / this.fpsElapsedTime,
+        );
+        this.fpsNumFrames = 0;
+        this.fpsElapsedTime = 0;
+        this.emit('fpsUpdate', fps);
+      }
+    }
   }
 
-  addQuads(node: CoreNode, parentClippingRect: Rect | null = null) {
+  addQuads(node: CoreNode) {
     assertTruthy(this.renderer && node.globalTransform);
-    const gt = node.globalTransform;
-    const isRotated = gt.tb !== 0 || gt.tc !== 0;
-
-    let clippingRect: Rect | null =
-      node.clipping && !isRotated
-        ? {
-            x: gt.tx,
-            y: gt.ty,
-            width: node.width * gt.ta,
-            height: node.height * gt.td,
-          }
-        : null;
-    if (parentClippingRect && clippingRect) {
-      clippingRect = intersectRect(parentClippingRect, clippingRect);
-    } else if (parentClippingRect) {
-      clippingRect = parentClippingRect;
-    }
 
-    node.renderQuads(this.renderer, clippingRect);
-    node.children.forEach((child) => {
-      if (child.worldAlpha === 0) {
-        return;
+    node.renderQuads(this.renderer);
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+
+      if (!child) {
+        continue;
       }
-      this.addQuads(child, clippingRect);
-    });
+
+      if (child?.worldAlpha === 0) {
+        continue;
+      }
+
+      this.addQuads(child);
+    }
   }
 
   /**