Draco compression and Three.js

 Big meshes? Can Draco help?

optimize meshes

When your 3d models are big, you could try to compress them with Draco. Three.js is capable to load such models.

Let's go into Three.js docs. They say that we can convert our normal GLTF files into Draco compressed GLTF files. In order to that we'd need to use something called glTF-Pipeline.

So let's do this. First we need some GLTF. Then we install glTF-Pipeline.

Install glTF-Pipeline

npm install --save-dev gltf-pipeline

Compress files

npx gltf-pipeline -i scene.gltf -o compressed-scene.gltf -d

Unfortunately this compression doesn't always shrink asset size. Not sure if it depends on configuration or specific assets to compress but models with big textures are not getting smaller with Draco :( But AFAIK Draco is for compressing geometries rather than textures.

But let's assume optimistic path that our asset did shrink. So let's go to the next path. Let's load an asset as usual, using GLTFLoader:

And let's run.

Error: THREE.GLTFLoader: No DRACOLoader instance provided.
    at new GLTFDracoMeshCompressionExtension (GLTFLoader.js:563)
    at GLTFLoader.parse (GLTFLoader.js:190)
    at Object.eval [as onLoad] (GLTFLoader.js:87)
    at XMLHttpRequest.eval (three.module.js:36838)

Yupi! We're almost at home. This error means that Three.js recognized that given GLTF is Draco compressed but we need to create DRACOLoader object and pass it to the GLTFLoader:

Yet we missed something:

GET http://localhost:8080/assets/create.svg 404 (Not Found)
three.module.js:36920 GET http://localhost:8080/draco_wasm_wrapper.js 404 (Not Found)
three.module.js:36920 GET http://localhost:8080/draco_decoder.wasm 404 (Not Found)
localhost/:1 Uncaught (in promise) ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 160, total: 160, type: "load", …}
localhost/:1 Uncaught (in promise) ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 160, total: 160, type: "load", …}
localhost/:1 Uncaught (in promise) ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 160, total: 160, type: "load", …}

And here's the weird part: it seems that you must to manually copy files from node_modules/three/examples/js/libs/draco/gltf into your public path on server:

cp -r node_modules/three/examples/js/libs/draco/gltf HERE_YOUR_PUBLIC_PATH

Then you have to call dracoLoader.setDecoderPath('PATH_TO_DRACO_LIBRARY')

So our final code: