The Renderer Main API

This is the primary class used to configure and operate the Renderer.

It is used to create and destroy Nodes, as well as Texture and Shader references.

Example:

import { RendererMain, MainCoreDriver } from '@lightningjs/renderer';

// Initialize the Renderer
const renderer = new RendererMain(
{
appWidth: 1920,
appHeight: 1080
},
'app',
new MainCoreDriver(),
);
  • fpsUpdate
    • Emitted every fpsUpdateInterval milliseconds with the current FPS
  • frameTick
    • Emitted every frame tick
  • idle
    • Emitted when the renderer is idle (no changes to the scene graph/animations running)
  • criticalCleanup
  • Emitted when the Texture Memory Manager Cleanup process is triggered
  • Payload: { memUsed: number, criticalThreshold: number }
    • memUsed - The amount of memory (in bytes) used by textures before the cleanup process
    • criticalThreshold - The critical threshold (in bytes)
  • criticalCleanupFailed
    • Emitted when the Texture Memory Manager Cleanup process is unable to free up enough texture memory to reach below the critical threshold. This can happen when there is not enough non-renderable textures to free up.
    • Payload (object with keys):
      • memUsed - The amount of memory (in bytes) used by textures after the cleanup process
      • criticalThreshold - The critical threshold (in bytes)

Hierarchy (view full)

Constructors

Properties

canvas: HTMLCanvasElement
root: INode<ShaderController<"DefaultShader">>
settings: Readonly<Required<RendererMainSettings>>
stage: Stage

Methods

  • Create a new Dynamic Shader controller

    Type Parameters

    Parameters

    • effects: [...T[]]

    Returns DynamicShaderController<T>

    A Dynamic Shader is a shader that can be composed of an array of mulitple effects. Each effect can be animated or changed after creation (provided the effect is given a name).

    Example:

    renderer.createNode({
    shader: renderer.createDynamicShader([
    renderer.createEffect('radius', {
    radius: 0
    }, 'effect1'),
    renderer.createEffect('border', {
    color: 0xff00ffff,
    width: 10,
    }, 'effect2'),
    ]),
    });
  • Create a new scene graph text node

    Parameters

    Returns ITextNode

    A text node is the second graphical building block of the Renderer scene graph. It renders text using a specific text renderer that is automatically chosen based on the font requested and what type of fonts are installed into an app.

    See ITextNode for more details.

  • Create a new texture reference

    Type Parameters

    Parameters

    Returns InstanceType<TextureMap[TxType]>

    This method creates a new reference to a texture. The texture is not loaded until it is used on a node.

    It can be assigned to a node's texture property, or it can be used when creating a SubTexture.

  • Parameters

    • event: string
    • Optionallistener: ((target: any, data: any) => void)
        • (target, data): void
        • Parameters

          • target: any
          • data: any

          Returns void

    Returns void

  • Parameters

    • event: string
    • listener: ((target: any, data: any) => void)
        • (target, data): void
        • Parameters

          • target: any
          • data: any

          Returns void

    Returns void

  • Parameters

    • event: string
    • listener: ((target: any, data: any) => void)
        • (target, data): void
        • Parameters

          • target: any
          • data: any

          Returns void

    Returns void

  • Re-render the current frame without advancing any running animations.

    Returns void

    Any state changes will be reflected in the re-rendered frame. Useful for debugging.

    May not do anything if the render loop is running on a separate worker.

  • Sets the clear color for the stage.

    Parameters

    • color: number

      The color to set as the clear color.

    Returns void