Aerostat

WebGL Performance Monitor

The library provides the following information:

• FPS: Frames per second
• Memory: Used JS heap size (only available in desktop browser)
• Drawcall: Count of draw passes in one frame.
• Triangles: Count of triangles rendered in one frame.
• Textures: Count of textures created by WebGL context.
• Shaders: Count of shaders attached to WebGL program.

Screenshots

Pixi.js and Three.js examples

Usage

Steps

• Install the package

npm i --save aerostat.js

• Create a instance of Aerostat Monitor and update in animation loop

import {Monitor} from 'aerostate'

// the parameter `canvas` is HTMLCanvasElement
var aerostat = new Monitor(canvas)

// update the monitor in an animation loop
aerostat.update()

3rd Party Libraries

It works in all WebGL libraries or frameworks.

• Pixi.js Example

var app = new PIXI.Application(width, height, { backgroundColor: 0x0199bb })

var aerostate = new Monitor(app.view)

// update
app.ticker.add(() => {
    aerostat.update()
})

• Three.js Example

var renderer = new THREE.WebGlRenderer({ antialias: true })

var aerostat = new Monitor(renderer.domElement)

// update
function animate() {
    requestionAnimationFrame(animate)
    aerostat.update()
}

animate()