Draco Compression for GLB & glTF: How Much It Saves and How to Use It

Draco is Google's open-source library for compressing 3D geometry. In GLB and glTF files it is applied through the KHR_draco_mesh_compression extension and typically shrinks mesh data by 80–95%, so geometry-heavy models download much faster. Below: how Draco works, how much it saves on a whole GLB, when Meshopt is the better choice, and how to apply and load Draco-compressed files.

Understanding Draco: Beyond the Basics

At its core, Draco is engineered to compress 3D graphics data, specifically targeting:

• Vertex positions
• Normals
• Colors
• Texture coordinates
• Generic attributes associated with geometry

By efficiently encoding this data, Draco achieves impressive compression ratios, often reducing file sizes by up to 95% without significant loss of visual fidelity. This efficiency is crucial for applications where bandwidth and storage are at a premium.

The Mechanics of Draco Compression

Draco's compression prowess stems from a combination of sophisticated techniques:

1. Geometry Quantization

Quantization involves reducing the precision of vertex attributes. For instance, vertex positions might be quantized to 14 bits per component. This process balances the trade-off between compression efficiency and the preservation of visual detail.

2. Connectivity Compression

Draco analyzes the mesh's topology to identify patterns and redundancies in the connectivity data—how vertices form faces. By exploiting these patterns, it encodes the connectivity information more compactly.

3. Entropy Coding

After quantization and connectivity compression, Draco applies entropy coding techniques, such as arithmetic coding, to further reduce data size by encoding frequently occurring patterns with shorter codes.

How Much Does Draco Compression Reduce File Size?

Draco only compresses geometry (vertex positions, normals, UVs, colors and triangle indices). Geometry data itself typically shrinks by roughly 80–95% at default quantization settings, but how much the whole GLB file shrinks depends on how much of the file is geometry:

That is why a good GLB compressor combines Draco with texture resizing and re-encoding. To check how geometry-heavy your model is, run it through the glTF validator, which reports vertex and triangle counts and the extensions already in use.

Draco vs Meshopt

Both are official glTF geometry compression extensions:

• Draco (KHR_draco_mesh_compression) usually produces the smallest files for static meshes, at the cost of slower decoding and a WebAssembly decoder (around 300 KB) that your viewer has to load.
• Meshopt (EXT_meshopt_compression) decodes much faster, also compresses animation and morph target data, and works well on top of gzip or Brotli, but files are usually somewhat larger than with Draco.

Pick Draco when download size matters most (most websites, AR and e-commerce viewers). Consider Meshopt for heavily animated scenes or when decoding speed on low-end devices matters more than bytes. The full comparison, including engine support and gzip behavior, is in Draco vs Meshopt.

Draco and glTF: A Synergistic Integration

Draco seamlessly integrates with the glTF (GL Transmission Format) ecosystem through the KHR_draco_mesh_compression extension. This integration allows developers to include compressed geometry within glTF files, facilitating efficient transmission and rendering in web applications.

Popular 3D engines and libraries, such as Three.js and Babylon.js, support Draco-compressed glTF files, enabling widespread adoption across various platforms.

Implementing Draco Compression: A Practical Guide

To harness the benefits of Draco compression, follow these general steps:

1. Install the Draco encoder from the official GitHub repository.
2. Use the encoder to compress your mesh or point cloud data:

./draco_encoder -i input.obj -o output.drc

To decompress and view the model:

./draco_decoder -i output.drc -o decompressed.obj

For glTF and GLB files you don't need the raw encoder. The gltf-transform CLI applies Draco directly to a GLB:

npx @gltf-transform/cli draco input.glb output.glb

Loading Draco-compressed GLB files in three.js

Your viewer needs a Draco decoder. In three.js, attach a DRACOLoader to the GLTFLoader:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/');

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('model.glb', (gltf) => scene.add(gltf.scene));

Babylon.js and <model-viewer> decode Draco out of the box. In Unity, glTFast decodes Draco once you add the separate Draco for Unity package. For the full loader setup, including Meshopt and KTX2 decoders and common errors, see how to load GLB models in three.js.

Draco Compression Without the Command Line: Online Solutions

For developers and artists who prefer a more accessible approach, several web-based tools offer Draco compression through simple browser interfaces. These online solutions eliminate the need for local installations and command-line operations, making 3D optimization accessible to everyone.

Our GLB compressor applies Draco together with texture resizing, WebP/AVIF conversion, deduplication and pruning in one pass. Upload a .glb or .gltf file, pick a preset or tune the Draco compression level and quantization bits, and download the result. Batch uploads and a REST API are available for pipelines.

Performance Benefits and Considerations

Implementing Draco compression offers several advantages:

• Reduced File Sizes: Significantly smaller 3D asset files lead to faster download times and lower bandwidth usage.
• Faster Load Times: Smaller files mean quicker parsing and rendering, enhancing user experience.
• Lower Storage Requirements: Compressed assets consume less disk space, beneficial for both developers and end-users.

However, it's essential to be aware of potential limitations:

• Decompression Overhead: Decompressing Draco files requires computational resources, which might impact performance on low-powered devices.
• Lossy Compression: Quantization introduces some loss of precision. While often imperceptible, it's crucial to balance compression levels with visual fidelity requirements.
• Compatibility: Ensure that your target platform or engine supports Draco decoding, especially when targeting a broad audience.

Conclusion

Draco compression stands as a powerful tool in the realm of 3D graphics, enabling developers to optimize assets for performance without sacrificing quality. By understanding its mechanisms and integrating it thoughtfully into your workflow, you can deliver rich 3D experiences that are both efficient and visually compelling.

For more information and to access the Draco library, visit the official Draco website.