git.iko.soy/rowtype-yoga/yoga-r3f
on main help sign in
rowtype-yoga/yoga-r3f/node_modules/r3f-perf/README.md
112 lines 3.0 kB history raw
1![npm](https://img.shields.io/npm/v/r3f-perf) ![npm](https://img.shields.io/npm/dw/r3f-perf)
3# R3F-Perf
5**[Changelog](https://github.com/utsuboco/r3f-perf/blob/main/CHANGELOG.md)**
7Easily monitor the performances of your @react-three/fiber application.
9<table>
10 <tr>
11 <td>Add the Perf component anywhere in your Canvas.</td>
12 <td>
13<a href="https://wtp9t.csb.app/">
14 <img src="https://user-images.githubusercontent.com/15867665/215722804-3b4ee71c-d205-429b-8cae-f915bf60d56c.png" /></td>
15</a>
16 </tr>
17</table>
19## Installation
21```bash
22yarn add --dev r3f-perf
23```
25## Options
27```jsx
28logsPerSecond?: 10, // Refresh rate of the logs
29antialias?: true, // Take a bit more performances but render the text with antialiasing
30overClock?: false, // Disable the limitation of the monitor refresh rate for the fps
31deepAnalyze?: false, // More detailed informations about gl programs
32showGraph?: true // show the graphs
33minimal?: false // condensed version with the most important informations (gpu/memory/fps/custom data)
34customData?: {
35 value: 0, // initial value,
36 name: '', // name to show
37 round: 2, // precision of the float
38 info: '', // additional information about the data (fps/ms for instance)
40matrixUpdate?: false // count the number of time matrixWorldUpdate is called per frame
41chart?: {
42 hz: 60, // graphs refresh frequency parameter
43 length: 120, // number of values shown on the monitor
45colorBlind?: false // Color blind colors for accessibility
46className?: '' // override CSS class
47style?: {} // override style
48position?: 'top-right'|'top-left'|'bottom-right'|'bottom-left' // quickly set the position, default is top-right
49```
51## Usage
53```jsx
54import { Canvas } from '@react-three/fiber'
55import { Perf } from 'r3f-perf'
57function App() {
58 return (
59 <Canvas>
60 <Perf />
61 </Canvas>
62 )
64```
66#### Usage without interface : PerfHeadless
68[Codesandbox Example](https://codesandbox.io/s/perlin-cubes-r3f-perf-headless-mh1jl7?file=/src/App.js)
70```jsx
71import { Canvas } from '@react-three/fiber'
72import { PerfHeadless, usePerf } from 'r3f-perf'
74const PerfHook = () => {
75 // getPerf() is also available for non-reactive way
76 const [gl, log, getReport] = usePerf((s) => s[(s.gl, s.log, s.getReport)])
77 console.log(gl, log, getReport())
78 return <PerfHeadless />
81function App() {
82 return (
83 <Canvas>
84 <PerfHook />
85 </Canvas>
86 )
88```
90## Custom Data
92```jsx
93import { setCustomData, getCustomData } from 'r3f-perf'
95const UpdateCustomData = () => {
96 // recommended to throttle to 1sec for readability
97 useFrame(() => {
98 setCustomData(55 + Math.random() * 5) // will update the panel with the current information
99 })
100 return null
102```
104## SSR
106The tool work with any server side rendering framework. You can try with Next and @react-three/fiber using this starter :
107https://github.com/pmndrs/react-three-next
109### Maintainers :
111- [`twitter 🐈‍⬛ @onirenaud`](https://twitter.com/onirenaud)
112- [`twitter @utsuboco`](https://twitter.com/utsuboco)