Oleksandr Kuzmenko, EditorPublished 5 min readAI-assisted · editor-reviewed
TL;DR
- Average FPS can hide catastrophic frame pacing issues; always inspect frame time distribution in the performance profiler
- Dense WebGL voxel grids trigger severe 120ms bottlenecks if buffer uploads lock the main execution thread
- Decouple physics and scene updates from rendering passes using offscreen canvas workers
Key facts
- Reported average update rate
- Roughly 30 FPS (Chrome on RTX 3080 Ti Mobile)
- Actual frame time spikes
- 120ms between updates
Browser-Based Voxel Cartography
Developer Piotr Migdał published Warsaw in Voxels, an interactive 3D map rendering Warsaw's city center using volumetric pixels. Users can navigate urban blocks, inspect buildings like Złota 44, and explore spatial landmarks directly within modern web browsers without native plugin dependencies.
Frame Pacing and WebGL Performance Traps
Community profiling on Hacker News revealed that voxel rendering engines often suffer from severe frame pacing degradation even on high-end hardware:
- Frame time spikes: Profiling on an
NVIDIA RTX 3080 Ti Mobilein Chrome revealed that while average throughput hovered around 30 FPS, actual frame times spiked to 120ms due to uneven update gaps. - Render thread blocking: Users with dedicated laptop GPUs reported that dense voxel scenes can become practically unusable when dynamic buffer reallocation blocks the WebGL execution loop.
Engineering Takeaways for 3D Web Developers
Building performant spatial web apps requires strict memory budget management. Teams implementing voxel or mesh viewers must employ spatial partitioning (octrees), aggressive frustum culling, and offscreen canvas workers to prevent data updates from choking client frame budgets.
When to use
- Visualizing stylized volumetric 3D datasets and geographic models in the browser
- Benchmarking browser WebGL engine limits under dense procedural chunk loading
When NOT to use
- Production geographic information systems (GIS) requiring sub-millimeter precision and high performance on mobile
- Low-power or mobile environments without GPU-accelerated WebGL optimizations
What to do today
- Profile your WebGL rendering loop using Chrome DevTools Performance tab to catch 100ms+ frame time outliers
- Implement hierarchical level-of-detail (LOD) and frustum culling when rendering volumetric browser scenes
Step names are taken from What to do today.
Step names are taken from What to do today. Profile your WebGL rendering loop using Chrome DevTools Performance tab to catch 100ms+ frame time outliers. Implement hierarchical level-of-detail (LOD) and frustum culling when rendering volumetric browser scenes
- Profile your WebGL rendering loop using Chrome DevTools Performance tab to catch 100ms+ frame time outliers
- Implement hierarchical level-of-detail (LOD) and frustum culling when rendering volumetric browser scenes
What the community says
It's almost unusably slow on my laptop. 3080ti mobile, windows 11, chrome. I opened the profiler and the update appears to be fast enough; roughly hitting 30fps... actual frame time seems to be about 120ms.
Unusable because of (lack of) performance. I have a laptop with a dedicated GPU...
The voxel version of Złota 44 doesn't do it justice. I mean, just look at this thing: https://en.wikipedia.org/wiki/Z%C5%82ota_44