Compressing large GLB/GLTF files for the Web

The library gltfpack is an effective way to manage large GLB files that may cause your Three.js projects to lag, particularly if you want a seamless mobile experience.

You know the drill: your website is lurching because the 3D model you have is simply too large in file size. Introducing gltfpack!

What is gltfpack? This utility is designed to take your large GLB files and reduce their size to a more manageable size without sacrificing too much quality. It’s insane to think that file sizes can be reduced by up to 80%.

This translates to quicker loading, contented consumers, and an overall smoother experience — especially on mobile devices where every byte matters.

It is simple to get started with gltfpack. First, you’ll need to have Node.js installed because gltfpack is an npm package. Once you’ve got that sorted, it’s as simple as running a couple of commands in your terminal. Install gltfpack globally with npm install -g gltfpack, and you’re ready to roll. To compress a GLB file, just run

gltfpack -i yourModel.glb -o yourModelOptimized.glb

and here we go, you’ve got yourself a lean, mean, web-friendly 3D model.

But there’s still more! gltfpack improves your models for real-time rendering in addition to reducing file sizes. This implies that you could be improving the efficiency of your software in addition to cutting down on download times.

Checkout the docs of gltfpack in order to use decoders such as Meshopt which will reduce the file size substantially, though you will need to use the respective decoder in order to render the model.

Make sure your optimized models still appear attractive and function well in your application by giving them a close inspection. Find the ideal balance between size and quality that works for your project; sometimes, extreme compression can result in visual distortions or other problems.

gltfpack is definitely worth checking out if you’re working with THREE.js and gltf and want to maintain the a reasonable size of your 3D models without adding extra weight to your website.