How to use draco loader?

Sounds like you’re using react-three-fiber? Sorry, I don’t know how it’s supposed to be set up in that system. If you don’t get a reply here it might be worth tagging the question for react-three-fiber on stack overflow or their forums.

1 Like

Hello @donmccurdy ,

Does anyone here get this error?
I just follow these steps to make dracoModel.gltf from gltf-pipeline:

  1. Resize textures to 256x256
  2. Use gltf-pipeline to make dracoModel.gltf
    gltf-pipeline -i myModel.gltf -o dracoModel.gltf -d -b

But I got this error when testing in https://gltf-viewer.donmccurdy.com/

Thanks,

I think this was a bug in the viewer with the last update, could you try again?

Also note that the -b option is for creating binary .glb files, so it should probably be used with a .glb output extension:

 gltf-pipeline -i myModel.gltf -o dracoModel.glb -d -b 
2 Likes

You rocks, @donmccurdy!
It works like a charm :smiley:

Q.

1 Like

Hi guys,

I just learned about gltf-pipeline and the DracoLoader and I’m testing how fat my models are loading when I’m dealing with the same model in obj format, glb format, gltf format or gltf with the draco encoding. But is there a way to do an actual timing of how fast things load? I mean does three.js have a clock or something like that?

The easiest way to time something is the web browser’s timing API:

console.time('MyTask');

...

console.timeEnd('MyTask');

This will print the time in the console when it finishes. But I think it’s also fair to say that a file 1/2 the size will generally download in 1/2 the time.

Hi again,

I set up a dracoLoader like this:

  let loader = new THREE.GLTFLoader(loadingManager);
  
  const dracoLoader = new THREE.DRACOLoader(); 
  
  dracoLoader.setDecoderPath( 'js/vendor/draco/' ); 

  dracoLoader.setDecoderConfig({ type: 'js' });
  
  loader.setDRACOLoader( dracoLoader );

I’m loading upwards of 30 models. If I remove the command dracoLoader.setDecoderConfig({ type: 'js' });, things start getting weird. Some models disappear, I get an error related to memory, etc. But including that setting makes the whole thing work. So the question is why? What does it do?

Let’s start a new thread for this question if that’s alright. In that thread, could you confirm whether you’re reusing a single DRACOLoader for all of this, or creating more than one?

1 Like

Sure yes. I think the way the code works is that each time a new model is loaded, a new GLTFLoader is created (for each object), and an accompanying DRACOLoader. However, what made a huge impression to me is that without the line

const dracoLoader = new THREE.DRACOLoader(); 

dracoLoader.setDecoderConfig({ type: 'js' });

I get the error WebAssemply.Memory(): could not allocate memory error and some of the models never load. But if I do add that line the error goes away and I instead get a new error Cannot read properties of null which however causes no issues and the models load normally. The whole webpage is slow though because of loading 30+ models.

I’m attaching the errors and a sample model if that helps.



everest.gltf (1.3 MB)

Let’s start a new thread.

Sure, how? Will you start it you mean?

You can use the “new topic” button on the forum homepage:

1 Like

Done, I simply asked what the option does :slight_smile: