What glb compessions (optimizers) can I find?

Questions
,
1

My .glb object is 3 MB. How can I compress it to the smallest size or optimize ? Maybe online

2

You can use Draco, a library for compressing and decompressing 3D data. There are different ways to compress an existing gltf or glb file, for example via gltf-pipeline. More information about this topic right here:

1 Like
3

Also note that this type of compression affects only geometry. To reduce the size of textures you’ll need to use image optimizers instead.

1 Like
4

@donmccurdy What image optimizers are out there?

5

There are many, but https://squoosh.app/ is an easy one to use for example.

1 Like
6

I’m using blender to export the model as a gltf. I’m assuming I compress the texture image before I apply onto the model in Blender? Also, in your opinion, what is an acceptable file size for a 3D model that is to load in a browser-- something that the general public wouldn’t have too much trouble loading? For reference, my files usually average 15000KB

7

An image imported then exported by Blender won’t necessarily keep its compression. A good way to optimize textures is to unpack the model into separate files (.gltf + .bin + textures), optimize the images in place, then repack them into binary .glb files. https://github.com/AnalyticalGraphicsInc/gltf-pipeline can help with the packing/unpacking.

Acceptable size depends a lot on what you’re doing. For desktop users with good internet connections and a professional reason to use your app, some apps are OK with >100MB of assets. For best loading and runtime performance on mobile you should probably stay much lower than that… this is just my opinion but keeping the whole scene under 5MB is a good goal, although it’s not too uncommon to see 20-25MB. If you open Chrome or Firefox developer tools and use the Network tab, you can see how much other websites are loading. Check http://christmasexperiments.com/ for examples.

3 Likes
8

So I would take the gltf I exported from Blender > use the “gltf-pipeline -i model.gltf -t” command to unpack the texture> use something like squoosh to compress the texture> resave the unpacked texture as the new compressed image> repack into a glb… but I don’t know which command can accomplish this?
Also, is there a difference in load time for glb and gltf–which one has the better load time? Thank you!

9

Supposing you start with a GLB:

# unpack the model into .gltf, .bin, and texture files in the tmp/ directory
mkdir tmp
gltf-pipeline -i input.glb -o tmp/tmp.gltf --separate --json

# optimize the textures in tmp/
# ...

# re-pack the model into a GLB, adding Draco compression
gltf-pipeline -i tmp/tmp.gltf -o optimized.glb --binary --draco

I’d suggest using GLB in general, it’s fewer network requests.

2 Likes
10

I use it, but the size is the same. 3 MB

11

I have an error after when load a model

gltf-pipeline -i myfile.glb -o tmp/tmp.gltf --draco.compressionLevel

index.js:1 Error: THREE.GLTFLoader: No DRACOLoader instance provided.
    at new GLTFDracoMeshCompressionExtension
12

I use it, but the size is the same. 3 MB

This could mean (a) that your model size is mostly things other than geometry, which draco doesn’t affect, or (b) that the model is non-indexed which gltf-pipeline can’t compress. see Draco option having no effect · Issue #420 · CesiumGS/gltf-pipeline · GitHub.

see How to use draco loader? - #2 by donmccurdy

13

how can I import this loader from npm ?

I load THREE from npm

and import it as:

import * as THREE from 'three';

If I use as THREE.DRACOLoader(), but DRACOLoader not found

Also I use in this way:

window.THREE = THREE

and then

THREE.DRACOLoader

But it wasn’t help me.

14

@sts_1994 see:

15

my model is not load

convert with draco

gltf-pipeline -i main-main.glb -o tmp/tmp.gltf --draco.compressionLevel

  1. then in glb

gltf-pipeline -i tmp/tmp.gltf -o optimized.glb --binary --draco

  1. I got 1.5 MB

  2. install three-full

import * as THREE from ‘three-full’;

const loader = new THREE.GLTFLoader();
THREE.DRACOLoader.setDecoderPath( ‘/examples/js/libs/draco’ );
loader.setDRACOLoader( new THREE.DRACOLoader() );

loader.load …

But I have an error

Refused to execute script from 'http://localhost:3000/examples/js/libs/dracodraco_wasm_wrapper.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

16

Have you looked at the Network Tab in developer tools for errors? You will likely see that the draco_wasm_wrapper.js is red and the URL is wrong. I think your decoder path should be /examples/js/libs/draco/gltf/

1 Like
17

No, it didn’t help me

18

What other ways maybe to optimize models?