Class RendererMain

The Renderer Main API

Remarks

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(),
);

Events

  • fpsUpdate
    • Emitted every fpsUpdateInterval milliseconds with the current FPS
  • frameTick
    • Emitted every frame tick
  • quadsUpdate
  • Emitted when number of quads rendered is updated
  • 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

constructor

Properties

canvas root settings stage

Methods

advanceFrame cleanup createNode createShader createTextNode createTexture destroyNode emit getBufferInfo getNodeById off on once removeAllListeners rerender setClearColor toggleFreeze

Constructors

constructor

Properties

Readonlycanvas

canvas: HTMLCanvasElement

Readonlyroot

root: INode<CoreShaderNode<Record<string, unknown>>>

Readonlysettings

settings: Readonly<Required<RendererMainSettings>>

Readonlystage

stage: Stage

Methods

advanceFrame

cleanup

  • cleanup(aggressive?): void

  • Cleanup textures that are not being used

    Parameters

    • aggressive: boolean = false

      If true, will cleanup all textures, regardless of render status

    Returns void

    Remarks

    This can be used to free up GFX memory used by textures that are no longer being displayed.

    This routine is also called automatically when the memory used by textures exceeds the critical threshold on frame generation OR when the renderer is idle and the memory used by textures exceeds the target threshold.

    NOTE: This is a heavy operation and should be used sparingly. NOTE2: This will not cleanup textures that are currently being displayed. NOTE3: This will not cleanup textures that are marked as preventCleanup. NOTE4: This has nothing to do with the garbage collection of JavaScript.

createNode

  • createNode<ShNode>(props): INode<ShNode>

  • Create a new scene graph node

    Type Parameters

    Parameters

    Returns INode<ShNode>

    Remarks

    A node is the main graphical building block of the Renderer scene graph. It can be a container for other nodes, or it can be a leaf node that renders a solid color, gradient, image, or specific texture, using a specific shader.

    To create a text node, see createTextNode.

    See CoreNode for more details.

createShader

  • createShader<ShType>(shType, props?): CoreShaderNode<ExtractProps<ShaderProps<any>>>

  • Create a new shader controller for a shader type

    Type Parameters

    • ShType extends string

    Parameters

    • shType: ShType
    • Optionalprops: OptionalShaderProps<T>

    Returns CoreShaderNode<ExtractProps<ShaderProps<any>>>

    Remarks

    This method creates a new Shader Controller for a specific shader type.

    If the shader has not been loaded yet, it will be loaded. Otherwise, the existing shader will be reused.

    It can be assigned to a Node's shader property.

createTextNode

  • createTextNode(props): ITextNode

  • Create a new scene graph text node

    Parameters

    Returns ITextNode

    Remarks

    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.

createTexture

  • createTexture<TxType>(textureType, props): InstanceType<TextureMap[TxType]>

  • Create a new texture reference

    Type Parameters

    Parameters

    Returns InstanceType<TextureMap[TxType]>

    Remarks

    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.

destroyNode

emit

getBufferInfo

getNodeById

off

  • off(event, listener?): void

  • Parameters

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

        • Parameters

          • target: any
          • data: any

          Returns void

    Returns void

on

  • on(event, listener): void

  • Parameters

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

        • Parameters

          • target: any
          • data: any

          Returns void

    Returns void

once

  • once(event, listener): void

  • Parameters

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

        • Parameters

          • target: any
          • data: any

          Returns void

    Returns void

removeAllListeners

rerender

  • rerender(): void

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

    Returns void

    Remarks

    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.

setClearColor

  • setClearColor(color): void

  • Sets the clear color for the stage.

    Parameters

    • color: number

      The color to set as the clear color.

    Returns void

toggleFreeze

Settings

Member Visibility

On This Page

Events
Constructors
Properties
Methods