R3F-Perf

Installation

yarn add --dev r3f-perf

Options

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

import { Canvas } from '@react-three/fiber'
import { Perf } from 'r3f-perf'
function App() {
 return (
 <Canvas>
 <Perf />
 </Canvas>
 )
}

Usage without interface : PerfHeadless

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 <PerfHeadless />
}
function App() {
 return (
 <Canvas>
 <PerfHook />
 </Canvas>
 )
}

Custom Data

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

Maintainers :