As part of my scene design, I had some questions regarding loading models.
My thumb rule when creating Three.js projects or 3D web applications was to use .glb / .gltf files for loading 3D models.
The size of an exported .fbx model from Maya software is smaller than its .glb version, so I changed all my models to the .fbx format.
- model.fbx size = 26kb
- model.glb size = 60kb
I assume the main consideration should be model size, Am I right ?
Do you would keep using .glb / .gltf although their files sizes are bigger ?
Thanks in advance,
Here is a screenshot as well.
There’s a lot of messy stuff that happens when exporting from modeling software or converting between two formats. Vertex count may increase, textures may be re-built in a less optimized way, vertex data might be stored at higher precision, etc., so we’re comparing the two exporters as much as (or more than) the file format here.
I would recommend assuming that any model coming directly from software like Maya or a converter, in any format, is not yet optimized at all.
There are a number of reasons we recommend using glTF, but one of those is that it can be optimized for web, in ways that many other formats cannot. It would help to have access to those two files, since I don’t really know what is in this model to be optimized, but you can try a couple general-purpose optimizers with:
npm install --global @gltf-transform/cli
gltf-transform optimize input.glb output.glb --texture-compress webp
npm install --global gltfpack
gltfpack -i input.glb -o output.glb
Ultimately — I think the main goal is having a workflow that reliably produces files that appear correctly, and that are optimized enough for your goals. We recommend glTF because we think you’re likely to get that kind of workflow into three.js more easily with glTF. glTF is also basically the only format with Web-ready compression options available (Draco, KTX2, Meshopt) but compression is not relevant if the file is only 25kb.
If you’re happy with how everything is working using FBX though, that’s OK! No need to overthink it or switch formats if you have something that works for you.
Hey Don, thanks for the quick replay!
Our main 3D department uses Maya software, so it is easiest to take the models directly as .fbx files without having to pass them through any other 3D software or adding any additional steps.
To make another comparison, I will compress the .fbx files after converting them to .gltf.
Please let me know if you have any additional suggestions.
Thank you very much,
RND.fbx (25.2 KB)
There’s also a gltf 2.0 exporter for maya , the shelf menu has a number of options including assigning compatible glsl materials with the necessary channels (roughness, metalness, AO etc) GitHub - matiascodesal/maya-glTF: glTF 2.0 exporter for Autodesk Maya I’ve found exporting this way rather than fbx yeilds cleaner and smaller file sizes from maya.
For comparison, converting from FBX to GLB in Blender 3.4 gives a 12kb file. Converting the FBX to GLB in the three.js editor gives an 18kb file. Quantizing the mesh data reduces that to 8kb, and using Draco compression reduces it to 3kb, without any change that is visible to me. So i think the difference here mostly has to do with the exporter, and further optimizations can clean up whatever is left.
Note that the Draco decoder library is around 200kb gzipped, so you wouldn’t necessarily want to use that unless you have much more than 25kb of geometry to compress.
Thank you for the detailed answer.
As you suggested I will try those compression methods for better optimization.
You helped me a lot.