@lightningjs/renderer 3.0.0-beta7 → 3.0.0-beta9

package/src/core/CoreTextNode.ts

@@ -25,7 +25,12 @@ import type {
   TrFailedEventHandler,
   TrLoadedEventHandler,
 } from './text-rendering/renderers/TextRenderer.js';
-import { CoreNode, UpdateType, type CoreNodeProps } from './CoreNode.js';
+import {
+  CoreNode,
+  CoreNodeRenderState,
+  UpdateType,
+  type CoreNodeProps,
+} from './CoreNode.js';
 import type { Stage } from './Stage.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type {
@@ -33,7 +38,6 @@ import type {
   NodeTextLoadedPayload,
 } from '../common/CommonTypes.js';
 import type { RectWithValid } from './lib/utils.js';
-import { assertTruthy } from '../utils.js';
 
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
@@ -130,7 +134,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       this.props.width = calcWidth;
       this.props.height = calcHeight;
     }
-    this.updateLocalTransform();
+    this.setUpdateType(UpdateType.Local);
 
     // Incase the RAF loop has been stopped already before text was loaded,
     // we request a render so it can be drawn.
@@ -211,7 +215,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       this._textRendererOverride,
     );
 
-    if (!textRenderer) {
+    if (textRenderer === null) {
       console.warn(
         'Text Renderer not found for font',
         this.trState.props.fontFamily,
@@ -370,23 +374,24 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   override update(delta: number, parentClippingRect: RectWithValid) {
     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);
+    this.textRenderer.set.x(this.trState, this.globalTransform!.tx);
+    this.textRenderer.set.y(this.trState, this.globalTransform!.ty);
   }
 
-  override checkBasicRenderability() {
-    if (this.worldAlpha === 0 || this.isOutOfBounds() === true) {
-      return false;
+  override updateIsRenderable() {
+    // If the node is out of bounds or has an alpha of 0, it is not renderable
+    if (
+      this.worldAlpha === 0 ||
+      this.renderState <= CoreNodeRenderState.OutOfBounds
+    ) {
+      this.setRenderable(false);
+      return;
     }
 
-    if (this.trState && this.trState.props.text !== '') {
-      return true;
+    if (this.trState !== undefined && this.trState.props.text !== '') {
+      this.setRenderable(true);
     }
-
-    return false;
   }
 
   override setRenderable(isRenderable: boolean) {
@@ -395,11 +400,9 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   override renderQuads(renderer: CoreRenderer) {
-    assertTruthy(this.globalTransform);
-
     // If the text renderer does not support rendering quads, fallback to the
     // default renderQuads method
-    if (!this.textRenderer.renderQuads) {
+    if (this.textRenderer.renderQuads === undefined) {
       super.renderQuads(renderer);
       return;
     }
@@ -408,8 +411,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
 
     // Prevent quad rendering if parent has a render texture
     // and this node is not the render texture
-    if (this.parentHasRenderTexture) {
-      if (!renderer.renderToTextureActive) {
+    if (this.parentHasRenderTexture === true) {
+      if (renderer.renderToTextureActive === false) {
         return;
       }
       // Prevent quad rendering if parent render texture is not the active render texture

package/src/core/CoreTextureManager.ts

@@ -24,7 +24,7 @@ import { ImageTexture } from './textures/ImageTexture.js';
 import { NoiseTexture } from './textures/NoiseTexture.js';
 import { SubTexture } from './textures/SubTexture.js';
 import { RenderTexture } from './textures/RenderTexture.js';
-import { TextureType, type Texture } from './textures/Texture.js';
+import { Texture, TextureType } from './textures/Texture.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import type { Stage } from './Stage.js';
 import {
@@ -178,7 +178,6 @@ export class CoreTextureManager extends EventEmitter {
    */
   txConstructors: Partial<TextureMap> = {};
 
-  private downloadTextureSourceQueue: Array<Texture> = [];
   private priorityQueue: Array<Texture> = [];
   private uploadTextureQueue: Array<Texture> = [];
   private initialized = false;
@@ -229,7 +228,7 @@ export class CoreTextureManager extends EventEmitter {
         .then((result) => {
           this.initialize(result);
         })
-        .catch((e) => {
+        .catch(() => {
           console.warn(
             '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
           );
@@ -290,15 +289,6 @@ export class CoreTextureManager extends EventEmitter {
     this.emit('initialized');
   }
 
-  /**
-   * Enqueue a texture for downloading its source image.
-   */
-  enqueueDownloadTextureSource(texture: Texture): void {
-    if (!this.downloadTextureSourceQueue.includes(texture)) {
-      this.downloadTextureSourceQueue.push(texture);
-    }
-  }
-
   /**
    * Enqueue a texture for uploading to the GPU.
    *
@@ -368,39 +358,15 @@ export class CoreTextureManager extends EventEmitter {
       return;
     }
 
-    // if the texture is already loaded, don't load it again
-    if (
-      texture.ctxTexture !== undefined &&
-      texture.ctxTexture.state === 'loaded'
-    ) {
-      texture.setState('loaded');
+    if (texture.state === 'loaded') {
+      // if the texture is already loaded, just return
       return;
     }
 
-    // if the texture is already being processed, don't load it again
-    if (
-      this.downloadTextureSourceQueue.includes(texture) === true ||
-      this.uploadTextureQueue.includes(texture) === true
-    ) {
+    if (Texture.TRANSITIONAL_TEXTURE_STATES.includes(texture.state)) {
       return;
     }
 
-    // if the texture is already loading, free it, this can happen if the texture is
-    // orphaned and then reloaded
-    if (
-      texture.ctxTexture !== undefined &&
-      texture.ctxTexture.state === 'loading'
-    ) {
-      // if the texture has texture data, queue it for upload
-      if (texture.textureData !== null) {
-        this.enqueueUploadTexture(texture);
-        return;
-      }
-
-      // else we will have to re-download the texture
-      texture.free();
-    }
-
     // if we're not initialized, just queue the texture into the priority queue
     if (this.initialized === false) {
       this.priorityQueue.push(texture);
@@ -413,35 +379,34 @@ export class CoreTextureManager extends EventEmitter {
       texture.freeTextureData();
     }
 
-    // these types of textures don't need to be downloaded
-    // Technically the noise texture shouldn't either, but it's a special case
-    // and not really used in production so who cares ¯\_(ツ)_/¯
-    if (
-      (texture.type === TextureType.color ||
-        texture.type === TextureType.renderToTexture) &&
-      texture.state !== 'initial'
-    ) {
-      texture.setState('fetched');
-      this.enqueueUploadTexture(texture);
-      return;
-    }
-
     texture.setState('loading');
 
-    // prioritize the texture for immediate loading
-    if (priority === true) {
-      texture
-        .getTextureData()
-        .then(() => {
-          this.uploadTexture(texture);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    }
+    // Get the texture data
+    texture
+      .getTextureData()
+      .then(() => {
+        if (texture.state !== 'fetched') {
+          texture.setState('failed');
+          return;
+        }
 
-    // enqueue the texture for download and upload
-    this.enqueueDownloadTextureSource(texture);
+        // For non-image textures, upload immediately
+        if (texture.type !== TextureType.image) {
+          this.uploadTexture(texture);
+        } else {
+          // For image textures, queue for throttled upload
+          // If it's a priority texture, upload it immediately
+          if (priority === true) {
+            this.uploadTexture(texture);
+          } else {
+            this.enqueueUploadTexture(texture);
+          }
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        texture.setState('failed');
+      });
   }
 
   /**
@@ -472,28 +437,26 @@ export class CoreTextureManager extends EventEmitter {
    * Check if a texture is being processed
    */
   isProcessingTexture(texture: Texture): boolean {
-    return (
-      this.downloadTextureSourceQueue.includes(texture) === true ||
-      this.uploadTextureQueue.includes(texture) === true
-    );
+    return this.uploadTextureQueue.includes(texture) === true;
   }
 
   /**
-   * Process a limited number of downloads and uploads.
+   * Process a limited number of uploads.
    *
-   * @param maxItems - The maximum number of items to process
+   * @param maxProcessingTime - The maximum processing time in milliseconds
    */
   processSome(maxProcessingTime: number): void {
     if (this.initialized === false) {
       return;
     }
 
-    const startTime = this.platform.getTimeStamp();
+    const platform = this.platform;
+    const startTime = platform.getTimeStamp();
 
     // Process priority queue
     while (
       this.priorityQueue.length > 0 &&
-      this.platform.getTimeStamp() - startTime < maxProcessingTime
+      platform.getTimeStamp() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const texture = this.priorityQueue.pop()!;
@@ -505,32 +468,15 @@ export class CoreTextureManager extends EventEmitter {
     // Process uploads
     while (
       this.uploadTextureQueue.length > 0 &&
-      this.platform.getTimeStamp() - startTime < maxProcessingTime
+      platform.getTimeStamp() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.uploadTexture(this.uploadTextureQueue.pop()!);
-    }
-
-    // Process downloads
-    while (
-      this.downloadTextureSourceQueue.length > 0 &&
-      this.platform.getTimeStamp() - startTime < maxProcessingTime
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const texture = this.downloadTextureSourceQueue.shift()!;
-      texture.getTextureData().then(() => {
-        if (texture.state === 'fetched') {
-          this.enqueueUploadTexture(texture);
-        }
-      });
+      this.uploadTexture(this.uploadTextureQueue.shift()!);
     }
   }
 
   public hasUpdates(): boolean {
-    return (
-      this.downloadTextureSourceQueue.length > 0 ||
-      this.uploadTextureQueue.length > 0
-    );
+    return this.uploadTextureQueue.length > 0;
   }
 
   /**
@@ -571,16 +517,11 @@ export class CoreTextureManager extends EventEmitter {
   }
 
   /**
-   * Remove texture from the queue's
+   * Remove texture from the upload queue
    *
    * @param texture - The texture to remove
    */
   removeTextureFromQueue(texture: Texture): void {
-    const downloadIndex = this.downloadTextureSourceQueue.indexOf(texture);
-    if (downloadIndex !== -1) {
-      this.downloadTextureSourceQueue.splice(downloadIndex, 1);
-    }
-
     const uploadIndex = this.uploadTextureQueue.indexOf(texture);
     if (uploadIndex !== -1) {
       this.uploadTextureQueue.splice(uploadIndex, 1);

package/src/core/Stage.ts

@@ -46,8 +46,6 @@ import {
   type TextureMemoryManagerSettings,
 } from './TextureMemoryManager.js';
 import { CoreRenderer } from './renderers/CoreRenderer.js';
-import type { WebGlRenderer } from './renderers/webgl/WebGlRenderer.js';
-import type { CanvasRenderer } from './renderers/canvas/CanvasRenderer.js';
 import { CoreTextNode, type CoreTextNodeProps } from './CoreTextNode.js';
 import { santizeCustomDataMap } from '../main-api/utils.js';
 import type { SdfTextRenderer } from './text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
@@ -59,30 +57,19 @@ import type { Texture } from './textures/Texture.js';
 import { ColorTexture } from './textures/ColorTexture.js';
 import type { Platform } from './platforms/Platform.js';
 import type { WebPlatform } from './platforms/web/WebPlatform.js';
+import type { RendererMainSettings } from '../main-api/Renderer.js';
 
-export interface StageOptions {
-  appWidth: number;
-  appHeight: number;
+export type StageOptions = Omit<
+  RendererMainSettings,
+  'inspector' | 'platform'
+> & {
   textureMemory: TextureMemoryManagerSettings;
-  boundsMargin: number | [number, number, number, number];
-  deviceLogicalPixelRatio: number;
-  devicePhysicalPixelRatio: number;
   canvas: HTMLCanvasElement | OffscreenCanvas;
-  clearColor: number;
   fpsUpdateInterval: number;
-  enableContextSpy: boolean;
-  forceWebGL2: boolean;
-  numImageWorkers: number;
-  renderEngine: typeof WebGlRenderer | typeof CanvasRenderer;
   eventBus: EventEmitter;
-  quadBufferSize: number;
-  fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
-  inspector: boolean;
-  strictBounds: boolean;
-  textureProcessingTimeLimit: number;
-  createImageBitmapSupport: 'auto' | 'basic' | 'options' | 'full';
   platform: Platform | WebPlatform;
-}
+  inspector: boolean;
+};
 
 export type StageFpsUpdateHandler = (
   stage: Stage,
@@ -114,11 +101,11 @@ export class Stage {
   public readonly interactiveNodes: Set<CoreNode> = new Set();
   public boundsMargin: [number, number, number, number];
   public readonly defShaderNode: CoreShaderNode | null = null;
-  public readonly strictBound: Bound;
-  public readonly preloadBound: Bound;
+  public strictBound: Bound;
+  public preloadBound: Bound;
   public readonly strictBounds: boolean;
   public readonly defaultTexture: Texture | null = null;
-  public readonly pixelRatio: number;
+  public pixelRatio: number;
   public readonly bufferMemory: number = 2e6;
   public readonly platform: Platform | WebPlatform;
   public readonly calculateTextureCoord: boolean;
@@ -152,7 +139,7 @@ export class Stage {
   /**
    * Stage constructor
    */
-  constructor(readonly options: StageOptions) {
+  constructor(public options: StageOptions) {
     const {
       canvas,
       clearColor,
@@ -385,12 +372,12 @@ export class Stage {
    * Start a new frame draw
    */
   drawFrame() {
-    const { renderer, renderRequested } = this;
-    assertTruthy(renderer);
+    const { renderer, renderRequested, root } = this;
+    const txMemManager = this.txMemManager;
 
     // Update tree if needed
-    if (this.root.updateType !== 0) {
-      this.root.update(this.deltaTime, this.root.clippingRect);
+    if (root.updateType !== 0) {
+      root.update(this.deltaTime, root.clippingRect);
     }
 
     // Process some textures
@@ -400,12 +387,12 @@ export class Stage {
     renderer.reset();
 
     // Check if we need to cleanup textures
-    if (this.txMemManager.criticalCleanupRequested === true) {
-      this.txMemManager.cleanup(false);
+    if (txMemManager.criticalCleanupRequested === true) {
+      txMemManager.cleanup(false);
 
-      if (this.txMemManager.criticalCleanupRequested === true) {
+      if (txMemManager.criticalCleanupRequested === true) {
         // If we still need to cleanup, request another but aggressive cleanup
-        this.txMemManager.cleanup(true);
+        txMemManager.cleanup(true);
       }
     }
 
@@ -419,13 +406,13 @@ export class Stage {
     this.addQuads(this.root);
 
     // Perform render pass
-    renderer?.render();
+    renderer.render();
 
     this.calculateFps();
     this.calculateQuads();
 
     // Reset renderRequested flag if it was set
-    if (renderRequested) {
+    if (renderRequested === true) {
       this.renderRequested = false;
     }
   }
@@ -663,7 +650,20 @@ export class Stage {
   }
 
   /**
-   * Find all nodes at a given point
+   * Update the viewport bounds
+   */
+  updateViewportBounds() {
+    const { appWidth, appHeight } = this.options;
+    this.strictBound = createBound(0, 0, appWidth, appHeight);
+    this.preloadBound = createPreloadBounds(
+      this.strictBound,
+      this.boundsMargin,
+    );
+    this.root.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
+    this.root.childUpdateType |= UpdateType.RenderBounds;
+  }
+
+  /** Find all nodes at a given point
    * @param data
    */
   findNodesAtPoint(data: Point): CoreNode[] {
@@ -713,18 +713,23 @@ export class Stage {
    */
   protected resolveNodeDefaults(props: Partial<CoreNodeProps>): CoreNodeProps {
     const color = props.color ?? 0xffffffff;
-    const colorTl = props.colorTl ?? props.colorTop ?? props.colorLeft ?? color;
-    const colorTr =
-      props.colorTr ?? props.colorTop ?? props.colorRight ?? color;
-    const colorBl =
-      props.colorBl ?? props.colorBottom ?? props.colorLeft ?? color;
-    const colorBr =
-      props.colorBr ?? props.colorBottom ?? props.colorRight ?? color;
-
-    let data = {};
-    if (this.options.inspector === true) {
-      data = santizeCustomDataMap(props.data ?? {});
-    }
+    const colorTop = props.colorTop ?? color;
+    const colorBottom = props.colorBottom ?? color;
+    const colorLeft = props.colorLeft ?? color;
+    const colorRight = props.colorRight ?? color;
+
+    const colorTl = props.colorTl ?? colorTop ?? colorLeft ?? color;
+    const colorTr = props.colorTr ?? colorTop ?? colorRight ?? color;
+    const colorBl = props.colorBl ?? colorBottom ?? colorLeft ?? color;
+    const colorBr = props.colorBr ?? colorBottom ?? colorRight ?? color;
+
+    const scale = props.scale ?? null;
+    const mount = props.mount ?? 0;
+    const pivot = props.pivot ?? 0.5;
+
+    const data = this.options.inspector
+      ? santizeCustomDataMap(props.data ?? {})
+      : {};
 
     return {
       x: props.x ?? 0,
@@ -736,39 +741,37 @@ export class Stage {
       boundsMargin: props.boundsMargin ?? null,
       clipping: props.clipping ?? false,
       color,
-      colorTop: props.colorTop ?? color,
-      colorBottom: props.colorBottom ?? color,
-      colorLeft: props.colorLeft ?? color,
-      colorRight: props.colorRight ?? color,
-      colorBl,
-      colorBr,
+      colorTop,
+      colorBottom,
+      colorLeft,
+      colorRight,
       colorTl,
       colorTr,
+      colorBl,
+      colorBr,
       zIndex: props.zIndex ?? 0,
       zIndexLocked: props.zIndexLocked ?? 0,
       parent: props.parent ?? null,
       texture: props.texture ?? null,
       textureOptions: props.textureOptions ?? {},
       shader: props.shader ?? this.defShaderNode,
-      // Since setting the `src` will trigger a texture load, we need to set it after
-      // we set the texture. Otherwise, problems happen.
       src: props.src ?? null,
       srcHeight: props.srcHeight,
       srcWidth: props.srcWidth,
       srcX: props.srcX,
       srcY: props.srcY,
-      scale: props.scale ?? null,
-      scaleX: props.scaleX ?? props.scale ?? 1,
-      scaleY: props.scaleY ?? props.scale ?? 1,
-      mount: props.mount ?? 0,
-      mountX: props.mountX ?? props.mount ?? 0,
-      mountY: props.mountY ?? props.mount ?? 0,
-      pivot: props.pivot ?? 0.5,
-      pivotX: props.pivotX ?? props.pivot ?? 0.5,
-      pivotY: props.pivotY ?? props.pivot ?? 0.5,
+      scale,
+      scaleX: props.scaleX ?? scale ?? 1,
+      scaleY: props.scaleY ?? scale ?? 1,
+      mount,
+      mountX: props.mountX ?? mount,
+      mountY: props.mountY ?? mount,
+      pivot,
+      pivotX: props.pivotX ?? pivot,
+      pivotY: props.pivotY ?? pivot,
       rotation: props.rotation ?? 0,
       rtt: props.rtt ?? false,
-      data: data,
+      data,
       imageType: props.imageType,
       interactive: props.interactive ?? false,
       strictBounds: props.strictBounds ?? this.strictBounds,