Optimizing Large Scale 3D Models for Web-based Applications
Introduction
At Axiom, we aim to revolutionize how people make sense of their data. As part of that, we want to provide users with an immersive experience which led us to integrate high-detail 3D models into our geospatial application. This required us to push the limits of what is possible for optimizing 3D model rendering within web-based applications, and we faced two main challenges:
- How to preserve high visual detail
- How to maintain good performance
Balancing these two aspects is difficult, especially in web-based applications where browser and GPU resources are limited.
Raw Models
First, let's understand what a 3D model actually is.
A 3D model is essentially a collection of polygons that define the shape of an object. These polygons are built from vertices (points in 3D space) and indices that describe how these vertices connect to form triangles.
On top of the geometry, models usually include textures that define the surface appearance. In some cases, these textures are combined with materials that control properties such as color, reflection, and lighting.
If you try to use a 3D model directly in a web application without optimizing or cleaning it, you will quickly notice performance problems. Your website may start to lag, or the frame rate may drop significantly.
Why does this happen?
There are several possible reasons, but the most common ones are:
- Very high polygon counts
- Large texture sizes
These two factors are the main topics we will focus on in this article.
And most architectural 3D models are designed for tools like Blender or CAD software, not for real-time rendering in browsers.
| Metric | Raw Model |
|---|---|
| Polygons | 1,000,000+ |
| Texture | 4K / 8K |
| File size | 100MB+aw |
If you load this directly in a web map, the browser will freeze or sometimes will crash.
Cleanup
Many 3D models contain geometry that is not actually needed.
For example:
- duplicated vertices
- small details that are not visible from a distance
- hidden faces inside the model
- unused materials
These unnecessary elements increase the complexity of the mesh and impact the performance.
To fix this, we perform a cleanup step:
- merge duplicate vertices
- remove hidden faces
- remove unused materials
There are many tools that can help with this process, such as gltf-transform, or you can do it directly in Blender.
How 3D Models Are Rendered
Before we go any further, we first need to understand how 3D models are rendred.
Every 3D model is composed of triangles, which are built from vertices and indices. These triangles are sent to the GPU, which processes them and draws them on the screen every frame.
This means that the number of triangles in a model directly affects rendering performance. The more triangles a model contains, the more work the GPU must perform each frame.
When models contain millions of triangles, the GPU has to process a huge amount of geometry, which can lead to lower frame rates and slower rendering, especially in web-based applications.
This is why polygon reduction becomes a critical optimization step.
Polygon Reduction
Now we are ready for polygon reduction, which is actually the most important step in the optimization pipeline.
Polygon reduction means reducing the number of triangles in the mesh while preserving the overall shape of the model.
There are many tools designed specifically for this task, such as:
- Blender Decimate Modifier
- MeshLab
- gltf-transform
How does it work?
The algorithm collapses edges and simplifies surfaces while trying to preserve the visual shape of the object.
| Stage | Polygons |
|---|---|
| Original | 1,200,000 |
| Reduced | 80,000 |
Before optimization:
- small details are modeled with many triangles
After optimization:
- surfaces are simplified
- important shapes are preserved
In most cases, the user cannot visually notice the difference, but performance improves significantly.
Reducing polygon count significantly decreases the number of calculations the GPU needs to perform, which results in smoother rendering and better frame rates in the browser.
Texture Optimization
While polygon count plays a major role in performance, textures can be just as expensive, if not more.
Raw 3D models often include very high-resolution textures (such as 4K or 8K), which are not necessary for real-time rendering in web applications.
Large textures can:
- consume a lot of GPU memory
- increase loading time
- slow down rendering performance
To optimize textures, we applied several techniques:
- reducing texture resolution (e.g., 8K → 1K or 2K)
- converting textures to WebP format
- removing unused textures and materials
How does it work?
WebP is an image format designed for the web that provides better compression compared to PNG and JPEG, while maintaining similar visual quality.
Traditional textures (PNG/JPEG) store a lot of unnecessary data for real-time rendering.
WebP uses more advanced compression techniques to:
- remove redundant visual information
- reduce color data where differences are not noticeable
- encode images more efficiently
| Texture | Before | After |
|---|---|---|
| Format | PNG | WebP |
| Resolution | 4K | 1K |
| File Size | 40MB | 3–5MB |
Level of Detail (LOD)
Even after optimizing geometry and textures, rendering full-detail models at all times is inefficient.
To solve this, we implemented Level of Detail (LOD).
LOD means using different versions of the same model based on camera distance.
For example:
| LOD Level | Distance | Detail |
|---|---|---|
| LOD0 | Close | High detail |
| LOD1 | Medium | Medium detail |
| LOD2 | Far | Low detail |
When the user zooms out, small details are no longer visible. Rendering them would waste GPU resources.
Instead, we switch to a simplified version of the model, reducing the number of triangles rendered on screen.
This significantly improves performance, especially when rendering large areas or entire districts.
Frustum Culling
In addition to LOD, another important optimization is rendering only what the user can actually see.
In large scenes, many models may exist in the environment, but not all of them are visible within the user’s current viewport.
Rendering models that are outside the viewport wastes both GPU and memory resources.
To solve this, we apply viewport culling.
This means:
- models outside the camera view are not rendered
- in some cases, they can also be unloaded from memory
This significantly reduces:
- GPU workload
- memory usage
- unnecessary draw calls
As a result, the application can maintain smooth performance even when working with large-scale environments.
Model Compression and Packaging
After optimizing geometry, textures, and LODs, the final step is preparing the model for efficient delivery in the browser.
We used Draco compression to reduce the size of geometry data, including vertices and indices.
In addition, we used gltf-transform to:
- apply Draco compression
- convert textures to WebP
- remove unused data
- package everything into a compact GLB file
This step significantly reduces file size and improves loading performance.
Results
After applying the full optimization pipeline, we achieved significant improvements:
| Metric | Before | After |
|---|---|---|
| File Size | 100MB+ | ~10MB |
| Polygons | 1,000,000+ | ~80,000 |
| Load Time | 10–15s | <2s |
| Frame Rate | Low / unstable | Smooth (60 FPS) |
Conclusion
Optimizing 3D models for web applications requires a combination of techniques, including:
- geometry cleanup
- polygon reduction
- texture optimization
- LOD
- compression
By applying these steps, we transformed heavy architectural models into efficient, real-time assets suitable for web-based geospatial platforms like Axiom.
If you want to explore how we are redefining the way people make sense of their data, don't hesitate to reach out!
