Stats Panel (Performance)
The Stats panel provides comprehensive real-time performance monitoring, including FPS tracking, draw call analysis, frame time visualization, and bottleneck detection.
Overview
typescript
// Open the Stats/Performance panel
overlay.showPanel('stats');1
2
2
The Stats panel is your primary tool for performance analysis, offering multiple tabs for different metrics:
- Overview - Key metrics and benchmark score
- Memory - GPU/CPU memory breakdown
- Rendering - Draw calls, triangles, shader analysis
- Timeline - Frame-by-frame recording
- Resources - Lifecycle tracking and leak detection
Panel Layout
┌─────────────────────────────────────────────────────┐
│ ⚡ Performance ─ □ ✕ │
├─────────────────────────────────────────────────────┤
│ [Overview] [Memory] [Rendering] [Timeline] [Resources]│
├─────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ FPS Draw Calls │
│ │ A │ 60 245 │
│ │ Score │ ▲ Smooth ▲ Good │
│ └──────────┘ │
│ │
│ ═══════════════════════════════════════════ │
│ Frame Time Chart │
│ ▁▂▁▁▃▂▁▁▂▁▃▂▁▂▁▁▂▃▂▁▁▂▁▂▁▃▂▁▁▂▁▂▃▂▁▂▁▁ │
│ 16.67ms budget ───────────────── │
│ ═══════════════════════════════════════════ │
│ │
│ Metrics: │
│ Triangles: 125,432 Objects: 1,234 │
│ Materials: 45 Textures: 28 │
│ │
└─────────────────────────────────────────────────────┘1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Overview Tab
Benchmark Score
A comprehensive performance grade (A-F) calculated from multiple factors:
typescript
interface BenchmarkScore {
grade: 'A' | 'B' | 'C' | 'D' | 'F';
score: number; // 0-100
fps: number; // Current FPS
frameTime: number; // Average frame time (ms)
drawCalls: number; // Draw calls per frame
triangles: number; // Triangles rendered
topIssues: string[]; // Most impactful problems
suggestions: string[]; // Optimization recommendations
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
| Grade | Score | Typical Performance |
|---|---|---|
| A | 90-100 | 60+ FPS, < 200 draw calls |
| B | 75-89 | 45-60 FPS, < 400 draw calls |
| C | 50-74 | 30-45 FPS, < 600 draw calls |
| D | 25-49 | 15-30 FPS, performance issues |
| F | 0-24 | < 15 FPS, severe problems |
Key Metrics Display
┌─────────────┬─────────────┬─────────────┐
│ FPS │ Frame Time │ Draw Calls │
│ 60 │ 16.2ms │ 245 │
│ ▲ Good │ ▲ Budget │ ▲ Normal │
└─────────────┴─────────────┴─────────────┘1
2
3
4
5
2
3
4
5
Frame Time Chart
Interactive chart showing frame times over the last 60-300 frames:
Frame Time (ms)
50ms ┤
33ms ┤ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 30 FPS target
16ms ┤═══════════════════════ 60 FPS target
0ms ┼─────────────────────────
└─────────────────────────►
Time (frames)1
2
3
4
5
6
7
2
3
4
5
6
7
Chart Interactions:
- Hover - Show exact values for each frame
- Scroll - Zoom in/out
- Drag - Pan through history
- Click - Pause auto-scroll
Session Statistics
typescript
interface SessionStats {
sessionDuration: number; // Total time
totalFramesRendered: number; // Frame count
averageFps: number; // Session average
peakFps: number; // Highest FPS
lowestFps: number; // Lowest FPS
droppedFrames: number; // Frames > 33ms
smoothFrames: number; // Frames < 16.67ms
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Rule Violations
When performance thresholds are exceeded:
┌─────────────────────────────────────────────┐
│ ⚠️ Draw calls exceeded threshold (500) │
│ 💡 Consider using instancing or LOD │
├─────────────────────────────────────────────┤
│ 🔴 Frame time spike: 45ms │
│ 💡 Check for expensive operations │
└─────────────────────────────────────────────┘1
2
3
4
5
6
7
2
3
4
5
6
7
Memory Tab
See Memory Panel for detailed documentation.
Quick overview:
Total GPU Memory: 256 MB
├─ Textures: 180 MB (70%)
├─ Geometry: 56 MB (22%)
└─ Render Targets: 20 MB (8%)
Memory Trend: → Stable1
2
3
4
5
6
2
3
4
5
6
Rendering Tab
Draw Call Analysis
Draw Calls: 245
├─ Opaque: 180 (73%)
├─ Transparent: 45 (18%)
└─ Shadow: 20 (8%)
Triangles: 1,250,432
├─ Visible: 980,000
└─ Culled: 270,4321
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Shader Programs
Active Programs: 12
├─ Standard PBR: 8
├─ Custom Shaders: 3
└─ Post-process: 1
Shader Switches: 8/frame1
2
3
4
5
6
2
3
4
5
6
Rendering Stats
typescript
interface RenderingStats {
// Lights
totalLights: number;
shadowCastingLights: number;
shadowMapUpdates: number;
// Animation
skinnedMeshes: number;
totalBones: number;
morphTargetInfluences: number;
// Transparency
transparentObjects: number;
sortingTime: number;
// GPU
gpuFrameTime?: number;
gpuMemoryUsed?: number;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Bottleneck Analysis
Automatic detection of performance issues:
┌─────────────────────────────────────────────────────┐
│ Bottleneck Analysis │
├─────────────────────────────────────────────────────┤
│ 🔴 HIGH: Draw Calls (1,245) │
│ Consider using instancing or merging geometry │
│ │
│ 🟡 MEDIUM: Shadow Casters (6 lights) │
│ Reduce shadow-casting lights or use baked shadows│
│ │
│ 🟢 OK: Triangle count within budget │
└─────────────────────────────────────────────────────┘1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Timeline Tab
Recording Mode
typescript
// Start recording
overlay.startRecording();
// Stop recording (auto-stops at 1800 frames / 30 seconds)
overlay.stopRecording();1
2
3
4
5
2
3
4
5
Frame Inspector
┌─────────────────────────────────────────────────────┐
│ ● Recording: 450/1800 frames [⏹] │
├─────────────────────────────────────────────────────┤
│ │
│ Frame Timeline │
│ ▁▂▁▁█▂▁▁▂▁▃▂▁▂▁▁▂▃▂▁▁▂▁▂▁▃▂▁▁▂▁▂▃▂▁▂▁▁ │
│ ↑ Spike │
│ │
│ Selected Frame: #127 │
│ ├─ CPU Time: 12.4ms │
│ ├─ GPU Time: 8.2ms │
│ ├─ Draw Calls: 312 │
│ └─ Triangles: 1.2M │
│ │
└─────────────────────────────────────────────────────┘1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Frame Time Percentiles
Frame Time Percentiles
┌────────┬────────┬────────┬────────┐
│ P50 │ P90 │ P95 │ P99 │
│ 15.2ms │ 18.4ms │ 22.1ms │ 35.6ms │
│ ✓ │ ✓ │ ⚠ │ ⚠ │
└────────┴────────┴────────┴────────┘
Avg FPS: 62 1% Low: 28 Budget: 92%1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
FPS Distribution Histogram
FPS Distribution (1,234 frames)
▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
────────────────────────
0 15 30 45 60 FPS
● Slow (12%) ● Okay (28%) ● Smooth (60%)1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Resources Tab
See Resources Panel for detailed documentation.
Quick view:
Resource Lifecycle
├─ Created: 45 (this session)
├─ Disposed: 12
├─ Active: 1,234
└─ Leaked: 0 ✓1
2
3
4
5
2
3
4
5
GPU Capabilities
When available, displays WebGL/WebGPU capabilities:
GPU Information
├─ Renderer: NVIDIA GeForce RTX 3080
├─ Vendor: NVIDIA Corporation
├─ Max Texture Size: 16384
├─ Max Vertex Uniforms: 4096
├─ Antialias: Enabled
└─ Extensions: 45 loaded1
2
3
4
5
6
7
2
3
4
5
6
7
API Integration
typescript
// Subscribe to stats updates
probe.on('stats', (stats: FrameStats) => {
console.log('FPS:', stats.fps);
console.log('Draw calls:', stats.drawCalls);
});
// Get current benchmark
const benchmark = probe.getBenchmarkScore();
console.log('Grade:', benchmark.grade);
// Configure update frequency
const probe = createProbe({
sampling: {
statsInterval: 500, // Update every 500ms
},
});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Configuration
typescript
const probe = createProbe({
thresholds: {
maxDrawCalls: 500,
maxTriangles: 1000000,
targetFps: 60,
maxFrameTime: 16.67,
},
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Best Practices
- Monitor during development - Catch performance regressions early
- Use Timeline recording - Capture and analyze specific scenarios
- Check bottleneck analysis - Follow optimization suggestions
- Watch percentiles - P99 shows worst-case performance
- Profile on target hardware - Test on expected devices