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

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

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> ) }

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 }