Our miserable journey from OBJ to GLB or How to get a proper GLB for three.js?

TL;DR
What’s the best way to get three.js compatible GLB files from MAX source files?

Long story
Alright, we have a three.js based project that utilizes a lot of various 3d models. Since the very beginning of this project we relied only on OBJ models, but recently we decided to make a step forward and jump to brand new GLB format (thanks to three.js team for adding GLTF/GLB support!).

There were two reasons to pick GLB: traffic saving and better visualisation.

Taking into account that OBJ doesn’t live up to modern standards and just can’t store some valuable data, we threw away the idea to convert our models from OBJ to GLB directly. Instead we decided to pick source 3D files and create GLBs on their basis. 99% of our source files are 3Ds Max models, so we needed a simple yet effective workflow to convert all MAX files to GLB. And everything went wrong from the start…

3Ds Max doesn’t have native tools to export to GLTF/GLB, so there’re two options: (1) non-official exporters and (2) double convertion.

Non-official exporters
Babylon 3Ds Max Exporter is the only working tool to convert from MAX to GLB. It does quite a good job, because output GLB files look really close to their sources. Unfortunately, this exporter is quite slow and lacks some vital options, but worst of all it produces really heavy GLB files killing the whole idea of traffic saving in a bud. I mean Babylon’s GLBs are three times heavier than our humble OBJs.

Double convertion
The most modern and “universal” format to export from 3Ds Max is FBX, but quite ironically this fromat is the most problematic in terms of export. There’re many issues on official and non-official forums describing how wrong FBX models look after export, etc. We also stumbled upon some problems with export but they weren’t critical so we moved on.

As for FBX to GLB convertion, there’re many specialized tools and multifunctional editors that can handle this, but convertion results either look bad either need a complex time consuming workflow.

What workflow do you use to get a proper GLB for three.js?

Hi !

The Blender GLTF/GLB exporter by Khronos is pretty good, can you export your models to Blender somehow ?

Well, all GLB models exported from Blender look metallic in three.js, so manual tuning is needed for every model.

What type of material is created in Blender, after you import the file? Blender has full control of metalness/roughness but perhaps the import from 3DS Max loses some material settings.

Unfortunately, this exporter is quite slow and lacks some vital options, but worst of all it produces really heavy GLB files killing the whole idea of traffic saving in a bud. I mean Babylon’s GLBs are three times heavier than our humble OBJs.

This sounds like it may be the easiest place to improve your workflow — any idea why the GLBs are so large? If not, can you share an example .glb, along with the size of the original .obj plus textures?

The only other workflow I’m aware of from 3DS Max is the Sketchfab exporter — once you’ve uploaded to Sketchfab you can download a glTF. For anyone coming to this thread hoping to convert OBJ directly to glTF, obj2gltf is the place to start.

1 Like

Metalness is always 1.0:
image

I have no idea what’s wrong with Babylon’s exporter, but here’re three file examples: OBJ, FBX and GLB. The first two were exported using 3DS Max native exporter, whereas GLB was exported via Babylon’s exporter. And for now GLB is a total outsider in terms of file size.
Models_Comparison.7z (1.0 MB)

We use the following Babylon exporter settings:
image

That means “fully metallic” so if you’re unsure why the exports look metallic in three.js, there’s your answer. Or are you asking why Blender shows 1.0 to begin with?

And for now GLB is a total outsider in terms of file size.

It looks like the BabylonJS exporter has quadrupled the number of vertices in the original geometry, somehow. Maybe they’ve converted it from an indexed mesh to triangle soup… If I start with the FBX file and convert it using Facebook’s FBX2glTF, I get a much-more-reasonable 900kb with the same visual result. Enabling Draco compression in FBX2glTF, you’re down to just 100kb.

1 Like

Well, we can deal with Blender’s forced metalness, but for complex models with many different materials manual tunung becomes tedious. I’m in a search for a simpler and flawless workflow.

FBX2glTF seems to be a promising choice, thank you.

1 Like

Well, it seems that Facebook’s converting utility isn’t a trustworthy solution either. Some models become significantly heavier after convertion (even with Draco compression turned on). Here’s my input line:

FBX2glTF --binary --input CHAIR.fbx --output Converted/CHAIR

Files:

In that example, the 4.7 MB GLB contains a 4.5 MB image. I’m not sure how or why FBX2glTF has increased the size of the original image, but exporting to separated .gltf/.bin/.jpg may get you around the issue. May be worth filing a bug. :slight_smile:

I posted this issue on Babylon’s GitHub and received a helpful answer from Selmar:

Try selecting all your nodes > right-click > babylon properties, and tick Try to optimize vertices . This should help a lot.

We’re satisified with output result, so it seems a good way to go from OBJ to GLB.