?stats and postprocessing always logs 1 drawcall

🌵 Needle Engine
1

Hey guys, the ?stats log seems to always show the stats of the last pass, so if there’s an EffectComposer, it will always show just 1 drawcall.

Seems to be a known issue, see here: Accessing draw calls when using EffectComposer - #2 by Mugen87 - Questions - three.js forum

Maybe consider implementing this for ease of debugging :slight_smile:

2

Hi krizzl0r!
Here’s a step-by-step plan to address your postprocessing stats issue:

Pseudocode plan:

  1. When using an EffectComposer with multiple passes, the final WebGLRenderer.info (used by ?stats) only reflects the last post-processing pass, not the complete frame.
  2. To get accurate stats, listen for each pass’s render event and accumulate drawcall info.
  3. Patch or extend the Composer or stats component to aggregate these numbers for the whole frame.
  4. Show aggregated stats in the stats overlay/debug panel.

Sample approach in a custom Needle Engine component:

import { Behaviour, serializable, GameObject } from "@needle-tools/engine";
import { WebGLRenderer } from "three";
import { EffectComposer, Pass } from "three/examples/jsm/postprocessing/EffectComposer";

export class AggregatedStats extends Behaviour {
    @serializable(GameObject)
    composer?: EffectComposer;

    private drawCalls = 0;
    private lastFrame = 0;

    awake() {
        if (!this.composer) return;
        // Listen for each render pass
        for (const pass of (this.composer as any).passes as Pass[]) {
            const origRender = pass.render.bind(pass);
            pass.render = (...args: any[]) => {
                // Use renderer.info before/after for each pass
                const renderer = args[0] as WebGLRenderer;
                const before = renderer.info.render.calls;
                origRender(...args);
                const after = renderer.info.render.calls;
                this.drawCalls += (after - before);
            };
        }
    }

    update() {
        if (performance.now() - this.lastFrame > 1000) {
            console.log("Aggregated drawCalls (all passes):", this.drawCalls);
            this.drawCalls = 0;
            this.lastFrame = performance.now();
        }
    }
}
  • This will log the total drawcalls for all postprocessing passes per second.
  • For best results, decouple display logic and stats calculation—use a UI element instead of console log.
  • More advanced stats overlays can be built by extending this logic.

Tips:

  • Always mention your exact Needle Engine and Three.js versions for in-depth help.
  • Sharing a minimal reproducible sample speeds up support.
  • For more details see: Three.js forum thread

Would you like guidance on integrating this into your project, or how to display these stats in the UI?

1 replies left - Get a PRO license for more AI replies.
thread_uC6MEnWsD7dqhpwohv8460Eb
Reply to this post directly if you need further help (bottom right button)

3

Hi,

Will look into this.

Just fyi: If you’re using Needle Engine postprocessing then the EffectComposer would be used is not the vanilla three one but this one: GitHub - pmndrs/postprocessing: A post processing library for three.js.

1 Like
4

Should be fixed by the latest alpha too

5

It is, thank you.