Published on January 8, 2026
Developing 3D games for the browser comes with a unique set of constraints. Unlike native apps, we don't have direct access to the full power of the GPU, and we have to share resources with the browser itself. Here are the key optimization techniques we used in Duckov Explorer.
Every time the CPU tells the GPU to draw something, there is overhead. If you have 100 asteroids, drawing them one by one is slow. We used InstancedMesh in Three.js to draw thousands of asteroids in a single draw call. This was the single biggest performance booster for our game.
Large textures eat up VRAM and bandwidth. We compress all our textures using modern formats like KTX2 or WebP. This reduces the download size for users and allows the GPU to read textures more efficiently.
While physically based rendering (PBR) looks amazing, it is expensive. For mobile devices, we fallback to simpler shading models (like Lambert or Phong) or reduce the quality of the lighting calculations. We also bake static lighting into textures wherever possible to avoid real-time light calculations.
JavaScript has automatic garbage collection, which can cause "stuttering" if it runs during a frame. We avoid creating new objects (like Vector3 or Matrix4) inside the render loop. Instead, we create them once and reuse them. This keeps the memory footprint stable and prevents frame drops.
Optimization is an ongoing process. By keeping these principles in mind, you can create rich 3D experiences that run smoothly even on mid-range devices.