Skip to content

feat: enhance performance monitor with GPU timing and memory tracking #1332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
braedonsaunders merged 4 commits into from
Feb 3, 2026
Merged

feat: enhance performance monitor with GPU timing and memory tracking #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e0893a
feat: enhance performance monitor with GPU timing and memory tracking
claude Feb 3, 2026
d756444
feat(perf): add GPUMemoryTracker integration to terrain, units, and p…
claude Feb 3, 2026
6025f56
fix: remove deprecated LuminanceFormat/LuminanceAlphaFormat from GPUM…
claude Feb 3, 2026
75c22d4
fix: use generic RenderTargetLike interface for memory estimation
claude Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions src/components/game/PerformanceDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,87 @@ export const PerformanceDashboard = memo(function PerformanceDashboard({
</div>
)}

{/* GPU Timing */}
{expanded && (
<div style={{ marginBottom: '12px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
<span style={{ fontWeight: 'bold', color: '#aaa' }}>GPU</span>
{snapshot.render.gpuTimingAvailable ? (
<span style={{
fontSize: '10px',
color: snapshot.render.gpuFrameTimeMs > 12 ? '#ef4444' :
snapshot.render.gpuFrameTimeMs > 8 ? '#eab308' : '#22c55e',
}}>
{snapshot.render.gpuFrameTimeAvgMs.toFixed(2)}ms avg
</span>
) : (
<span style={{ fontSize: '9px', color: '#666' }}>N/A</span>
)}
</div>
<div style={{ display: 'flex', gap: '12px', fontSize: '9px' }}>
<div style={{ flex: 1 }}>
<div style={{ color: '#666', marginBottom: '2px' }}>Draw Calls</div>
<div style={{ color: snapshot.render.drawCalls > 500 ? '#eab308' : '#aaa' }}>
{snapshot.render.drawCalls.toLocaleString()}
</div>
</div>
<div style={{ flex: 1 }}>
<div style={{ color: '#666', marginBottom: '2px' }}>Triangles</div>
<div style={{ color: '#aaa' }}>
{(snapshot.render.triangles / 1000).toFixed(0)}K
</div>
</div>
</div>
</div>
)}

{/* GPU Memory */}
{expanded && snapshot.gpuMemory.totalMB > 0 && (
<div style={{ marginBottom: '12px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
<span style={{ fontWeight: 'bold', color: '#aaa' }}>GPU Memory</span>
<span style={{
fontSize: '10px',
color: snapshot.gpuMemory.usagePercent > 80 ? '#ef4444' :
snapshot.gpuMemory.usagePercent > 60 ? '#eab308' : '#888',
}}>
{snapshot.gpuMemory.totalMB.toFixed(0)}MB / {snapshot.gpuMemory.budgetMB}MB
</span>
</div>
<div style={{ height: '6px', backgroundColor: '#222', borderRadius: '3px', overflow: 'hidden', marginBottom: '6px' }}>
<div
style={{
height: '100%',
width: `${Math.min(snapshot.gpuMemory.usagePercent, 100)}%`,
backgroundColor: snapshot.gpuMemory.usagePercent > 80 ? '#ef4444' :
snapshot.gpuMemory.usagePercent > 60 ? '#eab308' : '#3b82f6',
transition: 'width 0.3s ease-out',
}}
/>
</div>
{/* Category breakdown */}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', fontSize: '9px' }}>
{snapshot.gpuMemory.categories
.filter(cat => cat.currentMB > 0.1)
.slice(0, 4)
.map(cat => (
<div
key={cat.name}
style={{
padding: '2px 5px',
backgroundColor: 'rgba(0,0,0,0.3)',
borderRadius: '3px',
}}
>
<span style={{ color: '#666' }}>{cat.name}: </span>
<span style={{ color: '#aaa' }}>{cat.currentMB.toFixed(0)}MB</span>
</div>
))
}
</div>
</div>
)}

{/* Network (if connected) */}
{expanded && snapshot.network.connected && (
<div>
Expand Down
39 changes: 39 additions & 0 deletions src/components/game/hooks/useWebGPURenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

import { Game } from '@/engine/core/Game';
import { PerformanceMonitor } from '@/engine/core/PerformanceMonitor';
import { GPUTimestampProfiler } from '@/engine/core/GPUTimestampProfiler';
import type { IWorldProvider } from '@/engine/ecs/IWorldProvider';
import type { EventBus } from '@/engine/core/EventBus';
import { RTSCamera } from '@/rendering/Camera';
Expand Down Expand Up @@ -169,6 +170,9 @@
const accumulatedTrianglesRef = useRef<number>(0);
const accumulatedDrawCallsRef = useRef<number>(0);

// GPU timestamp profiler for actual GPU timing
const gpuTimestampProfilerRef = useRef<GPUTimestampProfiler | null>(null);

// Device lost recovery state
const isRecoveringRef = useRef(false);
const recoveryAttemptsRef = useRef(0);
Expand Down Expand Up @@ -457,6 +461,23 @@
useUIStore.getState().setGpuInfo(renderContext.gpuInfo);
setMaxVertexBuffers(renderContext.deviceLimits.maxVertexBuffers);

// Initialize GPU timestamp profiler for accurate GPU timing
if (renderContext.supportsTimestampQuery && renderContext.gpuDevice) {
const profiler = GPUTimestampProfiler.getInstance();
const initialized = profiler.initialize(renderContext.gpuDevice);
if (initialized) {
gpuTimestampProfilerRef.current = profiler;
debugInitialization.log('[useWebGPURenderer] GPU timestamp profiler initialized');
} else {
debugInitialization.log('[useWebGPURenderer] GPU timestamp profiler initialization failed');
}
} else {
debugInitialization.log(
`[useWebGPURenderer] GPU timestamp queries not available ` +
`(supported: ${renderContext.supportsTimestampQuery}, device: ${!!renderContext.gpuDevice})`
);
}

debugInitialization.log(
`[useWebGPURenderer] Using ${renderContext.isWebGPU ? 'WebGPU' : 'WebGL'} backend`
);
Expand Down Expand Up @@ -613,7 +634,7 @@

// Expose debug interface
if (typeof window !== 'undefined') {
(window as any).VOIDSTRIKE = {

Check warning on line 637 in src/components/game/hooks/useWebGPURenderer.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected any. Specify a different type
gpu: {
stats: () => unitRendererRef.current?.getGPURenderingStats(),
forceCPU: (enable: boolean) => unitRendererRef.current?.forceCPUCulling(enable),
Expand Down Expand Up @@ -951,7 +972,7 @@
debugInitialization.error('[useWebGPURenderer] Initialization failed:', error);
return false;
}
}, [

Check warning on line 975 in src/components/game/hooks/useWebGPURenderer.ts

View workflow job for this annotation

GitHub Actions / lint 

React Hook useCallback has missing dependencies: 'startAnimationLoop' and 'workerBridgeRef'. Either include them or remove the dependency array
canvasRef,
containerRef,
gameRef,
Expand Down Expand Up @@ -1247,6 +1268,20 @@
const fps = frameElapsed > 0 ? 1000 / frameElapsed : 60;
PerformanceMonitor.updateRenderMetrics(drawCallsThisSecond, trianglesThisSecond, fps);

// Update GPU timing from timestamp profiler
const gpuProfiler = gpuTimestampProfilerRef.current;
if (gpuProfiler) {
const gpuTiming = gpuProfiler.getLastFrameTime();
PerformanceMonitor.updateGPUTiming(
Comment on lines +1271 to +1275

@chatgpt-codex-connector chatgpt-codex-connector Bot Feb 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Wire up GPU timestamps to render passes

This block only reads getLastFrameTime() from the profiler, but the profiler is never driven to collect timestamps (no beginFrame()/endFrame() calls and no getTimestampWrites() attached to any render pass in this commit). As a result, gpuTiming.available will stay false and the GPU timing UI will always show N/A even on devices that support timestamp-query. You need to integrate the profiler into the render loop and pass its timestamp writes into the render pass descriptors so timestamps are actually recorded.

Useful? React with 👍 / 👎.

gpuTiming.frameTimeMs,
gpuProfiler.getAverageFrameTime(),
gpuTiming.available
);
} else {
// Report that GPU timing is not available
PerformanceMonitor.updateGPUTiming(0, 0, false);
}

// Reset accumulators for next second
accumulatedTrianglesRef.current = 0;
accumulatedDrawCallsRef.current = 0;
Expand Down Expand Up @@ -1318,6 +1353,10 @@
commandQueueRendererRef.current?.dispose();
lightPoolRef.current?.dispose();

// Clean up GPU timestamp profiler
GPUTimestampProfiler.resetInstance();
gpuTimestampProfilerRef.current = null;

isInitializedRef.current = false;
};
}, []);
Expand Down
Loading
Loading