How to measure draw calls?

[vforsh]

Version

3.60 beta 12

Description

I'm trying to implement basic counter with draw calls number. I was hoping to do so with the AFTER_FLUSH pipeline event but I always get 1 draw call between PRE_RENDER and POST_RENDER webgl renderer events.

Example Test Code

https://codesandbox.io/s/draw-calls-nyjkdc?file=/src/index.ts

Additional notes

SpectorJS shows 7 draws when I make capture for the provided example with 100 texts.

[photonstorm]

Spector is what I would use. I don't use it for performance testing, but for debugging, it's second to none really.

[vforsh]

I was looking for a quick way to check draw calls on mobile devices where SpectorJS is not available.

I have double-checked the code in the provided example and think that either docs for AFTER_FLUSH event are misleading or something wrong with the way I count draw calls. I see 7 draws in a Spector capture but only 1 AFTER_FLUSH event is emitted during the render.

This event is dispatched by a WebGLPipeline right after it has issued a drawArrays command and cleared its vertex count.

        countDrawCalls() {
		const renderer = this.game.renderer
		if (renderer instanceof Phaser.Renderer.WebGL.WebGLRenderer) {
			let drawCalls = 0

			let pipelines = renderer.pipelines.pipelines.values()

			renderer.on(Phaser.Renderer.Events.PRE_RENDER, () => (drawCalls = 0))
			pipelines.forEach((p) => p.on(Phaser.Renderer.WebGL.Pipelines.Events.AFTER_FLUSH, () => drawCalls++))
			renderer.on(Phaser.Renderer.Events.POST_RENDER, () => this.redrawStats(drawCalls))
		} else {
			renderer.on(Phaser.Renderer.Events.POST_RENDER, () => this.redrawStats(renderer.drawCount))
		}
	}

[x-wk]

You can try this, but don't call it repeatedly.

   protected countDrawCall() {
      let
         drawCallCount = 0,
         renderer = this.sys.renderer;
      if (renderer instanceof Phaser.Renderer.WebGL.WebGLRenderer) {
         this.game.events.on(Phaser.Core.Events.POST_STEP, () => {
            console.log(drawCallCount);
            drawCallCount = 0;
         });

         let gl = WebGLRenderingContext.prototype;
         //@ts-ignore
         gl.realDrawArrays = WebGLRenderingContext.prototype.drawArrays;
         gl.drawArrays = function (mode: GLenum, first: GLint, count: GLsizei) {
            drawCallCount += 1;
            //@ts-ignore
            this.realDrawArrays(mode, first, count);
         };
      }
   }

[vforsh]

@x-wk it is nice to see my own code that I have posted some time ago on Phaser forums :)

I was hoping to do it in a "phaser way". Like before 3.60 there was a 'texturesFlush' property which I used.

[photonstorm]

SpectorJS can be used Standalone on mobile, it doesn't need to be run as a browser extension.

[photonstorm]

https://twitter.com/phaser_/status/1586050938929815552

You can now test this on https://labs.phaser.io by changing the Phaser version to 'dev' and then clicking 'WebGL Debug' on any example. The renderer has the new methods available.

[photonstorm]

Closing as this feature is now built into Phaser 3.60.

[alamboley]

https://twitter.com/phaser_/status/1586050938929815552

You can now test this on https://labs.phaser.io by changing the Phaser version to 'dev' and then clicking 'WebGL Debug' on any example. The renderer has the new methods available.

@photonstorm Twitter/X compression made this unable to watch properly, it's pixelated, can't see. Any chance to upload it elswhere?

[photonstorm]

@alamboley there's no need - just do what the instructions in my message said and you can see it for yourself (only you don't have to switch to 'dev' any more, as it's built into 3.60 versions)