All guides

Optimize a GLB for the web: Draco, Meshopt and KTX2

A GLB that opens fine in Blender can still wreck a web page. Geometry and textures are separate problems, as are download size and GPU memory. Start with textures, then draw calls, then triangles, and preserve any parts your application needs to select.

Measure before you change anything

Record file size, texture dimensions, draw calls and triangle count before changing the asset. Test a cold load on the phone you intend to support.

The order that matters: textures, then draw calls, then triangles

Reduce texture dimensions first, then review draw calls, then triangles. A smaller download does not establish a lower render cost.

Draco vs Meshopt for geometry

Draco prioritizes geometry compression; Meshopt is an alternative with different decoding tradeoffs. Test both with your actual loader and asset.

WebP vs KTX2 for textures

WebP targets the texture download. KTX2 also addresses the compressed texture footprint on the GPU. Treat transfer size and GPU memory as separate budgets.

Do not join meshes you need to address

Joining meshes can remove named parts needed for selection or interaction. Preserve the original and verify that required parts remain individually addressable.

Wiring the decoders into Three.js

Configure DRACOLoader for Draco, MeshoptDecoder for Meshopt, and KTX2Loader with setDecoderPath and detectSupport(renderer) for KTX2. The exported extensions and loader must agree.

What optimization does not fix

Compression alone does not fix draw calls, oversized texture dimensions or the decoded triangle count. Recheck the scene after loading, not just the file on disk.