WebGL Performance Monitor
🚀 The class provides informations below:
- FPS: Frames per second. 60 fps is perfect. ⬆ High is better.
- Memory: Used JS heap size. ⬇ Low is better. (Only available in desktop browser)
- Drawcall: Count of draw passes in one frame. ⬇ Low is better.
- Triangles: Count of triangles rendered in one frame. ⬇ Low is better.
- Textures: Count of textures created by WebGL context. ⬇ Low is better.
- Shaders: Count of shaders attached to WebGL program. ⬇ Low is better.
Pixi.js example and Three.js example
-
Install the package
npm i --save gl-perf
-
Create a instance of GLPerf Monitor and update in animation loop
import {Monitor} from 'gl-perf' // the parameter `canvas` is HTMLCanvasElement var glPerf = new Monitor(canvas) // update the monitor in an animation loop glPerf.update()
It works in all WebGL Libraries or Frameworks.
-
Pixi.js Example
var app = new PIXI.Application(width, height, { backgroundColor : 0x1099bb }) var glPerf = new Monitor(app.view) // update app.ticker.add(() => { glPerf.update() })
-
Three.js Example
var renderer = new THREE.WebGLRenderer( { antialias: true } ) var glPerf = new Monitor(renderer.domElement) // update function animate() { requestAnimationFrame( animate ) glPerf.update() } animate()