We are happy to announce that Hubs now supports LOD! This feature allows richer, more performant, and more efficient model rendering in Hubs.
What is LOD?
In computer graphics, level of detail (LOD) refers to the complexity of a 3D model representation. LOD can be decreased as the model moves away from the viewer or according to other metrics such as object importance, viewpoint-relative speed or position. LOD techniques increase the efficiency of rendering by decreasing the workload on graphics pipeline stages, usually vertex transformations. The reduced visual quality of the model is often unnoticed because of the small effect on object appearance when distant or moving fast.
Wikipedia: Level Of Detail
In short, the LOD technique is an efficient rendering technique by rendering simpler versions of models for distant objects.
Below is a LOD demo video recorded in Hubs. You will notice the model switches to simpler versions as the player moves further away from it.
Progressively loading LODs
An asset supporting LOD includes several LOD levels of a model. Progressively loading LODs can save network usage. For example, we can start by loading the smallest version of the asset and then downloading the more demanding version of the model as the camera gets closer to the object. Progressive loading ensures that higher-cost versions of the asset are never downloaded unless the player gets close.
Benefits from LOD
You will get the following benefits from LOD + Progressive loading.
- Better runtime performance. Distant objects are simple to render.
- Shorter response time. Models become visible when the lowest LOD download is completed.
- Save network usage. Unused LODs are never downloaded.
A benefit derived from the above is that LOD allows richer content. Currently scene authors may be hesitant to put many high quality models in a scene because they can cause negative impact for runtime performance, response time, and network usage. The efficiency gained by using LOD techniques can mitigate this negative impact.
glb + HTTP range requests
Hubs supports glTF, which is a standard 3D file format. If you are familiar with the glTF format, you may assume having a single bundled glb should be avoided to exploit the progressive loading. This is not the case.
Binary container format of glTF, called glb, enables a glTF asset, including JSON, mesh data, and texture images to be stored in a single glb file. Bundled glb files are easy to import to applications because they don’t need to care about archive files.
HTTP range requests enable partial downloading. An HTTP range request asks the server to send back partial data of a file. HTTP range requests enable downloading a specific level of a bundled glb file.
glTF MSFT_lod extension
The core glTF specification doesn’t support LOD. How can LOD be represented in glTF? glTF has an extensibility mechanism that extends the base glTF model format.
Microsoft proposed a LOD extension MSFT_lod as a vendor extension that allows LOD in glTF node or material. Hubs supports this extension because it provides better portability for assets than making Hubs-specific LOD components.
Authoring tools
So how can you create assets with LOD and export as glTF?
Unfortunately there are no major asset authoring tools that support the MSFT_lod extension, so I have made two tools for this purpose.
glTF-transform script
glTF-transform is a useful glTF SDK created by Don McCurdy that provides fast, reproducible, and lossless control of the low-level details in a 3D model.
glTF-transform doesn’t natively support the MSFT_lod extension but provides an extensibility mechanism that allows user custom extension handling.
I have written a glTF-transform script that uses the extensibility mechanism to handle the MSFT_lod extension. You can add LOD to a glTF asset in the command line. The original glTF asset is used as the highest LOD and lower levels are automatically generated from the glTF asset with glTF-transform and the dependency libraries. Please refer to the following link for the details:
Blender Add-On
Blender is one of the most popular computer graphics software and you can create 3D assets with it. Blender doesn’t natively support glTF format but it has an extensibility mechanism called addons and the glTF import/export addon is installed by default.
Unfortunately, the glTF add-on doesn’t support the MSFT_lod extension. So I have written a Blender MSFT_lod add-on. With this add-on, you can assign lower-level meshes to a mesh and export them as glTF with the MSFT_lod extension. Please refer to the following link for the details:
Implementation for LOD in Hubs Client
LOD support
Hubs Client (Hubs web application page) is built on the top of Three.js, which is one of the most popular JavaScript + WebGL 3D graphics engines. Three.js has a THREE.LOD class that manages LOD. glTF assets having the MSFT_lod extension need to be imported as THREE.LOD objects in Hubs Client.
Three.js GLTFLoader supports some standard glTF extensions by default but doesn’t support the MSFT_lod extension. The GLTFLoader has an extensibility mechanism called Plugin system that allows custom glTF extensions handling. I wrote a plugin that imports a glTF asset having the MSFT_lod extension as a THREE.LOD object.
HTTP range requests support
Currently, Three.js doesn’t support HTTP range requests. I have sent a pull request to Three.js for HTTP range requests support. It hasn’t been merged yet at the time when I’m writing this article so we have cherry-picked this upcoming change to our Three.js fork.
Three.js GLTFLoader also needs some changes for HTTP range requests. Fortunately, I have found that HTTP range requests support is doable with the plugin system so I wrote a Three.js GLTFLoader HTTP range requests plugin that allows progressive LODs loading with HTTP range requests.
How to enable HTTP range requests feature
Because of some reasons the HTTP range requests support in Hubs Client is still an experimental feature and it is hidden behind a flag right now.
It is disabled by default. To enable it you need to add “rangerequests” query string to the Hubs URL.
- Go to https://hubs.mozilla.com/ in your web browser
- Create and enter a room
- Add “rangerequests” to the URL bar, like https://hubs.mozilla.com/randomId/roomName?rangerequests, and load the page again
To ensure that the HTTP range requests feature is enabled, open your browser’s devtool network panel (Chrome/Firefox) and find 206 HTTP status response code.
Feedback is welcome
Enjoy LOD in Hubs. We are happy to hear your feedback on Mozilla Hubs GitHub or Mozilla Hubs Discord.
