the wire.

Compression made visible.

The two viewports above show the same Khronos sample asset, fetched twice. On the left, the geometry is shipped as raw glTF — a JSON manifest plus a binary blob (.bin) of interleaved float positions, normals, UVs, and 16-bit indices. On the right, the same mesh is shipped as glTF-Draco — the same JSON manifest, but the .bin file holds the geometry in Draco's compressed bitstream. Two URLs, two byte counts, one mesh.

The page IS the build of the consumer side. It downloads both .bin files separately to measure them, hands the Draco one to Three.js's GLTFLoader + DRACOLoader for decoding, and renders the result twice — once from the raw glTF, once from the Draco glTF. The visuals are identical; the bytes are not.

Same shape. Different wire.

What gets smaller, exactly.

Draco's compression does two things. First, it runs an edgebreaker traversal across the mesh's connectivity graph, converting the index buffer into a stream of small symbols that describe how each new triangle attaches to the ones already seen. Second, it quantizes each vertex attribute — positions, normals, UVs — to a fixed bit count, then entropy-codes the result.

What the page measures is the cumulative effect on the geometry buffer alone: the same vertex data, but bytes-per-vertex collapses from ~44 to roughly 4 once edgebreaker and quantization land. Textures stay the same size — Draco does not touch them. The savings live entirely in the part of the asset that scales with polygon count.

Why this is "Bake," not "Runtime."

In a real production pipeline, you do not encode in the browser. You run Draco's encoder once, at build time, on a workstation or in CI, and ship the resulting .bin file pre-compressed. The browser only ever loads the WebAssembly decoder (~110 KB) and decompresses on the way in. That is what this page is doing: decoding a real, pre-baked Khronos asset using the same code path your production glTF viewer would use.

This is the shape of every Bake-stage technology. Texture compression (KTX2 / Basis Universal) does the same thing for images. Mesh optimisation (meshoptimizer, xatlas) reorders vertices for cache locality and unwraps UVs ahead of time. glTF itself is the wrapper format that ties them all together. None of this work happens at runtime, but every runtime pays the price when it is skipped.

Bake once, ship many, decode forever.