Draco + morph targets results in Cannot read property 'isInterleavedBufferAttribute' of null

Description of the problem

Hi, I have the following glb object. morph.glb.txt (please remove .txt extension, github doesn’t allow .glb uploads) When I drag this file to gltf-viewer.donmccurdy.com it loads fine.

However, when I add draco compression to it using gltf.insimo.com I end up with this file: morph with draco.glb.txt Which loads fine on gltf.insimo.com but gives an error on gltf-viewer.donmccurdy.com The latter seems to be on three.js r108 whereas gltf.insimo.com is still on r88.

It seems like somewhere along the way support for draco and Morph targets broke. I’m getting the following error Cannot read property 'isInterleavedBufferAttribute' of null. This is not just an issue with the gltf viewer, as it is also happening on my local build with three r110.

It appears like the issue lies within GLTFLoader.js @ addMorphTargets(). I tried to fix it myself but haven’t had much luck so far. parser.getDependency( 'accessor', target.POSITION ) appears to return a resolved Promise with null which is intended, but I think when draco is involved, parser.getDependency('accessor') shouldn’t be called in the first place.

If anyone could help me out with this that’d be much appreciated 😃

Three.js version

r110

[donmccurdy]

@jespertheend sorry, the glTF+Draco extension does not compress morph targets. gltf.insimo.com did an experimental implementation proposing it, but that never got standardized and isn’t supported in any other glTF tools.

I’d suggest suggest using glTF-Pipeline for Draco compression instead (which will leave the morph targets uncompressed). Alternatively, gltfpack might be able to reduce the size of your morph targets without Draco. You’ll need to avoid gltfpack’s -c option, as that’s also an experimental thing that requires a custom loader.

[jespertheend]

I don’t exactly remember the details, but from what I can recall and from what I can see in my git repository. You’ll have to use the GLTFLoader.js and DRACOLoader.js from what is currently live on insimo. Along with the external library directory which you should host separately.

You can then add draco support to your gltf loader using

gltfLoader.setDRACOLoader(new THREE.DRACOLoader("libs/draco/",{
    type: "js",
}));

The only modifications I had to make were adding back support for proper names in the morphTargetDictionary. The lines of code that you see here were not in the insimo version yet. So you’ll have to add those if you want to have a useful morphTargetDictionary names.

Also I removed two console.time( 'GLTFLoader' ); lines because they were cluttering my console.