{"id":13774227,"url":"https://github.com/RenaudRohlinger/stats-gl","last_synced_at":"2025-05-11T06:32:39.507Z","repository":{"id":182068226,"uuid":"667506611","full_name":"RenaudRohlinger/stats-gl","owner":"RenaudRohlinger","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-10T04:36:37.000Z","size":4363,"stargazers_count":189,"open_issues_count":6,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-10T05:23:48.909Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stats.renaudrohlinger.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RenaudRohlinger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-07-17T16:55:50.000Z","updated_at":"2024-11-10T04:36:41.000Z","dependencies_parsed_at":"2024-03-14T11:45:24.070Z","dependency_job_id":"ff2237fe-548c-4f76-9ffe-83699b3c6259","html_url":"https://github.com/RenaudRohlinger/stats-gl","commit_stats":{"total_commits":42,"total_committers":4,"mean_commits":10.5,"dds":"0.11904761904761907","last_synced_commit":"d061e15fd5097669c5c0772a94647223ac5be2da"},"previous_names":["renaudrohlinger/stats-gl"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenaudRohlinger%2Fstats-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenaudRohlinger%2Fstats-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenaudRohlinger%2Fstats-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenaudRohlinger%2Fstats-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RenaudRohlinger","download_url":"https://codeload.github.com/RenaudRohlinger/stats-gl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225022045,"owners_count":17408542,"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":[],"created_at":"2024-08-03T17:01:24.826Z","updated_at":"2024-11-17T09:30:41.212Z","avatar_url":"https://github.com/RenaudRohlinger.png","language":"TypeScript","funding_links":[],"categories":["Debug","TypeScript","HTML"],"sub_categories":["Avatar"],"readme":"# 📈 stats-gl\n[![Version](https://img.shields.io/npm/v/stats-gl?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/stats-gl)\n[![Version](https://img.shields.io/npm/dw/stats-gl?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/stats-gl)\n\nWebGL/WebGPU Performance Monitor tool.\n\n🔗 [Live Demo](https://stats.renaudrohlinger.com/)\n\n\nhttps://github.com/RenaudRohlinger/stats-gl/assets/15867665/3fdafff4-1357-4872-9baf-0629dbaf9d8c\n\n\n### ❗📢 Note: To support GPU monitoring on Safari you need to enable Timer Queries under WebKit Feature Flags \u003e WebGL Timer Queries  \n\n## 📚 Description\n\n`stats-gl` is a comprehensive tool to monitor WebGL performance. The Stats class provides methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics logged include FPS, CPU, and GPU. The GPU logging is available only if the user's browser supports the WebGL 2.0 `EXT_disjoint_timer_query_webgl2` extension or WebGPU Timestamp Queries.\n\nIn addition to logging real-time performance data, the class also provides methods to calculate and display average performance metrics over a specified interval.\n\n## ⬇️ Installation\n\nStats-gl is available as an npm package. You can install it using the following command:\n\n```bash\nnpm install stats-gl\n```\n\n## 🧑‍💻 Example Usage\n\nBelow is an example of how you can use this class in your code:\n```js\nimport Stats from \"stats-gl\";\n\n// create a new Stats object\nconst stats = new Stats({\n    trackGPU: false,\n    trackHz: false,\n    trackCPT: false,\n    logsPerSecond: 4,\n    graphsPerSecond: 30,\n    samplesLog: 40, \n    samplesGraph: 10, \n    precision: 2, \n    horizontal: true,\n    minimal: false, \n    mode: 0\n});\n\n// append the stats container to the body of the document\ndocument.body.appendChild( stats.dom );\n\n// begin the performance monitor\nstats.begin();\n// end the performance monitor\nstats.end();\n\nstats.begin();\n// gl.draw... second pass\nstats.end();\n\n\n// when all the passes are drawn update the logs\nstats.update();\n```\n\n\nQuick start with threejs:\n```js\nimport * as THREE from 'three';\n\n// use esm module instead of cjs\nimport Stats from 'https://www.unpkg.com/stats-gl?module';\n\nconst container = document.getElementById( 'container' );\n\nconst stats = new Stats();\ncontainer.appendChild( stats.dom );\n\nconst renderer = new THREE.WebGLRenderer( { antialias: true } ); // or WebGPURenderer\ncontainer.appendChild( renderer.domElement );\n\nconst scene = new THREE.Scene();\n\nstats.init( renderer ); // this will patch the threejs render function so no need to call begin() or end()\n\nfunction animate() {\n\n    requestAnimationFrame( animate );\n\n    render(); // needs async methods in WebGPU (renderAsync)\n    stats.update();\n\n}\n```\nQuick start with [@react-three/fiber](https://github.com/pmndrs/fiber). A `\u003cStatsGl /\u003e` component is available through [@react-three/drei](https://github.com/pmndrs/drei):\n```jsx\nimport { Canvas } from '@react-three/fiber'\nimport { StatsGl } from '@react-three/drei'\n\nconst Scene = () =\u003e (\n    \u003cCanvas\u003e\n        \u003cStatsGl /\u003e\n    \u003c/Canvas\u003e\n)\n```\n\nQuick start with [Tresjs](https://tresjs.org/) for Vue developers. A `\u003cStatsGl /\u003e` component is available through [cientos](https://cientos.tresjs.org/guide/misc/stats-gl.html):\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { TresCanvas } from '@tresjs/core'\nimport { StatsGl } from '@tresjs/cientos'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTresCanvas\u003e\n    \u003cStatsGl /\u003e\n  \u003c/TresCanvas\u003e\n\u003c/template\u003e\n```\n## ⚙️ Parameters\nThe constructor for the Stats class accepts an options object with the following properties:\n\n- `logsPerSecond`: How often to log performance data, in logs per second.\n- `graphsPerSecond`: How often to update the graph, in graphs per second.\n- `trackGPU`: A boolean value to enable or disable GPU tracking.\n- `trackHz`: A boolean value to enable or disable Hz tracking.\n- `trackCPT`: (Threejs specific) A boolean value to enable or disable Threejs Compute Shading tracking.\n- `samplesLog`: Number of recent log samples to keep for computing averages.\n- `samplesGraph`: Number of recent graph samples to keep for computing averages.\n- `precision`: Precision of the data, in number of decimal places (only affects CPU and GPU).\n- `minimal`: A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.\n- `mode`: Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).\n- `horizontal`: Display the canvases on the X axis, set to align on vertical axis.\n\nAll the parameters are optional and have default values. The class also provides other methods such as begin(), end(), init(canvas), etc. which can be used based on the requirement.\n\n\n## 🤝 Contributing\nContributions to Stats-gl are welcome.\n\nPlease report any issues or bugs you encounter.\n\n## 📜 License\nThis project is licensed under the MIT License.\n\n## 🧑‍🎨 Maintainers :\n\n- [`twitter 🐈‍⬛ @onirenaud`](https://twitter.com/onirenaud)\n- [`twitter @utsuboco`](https://twitter.com/utsuboco)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRenaudRohlinger%2Fstats-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRenaudRohlinger%2Fstats-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRenaudRohlinger%2Fstats-gl/lists"}