3D Model Formats and Web Optimization
In web-based 3D visualization, file format plays a big role, impacting performance, compatibility and efficiency in the workflow. That is why choosing the wrong file format can be catastrophic for the project, increasing load times, putting a lot of strain on system resources and creating incompatibilities with software tools. Apart from the standard 3D file formats such as obj and fbx, there are formats specifically designed for usage in game development and the web. Those two are glTF and GLB. Both of these serve as containers for 3D models but they differ in use cases.
glTF
glTF (Graphics Library Transmission Format) is a text-based, JSON(JavaScript Object Notation)-encoded standard specifically designed for the efficient transmission of 3D scenes and models. The text-based nature of the file enables humans to be able to read it and thus, be able to easily edit and debug the files. This transparency is especially advantageous during development, as that is the stage where small adjustments can be made directly in the file instead of having additional editing steps.
Compared to GLB, glTF produces a slightly higher file size as it relies on JSON. However, the modularity glTFs provide allow developers to reference external assets such as textures and animations. This flexibility makes glTF very suitable for large projects that reuse assets across multiple scenes. The increased file size needs to be accounted for when planning such a project, but this drawback is often outweighed by the ease of customization within these big projects. This is why glTF is often chosen for complex web applications that need more flexibility with updates.
GLB
GLB represents the binary version of the glTF file format. It combines all the model data (geometry, materials, textures and animations) into a single binary file. This structure enhances machine readability and thus, significantly improves loading time. Browsers can read the files directly instead of needing to interpret the JSON text.
This is why the GLB is typically smaller and loads faster, leading to a big advantage in environments that require high performance such as augmented reality applications. The unified structure of the GLB also simplifies file management, since everything is embedded into a single file. This unification reduces the risk of textures going missing or references being mismatched.
Requirements for Web Based 3D
With the knowledge of the different methods how 3D environments can be rendered on the web and the special file formats for 3D files, creating these web based 3D applications comes with additional platform specific requirements. For example, even though WebGPU represents the future of browser based graphics, it is currently limited to a certain set of browsers and computers. Mobile browsers for example do not have WebGPU support, which is why WebGL is still used so much today. Optimizing for mobile ensures that performance stays stable and responsive interactions are maintained, even under constrained resources. Another limiting factor is bandwidth, as large files can become bottlenecks for load time, especially on slower network connections. That is why file compression and small file sizes are so important in web development in general.
3D Model Optimization
Effective 3D model optimization is extremely important in web design. Unoptimized assets can severely reduce performance regardless of hardware or bandwidth availability. Assets that have been optimized have much faster load times, reduced bandwidth usage and improved user interaction. Smaller models are also easier to animate and integrate.
An important concept in model optimizations is LOD (Level of Detail). The same object often has several LODs, that represent the models complexity based on the distance of the viewer. For example when the camera is within 10 meters of the model, the full resolution is shown. But at 10-50m the full resolution model is replaced by a simplified version with, for example, 50% less polygons. Sometimes the reduction in LOD goes so far as to replace the whole model with a static image at great distances. The distances and transitions between LODs have to be chosen very carefully though as to avoid loading artifacts or noticeable changes in detail.
Simplifying the geometry is another major optimization technique. It is also needed for LODs, but the full resolution model for example should still be as optimized as possible. Mesh simplification tools can automatically remove unnecessary vertices and faces that might be duplicates or not even visible to the camera. Manual retopology is another very powerful but time extensive method that allows artists to craft low poly versions of the models.
SOURCES
1: https://visody.com/this-is-what-you-need-to-know-about-gltf-3d-model
2: https://resources.imagine.io/blog/gltf-vs-glb-which-format-is-right-for-your-3d-projects
3: https://ikarus3d.com/media/3d-blog/glb-and-gltf-files-purpose-difference-and-area-of-application-in-3d-modeling-services
4: https://www.sloyd.ai/blog/how-to-optimize-3d-models-for-real-time-generation
5: https://mazingxr.com/en/glb-vs-gltf/
6: https://blog.pixelfreestudio.com/how-to-optimize-webgl-for-high-performance-3d-graphics/
