{"_id":"r3f-webgpu-perf","_rev":"5-96a16828355f878034f90e7e02191613","name":"r3f-webgpu-perf","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"r3f-webgpu-perf","version":"0.1.0","keywords":["react","three","webgpu","r3f","performance","monitor","profiling"],"author":{"name":"Anderson Mancini"},"license":"MIT","_id":"r3f-webgpu-perf@0.1.0","maintainers":[{"name":"andersonmancini","email":"andersonmancini30@gmail.com"}],"homepage":"https://github.com/ektogamat/r3f-webgpu-perf","bugs":{"url":"https://github.com/ektogamat/r3f-webgpu-perf/issues"},"dist":{"shasum":"538e10362a275e19a899b0aad2b3a6d9d36c108e","tarball":"https://registry.npmjs.org/r3f-webgpu-perf/-/r3f-webgpu-perf-0.1.0.tgz","fileCount":6,"integrity":"sha512-jR1BPegkV9tYqOvLSzYtn4KZBYmWFymyhhjILWhVBE6WgHLV23+yPbUFc3ExYKhvf77QWVMW2ZUlX+zimaDc4g==","signatures":[{"sig":"MEUCIQCeM7YNlM/36nQCrFf1Q9CTyLTarcY+cZH1ZKNzQ4re+wIgTlU0Rb9+XeptGVfpnxINTiWDg6x4SukLRZzau80LCAM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64405},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"4bae95b44c56763863c9b4dea4cbc4ead3004f30","scripts":{"dev":"vite","build":"BUILD_LIB=true vite build && node scripts/generate-types.mjs","prepublishOnly":"npm run build"},"_npmUser":{"name":"andersonmancini","email":"andersonmancini30@gmail.com"},"repository":{"url":"git+https://github.com/ektogamat/r3f-webgpu-perf.git","type":"git"},"_npmVersion":"10.9.3","description":"Monitor WebGPU/WebGL performance in React Three Fiber apps.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.20.0","dependencies":{"valtio":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.0","three":"^0.170.0","react-dom":"^18.3.0","@react-three/fiber":"^8.17.0","@vitejs/plugin-react":"^4.3.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":">=18.0","three":">=0.150.0","react-dom":">=18.0","@react-three/fiber":">=8.0"},"_npmOperationalInternal":{"tmp":"tmp/r3f-webgpu-perf_0.1.0_1780950944109_0.18965084983577163","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"r3f-webgpu-perf","version":"0.1.1","keywords":["react","three","webgpu","r3f","performance","monitor","profiling"],"author":{"name":"Anderson Mancini"},"license":"MIT","_id":"r3f-webgpu-perf@0.1.1","maintainers":[{"name":"andersonmancini","email":"andersonmancini30@gmail.com"}],"homepage":"https://r3f-webgpu-perf.vercel.app","bugs":{"url":"https://github.com/ektogamat/r3f-webgpu-perf/issues"},"dist":{"shasum":"e1099ae42936f32b186f2b83d4f3e9a7c808a1ed","tarball":"https://registry.npmjs.org/r3f-webgpu-perf/-/r3f-webgpu-perf-0.1.1.tgz","fileCount":6,"integrity":"sha512-EJ0FoKYpEwSK1CmFjp3N68ZpP4/rlunQ9vrSQST+8X0J0wAKkB+tJab4LGLURSGCLAk2TATRp1iDtP8cBfQrCg==","signatures":[{"sig":"MEUCIQDHzpOAYm2gNIOmDS3gRC7Y07Y+YVOov/iZKIMHTKpj6AIgc5S3QmK2qqMwsJTnj+FwYbsz2+sh12yCDlfrXe9yEAA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65076},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"db3459fc1740ec1342f9fcab7764dfbedc9f1cbf","scripts":{"dev":"vite","build":"BUILD_LIB=true vite build && node scripts/generate-types.mjs","deploy":"vercel --prod","build:demo":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"andersonmancini","email":"andersonmancini30@gmail.com"},"repository":{"url":"git+https://github.com/ektogamat/r3f-webgpu-perf.git","type":"git"},"_npmVersion":"10.9.3","description":"Monitor WebGPU/WebGL performance in React Three Fiber apps.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.20.0","dependencies":{"valtio":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.0","three":"^0.170.0","vercel":"^39.0.0","react-dom":"^18.3.0","@react-three/fiber":"^8.17.0","@vitejs/plugin-react":"^4.3.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":">=18.0","three":">=0.150.0","react-dom":">=18.0","@react-three/fiber":">=8.0"},"_npmOperationalInternal":{"tmp":"tmp/r3f-webgpu-perf_0.1.1_1780951597119_0.5548747038022626","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"r3f-webgpu-perf","version":"0.1.2","keywords":["react","three","webgpu","r3f","performance","monitor","profiling"],"author":{"name":"Anderson Mancini"},"license":"MIT","_id":"r3f-webgpu-perf@0.1.2","maintainers":[{"name":"andersonmancini","email":"andersonmancini30@gmail.com"}],"homepage":"https://r3f-webgpu-perf.vercel.app","bugs":{"url":"https://github.com/ektogamat/r3f-webgpu-perf/issues"},"dist":{"shasum":"2a10ad31f9065c6f33416ce595e58ee348149b25","tarball":"https://registry.npmjs.org/r3f-webgpu-perf/-/r3f-webgpu-perf-0.1.2.tgz","fileCount":9,"integrity":"sha512-PhC0lcfoRNvzwWb6ll/CdOUrPNt3V/PIl+z/2dfdg+a9UfrkE0FGGjWlbsYZ1fdILItZKlU189mKxyVRIvqGfg==","signatures":[{"sig":"MEUCIEREgbz8U0tsaV2VXh94kn7nTKb+7KEFqfyO1Tu9jS6yAiEAzdsJeDMkkc2XOOiZPQmKe3gWRuTv2XwVttt4GIF1o5o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":318924},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"9b8d749c4c625e8391ad2f80e9efcd9261224d4b","scripts":{"dev":"vite","build":"BUILD_LIB=true vite build && node scripts/generate-types.mjs","deploy":"vercel --prod","build:demo":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"andersonmancini","email":"andersonmancini30@gmail.com"},"repository":{"url":"git+https://github.com/ektogamat/r3f-webgpu-perf.git","type":"git"},"_npmVersion":"10.9.3","description":"Monitor WebGPU/WebGL performance in React Three Fiber apps.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.20.0","dependencies":{"valtio":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^19.2.7","three":"^0.184.0","vercel":"^54.0.0","react-dom":"^19.2.7","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.6.1","@vitejs/plugin-react":"^4.3.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":">=18.0","three":">=0.150.0","react-dom":">=18.0","@react-three/fiber":">=8.0"},"_npmOperationalInternal":{"tmp":"tmp/r3f-webgpu-perf_0.1.2_1780963679075_0.9437609188579907","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"r3f-webgpu-perf","version":"0.1.3","keywords":["react","three","webgpu","r3f","performance","monitor","profiling"],"author":{"name":"Anderson Mancini"},"license":"MIT","_id":"r3f-webgpu-perf@0.1.3","maintainers":[{"name":"andersonmancini","email":"andersonmancini30@gmail.com"}],"homepage":"https://r3f-webgpu-perf.vercel.app","bugs":{"url":"https://github.com/ektogamat/r3f-webgpu-perf/issues"},"dist":{"shasum":"ab44fb3331aa158a9a3bb347cb337644623d91ac","tarball":"https://registry.npmjs.org/r3f-webgpu-perf/-/r3f-webgpu-perf-0.1.3.tgz","fileCount":9,"integrity":"sha512-yqikQ0jaYFlOmE/aO+bZqO7Mu44gDW2JFqXIcEQCglEsduBwEQ7+6aZDzpCHOGFHffQ+40pGHs+vb0EAOEN+0A==","signatures":[{"sig":"MEUCIEIFBRZ85IE9nktHSAIUbxpBpvHB93+FmcU7UXyPajCYAiEAuNH8hFFpMrFHdfqVBJ4bPcBIks51IKGKbBPEElnzUfQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":320428},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"aa11719ff515146b7322c4f2a61ae92ad170c075","scripts":{"dev":"vite","build":"BUILD_LIB=true vite build && node scripts/generate-types.mjs","deploy":"vercel --prod","build:demo":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"andersonmancini","email":"andersonmancini30@gmail.com"},"repository":{"url":"git+https://github.com/ektogamat/r3f-webgpu-perf.git","type":"git"},"_npmVersion":"10.9.3","description":"Monitor WebGPU/WebGL performance in React Three Fiber apps.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.20.0","dependencies":{"valtio":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^19.2.7","three":"^0.184.0","vercel":"^54.0.0","react-dom":"^19.2.7","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.6.1","@vitejs/plugin-react":"^4.3.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"react":">=18.0","three":">=0.150.0","react-dom":">=18.0","@react-three/fiber":">=8.0"},"_npmOperationalInternal":{"tmp":"tmp/r3f-webgpu-perf_0.1.3_1780965841890_0.2659527751522892","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"r3f-webgpu-perf","version":"0.1.4","description":"Monitor WebGPU/WebGL performance in React Three Fiber apps.","keywords":["react","three","webgpu","r3f","performance","monitor","profiling"],"author":{"name":"Anderson Mancini"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ektogamat/r3f-webgpu-perf.git"},"homepage":"https://r3f-webgpu-perf.vercel.app","bugs":{"url":"https://github.com/ektogamat/r3f-webgpu-perf/issues"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"BUILD_LIB=true vite build && node scripts/generate-types.mjs","build:demo":"vite build","deploy":"vercel --prod","prepublishOnly":"npm run build"},"dependencies":{"valtio":"^2.1.0"},"peerDependencies":{"@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.150.0"},"devDependencies":{"@react-three/drei":"^10.7.7","@react-three/fiber":"^9.6.1","@vitejs/plugin-react":"^4.3.0","react":"^19.2.7","react-dom":"^19.2.7","three":"^0.184.0","vercel":"^54.0.0","vite":"^5.4.0","vite-plugin-css-injected-by-js":"^3.5.2"},"_id":"r3f-webgpu-perf@0.1.4","gitHead":"27f235e97f5bcecf5fe201153a5728bba25267cf","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-Zp76mjw2lGslrFaqQ6N3WRjkFsMkH1XGcxI+pDX5EMedvfVnXvYicn6jJGk2rsEidHWdY2XJfwpBpfGJrqXBNg==","shasum":"14f115ac126120524b39f89275e646595ff8f998","tarball":"https://registry.npmjs.org/r3f-webgpu-perf/-/r3f-webgpu-perf-0.1.4.tgz","fileCount":9,"unpackedSize":322470,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF+uRcY+cbzxiCXiLPyRHoU7fZB/q3f155JXx4h7myTdAiAUmqw+nDu7bH14gF04U17KDevUlabBBW9FUyPrH7gGxg=="}]},"_npmUser":{"name":"andersonmancini","email":"andersonmancini30@gmail.com"},"directories":{},"maintainers":[{"name":"andersonmancini","email":"andersonmancini30@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/r3f-webgpu-perf_0.1.4_1780967351580_0.9777039965435061"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-08T20:35:43.939Z","modified":"2026-06-09T01:09:11.867Z","0.1.0":"2026-06-08T20:35:44.273Z","0.1.1":"2026-06-08T20:46:37.252Z","0.1.2":"2026-06-09T00:07:59.256Z","0.1.3":"2026-06-09T00:44:02.109Z","0.1.4":"2026-06-09T01:09:11.753Z"},"bugs":{"url":"https://github.com/ektogamat/r3f-webgpu-perf/issues"},"author":{"name":"Anderson Mancini"},"license":"MIT","homepage":"https://r3f-webgpu-perf.vercel.app","keywords":["react","three","webgpu","r3f","performance","monitor","profiling"],"repository":{"type":"git","url":"git+https://github.com/ektogamat/r3f-webgpu-perf.git"},"description":"Monitor WebGPU/WebGL performance in React Three Fiber apps.","maintainers":[{"name":"andersonmancini","email":"andersonmancini30@gmail.com"}],"readme":"# r3f-webgpu-perf\n\n[![npm version](https://img.shields.io/npm/v/r3f-webgpu-perf.svg)](https://www.npmjs.com/package/r3f-webgpu-perf)\n[![license](https://img.shields.io/npm/l/r3f-webgpu-perf.svg)](https://github.com/ektogamat/r3f-webgpu-perf/blob/main/LICENSE)\n\n<p align=\"center\">\n  <img src=\"./docs/images/perf-dark.png\" alt=\"Perf panel — dark mode\" width=\"560\" /><br />\n  <img src=\"./docs/images/perf-light.png\" alt=\"Perf panel — light mode\" width=\"560\" /><br />\n  <img src=\"./docs/images/perf-expanded.png\" alt=\"Perf panel — expanded stats\" width=\"560\" />\n</p>\n\nEasily monitor the performance of your [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) application — built for **React Three Fiber 8+** and designed to work with both **WebGPU** and **WebGL** renderers (including WebGPU setups where `gl.info` may be unavailable).\n\nInspired by [r3f-perf](https://github.com/utsuboco/r3f-perf).\n\n| Add `<Perf />` inside your Canvas | [Live demo](https://r3f-webgpu-perf.vercel.app) |\n| --------------------------------- | ----------------------------------------------- |\n\n## Features\n\n- **WebGPU & WebGL** — drop `<Perf />` into any R3F `Canvas`; stats are collected from `gl.info` on WebGL or via scene traversal on WebGPU.\n- **Light & dark mode** — toggle the theme with the sun/moon button so the panel stays readable over bright or dark scenes.\n- **Compact or expanded** — click the chevron to expand the panel and reveal scene breakdown: draw calls, triangles, geometries, textures, lines, and points.\n- **Minimize to a dot** — hide the full panel with the eye button; it collapses to a small dot in the corner so it does not obstruct the viewport. Click the dot to bring it back.\n- **FPS gauge, live graph & VRAM** — circular gauge (cycles FPS → GPU → CPU), real-time graph, and optional VRAM estimate bar.\n\n## Installation\n\n```bash\nnpm i r3f-webgpu-perf\n```\n\nPeer dependencies (already present in most R3F projects):\n\n- `react` >= 18\n- `react-dom` >= 18\n- `@react-three/fiber` >= 8\n- `three` >= 0.150\n\n## Usage\n\nAdd `<Perf />` anywhere inside your `<Canvas>`:\n\n```jsx\nimport { Canvas } from \"@react-three/fiber\";\nimport { Perf } from \"r3f-webgpu-perf\";\n\nfunction App() {\n  return (\n    <Canvas>\n      <Perf position=\"top-left\" />\n      {/* your scene */}\n    </Canvas>\n  );\n}\n```\n\n## Options\n\n| Prop            | Default      | Description                                                                |\n| --------------- | ------------ | -------------------------------------------------------------------------- |\n| `position`      | `'top-left'` | Panel position: `top-left`, `top-right`, `bottom-left`, `bottom-right`     |\n| `showGraph`     | `true`       | Show real-time FPS/GPU/CPU graph                                           |\n| `showGauge`     | `true`       | Show circular gauge (click to cycle FPS → GPU → CPU)                       |\n| `minimal`       | `false`      | Condensed view with essential metrics only                                 |\n| `showVRAM`      | `false`      | Show estimated VRAM usage bar                                              |\n| `logsPerSecond` | `10`         | How often scene stats refresh                                              |\n| `openByDefault` | `true`       | Show panel on load (set `false` to start minimized as a dot in the corner) |\n| `className`     | —            | Custom CSS class on the portal wrapper                                     |\n| `style`         | —            | Inline styles on the portal wrapper                                        |\n\n## Advanced: headless mode\n\nUse `PerfHeadless` to collect metrics without the built-in UI, and read values with `usePerf`:\n\n```jsx\nimport { Canvas } from \"@react-three/fiber\";\nimport { PerfHeadless, usePerf } from \"r3f-webgpu-perf\";\n\nfunction PerfLogger() {\n  const fps = usePerf((s) => s.fps);\n  console.log(\"FPS:\", fps);\n  return <PerfHeadless logsPerSecond={10} />;\n}\n\nfunction App() {\n  return (\n    <Canvas>\n      <PerfLogger />\n    </Canvas>\n  );\n}\n```\n\nYou can also build a custom UI with `PerfPanel` and wire it yourself outside the canvas if needed.\n\n### API exports\n\n```js\nimport {\n  Perf,\n  PerfHeadless,\n  PerfPanel,\n  usePerf,\n  perfActions,\n  getPerf,\n  perfState,\n} from \"r3f-webgpu-perf\";\n```\n\n## WebGPU vs WebGL\n\n| Metric                                      | Source                                                                               |\n| ------------------------------------------- | ------------------------------------------------------------------------------------ |\n| FPS / frame time                            | Measured via `performance.now()`                                                     |\n| GPU / CPU ms                                | **Estimated** (20% / 80% split of frame delta)                                       |\n| Draw calls, triangles, geometries, textures | `gl.info` when available (WebGL), otherwise manual scene traversal (WebGPU fallback) |\n| VRAM                                        | Estimated from geometry attributes and texture sizes                                 |\n\nReal WebGPU timestamp queries are not implemented yet — planned for a future release.\n\n## Development\n\n```bash\ngit clone https://github.com/ektogamat/r3f-webgpu-perf.git\ncd r3f-webgpu-perf\nnpm install\nnpm run dev         # WebGPU demo with hot reload (Chrome/Edge recommended)\nnpm run build       # build library to dist/\nnpm run build:demo  # build demo to demo-dist/\n```\n\nThe demo uses **WebGPU + TSL post-processing** (`RenderPipeline`, `bloom`, `chromaticAberration`).\n\n## Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md).\n\n## License\n\nMIT © [Anderson Mancini](https://github.com/ektogamat)\n","readmeFilename":"README.MD"}