multiple instances of draco_wasm_wrapper.js

[bhushan6]

I am not sure but is it right if my app is requesting multiple draco_wasm_wrapper.js files, almost 10+, feels like it is seperate request for each model because I am using multiple draco compressed models (not sure how many tbh) but just wanna know is this right behavior?

if you can look the above pic, you'll see 7 seperate draco_wasm_wrapper.js requests and there are few more which are not in view

[drcmda]

this is not really anything we control. draco is pulled in by the THREE.GLTFLoader. it's probably even correct because it has to make a fetch request each time you load a model, that's completely normal, but it's then the browsers job to deal out cached results, which it will, unless you disable it, which you have. under normal circumstances the successive requests will always fetch from cache and yield immediately without a waterfall.

[drcmda]

how many models do you have? it could be that gltfloader/dracoloader does not re-use the wasm thing, that would be out of our control to fix. but in that case you can still preload all your models with a single useGLTF call, this would only call new GLTFLoader() once:

function App() {
  const [a, b, c, d] = useGLTF(["/a.glb", "/b.glb", "/c.glb", "/c.glb"])
  return (
    <Suspense fallback={null}>
      <Model {...a} />
      <Model {...b} />
      ....

function Model({ scene, nodes, materials }) {
  ...

[bhushan6]

Yeah, I was thinking the same. It'll worth a try since I don't see any solution for the problem and also not sure of problem. I'll try that tomorrow.

[bhushan6]

This worked 😁

[drcmda]

then it seems like GLTFLoader/Darco makes up a new wasm worker in the constructor, which really is not optimal. in my opinion a class should not be limited to how many times you can construct it, at least not if a few times can crash the tab. maybe that should be a request on the threejs GH, at least asking if that can be handled differently. i think some threejs classes already handle wasm in a shared content, i believe meshopt for instance.

[bhushan6]

Yeah, maybe need to raise the question on forum first to discuss about it.

[m4cn4ir]

Not really sure, but could those instances be the webworkers that are used by the loader?

A while ago I had web Assembly memory issues in safari because of draco - I had to reduce the amount of workers.

export function importDrcGLTF(url) {
const loader = new GLTFLoader();
const dl = new DRACOLoader();
dl.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/.../');
dl.preload();

dl.setWorkerLimit(4);

loader.setDRACOLoader(dl);
return new Promise(resolve => {
loader.load(url, resolve);
});
}

[bhushan6]

Idk if loaders use web workers or not tbh, but will give this a try too. If it worked for you it might just work for me too. Thanks for replying. :)