Why 3D on the Web

Creating immersive and smooth extended reality (XR) experiences hinges on the performance of your 3D assets. Extended Reality (XR) represents the full spectrum of experiences that encompasses all immersive technologies, offering users everything from simple overlays of digital content on the real world (AR), to fully immersive digital environments (VR), to interactive hybrids where digital and physical objects coexist and interact in real time (MR).

3D modelling is fundamental to XR because it provides the digital objects, environments, and assets that users experience and interact with across all these technologies. In XR, 3D models are rendered with depth and volume, creating a sense of realism and spatial understanding crucial for immersion and interactivity. Whether in AR, VR, or MR, users engage with these 3D models by rotating, moving, scaling, or even manipulating them in real time, making experiences more engaging and transformative. However, each of these experiences has different modelling requirements. For example, AR (augmented reality) is not fully immersive, so you only need a model with a lower polygon count and simple textures. VR (virtual reality), on the other hand, is completely immersive; therefore, the opposite is true in this case. In essence, the modelling requirements depend on the type of experience you are modelling for.

On the web, 3D modelling enables XR experiences to be delivered directly through browsers using platforms like WebXR, making these technologies more accessible and widely adopted. This article will guide you through the essential techniques for optimising your 3D meshes and textures to ensure your XR applications run seamlessly

WebXR 3D File Formats

When creating 3D content for XR, choosing the right file format is crucial for performance, compatibility, and user experience. The most commonly used 3D file formats include;

• OBJ: Widely supported, good for static models, but lacks advanced features like animations or materials for real-time rendering.

• FBX: Supports complex animations and scene data, popular in gaming and film, but can be heavy and proprietary.

• STL: Primarily for 3D printing, limited in XR applications. STL files only store the geometry of a 3D model, lacking information about texture and other material properties.

• GLB: Specifically optimised for web and real-time applications, supporting PBR materials, animations, and efficient transmission.

Why GLB is the Recommended Standard 3D File Format for XR

GLB has emerged as the industry standard for 3D content in XR, especially on the web. Here’s why:

• Compact File Size: GLB files are significantly smaller than other formats due to their binary structure, which bundles geometry, textures, and animations into a single file. This compactness translates to faster loading times and reduced bandwidth usage, which is critical for seamless XR experiences, especially on mobile and web platforms.

• Fast Loading: The binary nature of GLB means assets are machine-readable and require minimal parsing, resulting in quicker rendering and interaction in real-time applications like AR and VR.

• Web Optimisation: GLB is designed for efficient streaming and real-time rendering, making it ideal for web-based XR experiences.

Mesh Optimisation

High-fidelity models can quickly overwhelm even powerful hardware, leading to stuttering, low frame rates, and a generally poor user experience. This is why it is important you optimise your 3D meshes and below are ways to optimise your 3D meshes for WebXR;

Polycount Reduction: You need to ensure you use lower poly models enough to convey the shape and important features. You can start by identifying and removing parts of the model that are less visible or have a high density of polygons that don't contribute significantly to the silhouette. Most 3D software offers mesh simplification tools to intelligently reduce polycount while preserving the shape of the model. glTF/GLB file formats also automatically compress meshes and convert polygons to triangles (Tris-count).

Good Topology: A clean and efficient mesh topology is easier to work with and performs better. Avoid unnecessary loops, hidden faces, overlapping meshes and overly dense areas. You want to use modifiers and features in your 3D software instead of dense meshes to achieve the same goal. Also check for the orientation of your normals as they can affect the appearance of your model and textures.

These are examples of common 3D errors and are not limited to this. You should strive to improve your skills or hire a 3D artist to work on efficient models. You can also make 3D model requests for your business or brand via SwiftXR.io

Texture Optimisation

Textures and materials add realism and detail to your 3D models; they bring your grey and lifeless-looking clay mesh to life. With the right textures, you can skip some modelling and enhance the aesthetics of your model to tell the right story, but textures can also increase the file size and loading time. The material system GLB file format supports are Base colour, Metallic, Roughness, Baked ambient occlusion, emissive and Normal maps (tangent space Y+ up, Non-colour data settings)

How to Optimize Textures for your 3D Models

Here are ways to optimise textures and materials for your 3D models, and it involves trying out different methods to reduce your overall file size.

Texture Resolution: On mobile devices, high-resolution textures can take up a lot of memory and slow down performance. Instead, reduce the texture resolution to something smaller, like 512×512 or 1024×1024 pixels, which still looks good but is less demanding on the device. Smaller textures mean faster loading times and better performance.

Using Image Textures: Instead of complex node setups, image textures are a PBR alternative. Images can be edited and compressed with Photoshop or other compression tools. Image texture formats should be in either JPEG or PNG for readability in GLB.

Texture Mapping: Instead of using multiple small textures for different parts of a model, combine them into a single texture map. Only use necessary texture maps (albedo, normal, roughness) to avoid complex layered shaders that slow down rendering.

Bake Lights and Shadows: Bake lighting and shadows into textures in the modelling or rendering phase, so there won’t be any need for real-time light calculations.

Baking Ambient Occlusion: GLB files are capable of storing baked ambient occlusion. This can be useful for real-time GLB viewing and rendering, especially on platforms and devices where there may not be spare power for computing such things at render time

Efficient File Compression

One of the ways to optimise 3D models for a smooth XR experience is by compressing the GLB model file using glTF and GLB compression or packing tools to reduce the size of the file without reducing the quality.

You can also use the Google Draco (https://github.com/google/draco) compression technique, which significantly reduces the size of the 3D model while preserving visual quality. Smaller files mean faster loading times, important for delivering a seamless XR experience, especially on mobile devices.

Workflow Diagram

This is a typical workflow to guide you in creating your 3D models. Whether you’re new to 3D or an expert, and regardless of the 3D software you use, this flowchart will help you from the start to the completion of your modelling

Now, you’re ready to start building your 3D models for a sweet XR experience. If you’re careful to consider all the aforementioned factors, you’ll be able to create efficient 3D models for a seamless XR experience. You can use WebXR sites like SwiftXR via (https://home.swiftxr.io/), to test your 3D models; their scale, textures and how they would perform in an augmented or Virtual Reality environment