JSPM

r3f-perf

0.91.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 41755
  • Score
    100M100P100Q149565F
  • License MIT

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 dependencies Status devDependencies Status npm

R3F-Perf

image

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
chart?: {
  hz: 10, // graphs refresh frequency parameter
  length: 30, // number of values shown on the monitor
}
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/pmndrs/react-three-next

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';

You can also set the custom env variable process.env.R3F_PERF_SHOW_IN_PROD === 'SHOW'

Todo

Maintainers :