Package Exports

r3f-perf
r3f-perf/dist/r3f-perf.cjs.js
r3f-perf/dist/r3f-perf.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (r3f-perf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm npm

R3F-Perf

Changelog

Easily monitor the performances of your @react-three/fiber application.

Add the Perf component anywhere in your Canvas.

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

Codesandbox Example

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

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

r3f-perf