Mapping multiple materials to an OBJ model in THREE.js

Questions
, ,
1

I have loaded a model using the DRACO loader and essentially, I get a single model with references to several materials. How could you programmatically match materials to the correct parts of the OBJ?

Please see issue here on GitHub with a solution needing THREE.js details.

2

Not the solution but a workaround: Why not converting your OBJ to glTF? Then you can use GLTFLoader, which has a built-in handling of DracoLoader.

Check out the following example: https://threejs.org/examples/#webgl_loader_gltf_extensions

Select the Duck model and then the Draco extension so see it in action.

Also see: A .glb model loaded using GLTFLoader isn't compressing despite using DRACOLoader

3

Thanks for the quick response, @Mugen87. I assume the glTF loader handles multi material OBJs that were converted to DRACO files?

What’s the best way for converting the multi-material OBJ to glTF?

4

You can use obj2gltf or (for small files) this online converter. Neither can apply Draco compression to the glTF file, so if you need that it might be a bit harder. Try https://gltf.insimo.com/ for that.

5

@donmccurdy Unfortunately, it needs to be programmatic as mentioned above. Users are uploading assets and I need for them to be compressed for later viewing.

6

I see – obj2gltf can programmatically convert to glTF but I don’t believe a programmatic option for compressing glTF with the glTF Draco extension exists yet sorry, except for COLLADA and FBX conversions. Hopefully that will come along soon.

I’m not sure how to associate DRACO meshes with different materials unfortunately.

7

Correction to the above: the 2.0 branch of glTF-Pipeline should be able to take existing glTF files (e.g. created with obj2gltf) and convert them to compressed glTF using Draco: https://github.com/AnalyticalGraphicsInc/gltf-pipeline/tree/2.0

8

Thank you, @donmccurdy. So, if I understand correctly, I can do the following (programmatically) to convert a multi-texture OBJ to a valid THREE model rendering:

  1. Convert multi-texture obj to gltf via https://github.com/AnalyticalGraphicsInc/obj2gltf
  2. Then compress to compressed gltf (draco/.drc/.gltf?) via v2 branch of https://github.com/AnalyticalGraphicsInc/gltf-pipeline/tree/2.0

Does that sound correct?

9

Correct. It should render correctly on https://gltf-viewer.donmccurdy.com/. after step (1), but will be an uncompressed file. :slight_smile:

10

Yeah, I’m running into major issues with models (100mb+) taking way too long to be sent across the wire. Hence the only viable solution I found was DRACO compression.

11

Not sure what I’m doing wrong, but I keep getting this error:

$ node ./gltf-pipeline/bin/gltf-pipeline.js -i odm/odm_textured_model.gltf  -d --stats

Statistics before:
Total byte length of all buffers: 60397176 bytes
Images: 4
Draw calls: 4
Rendered primitives (e.g., triangles): 193353
Nodes: 1
Meshes: 1
Materials: 4
Animations: 0
External requests (not data uris): 0
1
1
abort(1). Build with -s ASSERTIONS=1 for more info.

I managed to convert the OBJ file to GLTF via step 1. It rendered in the editor you mentioned, @donmccurdy. But when compressing the new .gltf file (using the V2 branch), I keep getting the error above.

12

No idea what to make of that error — may need to file a bug to the glTF-Pipeline repository, sorry.

13

Bummer! I created an in case anyone in the future wants to track this discussion. Let’s see what happens…

14

Thank you, @donmccurdy, for all of your guidance. The issue has been resolved and I must say that it works like a charm. I like the fact that with glTF, we can encode all texture into the file or keep the textures separate, as well. A nice added bonus that I didn’t consider when I opened this issue.

2 Likes
16

@FarhadG hello, would you share your solution for this issue? My email is johnsoncqq@163.com. Thanks!