0.0.9 ā¢ Published 5 years ago
gl-perf v0.0.9
GLPerf
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.
ScreenShots
Pixi.js example and Three.js example
Usage
Steps
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()
Play With Other Libraries
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()