getkey / gstatsjs

Graphics statistic (DrawCalls and TextureCount) for WebGL

gstatsjs

This is a fork of eXponenta's gstatsjs that can be imported as a ES6 module. Additionally, it can be installed from NPM. More informations here.

It also drops support of Pixi v4 in favor of v5.

npm install gstats # for npm users
yarn add gstats # alternatively, for yarn users

Graphics statistics (Texture count, DrawPasses) for WebGL applications. Capability with stats.js

Remarks

Due to bug of cacheAsBitmap on Graphics on PIXIv4, TextureCounter incorrectly gets the number of textures.

Currently Draw Calls counter can't work on Phaser 3, because Phaser 3 use DrawArrays for rendering WebGL instead DrawElements. Textures amount for Phaser 2 and 3 is relative value, and may be negative.

Examples

PIXI Stats.js example - show PIXI game Draw Calls and Textures Count statistics by Stas.js.

Phaser 2 CE Stats.js example - show Phaser 2 CE game Draw Calls and Textures Count statistics by Stas.js.

Textures amount for Phaser is relative value, and may be negative.

Phaser 3 Stats.js example - show Phaser 3 Textures Count statistics by Stas.js.

How i can destroy sprite in Phaser 3 with its texture ?

Currently DC can't work, because Phaser 3 use DrawArrays for rendering WebGL. Textures amount for Phaser3 is relative value, and may be negative.

Using

PIXI & Stats.js

var app = new PIXI.Application (options);
var pixiHooks = new GStats.PIXIHooks(app);
var stats = new GStats.StatsJSAdapter(pixiHooks);
document.body.appendChild(stats.stats.dom || stats.stats.domElement);
app.ticker.add(stats.update);

Phaser 2/3 & Stats.js

var game = new Phaser.Game(options);
var phaserHooks = new GStats.PhaserHooks(game);
var stats = new GStats.StatsJSAdapter(phaserHooks);
document.body.appendChild(stats.stats.dom || stats.stats.domElement);

//or other update function
function update() {
    stats.update();
}

PIXI/Phaser & Show stats in app context

coming soon...

Raw WebGL & Stats.js

var gl = // WebGL2RenderingContext;
var baseHooks = new GStats.BaseHooks();
    baseHooks.attach(gl);
var stats = new GStats.StatsJSAdapter(baseHooks);

document.body.appendChild(stats.stats.dom || stats.stats.domElement);

//or other update function
function update() {
    stats.update();
}

TypeScript

Go to gstats.d.ts