Package Exports

r3f-perf

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

Easily monitor the performances of your React-Three-Fiber application. r3f-perf.js is 6.23 KB and automatically removed in production. See Dev and production build

Installation

yarn add --dev r3f-perf

Options

headless?: false, // Without UI. See Headless section
showGraph?: true // show the graphs
colorBlind?: false // Color blind colors for accessibility
trackGPU?: true // show a graph of the GPU (Experimental, might not be relevant)
openByDefault?: false // show more informations by default
className?: false // override CSS class
position?: 'top-right'|'top-left'|'bottom-right'|'bottom-left' // override position, default is top-right

Usage

Simply add the the profiler component in your app

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

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/RenaudRohlinger/r3f-next-starter

Dev and production build

R3F-Perf is automatically removed from the production build based on the process.env.NODE_ENV.

To render R3F-Perf even in production :

import { Perf } from 'r3f-perf/dist/r3f-perf.cjs.development.js';

Todo

Position parameter
Values and graphs refresh frequency parameter
Fix graph SVG position if too low (not visible)

Maintainers :

twitter 🐈‍⬛ @onirenaud