Error loading model: xxx.glb [TypeError: undefined is not a constructor (evaluating 'new m.DecoderBuffer')]，
I want to load glb models,when I run my code,it only some glb models been loaded successfully,and I got this error,but when I refresh my html,it all worked well.
When I clear the cache and load the page again, this problem may occur，I got confused.may someone could help me,please,btw,when this problem accur there are always problems with those models
Is it a specific model/asset that has this problem? If so, does it work in our viewer https://playcanvas.com/viewer or Babylon’s? https://sandbox.babylonjs.com/
yes,but when I have refeshed html ,it wil worked well
Is there any way to share a reproducible of this issue? I’ve not seen this error come up before.
Are there any possible network issues?
Yeah,It works well in viewer.
Are you using Draco mesh compression?
yes
Is it possible that the Draco library hasn’t fully loaded yet before you start loading GLBs?
I’ll reconfirm and get back to you
I use engine directly,this is my code:
/*** 加载Draco压缩后的glb文件
* loadGlbContainerFromAsset 加载glb二进制文件
*/
var loadModules = function (modules, urlPrefix, doneCallback) {
// check for wasm module support
function wasmSupported() {
try {
if (typeof WebAssembly === "object" && typeof WebAssembly.instantiate === "function") {
const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
if (module instanceof WebAssembly.Module)
return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
}
} catch (e) {}
return false;
}
// load a script
function loadScriptAsync(url, doneCallback) {
var tag = document.createElement('script');
tag.onload = function () {
doneCallback();
};
tag.onerror = function () {
throw new Error('failed to load ' + url);
};
tag.async = true;
tag.src = url;
document.head.appendChild(tag);
}
// load and initialize a wasm module
function loadWasmModuleAsync(moduleName, jsUrl, binaryUrl, doneCallback) {
loadScriptAsync(jsUrl, function () {
var lib = window[moduleName];
window[moduleName + 'Lib'] = lib;
lib({
locateFile: function () {
return binaryUrl;
}
}).then(function (instance) {
window[moduleName] = instance;
doneCallback();
});
});
}
if (typeof modules === "undefined" || modules.length === 0) {
// caller may depend on callback behaviour being async
setTimeout(doneCallback);
} else {
var asyncCounter = modules.length;
var asyncCallback = function () {
asyncCounter--;
if (asyncCounter === 0) {
// doneCallback();
}
};
var wasm = wasmSupported();
modules.forEach(function (m) {
if (!m.hasOwnProperty('preload') || m.preload) {
if (wasm) {
loadWasmModuleAsync(m.moduleName, urlPrefix + m.glueUrl, urlPrefix + m.wasmUrl, asyncCallback);
} else {
if (!m.fallbackUrl) {
throw new Error('wasm not supported and no fallback supplied for module ' + m.moduleName);
}
loadWasmModuleAsync(m.moduleName, urlPrefix + m.fallbackUrl, "", asyncCallback);
}
} else {
asyncCallback();
}
});
}
};
var loadGlbContainerFromAsset = function (app, glbBinAsset, options, assetName, callback) {
function loadGlbContainerFromUrl(url, options, assetName, callback) {
// var filename = assetName;
var filename = assetName + '.glb';
var file = {
url: url,
filename: filename
};
var asset = new pc.Asset(filename, 'container', file, null, options);
asset.once('load', function (containerAsset) {
if (callback) {
// As we play animations by name, if we have only one animation, keep it the same name as
// the original container otherwise, postfix it with a number
var animations = containerAsset.resource.animations;
if (animations.length == 1) {
animations[0].name = assetName;
} else if (animations.length > 1) {
for (var i = 0; i < animations.length; ++i) {
animations[i].name = assetName + ' ' + i.toString();
}
}
callback(null, containerAsset);
}
});
app.assets.add(asset);
app.assets.load(asset);
return asset;
}
var blob = new Blob([glbBinAsset.resource]);
var data = URL.createObjectURL(blob);
// return 下面这个方法
loadGlbContainerFromUrl(data, options, assetName, function (error, asset) {
callback(error, asset);
URL.revokeObjectURL(data);
});
}
m.wasmUrl is the url of this file,to be honest,I do not know how to it loaded,but when I excute this code,it was fine before:
loadModules(PRELOAD_MODULES, '');
// load glb model
loadGlbContainerFromAsset(app, asset, null, asset.name, function (err, data) {xxx}
If my project shows this,my project always works well,does it mean I didn’t use draco in fact?
One important thing is that load glb models failed always occurs in the phone,but it’s less likely to happen on a computer
Draco support is still not official in the engine so maybe there’s an issue when lots of glbs are loaded at once?
Mobile there’s a race condition given it’s more likely to happen on mobile?
I’m reloading the project several times but I don’t this specific error?
Error loading model: xxx.glb [TypeError: undefined is not a constructor (evaluating 'new m.DecoderBuffer')]
Open this website on safari or chrome on my mobile phone. This problem often happens. It will also happen if I clean up the cache.
Sorry, I’m reloading without using cache on an iPhone XR and can’t reproduce the error here locally.
If an easy reproducible can be made, someone on the forum can take a closer look at it. My hunch is that possible the WASM library isn’t ready yet before the models are loaded.
Or there was an error loading the WASM?
- Things that I would try to test is to fix the error I posted above about the WASM
- Wait 5 secs after all the WASM modules are loaded before loading assets to see if this helps. If it does, than it implies that WASM library isn’t actually ready yet before loading GLBS
Just to reiterate that Draco compression is not officially supported by the engine yet ~
Edit: Checked with the team that is a supported feature.
1 Like