TLDR; Export the file with glTF 2.0 and enable compression under Geometry.
During some experimentation with the VR framework A-Frame, I found out there is a new format for the web called glTF. It’s used for describing 3D models, animations and textures, all in one file.
(Here is an example of a glTF file rendered in the browser using Sketchfabs renderer)
Usually we can compress assets (like images and sounds) in the browser using Gzip or Broccoli. These compression libraries are build into every browser, and the files can be compressed beforehand or on the fly on the server.
But to be able to compress glTF files, be need a library called Draco 3D. You could download it on GitHub and build the binaries from source, but there is no need to do that; our beloved Blender has build in support for glTF export and compression using Draco. No extra plug-ins needed!
Here’s how you compressed a glTF file in Blender using Draco
Export the file using the menu File > Export > glTF 2.0
Enable compression by expanding the Geometry accordion, check Compression, and export the file.
Done!
As a side note: Currently browsers can’t decode files compressed with Draco, but hopefully there will come a day when they can, just like Gzip. But until then, we can run a WebAssembly file to decode it directly on the page we need it. If you’re using A-Frame or three.js, here’s some documentation for A-Frame how to use it, and here is a link for the WASM files you need to include in your project.
As a last bonus: Here’s a glTF viewer you can use to view glTF files, and here is a simple file you can use to try it out:
note.glb (7 kb compressed, 18 kb uncompressed)
Leave a Reply