Error loadfailure switching glTF models on low-end devices

[enzodbspace]

Hello. I've been working with model-viewer for some time now, and I like it a lot, so, thank you! : )

Recently, a problem has arisen in a client project: on low-end devices, a loadfailure error occurs when changing the source programmatically. This does not always happen in exactly the same way, nor with all 3D models. But if the model is more complex (lots of triangles) or the device's resources are low, it is almost certain. On desktop it works perfectly, fast, without problems, so I suppose it must be a resource issue.

Using Chrome DevTools to monitor the console of a webpage opened in Chrome on Android, I can see this message:

error: "Aborted(). Build with -sASSERTIONS for more info."

Full info:

This error points to this external resource file: CachingGLTFLoader.js, line 152, inside the function preload, with this comment:

Preloads a glTF, populating the cache. Returns a promise that resolves when the cache is populated.

My main test device are:

• Android 10 (Moto G7 Play, 2 gb ram, old, I know..) - Chrome, Brave

And other similar ones, borrowed, to rule out cache persistence problems.

I'm changing the model with this line:

modelViewer.setAttribute("src", url);

Model-viewer version 4.0.0.

I have tried several approaches, without much success, like changing modelCacheSize to 1 or 2, powerPreference to low-power, or destroying and regenerating the model-viewer using the new source. The error persists.

Any ideas about this?, or should I assume it may fail on older phones?

Thank you!

[mohammadbaghaei]

Hey @enzodbspace 👋,

You might want to check out gltf-transform for model optimization! Here's how to get started:

1. Installation (needs Node.js installed first):

npm install --global @gltf-transform/cli

2. Optimization command:

gltf-transform optimize input.glb output.glb --texture-compress webp --texture-size 2048

✨ Cool results: This command can shrink a 1.3GB GLB model down to 120MB! 🚀
(Note: It uses meshopt compression by default - for model-viewer compatibility, you'll need this extra script. Check the CLI docs for more options!)

📱 Pro tip for performance: Lower texture sizes (like 2048) work better on low-end devices. You could even create multiple model versions and use the Detect GPU package to serve the right one based on device capability!

🛠️ Bonus tweak: Try setting viewer.minimumRenderScale = 0.25 to help maintain framerate (default is 0.5).

Let me know how this works for you! Happy optimizing 😊

[enzodbspace]

Thanks you @mohammadbaghaei for the reply! I will take your advice into account.