https://github.com/prozi/pixi-stats
WebGL stats for pixi.js or/and three.js
https://github.com/prozi/pixi-stats
draw-calls fps frame memory memory-leak monitor pixi-stats pixijs textures three-js-tool threejs
Last synced: about 1 month ago
JSON representation
WebGL stats for pixi.js or/and three.js
- Host: GitHub
- URL: https://github.com/prozi/pixi-stats
- Owner: Prozi
- License: mit
- Created: 2021-04-06T00:12:39.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-06T11:45:10.000Z (about 1 month ago)
- Last Synced: 2025-05-07T04:09:30.370Z (about 1 month ago)
- Topics: draw-calls, fps, frame, memory, memory-leak, monitor, pixi-stats, pixijs, textures, three-js-tool, threejs
- Language: TypeScript
- Homepage:
- Size: 265 KB
- Stars: 24
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pixi-stats
[
](https://www.npmjs.com/package/pixi-stats?activeTab=versions)
[
](https://www.npmjs.com/package/pixi-stats)
#### JavaScript Performance Monitor
This library provides an info box that will help you monitor your code performance.
- **FPS** Frames rendered in the last second. The higher the number the better.
- **MS** Milliseconds needed to render a frame. The lower the number the better.
- **MB** MBytes of allocated memory. (Run Chrome with `--enable-precise-memory-info`)
- **DC** Draw Calls made within one frame.
- **TC** Texture Count used within one frame.
- **CUSTOM** User-defined panel support.
### Screenshots
### pixi.js
#### Live demo
https://prozi.github.io/oneforall/demo/?fps
#### Usage
```ts
import { Application } from 'pixi.js';
import { Stats } from 'pixi-stats';
const { renderer } = new Application();
const stats = new Stats(renderer);
```
#### Parameters
```ts
const element = document.querySelector('#your_container');
const ticker = PIXI.ticker;
new Stats(renderer, element, ticker);
```
### three.js
#### Live demo
https://legacyofpain.app/?fps
#### Usage
```ts
import { Renderer } from 'three';
import { Stats } from 'pixi-stats';
const renderer = new Renderer();
const stats = new Stats(renderer);
```
### Installation
```bash
npm install pixi-stats --save
```
### Set CSS
```css
#stats {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
#stats canvas {
width: max(100px, 10vw, 10vh);
height: max(60px, 6vh, 6vw);
user-select: none;
}
```
### Contributors
The credit goes to:
- https://github.com/mrdoob/stats.js/ - FPS, MS, MB counters
- https://github.com/eXponenta/gstatsjs/ - DC, TC counters
- https://github.com/Prozi/ - maintainer, fixes, updates
### License
MIT
### You can buy me a coffee
https://paypal.me/jacekpietal