README

npm npm

R3F-Perf

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

antialias?: true, // Take a bit more performances but render the text with antialiasing
headless?: false, // Without UI. See Headless section
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
  info: '' // additional information about the data (fps/ms for instance)
}
chart?: {
  hz: 60, // graphs refresh frequency parameter
  length: 120, // number of values shown on the monitor
}
colorBlind?: false // Color blind colors for accessibility
className?: false // override CSS class
position?: 'top-right'|'top-left'|'bottom-right'|'bottom-left' // override position, default is top-right

Usage

import { Canvas } from '@react-three/fiber';
import { Perf } from 'r3f-perf';

<Canvas>
  <Perf />
</Canvas>;

Usage without interface : headless mode

import { Canvas } from '@react-three/fiber';
import { Perf, usePerf } from 'r3f-perf';

const PerfHook = () => {
  const { gl, log } = usePerf();
  console.log(gl, log);
  return null;
};

export default function App() {
  return (
    <Canvas>
      <Perf headless />
      <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

Feature ideas todo :

Buffer frame and Forward rendering differenciation in the "calls" section of the UI <-- PR WebGLInfos in Threejs
Postprocess shaders differenciation
Lights informations in the scene
Show the number of items receiving and casting shadow in the scene
Add an diagnostic button to find what consume the most CPU/GPU in the app for every loop

Maintainers :

twitter 🐈‍⬛ @onirenaud

Usage no npm install needed!