@pixi/3d
    Preparing search index...

    Class GraphDebugOverlayAdvanced

    HTML panel for recording a view's frames and reviewing how each one was drawn

    Press Record, use the app, then Stop. The review steps through the recorded frames in two tabs: Workload lists each scene pass's batches and draws, and why draws were rebuilt or WebGPU bundles re-recorded; Render Graph lists the graph's passes, their dependencies and the lifetime of each resource. Copy Frame and Copy Recording put the data on the clipboard as JSON.

    Nothing is captured outside a recording, so an idle overlay costs next to nothing.

    const overlay = new GraphDebugOverlay({ view: view3d, renderer: app.renderer });
    Index
    constructor
    defaultOptions
    autoUpdate renderer
    destroy refresh
    defaultOptions: Partial<Omit<GraphDebugOverlayOptions, "view" | "renderer">> = ...

    Defaults for every new GraphDebugOverlay; an option passed as undefined keeps its default

    GraphDebugOverlay.defaultOptions.maxRecordedFrames = 600;
    • get autoUpdate(): boolean

      Whether refresh() runs after each screen render of renderer

      Renders into a texture don't count, so a recording holds only frames drawn to the screen.

      Returns boolean

      const overlay = new GraphDebugOverlay({ view: () => view3d, renderer: app.renderer });

      overlay.autoUpdate = false; // pause; refresh() is yours to call until it's back on
    • set autoUpdate(value: boolean): void

      Sets whether refresh() runs after each screen render

      Parameters

      • value: boolean

        true to refresh after each one

      Returns void

    • get renderer(): Renderer | null

      The renderer whose screen renders run refresh() while autoUpdate is on; null leaves refresh() to the caller

      Returns Renderer | null

    • set renderer(value: Renderer | null): void

      Sets the renderer to follow; ignored once the overlay is destroyed

      Parameters

      • value: Renderer | null

        The renderer to follow, or null for none

      Returns void

    • Stops following the renderer and removes the overlay from the DOM

      Returns void

    • Captures the frame just rendered while a recording runs; outside one it only updates the panel, enabling Record once the view has rendered

      Runs after every screen render while autoUpdate is on and a renderer is set. Otherwise call it yourself after each render.

      Returns void

      const overlay = new GraphDebugOverlay({ view: view3d });

      app.ticker.add(() => overlay.refresh(), undefined, UPDATE_PRIORITY.UTILITY);

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods