@lightningjs/renderer 1.0.1 → 2.1.0

package/src/core/textures/ImageTexture.ts

@@ -24,6 +24,7 @@ import {
   loadCompressedTexture,
 } from '../lib/textureCompression.js';
 import { convertUrlToAbsolute } from '../lib/utils.js';
+import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -55,6 +56,52 @@ export interface ImageTextureProps {
    * `ImageData` textures are not cached unless a `key` is provided
    */
   key?: string | null;
+  /**
+   * Width of the image to be used as a texture. If not provided, the image's
+   * natural width will be used.
+   */
+  width?: number | null;
+  /**
+   * Height of the image to be used as a texture. If not provided, the image's
+   * natural height will be used.
+   */
+  height?: number | null;
+  /**
+   * Type, indicate an image type for overriding type detection
+   *
+   * @default null
+   */
+  type?: 'regular' | 'compressed' | 'svg' | null;
+  /**
+   * The width of the rectangle from which the ImageBitmap will be extracted. This value
+   * can be negative. Only works when createImageBitmap is supported on the browser.
+   *
+   * @default null
+   */
+  sw?: number | null;
+  /**
+   * The height of the rectangle from which the ImageBitmap will be extracted. This value
+   * can be negative. Only works when createImageBitmap is supported on the browser.
+   *
+   * @default null
+   */
+  sh?: number | null;
+  /**
+   * The y coordinate of the reference point of the rectangle from which the ImageBitmap
+   * will be extracted. Only used when `sw` and `sh` are provided. And only works when
+   * createImageBitmap is available.
+   *
+   * @default null
+   */
+  sx?: number | null;
+  /**
+   * The x coordinate of the reference point of the rectangle from which the
+   * ImageBitmap will be extracted. Only used when source `sw` width and `sh` height
+   * are provided. Only works when createImageBitmap is supported on the browser.
+   *
+   * @default null
+   */
+  sy?: number | null;
 }
 
 /**
@@ -83,45 +130,35 @@ export class ImageTexture extends Texture {
     return mimeType.indexOf('image/png') !== -1;
   }
 
-  override async getTextureData(): Promise<TextureData> {
-    const { src, premultiplyAlpha } = this.props;
-    if (!src) {
-      return {
-        data: null,
-      };
-    }
-
-    if (typeof src !== 'string') {
-      if (src instanceof ImageData) {
-        return {
-          data: src,
-          premultiplyAlpha,
-        };
-      }
-      return {
-        data: src(),
-        premultiplyAlpha,
-      };
-    }
-
-    // Handle compressed textures
-    if (isCompressedTextureContainer(src)) {
-      return loadCompressedTexture(src);
-    }
+  async loadImage(src: string) {
+    const { premultiplyAlpha, sx, sy, sw, sh, width, height } = this.props;
 
-    // Convert relative URL to absolute URL
-    const absoluteSrc = convertUrlToAbsolute(src);
-
-    if (this.txManager.imageWorkerManager) {
+    if (this.txManager.imageWorkerManager !== null) {
       return await this.txManager.imageWorkerManager.getImage(
-        absoluteSrc,
+        src,
         premultiplyAlpha,
+        sx,
+        sy,
+        sw,
+        sh,
       );
-    } else if (this.txManager.hasCreateImageBitmap) {
-      const response = await fetch(absoluteSrc);
+    } else if (this.txManager.hasCreateImageBitmap === true) {
+      const response = await fetch(src);
       const blob = await response.blob();
       const hasAlphaChannel =
         premultiplyAlpha ?? this.hasAlphaChannel(blob.type);
+
+      if (sw !== null && sh !== null) {
+        return {
+          data: await createImageBitmap(blob, sx ?? 0, sy ?? 0, sw, sh, {
+            premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          }),
+          premultiplyAlpha: hasAlphaChannel,
+        };
+      }
+
       return {
         data: await createImageBitmap(blob, {
           premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
@@ -131,11 +168,11 @@ export class ImageTexture extends Texture {
         premultiplyAlpha: hasAlphaChannel,
       };
     } else {
-      const img = new Image();
+      const img = new Image(width || undefined, height || undefined);
       if (!(src.substr(0, 5) === 'data:')) {
         img.crossOrigin = 'Anonymous';
       }
-      img.src = absoluteSrc;
+      img.src = src;
       await new Promise<void>((resolve, reject) => {
         img.onload = () => resolve();
         img.onerror = () => reject(new Error(`Failed to load image`));
@@ -150,6 +187,73 @@ export class ImageTexture extends Texture {
     }
   }
 
+  override async getTextureData(): Promise<TextureData> {
+    const { src, premultiplyAlpha, type } = this.props;
+    if (src === null) {
+      return {
+        data: null,
+      };
+    }
+
+    if (typeof src !== 'string') {
+      if (src instanceof ImageData) {
+        return {
+          data: src,
+          premultiplyAlpha,
+        };
+      }
+      return {
+        data: src(),
+        premultiplyAlpha,
+      };
+    }
+
+    const absoluteSrc = convertUrlToAbsolute(src);
+    if (type === 'regular') {
+      return this.loadImage(absoluteSrc);
+    }
+
+    if (type === 'svg') {
+      return loadSvg(
+        absoluteSrc,
+        this.props.width,
+        this.props.height,
+        this.props.sx,
+        this.props.sy,
+        this.props.sw,
+        this.props.sh,
+      );
+    }
+
+    if (isSvgImage(src) === true) {
+      return loadSvg(
+        absoluteSrc,
+        this.props.width,
+        this.props.height,
+        this.props.sx,
+        this.props.sy,
+        this.props.sw,
+        this.props.sh,
+      );
+    }
+
+    if (type === 'compressed') {
+      return loadCompressedTexture(absoluteSrc);
+    }
+
+    if (isCompressedTextureContainer(src) === true) {
+      return loadCompressedTexture(absoluteSrc);
+    }
+
+    // default
+    return this.loadImage(absoluteSrc);
+  }
+
+  /**
+   * Generates a cache key for the ImageTexture based on the provided props.
+   * @param props - The props used to generate the cache key.
+   * @returns The cache key as a string, or `false` if the key cannot be generated.
+   */
   static override makeCacheKey(props: ImageTextureProps): string | false {
     const resolvedProps = ImageTexture.resolveDefaults(props);
     // Only cache key-able textures; prioritise key
@@ -157,7 +261,20 @@ export class ImageTexture extends Texture {
     if (typeof key !== 'string') {
       return false;
     }
-    return `ImageTexture,${key},${resolvedProps.premultiplyAlpha ?? 'true'}`;
+
+    // if we have source dimensions, cache the texture separately
+    let dimensionProps = '';
+    if (resolvedProps.sh !== null && resolvedProps.sw !== null) {
+      dimensionProps += ',';
+      dimensionProps += resolvedProps.sx ?? '';
+      dimensionProps += resolvedProps.sy ?? '';
+      dimensionProps += resolvedProps.sw || '';
+      dimensionProps += resolvedProps.sh || '';
+    }
+
+    return `ImageTexture,${key},${
+      resolvedProps.premultiplyAlpha ?? 'true'
+    }${dimensionProps}`;
   }
 
   static override resolveDefaults(
@@ -167,6 +284,13 @@ export class ImageTexture extends Texture {
       src: props.src ?? '',
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
       key: props.key ?? null,
+      type: props.type ?? null,
+      width: props.width ?? null,
+      height: props.height ?? null,
+      sx: props.sx ?? null,
+      sy: props.sy ?? null,
+      sw: props.sw ?? null,
+      sh: props.sh ?? null,
     };
   }
 

package/src/core/textures/Texture.ts

@@ -150,6 +150,8 @@ export abstract class Texture extends EventEmitter {
 
   readonly lastRenderableChangeTime = 0;
 
+  public preventCleanup = false;
+
   constructor(protected txManager: CoreTextureManager) {
     super();
   }

package/src/main-api/Inspector.ts

@@ -128,7 +128,7 @@ const convertColorToRgba = (color: number) => {
 };
 
 const domPropertyMap: { [key: string]: string } = {
-  id: 'id',
+  id: 'test-id',
 };
 
 const gradientColorPropertyMap = [
@@ -163,7 +163,7 @@ export class Inspector {
     );
 
     this.width = Math.ceil(
-      settings.appWidth ?? 1900 / (settings.deviceLogicalPixelRatio ?? 1),
+      settings.appWidth ?? 1920 / (settings.deviceLogicalPixelRatio ?? 1),
     );
 
     this.scaleX = settings.deviceLogicalPixelRatio ?? 1;

package/src/main-api/Renderer.ts

@@ -21,7 +21,6 @@
 import type { EffectMap, ShaderMap } from '../core/CoreShaderManager.js';
 import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import { Inspector } from './Inspector.js';
 import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
@@ -40,6 +39,11 @@ import type {
   EffectDescUnion,
 } from '../core/renderers/webgl/shaders/effects/ShaderEffect.js';
 import type { TextureMemoryManagerSettings } from '../core/TextureMemoryManager.js';
+import type { CanvasTextRenderer } from '../core/text-rendering/renderers/CanvasTextRenderer.js';
+import type { SdfTextRenderer } from '../core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
+import type { WebGlCoreRenderer } from '../core/renderers/webgl/WebGlCoreRenderer.js';
+import type { CanvasCoreRenderer } from '../core/renderers/canvas/CanvasCoreRenderer.js';
+import type { Inspector } from './Inspector.js';
 
 /**
  * An immutable reference to a specific Shader type
@@ -181,21 +185,29 @@ export interface RendererMainSettings {
   numImageWorkers?: number;
 
   /**
-   * Enable inspector
+   * DOM Inspector
    *
    * @remarks
-   * When enabled the renderer will spawn a inspector. The inspector will
-   * replicate the state of the Nodes created in the renderer and allow
-   * inspection of the state of the nodes.
+   * The inspector will replicate the state of the Nodes created
+   * in the renderer and allow inspection of the state of the nodes.
    *
-   * @defaultValue `false` (disabled)
    */
-  enableInspector?: boolean;
+  inspector?: typeof Inspector | false;
 
   /**
-   * Renderer mode
+   * Renderer Engine
+   *
+   * @remarks
+   * The renderer engine to use. Spawns a WebGL or Canvas renderer.
+   * WebGL is more performant and supports more features. Canvas is
+   * supported on most platforms.
+   *
+   * Note: When using CanvasCoreRenderer you can only use
+   * CanvasTextRenderer. The WebGLCoreRenderer supports
+   * both CanvasTextRenderer and SdfTextRenderer for Text Rendering.
+   *
    */
-  renderMode?: 'webgl' | 'canvas';
+  renderEngine: typeof CanvasCoreRenderer | typeof WebGlCoreRenderer;
 
   /**
    * Quad buffer size in bytes
@@ -203,6 +215,36 @@ export interface RendererMainSettings {
    * @defaultValue 4 * 1024 * 1024
    */
   quadBufferSize?: number;
+
+  /**
+   * Font Engines
+   *
+   * @remarks
+   * The font engines to use for text rendering. CanvasTextRenderer is supported
+   * on all platforms. SdfTextRenderer is a more performant renderer.
+   * When using `renderEngine=CanvasCoreRenderer` you can only use `CanvasTextRenderer`.
+   * The `renderEngine=WebGLCoreRenderer` supports both `CanvasTextRenderer` and `SdfTextRenderer`.
+   *
+   * This setting is used to enable tree shaking of unused font engines. Please
+   * import your font engine(s) as follows:
+   * ```
+   * import { CanvasTextRenderer } from '@lightning/renderer/canvas';
+   * import { SdfTextRenderer } from '@lightning/renderer/webgl';
+   * ```
+   *
+   * If both CanvasTextRenderer and SdfTextRenderer are provided, the first renderer
+   * provided will be asked first if it can render the font. If it cannot render the
+   * font, the next renderer will be asked. If no renderer can render the font, the
+   * text will not be rendered.
+   *
+   * **Note** that if you have fonts available in both engines the second font engine
+   * will not be used. This is because the first font engine will always be asked first.
+   *
+   * @defaultValue '[]'
+   *
+   *
+   */
+  fontEngines: (typeof SdfTextRenderer | typeof CanvasTextRenderer)[];
 }
 
 /**
@@ -288,9 +330,10 @@ export class RendererMain extends EventEmitter {
       numImageWorkers:
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
-      enableInspector: settings.enableInspector ?? false,
-      renderMode: settings.renderMode ?? 'webgl',
+      inspector: settings.inspector ?? false,
+      renderEngine: settings.renderEngine,
       quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,
+      fontEngines: settings.fontEngines,
     };
     this.settings = resolvedSettings;
 
@@ -299,7 +342,7 @@ export class RendererMain extends EventEmitter {
       appHeight,
       deviceLogicalPixelRatio,
       devicePhysicalPixelRatio,
-      enableInspector,
+      inspector,
     } = resolvedSettings;
 
     const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio;
@@ -325,10 +368,11 @@ export class RendererMain extends EventEmitter {
       enableContextSpy: this.settings.enableContextSpy,
       fpsUpdateInterval: this.settings.fpsUpdateInterval,
       numImageWorkers: this.settings.numImageWorkers,
-      renderMode: this.settings.renderMode,
+      renderEngine: this.settings.renderEngine,
       textureMemory: resolvedTxSettings,
       eventBus: this,
       quadBufferSize: this.settings.quadBufferSize,
+      fontEngines: this.settings.fontEngines,
     });
 
     // Extract the root node
@@ -351,8 +395,8 @@ export class RendererMain extends EventEmitter {
     targetEl.appendChild(canvas);
 
     // Initialize inspector (if enabled)
-    if (enableInspector && !isProductionEnvironment()) {
-      this.inspector = new Inspector(canvas, resolvedSettings);
+    if (inspector && !isProductionEnvironment()) {
+      this.inspector = new inspector(canvas, resolvedSettings);
     }
   }