WebGL performance monitor that showing percentage of GPU/CPU load
npm install gl-benchWebGL performance monitor that showing percentage of GPU/CPU load.
javascript
import GLBench from 'gl-bench/dist/gl-bench';
let bench = new GLBench(renderer.getContext());function draw(now) {
bench.begin();
// monitored code
bench.end();
bench.nextFrame(now);
}
renderer.setAnimationLoop((now) => draw(now));
`$3
Replace import GLBench from 'gl-bench/dist/gl-bench'; into import GLBench from 'gl-bench/dist/gl-bench.module';$3
`javascript
let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
let bench = new GLBench(gl);// engine initialization with instanced_arrays/draw_buffers webgl1 extensions goes after!
function draw(now) {
bench.begin('first measure');
// some bottleneck
bench.end('first measure');
bench.begin('second measure');
// some bottleneck
bench.end('second measure');
bench.nextFrame(now);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
`$3
`javascript
let bench = new GLBench(gl, {
css: 'newStyleString',
svg: 'newSvgString',
dom: newDomContainer,
withoutUI: false,
trackGPU: false, // don't track GPU load by default
chartHz: 20, // chart update speed
chartLen: 20,
paramLogger: (i, cpu, gpu, mem, fps, totalTime, frameId) => { console.log(cpu, gpu) },
chartLogger: (i, chart, circularId) => { console.log('chart circular buffer=', chart) },
};
`$3
Fork this repository and install the dependencies, after that you can start dev server with npm run dev
and open examples in browser localhost:1234`.[//]: # (posible optimizations: delete array clone, get rid of self)