Code Monkey home page Code Monkey logo

gl-bench's Introduction

gl-bench Bundlephobia CircleCI Codecov

WebGL performance monitor that showing percentage of GPU/CPU load.

Screenshots

Examples / e2e tests

Pros and cons

Pros Cons
CPU/GPU percentage load Shipped only with ES6 classes
Cool themes and loggers Size not so tiny
Chart show inactive page or significant performance drop
Two and more measuring in one loop
Support for devices with 120+ FPS
Web workers support
Typescript support
It is 2x faster than Stats.js in Chrome accorging to stress test

How it works

For GPU/CPU synchronization I am use gl.getError(), it is better than gl.readPixels() at least for me. Code is asynchronous and not stall rendering pipeline by hitting CPU limit due to waiting GPU answer, so you can calculate your heavy physics on CPU with this monitor. If you want turn off GPU tracking just press on it with one click. Check online examples/e2e tests to find out how it works. Version 1 used the EXT_disjoint_timer_query extension, but it not supported on some pc anymore.

Usage with Three.js

Add script on page from npm or jsdelivr/unpkg and wrap monitored code with begin/end marks

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

Profiling with another WebGL frameworks

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

Custom settings

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) },
};

Contributing

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.

gl-bench's People

Contributors

munrocket avatar renovate-bot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.