@lightningjs/renderer 2.12.1 → 3.0.0-beta1

package/src/core/CoreTextureManager.ts

@@ -28,6 +28,10 @@ import { TextureType, type Texture } from './textures/Texture.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import { getTimeStamp } from './platform.js';
 import type { Stage } from './Stage.js';
+import {
+  validateCreateImageBitmap,
+  type CreateImageBitmapSupport,
+} from './lib/validateImageBitmap.js';
 
 /**
  * Augmentable map of texture class types
@@ -45,12 +49,6 @@ export interface TextureMap {
   RenderTexture: typeof RenderTexture;
 }
 
-export interface CreateImageBitmapSupport {
-  basic: boolean; // Supports createImageBitmap(image)
-  options: boolean; // Supports createImageBitmap(image, options)
-  full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
-}
-
 export type ExtractProps<Type> = Type extends { z$__type__Props: infer Props }
   ? Props
   : never;
@@ -63,6 +61,11 @@ export interface TextureManagerDebugInfo {
   keyCacheSize: number;
 }
 
+export interface TextureManagerSettings {
+  numImageWorkers: number;
+  createImageBitmapSupport: 'auto' | 'basic' | 'options' | 'full';
+}
+
 export type ResizeModeOptions =
   | {
       /**
@@ -180,6 +183,7 @@ export class CoreTextureManager extends EventEmitter {
   private uploadTextureQueue: Array<Texture> = [];
   private initialized = false;
   private stage: Stage;
+  private numImageWorkers: number;
 
   imageWorkerManager: ImageWorkerManager | null = null;
   hasCreateImageBitmap = !!self.createImageBitmap;
@@ -210,48 +214,34 @@ export class CoreTextureManager extends EventEmitter {
    */
   frameTime = 0;
 
