Performance, Batch Rendering, Draw Calls

[ammychoice]

Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?

[ivan.popelyshev]

In general, app performance is the art of balancing stuff. It doesn't matter whether you have 10 or100 drawcalls if you draw all the pixels on retina screen 10 times

Pixi renders elements in their order in the tree. If it draws several sprites with same blendMode, and maybe same baseTexture (or several, shader is multi-textured), it draws them in one drawcall. So, different blendMode breaks batch for sure. 

To count number of drawcalls you can override "renderer.gl.drawElements" or just use existing plugin for it: https://github.com/eXponenta/gstatsjs

If you use at least one sprite with additive blendMode - your app is ruined. Its a joke. 1 drawcall doesn't matter. Just keep the number below 50 for mobile and below 200 for PC and you'll be OK.

I see that you only have one water sprite, and I doubt you use it many times on scene - so its not important at all. There's a trick that allows to batch normals and additives together but I don't have an example for it right now. Its very easy if you know how exactly blending works.

As for sequences the common problems is  memory. Size of files is not important - size of images is. Every pixels costs 4 bytes in common memory when image is decoded and when its uploaded it costs 4 more. Also uploading induces the lag first time its drawn, you have to use PREPARE plugin (packaged with pixi) or manually "renderer.texture.bind()" all your baseTextures before you start the game scene.

[ivan.popelyshev]

If you want to be calm, you can just use https://spector.babylonjs.com/ (don't use with gstatjs at the same time!) and look at webgl commands that pixi generates in one frame.

[ammychoice]

Thanks for the answer, I'm not a programmer, but an animator, but I check our game through spector js, and I see a large number of drawCalls. I think that it is clearly implemented here that the tone is correct. The developers respond to this that the number of drawCall does not matter. Can you check on spector JS this game? and say what wrong?
http://evoplay.games/portfolio/legend-of-kaan/
174 drawCalls

I think they dont know how to do right.

[ammychoice]

or this game. http://evoplay.games/portfolio/reign-of-dragons/

[ammychoice]

И тебе же на русском писать можно?

[ivan.popelyshev]

10 minutes ago, ammychoice said:

И тебе же на русском писать можно?

t.me/hackerham

[8Observer8]

8 hours ago, ammychoice said:

И тебе же на русском писать можно?

English only!

Но иногда можно

Edited January 18, 2020 by 8Observer8

[Justclimber]

https://spector.babylonjs.com/  site seems to be not worked for me, any ideas why?

[ivan.popelyshev]

@Justclimber

Its here: https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk

[djlastnight]

Hi there. I wish to share my final solution regarding draw calls computation in case someone needs it.

The code below must be in class, which inherits the pixi Application.
 

// here are the fields

    private gl: IRenderingContext;
    private realDrawElements: Function;
    private realWebGLClear: Function;
    private drawCalls: number;

// here is the snippet from the App constructor
        this.gl = (this.renderer as Renderer)?.gl;
        if (this.gl) {
            // @ts-ignore
            this.realDrawElements = this.gl.__proto__.drawElements;
            // @ts-ignore
            this.realWebGLClear = this.gl.__proto__.clear;

            // @ts-ignore
            this.gl.__proto__.drawElements = this.fakeDrawElements.bind(this);
            // @ts-ignore
            this.gl.__proto__.clear = this.fakeWebGLClear.bind(this);
        }

// Here are the fake methods    
private fakeDrawElements(mode: number, count: number, type: number, offset: number): void {
        this.drawCalls++;
        this.realDrawElements.call(this.gl, mode, count, type, offset);
    }

    private fakeWebGLClear(bitmask: number): void {
        if (bitmask == 16640) {
          // HERE IS THE PLACE WHERE YOU HAVE THE DRAW CALLS COMPUTED.
          // IN MY CASE I AM RAISING AN EVENT, BUT THIS WON'T COMPILE FOR YOU.
            App.dispatcher.emit(GameEvents.DRAW_CALLS_COMPUTED, this.drawCalls);
          
          // After this we reset the draw calls back to 0.
            this.drawCalls = 0;
        }

        this.realWebGLClear.call(this.gl, bitmask);
    }