Trouble loading a gltf file in mobile

Questions
1

Hi, I have relatively large file sizes due to the detailed imagery (landscapes). Going through various steps I am able to get my model size down to about 30,000 MB. It loads great with firefox and chrome for desktop, however I am unable to get it to load on a mobile device (chrome or duckduckgo on android). I am using code heavily borrowed from the threejs example tutorial for gltfloader. I can load the scene they use with my code on mobile. I suppose this may indicate that the problem is file size however I was able to get much larger obj file sizes to load in mobile (just very slow due to file size).

Any suggestions or insight are greatly appreciated. Link to a testing page for the model below:

2

A couple issues here:

  1. If your glTF model is going to be packed into a single file (as opposed to separate .gltf, .bin, and image files) then it is best to use .glb, which is binary. That will reduce the size by ~25% compared to a plaintext .gltf with embedded data.
  2. When trying to reduce the size of a model it’s important to understand why it is large. You can find that information by unpacking it using glTF-Pipeline.

Unpacking:

npm install --global gltf-pipeline

gltf-pipeline -i monolith.gltf -o monolith_unpacked.gltf --separate

You’ll get three files out:

  • monolith_unpacked.gltf (0.005 MB)
  • monolith_.bin (1.9 MB)
  • test2_Monolith_lowpoly.002.jpg (31.6 MB)

From that you can see that almost all of this model’s size comes from a single very large image. The image is also 13,107px by 13,107px, which is too large — 4096px is the largest you should really ever consider using on WebGL. Normally I would try to optimize images on https://squoosh.app or Preview.app, but neither one can handle this image. :upside_down_face:

Instead you can use Imagemagick to resize it:

convert test2_Monolith_lowpoly.002.jpg -resize 4096x4096 monolith_4k.jpg

That should give you an image that’s only 3.6 MB, and you can optimize it a little more with https://squoosh.app, which brought it down to 3 MB with very similar quality. Then rename the first image something different, and give the smaller second file the original file’s name — the .gltf file refers to the image by that name. Then pack the whole thing back up again:

gltf-pipeline -i monolith_unpacked.gltf -o monolith_optimized.glb --binary

The final monolith_optimized.glb should be about 5 MB. You can make it a bit smaller yet with gltfpack, which should bring it down to 4MB in this case. Final result:

monolith_optimized_and_packed.glb (3.9 MB)

Screen Shot 2020-06-21 at 12.50.46 PM
Screen Shot 2020-06-21 at 12.50.46 PM1701×1267 848 KB

3

^That should work on most devices, but some older phones might not even be able to handle a 4K image. In that case reducing the image size to 2048x2048 instead might be necessary (or serving a different model for mobile vs desktop to save bandwidth).

4

Much appreciated and very helpful. Issue is solved!