@lightningjs/renderer 1.0.1 → 2.0.0

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 | undefined;
 
   /**
-   * 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,
+      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);
     }
   }