A couple issues here:
- If your glTF model is going to be packed into a single file (as opposed to separate
.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.
- 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.
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.
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
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)