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.

$3

!fps.png
!ms.png
!mb.png
!custom.png

$3

#### Live demo

- https://nenjack.github.io/make2d/demo/?fps (pixi.js)

- https://nenjack.github.io/make3d/demo/?fps (three.js)

#### 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, ticker, element)
`

$3

#### 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)
`

$3

`bash
npm install pixi-stats --save
`

$3

`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;
}
``

$3

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/nenjack/ - maintainer, fixes, updates

$3

MIT