Learning on Web Dev Open is free for all.

Immersive Web > Geometry, assets, and not shipping 40MBDraco, Meshopt, KTX2, and the texture memory you forgot to count
Phase 07Geometry, assets, and not shipping 40MB350 of 434

Draco, Meshopt, KTX2, and the texture memory you forgot to count

Transfer size is the number you look at and GPU memory is the number that kills you. They are not the same number.

Concept16 minAI pair

Draco compresses mesh data hard, often to a tenth, at the cost of a WASM decoder and a decode pause on the main thread. Meshopt compresses less but decodes an order of magnitude faster and streams better. For a hero model behind a loading screen, Draco. For many small assets loaded during interaction, Meshopt. Choosing by which one has the better compression ratio is the wrong criterion.

Textures are the real budget. A 2048 by 2048 PNG might transfer as 1.5MB, but on the GPU it is decompressed to raw pixels: 2048 times 2048 times 4 bytes is 16MB, plus a third again for mipmaps, so about 22MB. Four of those and you have spent 88MB on a device that may only give you a few hundred, and the first sign of trouble is not a warning but a tab that dies on an older iPhone.

KTX2 with Basis Universal is the fix, and it is the least-known important thing in this phase. It transcodes at load into a format the GPU keeps compressed in memory, typically a quarter of the size, permanently, not just in transit. It looks slightly worse under close inspection and it is almost always the correct trade.

You should now be able to

  • Calculate the GPU memory a texture set occupies
  • Choose between Draco and Meshopt honestly
  • Explain what KTX2 does that a PNG cannot
Ask the community

Loading…