A .glb model loaded using GLTFLoader isn't compressing despite using DRACOLoader

Questions
, ,
1

Hi, I am new to threejs, I am using GLTFLoader to load a .glb file and it’s size is 10+MB so it’s creating performance issues for me, to avoid that I am using DRACOLoader for compression but loaded file size remains same.

                function loadGLTF(modelName) {
                      var loader = new THREE.GLTFLoader();

                     THREE.DRACOLoader.setDecoderPath('models/draco/');
                    loader.setDRACOLoader(new THREE.DRACOLoader());
                loader.load(
                    // resource URL
                    'models/Bridge.glb',
                    // called when the resource is loaded
                    function (gltf) {
                       

                        // mixer = new THREE.AnimationMixer(mesh);

 
                        gltf.animations; // Array<THREE.AnimationClip>
                        gltf.scene; // THREE.Scene
                        gltf.scenes; // Array<THREE.Scene>
                        gltf.cameras; // Array<THREE.Camera>
                        gltf.asset; // Object
                        gltf.animations = new THREE.Object3D();
                        gltf.scene.position.set(1.5, -0.75, 0.3);
                        gltf.scene.rotation.set(0, 0, 0)
                        gltf.scene.scale.set(1, 1, 1)
                        scene.add(gltf.scene);
                    },
                    // called when loading is in progresses
                    function (xhr) {

                        console.log((xhr.loaded / xhr.total * 100) + '% loaded');

                    },
                    // called when loading has errors
                    function (error) {

                        console.log('An error happened');

                    }

                );

            }
2

How did you apply the Draco mesh compression to your existing glTF asset?

3

The asset is developed using blender and exported as .glb file and I’m directly using it. Does Draco mesh compression need to be handled at the time of developing the asset or can be handled using threejs part?

4

You first need to encode the data before you are loading it. The decoding is performed by three.js (THREE.DracoLoader) when the asset is loaded.

I’ve used the CLI tool draco_encoder to create .drc assets in the past. But I don’t know how you perform the encoding with glTF assets so you can use the KHR_draco_mesh_compression extension. I’m sure @donmccurdy can help here.

5

As @Mugen87 says there are two steps required to use Draco compression:

  1. Compress the data during or after export. The Blender exporter cannot do this for you, so you’d need to take the glTF file created by Blender and use it with https://gltf.insimo.com/. There are other tools for glTF->glTF+Draco conversion in progress.
  2. To load a glTF file using Draco, you need to give GLTFLoader a DRACODecoder so it can decompress it. Looks like you’ve done that part correctly above.
3 Likes