# I Built a WebGPU Performance Monitor for React Three Fiber

> One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it…

Canonical page: https://andersonmancini.dev/videos/i-built-a-webgpu-performance-monitor-for-react-three-fiber

Published: 2026-06-09 · Duration: 0:43 · Category: Projects · Tags: three.js, react-three-fiber, webgpu, tutorial, source-code, webgl, creativecoding, r3f

Watch: [YouTube](https://www.youtube.com/watch?v=m6Qp978jEMk) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

I'm launching r3f-webgpu-perf today!

"npm i r3f-webgpu-perf"

One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet.

So I decided to build one.

Supports both WebGL and WebGPU

Modern and customizable UI

Lightweight and easy to integrate

Built specifically for React Three Fiber

## Links from the video

- [Source code on GitHub](https://github.com/ektogamat/r3f-webgpu-perf)
- [Live demo](https://www.npmjs.com/package/r3f-webgpu-perf)

## Related projects

- [r3f-webgpu-perf](https://andersonmancini.dev/projects/r3f-webgpu-perf.md) — Performance monitor for React Three Fiber

## Related articles

- [A performance panel for WebGPU, and the numbers it cannot give you](https://andersonmancini.dev/blog/r3f-webgpu-perf.md)