@lightningjs/renderer
    Preparing search index...

    Class RendererMain

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

    Listen to events using the standard EventEmitter API:

    renderer.on('fpsUpdate', (data: RendererMainFpsUpdateEvent) => {
      console.log(`FPS: ${data.fps}`);
    });

    renderer.on('idle', (data: RendererMainIdleEvent) => {
      // Renderer is idle - no scene changes
    });

    RendererMain#fpsUpdate

    RendererMain#frameTick

    RendererMain#quadsUpdate

    RendererMain#idle

    RendererMain#criticalCleanup

    RendererMain#criticalCleanupFailed

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    canvas root stage

    Accessors

    settings targetFPS

    Methods

    advanceFrame cleanup clearListeners close createNode createShader createTextNode createTexture destroyNode emit getBufferInfo getNodeById hasListeners off on once registerAnimation removeAllListeners rerender setClearColor setOptions toggleFreeze unregisterAnimation

    Constructors

    Properties

    canvas: HTMLCanvasElement
    root: INode
    stage: Stage

    Accessors

    • get targetFPS(): number

      Gets the target FPS for the global render loop

      Returns number

      The current target FPS (0 means no throttling)

      This controls the maximum frame rate of the entire rendering system. When 0, the system runs at display refresh rate.

    • set targetFPS(fps: number): void

      Sets the target FPS for the global render loop

      Parameters

      • fps: number

        The target FPS to set for the global render loop. Set to 0 or a negative value to disable throttling.

      Returns void

      This setting affects the entire rendering system immediately. All animations, rendering, and frame updates will be throttled to this target FPS. Provides global performance control.

      // Set global target to 30fps for better performance
      renderer.targetFPS = 30;

      // Disable global throttling (use display refresh rate)
      renderer.targetFPS = 0;

    Methods

    • Cleanup textures that are not being used

      Returns void

      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.

    • Clear all listeners for the given event names by setting their array length to 0, WITHOUT deleting the keys. This keeps the eventListeners object in V8's fast-properties mode and avoids re-allocating the arrays on the next on() call. Use this for objects with a known fixed set of event names (e.g. CoreAnimation, CoreAnimationController).

      Only writes arr.length = 0 when the array is non-empty -- skips the write (and the write barrier on old-gen objects) when already empty, which is the common case after unregisterAnimation() has removed all listeners.

      Parameters

      • events: readonly string[]

      Returns void

    • Close and destroy the renderer, releasing all resources.

      Returns void

      This method performs a full teardown of the renderer:

      • Stops the platform render loop
      • Destroys all scene nodes (including text node font resources)
      • Releases all texture memory and GPU resources
      • Terminates image worker threads
      • Removes the canvas element from the target div
      • Destroys the inspector if active

    • 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>>>

      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.

    • 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.

    • Check whether this emitter has any listeners registered.

      Parameters

      • Optionalevent: string

        Optional event name. When provided, checks only that event. When omitted, checks all events.

      Returns boolean

      true if at least one listener is registered.

    • Register an active animation with the renderer.

      Returns void

      This increments a global animation counter shared by both the internal animation engine and external animation libraries. While the counter is above zero, the renderer throttles texture uploads (configurable via the RendererMainSettings.maxTextureUploadsDuringAnimation setting, which defaults to one per frame) to preserve the frame budget.

      Call unregisterAnimation when the animation completes, is cancelled, or is otherwise no longer driving per-frame updates.

      The renderer's own INode.animate method handles this automatically. This API is intended for external animation libraries such as AnimeJS, GSAP, or custom tween loops.

      // AnimeJS integration
      import anime from 'animejs';

      anime({
        targets: myProps,
        x: 500,
        duration: 1000,
        begin: () => renderer.registerAnimation(),
        complete: () => renderer.unregisterAnimation(),
        update: () => { node.x = myProps.x; },
      });

      // For AnimeJS timelines, use timeline-level hooks:
      const tl = anime.timeline({
        begin: () => renderer.registerAnimation(),
        complete: () => renderer.unregisterAnimation(),
      });
      tl.add({ targets: node, x: 100, duration: 500 });
      tl.add({ targets: node, y: 200, duration: 500 });

    • 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

    Settings

    Member Visibility

    On This Page

    Event Handling
    Constructors
    Properties
    Accessors
    Methods