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()