A common challenge in web 3D is the load time of large, detailed models. User experience is heavily influenced by how quickly content becomes interactive, and waiting for a multi-megabyte file to download can be a significant barrier.
At Needle, we’ve developed a solution to address this: a progressive loading technique, packaged in our @needle-tools/gltf-progressive library. It’s designed to work seamlessly with popular tools like Needle Engine or Google’s <model-viewer> or any three.js based engine to get your content on screen almost instantly.
This article provides a practical guide on how to implement this for your own projects.
The Challenge with Standard glTF Loading
By default, when a browser loads a glTF or GLB file, it must download the entire file before it can render the model. For complex assets, this “all-or-nothing” approach results in the user seeing a blank space or a loading indicator until the transfer is complete.
Our Solution: Progressive Loading
Our progressive loading approach is inspired by how modern images load on the web. Instead of a single, monolithic file, the model is split into multiple quality levels.
- An initial, smaller version of the model is loaded first. This file is optimized for fast loading and appears on screen very quickly.
- While this placeholder is displayed and interactive, a higher quality version streams in the background.
- Once the higher-quality data is ready, it seamlessly replaces the placeholder version.
This method dramatically improves the perceived load time, allowing users to start interacting with your 3D content right away.
Implementation with <model-viewer>
One of the best features of our gltf-progressive package is its ease of integration. You don’t need to modify your <model-viewer> element or write any special JavaScript. You simply include our script, and it handles the rest.
Here is a complete, copy-and-paste example.
<!DOCTYPE html>
<html>
<head>
<title>Progressive Loading with Needle and model-viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1. Importmap for Three.js, a dependency of model-viewer -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
"three/": "https://cdn.jsdelivr.net/npm/three/"
}
}
</script>
<!-- 2. The <model-viewer> web component -->
<script
type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"
></script>
<!-- 3. The Needle gltf-progressive script. This enables the progressive loading behavior. -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive@latest/gltf-progressive.min.js"
></script>
</head>
<body>
<!--
The model-viewer tag is standard. The src model has been processed by Needle Cloud
to support progressive streaming.
-->
<model-viewer
src="https://cloud.needle.tools/-/assets/Z23hmXB2oYehK-latest-product/file"
ar
shadow-intensity="1"
camera-controls
touch-action="pan-y"
auto-rotate
max-camera-orbit="auto 90deg auto"
></model-viewer>
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
model-viewer {
width: 100%;
height: 100%;
background-color: #f0f0f0;
}
</style>
</body>
</html>Preview
Creating Progressive Assets with Needle Cloud
This progressive loading technique requires assets to be structured with multiple levels of detail. While it’s possible to create these assets manually, the most straightforward method is to use the automated optimization pipeline in Needle Cloud.
Needle Cloud is our service for hosting, managing, and optimizing 3D assets for high-performance web delivery.
When you upload a 3D asset (e.g., GLB, FBX, USD) to Needle Cloud, our pipeline automatically processes it. This includes:
- Mesh simplification to create multiple level-of-detail meshes.
- Texture resizing to generate different resolutions.
- State-of-the-art compression for both meshes and textures.
The result is a single, optimized asset link that contains all the necessary data for progressive streaming. Simply upload your model to Needle Cloud, get the optimized URL, and use it in your project.
Conclusion
By combining the simplicity of <model-viewer> with assets optimized by Needle Cloud, you can significantly improve the initial load time and overall user experience of your web 3D applications. This technique is a key part of our commitment to building a faster, more accessible spatial web.
We encourage you to try this with your own assets by signing up for a free account on Needle Cloud.