pixi.js

How do I get draw count in pixi.js


I'm using this code to add a ticker. The draw method looks like this:

this.ticker = this.ticker || this.app.ticker.add(this.draw)

Here app is the PIXI.Application. The draw method looks like so:

private draw(): void {
  console.log(this.ticker.FPS)
}

This gives me the FPS but how do I get the draw calls count?

Draw calls are discussed here https://pixijs.io/pixi-batch-renderer/PIXI.brend.BatchRenderer.html

This object renderer renders multiple display-objects in batches. It can greatly reduce the number of draw calls issued per frame.


Solution

  • let drawCount = 0;
    
    const renderer = app.renderer as any;
    const drawElements = renderer.gl.drawElements;
    renderer.gl.drawElements = (...args: any[]) => {
      drawElements.call(renderer.gl, ...args);
      drawCount++;
    }; // rewrite drawElements to count draws
    
    app.ticker.add((deltaTime) => {
      console.log(`drawCount: ${drawCount}`);
      drawCount = 0; // clear count per frame
    });