@masatomakino/threejs-billboard
    Preparing search index...

    Class PixiMultiViewManager

    Manages a single PixiJS v8 multiView renderer instance and coordinates rendering requests from multiple IRenderablePixiView instances.

    This class serves as the central coordinator for the MultiView billboard system, managing rendering requests from MultiViewPixiBillboard and MultiViewPixiPlaneMesh instances. It leverages PixiJS v8's multiView capability to efficiently render multiple independent canvas elements using a single WebGL renderer.

    Unlike the SharedStage approach which uses a single shared canvas and texture, the MultiView system specializes in efficiently managing multiple independent canvases and textures. This provides several advantages:

    • Independent Updates: Each billboard can be updated independently
    • Flexible Scaling: Number of billboards can be dynamic
    • Resource Isolation: Each billboard has its own canvas and texture
    • Optimized Rendering: Single renderer handles multiple render targets

    The manager uses a queue-based approach where:

    1. MultiView instances request rendering via requestRender()
    2. Requests are queued until the next ticker frame
    3. All queued instances are rendered in a single batch
    4. Queue is cleared after processing

    This manager is primarily used with:

    • MultiViewPixiBillboard: Sprite-based billboards with independent canvas
    • MultiViewPixiPlaneMesh: Mesh-based billboards with independent canvas
    // Create and initialize the manager
    const manager = new PixiMultiViewManager();
    await manager.init();

    // Create billboards that will use this manager
    const billboard1 = new MultiViewPixiBillboard({
      width: 256,
      height: 256,
      imageScale: 1.0,
      manager: manager
    });
    const billboard2 = new MultiViewPixiPlaneMesh({
      width: 512,
      height: 512,
      imageScale: 0.5,
      manager: manager
    });

    // Billboards automatically request rendering when content changes
    // The manager handles all rendering coordination

    // Clean up when done
    manager.dispose();
    Index

    Constructors

    constructor

    Accessors

    isDisposed renderer

    Methods

    dispose init requestRender

    Constructors

    • Creates a new PixiMultiViewManager instance.

      The constructor sets up the basic configuration but does not initialize the renderer. Call init() after construction to start the rendering system.

      Parameters

      • Optionaloptions: PixiMultiViewManagerOptions

        Configuration options for the manager

      Returns PixiMultiViewManager

      // Create with default options
      const manager = new PixiMultiViewManager();

      // Create with custom ticker
      const customTicker = new Ticker();
      const manager = new PixiMultiViewManager({ ticker: customTicker });

    Accessors

    • get isDisposed(): boolean

      Gets whether this manager instance has been disposed.

      When true, the manager's resources have been cleaned up and it should no longer be used. All rendering operations will be ignored after disposal.

      Returns boolean

      True if disposed, false otherwise

      if (!manager.isDisposed) {
        manager.requestRender(billboard);
      }
    • get renderer(): null | WebGLRenderer<HTMLCanvasElement>

      Gets the managed PixiJS WebGLRenderer instance.

      The renderer is created during initialization and used to render all MultiView instances. Returns null if the manager has not been initialized or has been disposed.

      Returns null | WebGLRenderer<HTMLCanvasElement>

      The WebGL renderer instance, or null if not available

      const manager = new PixiMultiViewManager();
      console.log(manager.renderer); // null - not initialized yet

      await manager.init();
      console.log(manager.renderer); // WebGLRenderer instance

    Methods

    • Disposes of this manager instance and releases all associated resources.

      This method performs complete cleanup of the manager including:

      • Stopping the ticker-based rendering loop
      • Destroying the WebGL renderer and its resources
      • Clearing the render queue
      • Marking the instance as disposed
      • After disposal, the manager cannot be reused
      • All rendering operations will be ignored after disposal
      • The manager will log a warning if dispose is called multiple times
      • Individual billboard instances are not disposed automatically

      Returns void

      const manager = new PixiMultiViewManager();
      await manager.init();

      // Use the manager...

      // Clean up when done
      manager.dispose();

      // Manager is now unusable
      console.log(manager.isDisposed); // true

    • Asynchronously initializes the PixiJS renderer and starts the rendering loop.

      This method creates a WebGL renderer with multiView capability enabled and starts the ticker-based rendering loop. The renderer is configured with optimal settings for billboard rendering.

      • MultiView enabled: Supports rendering to multiple canvas targets
      • WebGL preference: Uses WebGL for optimal performance
      • Transparent background: Alpha 0.0 for proper compositing
      • Antialiasing enabled: Smooth rendering for better visual quality

      Returns Promise<void>

      const manager = new PixiMultiViewManager();
      await manager.init();

      // Manager is now ready to handle rendering requests
      console.log(manager.renderer); // WebGLRenderer instance

    • Requests rendering for the specified IRenderablePixiView instance.

      This method adds the instance to the render queue to be processed on the next ticker frame. Multiple requests for the same instance within a single frame are automatically deduplicated using a Set.

      This method is primarily called internally by MultiView billboard classes:

      • During construction: Initial rendering request when the billboard is created
      • On content updates: When updateContent() is called on the billboard
      • On property changes: When properties like scale are modified via setScale()
      • Instances are queued until the next ticker frame
      • Duplicate requests are automatically ignored
      • Disposed instances are automatically filtered out
      • Queue is processed in batch for optimal performance

      Parameters

      Returns void

      // Typically called internally by billboard classes:
      // - In constructor: this._manager.requestRender(this);
      // - In updateContent(): this._manager.requestRender(this);
      // - In setScale(): this._manager.requestRender(this);

      // Manual usage (if needed):
      manager.requestRender(billboard);

      // Multiple requests in the same frame are deduplicated
      manager.requestRender(billboard);
      manager.requestRender(billboard); // Only rendered once

    Settings

    Member Visibility

    On This Page

    Architecture OverviewRendering Queue SystemIntegration with MultiView Classes
    Constructors
    Accessors
    Methods