Hello NVIDIA Developer Community,
I would like to share a real-time browser-based 3D game experiment that I have been developing using WebGPU.
The project combines browser camera input, real-time gesture interaction, GLB-based 3D characters, first-person rendering, multiple boss stages and GPU-intensive visual effects inside a web browser.
The main goal of this project is to explore how far a modern browser-based GPU rendering pipeline can be pushed while maintaining responsive interaction and stable frame time during increasingly complex combat scenes.
Video Demonstration
The following video shows the current implementation:
The demonstration includes:
- Browser-based real-time 3D rendering
- WebGPU rendering
- Live camera gesture input
- First-person weapon rendering
- GLB character and boss models
- Multiple combat stages
- Real-time fire and energy effects
- Boss health and player status HUD
- Gesture-triggered attacks
- Scene transitions
- Large screen-space visual effects
- Pause and battle-state management
The video is intended as a technical demonstration rather than a formal performance benchmark.
Game Structure
The current version contains multiple boss encounters.
The gameplay sequence shown in the video includes different environments and different GPU workloads.
A simplified structure is:
Browser Camera Input
→ Gesture Recognition
→ Gameplay Input State
→ WebGPU Scene Update
→ GLB Character Rendering
→ Combat VFX Rendering
→ HUD Composition
→ Browser Presentation
The gesture system is separated from the main rendering logic so that camera processing and game rendering can operate independently as much as possible.
WebGPU Rendering
One of the main reasons I am experimenting with WebGPU is to use a more modern GPU API inside the browser.
The rendering workload includes:
- GLB model rendering
- First-person weapon rendering
- Boss rendering
- Dynamic transforms
- Particle effects
- Fire and energy effects
- Transparent geometry
- Screen-space effects
- HUD composition
As the player progresses through the game, the rendering workload increases significantly.
Some scenes contain relatively simple character rendering, while later boss attacks contain large transparent effects and multiple overlapping visual layers.
Gesture-Controlled Interaction
The browser camera is used as a real-time input source.
Recognized hand states are converted into gameplay commands.
The design can be represented approximately as:
Camera Frame
→ Hand / Gesture Detection
→ Gesture State
→ Gameplay Action
→ WebGPU Visual Response
This creates an interesting latency problem because the perceived response time includes more than rendering alone.
The complete path includes:
Camera Capture
→ Browser Video Frame
→ Gesture Processing
→ Action Validation
→ Game-State Update
→ WebGPU Rendering
→ Browser Composition
→ Display
I am particularly interested in reducing the complete camera-to-action latency rather than only measuring the GPU rendering time.
Multi-Stage GPU Workload
The video contains several scenes with substantially different rendering workloads.
Stage 1
The first stage uses a relatively clean cyberpunk environment with a humanoid target.
The GPU workload is primarily:
- Character rendering
- Weapon rendering
- HUD
- Smaller attack effects
Stage 2
The second encounter increases the visual workload with a dragon and significantly larger fire effects.
This includes:
- Large flame geometry
- More particles
- Additive blending
- Transparent VFX
- Larger portions of the screen covered by effects
Stage 3
The final battle uses a more complex environment and larger multi-layer effects.
This makes the final stage particularly useful for profiling frame-time spikes and GPU workload changes.
Transparent VFX and Overdraw
One of the main graphics-performance concerns is transparent overdraw.
Large fire effects can cover a significant portion of the display, while multiple transparent layers may be rendered on top of one another.
I am currently investigating optimizations such as:
- Reducing unnecessary transparent pixels
- Limiting particle count
- Culling expired effect geometry
- Reducing full-screen effect coverage
- Lower-resolution effect rendering
- Adaptive visual-effect quality
- Reducing blend-heavy passes
It would be interesting to determine whether fragment workload becomes the dominant bottleneck before model geometry does.
WebGPU Resource Management
Another area I am investigating is GPU resource lifetime and update frequency.
The application needs to continuously update:
- Camera-related state
- Player transforms
- Boss transforms
- Dynamic VFX parameters
- Particle data
- HUD state
- Attack-state buffers
I am interested in finding the best balance between frequently updating GPU buffers and keeping long-lived resources allocated.
Potential areas of investigation include:
- Uniform-buffer organization
- Storage buffers
- Dynamic GPU buffer updates
- Bind-group reuse
- Command-buffer organization
- Render-pass count
- Pipeline-state switching
Frame-Time Stability
For this type of interactive application, average FPS alone is not sufficient.
A short frame-time spike during an attack can be more noticeable than a slightly lower but stable average frame rate.
I am therefore interested in profiling:
- Average GPU frame time
- 1% low frame time
- Large frame-time spikes
- CPU-to-GPU submission gaps
- Browser composition overhead
- Large VFX attack phases
The later boss attacks are particularly useful because they produce a much heavier GPU workload than the initial scene.
Current Development Focus
My current optimization areas include:
- WebGPU frame-time stability
- Reducing transparent overdraw
- Reducing unnecessary GPU resource updates
- Improving gesture-to-action latency
- Improving large particle-effect performance
- Reducing command-submission overhead
- Improving GLB rendering efficiency
- Adaptive effect quality
- Stable rendering during large boss attacks
Questions for the NVIDIA Graphics Community
I would appreciate feedback on several areas:
-
For a WebGPU application running on an NVIDIA GPU, what is the recommended approach for identifying whether the bottleneck is GPU rendering, browser command submission or browser composition?
-
For large transparent fire and energy effects, which optimization techniques generally provide the largest improvement on NVIDIA GPUs?
-
For frequently changing particle and VFX data, is it generally preferable to update storage buffers, use instancing, or generate more of the effect data directly on the GPU?
-
When using multiple WebGPU render passes, how significant can render-pass and pipeline switching overhead become in a real-time browser game?
-
Are there recommended NVIDIA or browser profiling workflows for investigating WebGPU frame-time spikes?
-
For a game that combines camera-based gesture input with WebGPU rendering, what would be the best methodology for measuring complete camera-to-display latency?
-
Are there particular WebGPU workload patterns that should be avoided when targeting NVIDIA desktop GPUs?
I am also considering preparing a minimal reproducible WebGPU sample containing only one GLB model, one large GPU-generated effect and frame-time instrumentation if that would be useful for profiling.
Thank you for reading.
Any feedback regarding WebGPU, real-time graphics, browser GPU profiling or interactive rendering optimization would be greatly appreciated.