https://github.com/utsuboco/r3f-perf
Easily monitor your ThreeJS performances.
https://github.com/utsuboco/r3f-perf
benchmark monitor performance performance-analysis performance-monitoring profiling r3f react threejs
Last synced: 6 months ago
JSON representation
Easily monitor your ThreeJS performances.
- Host: GitHub
- URL: https://github.com/utsuboco/r3f-perf
- Owner: utsuboco
- License: mit
- Created: 2021-01-01T19:41:33.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-12-20T13:58:53.000Z (11 months ago)
- Last Synced: 2025-05-08T22:41:55.845Z (6 months ago)
- Topics: benchmark, monitor, performance, performance-analysis, performance-monitoring, profiling, r3f, react, threejs
- Language: TypeScript
- Homepage: https://codesandbox.io/s/perlin-cubes-r3f-perf-wtp9t?file=/src/App.js
- Size: 4.09 MB
- Stars: 691
- Watchers: 6
- Forks: 27
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-webxr-development - R3F-Perf - badge] - Easily monitor the performances of your @react-three/fiber application (Debug / Avatar)
README
 
# R3F-Perf
**[Changelog](https://github.com/utsuboco/r3f-perf/blob/main/CHANGELOG.md)**
Easily monitor the performances of your @react-three/fiber application.
Add the Perf component anywhere in your Canvas.
## Installation
```bash
yarn add --dev r3f-perf
```
## Options
```jsx
logsPerSecond?: 10, // Refresh rate of the logs
antialias?: true, // Take a bit more performances but render the text with antialiasing
overClock?: false, // Disable the limitation of the monitor refresh rate for the fps
deepAnalyze?: false, // More detailed informations about gl programs
showGraph?: true // show the graphs
minimal?: false // condensed version with the most important informations (gpu/memory/fps/custom data)
customData?: {
value: 0, // initial value,
name: '', // name to show
round: 2, // precision of the float
info: '', // additional information about the data (fps/ms for instance)
}
matrixUpdate?: false // count the number of time matrixWorldUpdate is called per frame
chart?: {
hz: 60, // graphs refresh frequency parameter
length: 120, // number of values shown on the monitor
}
colorBlind?: false // Color blind colors for accessibility
className?: '' // override CSS class
style?: {} // override style
position?: 'top-right'|'top-left'|'bottom-right'|'bottom-left' // quickly set the position, default is top-right
```
## Usage
```jsx
import { Canvas } from '@react-three/fiber'
import { Perf } from 'r3f-perf'
function App() {
return (
)
}
```
#### Usage without interface : PerfHeadless
[Codesandbox Example](https://codesandbox.io/s/perlin-cubes-r3f-perf-headless-mh1jl7?file=/src/App.js)
```jsx
import { Canvas } from '@react-three/fiber'
import { PerfHeadless, usePerf } from 'r3f-perf'
const PerfHook = () => {
// getPerf() is also available for non-reactive way
const [gl, log, getReport] = usePerf((s) => s[(s.gl, s.log, s.getReport)])
console.log(gl, log, getReport())
return
}
function App() {
return (
)
}
```
## Custom Data
```jsx
import { setCustomData, getCustomData } from 'r3f-perf'
const UpdateCustomData = () => {
// recommended to throttle to 1sec for readability
useFrame(() => {
setCustomData(55 + Math.random() * 5) // will update the panel with the current information
})
return null
}
```
## SSR
The tool work with any server side rendering framework. You can try with Next and @react-three/fiber using this starter :
https://github.com/pmndrs/react-three-next
### Maintainers :
- [`twitter 🐈⬛ @onirenaud`](https://twitter.com/onirenaud)
- [`twitter @utsuboco`](https://twitter.com/utsuboco)