-  constructor(stage: Stage, numImageWorkers: number) {
+  constructor(stage: Stage, settings: TextureManagerSettings) {
     super();
+
+    const { numImageWorkers, createImageBitmapSupport } = settings;
     this.stage = stage;
-    this.validateCreateImageBitmap()
-      .then((result) => {
-        this.hasCreateImageBitmap =
-          result.basic || result.options || result.full;
-        this.imageBitmapSupported = result;
+    this.numImageWorkers = numImageWorkers;
 
-        if (!this.hasCreateImageBitmap) {
+    if (createImageBitmapSupport === 'auto') {
+      validateCreateImageBitmap()
+        .then((result) => {
+          this.initialize(result);
+        })
+        .catch((e) => {
           console.warn(
             '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
           );
-        }
 
-        if (
-          this.hasCreateImageBitmap &&
-          this.hasWorker &&
-          numImageWorkers > 0
-        ) {
-          this.imageWorkerManager = new ImageWorkerManager(
-            numImageWorkers,
-            result,
-          );
-        } else {
-          console.warn(
-            '[Lightning] Imageworker is 0 or not supported on this browser. Image loading will be slower.',
-          );
-        }
-
-        this.initialized = true;
-        this.emit('initialized');
-      })
-      .catch((e) => {
-        console.warn(
-          '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
-        );
-
-        // initialized without image worker manager and createImageBitmap
-        this.initialized = true;
-        this.emit('initialized');
+          // initialized without image worker manager and createImageBitmap
+          this.initialized = true;
+          this.emit('initialized');
+        });
+    } else {
+      this.initialize({
+        basic: createImageBitmapSupport === 'basic',
+        options: createImageBitmapSupport === 'options',
+        full: createImageBitmapSupport === 'full',
       });
+    }
 
     this.registerTextureType('ImageTexture', ImageTexture);
     this.registerTextureType('ColorTexture', ColorTexture);
@@ -260,77 +250,6 @@ export class CoreTextureManager extends EventEmitter {
     this.registerTextureType('RenderTexture', RenderTexture);
   }
 
-  private async validateCreateImageBitmap(): Promise<CreateImageBitmapSupport> {
-    // Test if createImageBitmap is supported using a simple 1x1 PNG image
-    // prettier-ignore
-    const pngBinaryData = new Uint8Array([
-      0x89, 0x50, 0x4e, 0x47,
-      0x0d, 0x0a, 0x1a, 0x0a, // PNG signature
-      0x00, 0x00, 0x00, 0x0d, // IHDR chunk length
-      0x49, 0x48, 0x44, 0x52, // "IHDR" chunk type
-      0x00, 0x00, 0x00, 0x01, // Width: 1
-      0x00, 0x00, 0x00, 0x01, // Height: 1
-      0x01,                   // Bit depth: 1
-      0x03,                   // Color type: Indexed
-      0x00,                   // Compression method: Deflate
-      0x00,                   // Filter method: None
-      0x00,                   // Interlace method: None
-      0x25, 0xdb, 0x56, 0xca, // CRC for IHDR
-      0x00, 0x00, 0x00, 0x03, // PLTE chunk length
-      0x50, 0x4c, 0x54, 0x45, // "PLTE" chunk type
-      0x00, 0x00, 0x00,       // Palette entry: Black
-      0xa7, 0x7a, 0x3d, 0xda, // CRC for PLTE
-      0x00, 0x00, 0x00, 0x01, // tRNS chunk length
-      0x74, 0x52, 0x4e, 0x53, // "tRNS" chunk type
-      0x00,                   // Transparency for black: Fully transparent
-      0x40, 0xe6, 0xd8, 0x66, // CRC for tRNS
-      0x00, 0x00, 0x00, 0x0a, // IDAT chunk length
-      0x49, 0x44, 0x41, 0x54, // "IDAT" chunk type
-      0x08, 0xd7,             // Deflate header
-      0x63, 0x60, 0x00, 0x00,
-      0x00, 0x02, 0x00, 0x01, // Zlib-compressed data
-      0xe2, 0x21, 0xbc, 0x33, // CRC for IDAT
-      0x00, 0x00, 0x00, 0x00, // IEND chunk length
-      0x49, 0x45, 0x4e, 0x44, // "IEND" chunk type
-      0xae, 0x42, 0x60, 0x82, // CRC for IEND
-    ]);
-
-    const support: CreateImageBitmapSupport = {
-      basic: false,
-      options: false,
-      full: false,
-    };
-
-    // Test basic createImageBitmap support
-    const blob = new Blob([pngBinaryData], { type: 'image/png' });
-    const bitmap = await createImageBitmap(blob);
-    bitmap.close?.();
-    support.basic = true;
-
-    // Test createImageBitmap with options support
-    try {
-      const options = { premultiplyAlpha: 'none' as const };
-      const bitmapWithOptions = await createImageBitmap(blob, options);
-      bitmapWithOptions.close?.();
-      support.options = true;
-    } catch (e) {
-      /* ignore */
-    }
-
-    // Test createImageBitmap with full options support
-    try {
-      const bitmapWithFullOptions = await createImageBitmap(blob, 0, 0, 1, 1, {
-        premultiplyAlpha: 'none',
-      });
-      bitmapWithFullOptions.close?.();
-      support.full = true;
-    } catch (e) {
-      /* ignore */
-    }
-
-    return support;
-  }
-
   registerTextureType<Type extends keyof TextureMap>(
     textureType: Type,
     textureClass: TextureMap[Type],
@@ -338,6 +257,36 @@ export class CoreTextureManager extends EventEmitter {
     this.txConstructors[textureType] = textureClass;
   }
 
+  private initialize(support: CreateImageBitmapSupport) {
+    this.hasCreateImageBitmap =
+      support.basic || support.options || support.full;
+    this.imageBitmapSupported = support;
+
+    if (!this.hasCreateImageBitmap) {
+      console.warn(
+        '[Lightning] createImageBitmap is not supported on this browser. ImageTexture will be slower.',
+      );
+    }
+
+    if (
+      this.hasCreateImageBitmap &&
+      this.hasWorker &&
+      this.numImageWorkers > 0
+    ) {
+      this.imageWorkerManager = new ImageWorkerManager(
+        this.numImageWorkers,
+        support,
+      );
+    } else {
+      console.warn(
+        '[Lightning] Imageworker is 0 or not supported on this browser. Image loading will be slower.',
+      );
+    }
+
+    this.initialized = true;
+    this.emit('initialized');
+  }
+
   /**
    * Enqueue a texture for downloading its source image.
    */
@@ -392,15 +341,7 @@ export class CoreTextureManager extends EventEmitter {
 
   orphanTexture(texture: Texture): void {
     // if it is part of the download or upload queue, remove it
-    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);
-    }
+    this.removeTextureFromQueue(texture);
 
     if (texture.type === TextureType.subTexture) {
       // ignore subtextures
@@ -419,11 +360,42 @@ export class CoreTextureManager extends EventEmitter {
   loadTexture(texture: Texture, priority?: boolean): void {
     this.stage.txMemManager.removeFromOrphanedTextures(texture);
 
-    if (texture.state !== 'initial' && texture.state !== 'freed') {
+    if (texture.type === TextureType.subTexture) {
+      // ignore subtextures - they get loaded through their parent
       return;
     }
 
-    texture.setState('loading');
+    // if the texture is already loaded, don't load it again
+    if (
+      texture.ctxTexture !== undefined &&
+      texture.ctxTexture.state === 'loaded'
+    ) {
+      texture.setState('loaded');
+      return;
+    }
+
+    // if the texture is already being processed, don't load it again
+    if (
+      this.downloadTextureSourceQueue.includes(texture) === true ||
+      this.uploadTextureQueue.includes(texture) === true
+    ) {
+      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);
+      }
+
+      // 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) {
@@ -435,15 +407,17 @@ export class CoreTextureManager extends EventEmitter {
     // 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.subTexture ||
-      texture.type === TextureType.color ||
-      texture.type === TextureType.renderToTexture
+      (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
@@ -466,11 +440,21 @@ export class CoreTextureManager extends EventEmitter {
    * @param texture Texture to upload
    */
   uploadTexture(texture: Texture): void {
-    if (texture.state !== 'fetched') {
+    if (
+      this.stage.txMemManager.doNotExceedCriticalThreshold === true &&
+      this.stage.txMemManager.criticalCleanupRequested === true
+    ) {
+      // we're at a critical memory threshold, don't upload textures
+      this.enqueueUploadTexture(texture);
       return;
     }
 
     const coreContext = texture.loadCtxTexture();
+    if (coreContext !== null && coreContext.state === 'loaded') {
+      texture.setState('loaded');
+      return;
+    }
+
     coreContext.load();
   }
 
@@ -576,6 +560,23 @@ export class CoreTextureManager extends EventEmitter {
     }
   }
 
+  /**
+   * Remove texture from the queue's
+   *
+   * @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);
+    }
+  }
+
   /**
    * Resolve a parent texture from the cache or fallback to the provided texture.
    *

package/src/core/Stage.ts

@@ -20,13 +20,14 @@ import { startLoop, getTimeStamp } from './platform.js';
 import { assertTruthy, setPremultiplyMode } from '../utils.js';
 import { AnimationManager } from './animations/AnimationManager.js';
 import {
+  UpdateType,
   CoreNode,
   CoreNodeRenderState,
   type CoreNodeProps,
 } from './CoreNode.js';
 import { CoreTextureManager } from './CoreTextureManager.js';
 import { TrFontManager } from './text-rendering/TrFontManager.js';
-import { CoreShaderManager, type ShaderMap } from './CoreShaderManager.js';
+import { CoreShaderManager } from './CoreShaderManager.js';
 import {
   TextRenderer,
   type TextRendererMap,
@@ -44,15 +45,14 @@ import {
   TextureMemoryManager,
   type TextureMemoryManagerSettings,
 } from './TextureMemoryManager.js';
-import type { CoreRendererOptions } from './renderers/CoreRenderer.js';
 import { CoreRenderer } from './renderers/CoreRenderer.js';
-import type { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
-import type { CanvasCoreRenderer } from './renderers/canvas/CanvasCoreRenderer.js';
-import type { BaseShaderController } from '../main-api/ShaderController.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';
 import type { CanvasTextRenderer } from './text-rendering/renderers/CanvasTextRenderer.js';
+import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
 import { createBound, createPreloadBounds, type Bound } from './lib/utils.js';
 import type { Texture } from './textures/Texture.js';
 import { ColorTexture } from './textures/ColorTexture.js';
@@ -70,13 +70,14 @@ export interface StageOptions {
   enableContextSpy: boolean;
   forceWebGL2: boolean;
   numImageWorkers: number;
-  renderEngine: typeof WebGlCoreRenderer | typeof CanvasCoreRenderer;
+  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';
 }
 
 export type StageFpsUpdateHandler = (
@@ -89,7 +90,6 @@ export type StageFrameTickHandler = (
   frameTickData: FrameTickPayload,
 ) => void;
 
-const bufferMemory = 2e6;
 const autoStart = true;
 
 export class Stage {
@@ -102,13 +102,14 @@ export class Stage {
   public readonly shManager: CoreShaderManager;
   public readonly renderer: CoreRenderer;
   public readonly root: CoreNode;
-  public readonly boundsMargin: [number, number, number, number];
-  public readonly defShaderCtr: BaseShaderController;
+  public boundsMargin: [number, number, number, number];
+  public readonly defShaderNode: CoreShaderNode | null = null;
   public readonly strictBound: Bound;
   public readonly preloadBound: Bound;
   public readonly strictBounds: boolean;
   public readonly defaultTexture: Texture | null = null;
-
+  public readonly pixelRatio: number;
+  public readonly bufferMemory: number = 2e6;
   /**
    * Renderer Event Bus for the Stage to emit events onto
    *
@@ -123,6 +124,7 @@ export class Stage {
   deltaTime = 0;
   lastFrameTime = 0;
   currentFrameTime = 0;
+  private clrColor = 0x00000000;
   private fpsNumFrames = 0;
   private fpsElapsedTime = 0;
   private numQuadsRendered = 0;
@@ -150,10 +152,14 @@ export class Stage {
       textureMemory,
       renderEngine,
       fontEngines,
+      createImageBitmapSupport,
     } = options;
 
     this.eventBus = options.eventBus;
-    this.txManager = new CoreTextureManager(this, numImageWorkers);
+    this.txManager = new CoreTextureManager(this, {
+      numImageWorkers,
+      createImageBitmapSupport,
+    });
 
     // Wait for the Texture Manager to initialize
     // once it does, request a render
@@ -162,7 +168,7 @@ export class Stage {
     });
 
     this.txMemManager = new TextureMemoryManager(this, textureMemory);
-    this.shManager = new CoreShaderManager();
+
     this.animationManager = new AnimationManager();
     this.contextSpy = enableContextSpy ? new ContextSpy() : null;
     this.strictBounds = options.strictBounds;
@@ -179,25 +185,25 @@ export class Stage {
     this.strictBound = createBound(0, 0, appWidth, appHeight);
     this.preloadBound = createPreloadBounds(this.strictBound, bm);
 
-    const rendererOptions: CoreRendererOptions = {
+    this.clrColor = clearColor;
+
+    this.pixelRatio =
+      options.devicePhysicalPixelRatio * options.deviceLogicalPixelRatio;
+
+    this.renderer = new renderEngine({
       stage: this,
       canvas,
-      pixelRatio:
-        options.devicePhysicalPixelRatio * options.deviceLogicalPixelRatio,
-      clearColor: clearColor ?? 0xff000000,
-      bufferMemory,
-      txManager: this.txManager,
-      txMemManager: this.txMemManager,
-      shManager: this.shManager,
       contextSpy: this.contextSpy,
       forceWebGL2,
-    };
+    });
+
+    this.shManager = new CoreShaderManager(this);
+
+    this.defShaderNode = this.renderer.getDefaultShaderNode();
 
-    this.renderer = new renderEngine(rendererOptions);
     const renderMode = this.renderer.mode || 'webgl';
 
     this.createDefaultTexture();
-    this.defShaderCtr = this.renderer.getDefShaderCtr();
     setPremultiplyMode(renderMode);
 
     // Must do this after renderer is created
@@ -240,6 +246,7 @@ export class Stage {
       height: appHeight,
       alpha: 1,
       autosize: false,
+      boundsMargin: null,
       clipping: false,
       color: 0x00000000,
       colorTop: 0x00000000,
@@ -264,7 +271,7 @@ export class Stage {
       parent: null,
       texture: null,
       textureOptions: {},
-      shader: this.defShaderCtr,
+      shader: this.defShaderNode,
       rtt: false,
       src: null,
       scale: 1,
@@ -281,6 +288,7 @@ export class Stage {
   }
 
   setClearColor(color: number) {
+    this.clearColor = color;
     this.renderer.updateClearColor(color);
     this.renderRequested = true;
   }
@@ -307,6 +315,7 @@ export class Stage {
    * Create default PixelTexture
    */
   createDefaultTexture() {
+    console.log('Creating default texture');
     (this.defaultTexture as ColorTexture) = this.txManager.createTexture(
       'ColorTexture',
       {
@@ -315,7 +324,6 @@ export class Stage {
     );
 
     assertTruthy(this.defaultTexture instanceof ColorTexture);
-
     this.txManager.loadTexture(this.defaultTexture, true);
 
     // Mark the default texture as ALWAYS renderable
@@ -372,8 +380,13 @@ export class Stage {
     renderer.reset();
 
     // Check if we need to cleanup textures
-    if (this.txMemManager.criticalCleanupRequested) {
-      this.txMemManager.cleanup();
+    if (this.txMemManager.criticalCleanupRequested === true) {
+      this.txMemManager.cleanup(false);
+
+      if (this.txMemManager.criticalCleanupRequested === true) {
+        // If we still need to cleanup, request another but aggressive cleanup
+        this.txMemManager.cleanup(true);
+      }
     }
 
     // If we have RTT nodes draw them first
@@ -577,20 +590,6 @@ export class Stage {
     return resolvedTextRenderer as unknown as TextRenderer;
   }
 
-  /**
-   * Create a shader controller instance
-   *
-   * @param type
-   * @param props
-   * @returns
-   */
-  createShaderCtr(
-    type: keyof ShaderMap,
-    props: Record<string, unknown>,
-  ): BaseShaderController {
-    return this.shManager.loadShader(type, props);
-  }
-
   createNode(props: Partial<CoreNodeProps>) {
     const resolvedProps = this.resolveNodeDefaults(props);
     return new CoreNode(this, resolvedProps);
@@ -636,6 +635,14 @@ export class Stage {
     return new CoreTextNode(this, resolvedProps, resolvedTextRenderer);
   }
 
+  setBoundsMargin(value: number | [number, number, number, number]) {
+    this.boundsMargin = Array.isArray(value)
+      ? value
+      : [value, value, value, value];
+
+    this.root.setUpdateType(UpdateType.RenderBounds);
+  }
+
   /**
    * Resolves the default property values for a Node
    *
@@ -669,6 +676,7 @@ export class Stage {
       height: props.height ?? 0,
       alpha: props.alpha ?? 1,
       autosize: props.autosize ?? false,
+      boundsMargin: props.boundsMargin ?? null,
       clipping: props.clipping ?? false,
       color,
       colorTop: props.colorTop ?? color,
@@ -684,7 +692,7 @@ export class Stage {
       parent: props.parent ?? null,
       texture: props.texture ?? null,
       textureOptions: props.textureOptions ?? {},
-      shader: props.shader ?? this.defShaderCtr,
+      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,
@@ -716,7 +724,17 @@ export class Stage {
    * @remarks
    * This method is used to cleanup orphaned textures that are no longer in use.
    */
-  cleanup() {
-    this.txMemManager.cleanup();
+  cleanup(aggressive: boolean) {
+    this.txMemManager.cleanup(aggressive);
+  }
+
+  set clearColor(value: number) {
+    this.renderer.updateClearColor(value);
+    this.renderRequested = true;
+    this.clrColor = value;
+  }
+
+  get clearColor() {
+    return this.clrColor;
   }
 }