{"id":15044711,"url":"https://github.com/munrocket/gl-bench","last_synced_at":"2025-05-16T00:06:31.609Z","repository":{"id":40668715,"uuid":"202475350","full_name":"munrocket/gl-bench","owner":"munrocket","description":"⏳ WebGL performance monitor with CPU/GPU load.","archived":false,"fork":false,"pushed_at":"2025-05-02T10:32:58.000Z","size":711,"stargazers_count":186,"open_issues_count":9,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-02T11:40:31.721Z","etag":null,"topics":["benchmark","monitor","performance","profiling","threejs","webgl","webgl2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/munrocket.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-08-15T04:43:04.000Z","updated_at":"2025-04-29T02:16:04.000Z","dependencies_parsed_at":"2024-04-15T11:06:22.936Z","dependency_job_id":"78a6c542-7302-4f84-853b-76949c1d59d8","html_url":"https://github.com/munrocket/gl-bench","commit_stats":{"total_commits":169,"total_committers":8,"mean_commits":21.125,"dds":0.514792899408284,"last_synced_commit":"af5fcf9d43bd0940f1e28d6b43b3f42e218d71de"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munrocket%2Fgl-bench","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munrocket%2Fgl-bench/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munrocket%2Fgl-bench/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munrocket%2Fgl-bench/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/munrocket","download_url":"https://codeload.github.com/munrocket/gl-bench/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253932866,"owners_count":21986468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["benchmark","monitor","performance","profiling","threejs","webgl","webgl2"],"created_at":"2024-09-24T20:50:56.356Z","updated_at":"2025-05-16T00:06:31.496Z","avatar_url":"https://github.com/munrocket.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gl-bench [![Bundlephobia](https://badgen.net/bundlephobia/minzip/gl-bench)](https://bundlephobia.com/result?p=gl-bench) [![CircleCI](https://badgen.net/github/status/munrocket/gl-bench)](https://circleci.com/gh/munrocket/gl-bench) [![Codecov](https://img.shields.io/codecov/c/github/munrocket/gl-bench.svg)](https://codecov.io/gh/munrocket/gl-bench)\n\nWebGL performance monitor that showing percentage of GPU/CPU load.\n\n### Screenshots\n![](https://habrastorage.org/webt/vb/ys/pz/vbyspz0emcxkslj0c-u0toxbom0.png)\n\n### Examples / e2e tests\n- [webgl](https://munrocket.github.io/gl-bench/examples/webgl.html)\n- [webgl2](https://munrocket.github.io/gl-bench/examples/webgl2.html)\n- [new-loggers](https://munrocket.github.io/gl-bench/examples/new-loggers.html)\n- [named-measuring](https://munrocket.github.io/gl-bench/examples/named-measuring.html)\n- [instanced-arrays](https://munrocket.github.io/gl-bench/examples/instanced-arrays.html)\n- [float-textures](https://munrocket.github.io/gl-bench/examples/float-textures.html)\n- [web-workers](https://munrocket.github.io/gl-bench/examples/web-workers.html)\n\n### Pros and cons\n|                        Pros                                      |             Cons                         |\n|------------------------------------------------------------------|------------------------------------------|\n| CPU/GPU percentage load                                          | Shipped only with ES6 classes            |\n| Cool themes and loggers                                          | Size not so tiny                         |\n| Chart show inactive page or significant performance drop         | Not too easy to add on a page            |\n| Two and more measuring in one loop                               |                                          |\n| Support for devices with 120+ FPS                                |                                          |\n| Web workers support                                              |                                          |\n| Typescript support                                               |                                          | \n| It is 2x faster than Stats.js in Chrome accorging to stress test |                                          |\n\n### How it works\nFor 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](https://caniuse.com/#search=disjoint_timer_query) on some pc anymore.\n\n### Usage with Three.js\nAdd script on page from [npm](https://www.npmjs.com/package/gl-bench) or [jsdelivr](https://cdn.jsdelivr.net/npm/gl-bench/dist/gl-bench.min.js)/[unpkg](https://unpkg.com/gl-bench/dist/gl-bench.min.js) and wrap monitored code with begin/end marks\n```javascript\nimport GLBench from 'gl-bench/dist/gl-bench';\nlet bench = new GLBench(renderer.getContext());\n\nfunction draw(now) {\n  bench.begin();\n  // monitored code\n  bench.end();\n  bench.nextFrame(now);\n}\n\nrenderer.setAnimationLoop((now) =\u003e draw(now));\n```\n\n### Using TypeScript\nReplace ``import GLBench from 'gl-bench/dist/gl-bench';`` into ``import GLBench from 'gl-bench/dist/gl-bench.module';``\n\n### Profiling with another WebGL frameworks\n```javascript\nlet gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');\nlet bench = new GLBench(gl);\n\n// engine initialization with instanced_arrays/draw_buffers webgl1 extensions goes after!\n\nfunction draw(now) {\n  bench.begin('first measure');\n  // some bottleneck\n  bench.end('first measure');\n\n  bench.begin('second measure');\n  // some bottleneck\n  bench.end('second measure');\n\n  bench.nextFrame(now);\n  requestAnimationFrame(draw);\n}\nrequestAnimationFrame(draw);\n```\n\n### Custom settings\n```javascript\nlet bench = new GLBench(gl, {\n  css: 'newStyleString',\n  svg: 'newSvgString',\n  dom: newDomContainer,\n  withoutUI: false,\n  trackGPU: false,      // don't track GPU load by default\n  chartHz: 20,          // chart update speed\n  chartLen: 20,\n  paramLogger: (i, cpu, gpu, mem, fps, totalTime, frameId) =\u003e { console.log(cpu, gpu) },\n  chartLogger: (i, chart, circularId) =\u003e { console.log('chart circular buffer=', chart) },\n};\n```\n\n### Contributing\nFork this repository and install the dependencies, after that you can start dev server with `npm run dev`\nand open examples in browser `localhost:1234`.\n\n[//]: # (posible optimizations: delete array clone, get rid of self)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunrocket%2Fgl-bench","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmunrocket%2Fgl-bench","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunrocket%2Fgl-bench/lists"}