r3f-frame-profiler 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -0
- package/package.json +10 -2
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# r3f-frame-profiler
|
|
2
|
+
|
|
3
|
+
A comprehensive performance profiler for React Three Fiber applications with real-time monitoring, budget tracking, and detailed analytics.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 📊 **Real-time Performance Monitoring**: Track frame time, FPS, memory usage, and GPU stats
|
|
8
|
+
- 🎯 **Performance Budgets**: Set and monitor performance budgets with alerts
|
|
9
|
+
- 🔥 **Hot Path Detection**: Identify performance bottlenecks in your React components
|
|
10
|
+
- 📈 **Visual Analytics**: Interactive charts and graphs for performance data
|
|
11
|
+
- 🎮 **Scene Statistics**: Monitor Three.js scene complexity and render calls
|
|
12
|
+
- ⚛️ **React Profiler Integration**: Track React component render times
|
|
13
|
+
- 💾 **Data Export**: Export performance data for further analysis
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install r3f-frame-profiler
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { Canvas } from '@react-three/fiber'
|
|
25
|
+
import { PerformanceMonitor } from 'r3f-frame-profiler'
|
|
26
|
+
|
|
27
|
+
function App() {
|
|
28
|
+
return (
|
|
29
|
+
<Canvas>
|
|
30
|
+
{/* Your 3D scene */}
|
|
31
|
+
<PerformanceMonitor />
|
|
32
|
+
</Canvas>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## API
|
|
38
|
+
|
|
39
|
+
### Components
|
|
40
|
+
|
|
41
|
+
- `PerformanceMonitor` - Main UI component for displaying performance metrics
|
|
42
|
+
- `ReactProfiler` - Wrapper component for profiling React render performance
|
|
43
|
+
|
|
44
|
+
### Hooks
|
|
45
|
+
|
|
46
|
+
- `useFrameTime()` - Get current frame time and FPS
|
|
47
|
+
- `useMemoryStats()` - Monitor memory usage
|
|
48
|
+
- `useGPUStats()` - Track GPU performance
|
|
49
|
+
- `useSceneStats()` - Monitor Three.js scene statistics
|
|
50
|
+
- `usePerformanceBudget()` - Manage performance budgets
|
|
51
|
+
- `useAlerts()` - Handle performance alerts
|
|
52
|
+
- `useProfiler()` - Access the core profiler instance
|
|
53
|
+
|
|
54
|
+
## TypeScript Support
|
|
55
|
+
|
|
56
|
+
This library is written in TypeScript and includes complete type definitions.
|
|
57
|
+
|
|
58
|
+
## License
|
|
59
|
+
|
|
60
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "r3f-frame-profiler",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A performance profiler for React Three Fiber applications",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -11,8 +11,16 @@
|
|
|
11
11
|
"debugging",
|
|
12
12
|
"threejs"
|
|
13
13
|
],
|
|
14
|
-
"author": "",
|
|
14
|
+
"author": "Convicts",
|
|
15
15
|
"license": "MIT",
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "https://github.com/yourusername/r3f-frame-profiler"
|
|
19
|
+
},
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/yourusername/r3f-frame-profiler/issues"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/yourusername/r3f-frame-profiler#readme",
|
|
16
24
|
"type": "module",
|
|
17
25
|
"main": "./dist/cjs/index.js",
|
|
18
26
|
"module": "./dist/esm/index.js",
|