Rendering multi textures

I am using Babylon’s FilesInput for listening to an upload from the user. I have also implemented the import for an .obj file. So a user gives to babylon an .obj file with an .mtl file for the materials and .jpg for the texture. However let’s say that my user have multiple textures in multiple .jpg files. I noticed that babylon.js just applies the last one and don’t consider the others .jpg files. Is there a way to fix this? To clarify my question. With the structure:

- materialFile.mtl
- textureFile.jpg
- objectFile.obj

Everything is perfect. However when I have:

- materialFile.mtl
- textureFile1.jpg
- textureFile2.jpg
- textureFile3.jpg
- textureFile4.jpg
- objectFile.obj

Babylon.js don’t apply textureFile1, 2 and 3. Here is my code for the FilesInput:

Importer = new BABYLON.FilesInput(this.engine, this.scene, this.Loaded.bind(this), null,
  null, null, () => BABYLON.Tools.ClearLogCache(),
  null, this.Error.bind(this));
Importer.monitorElementForDragNDrop(canvas);

This is exactly what we use in the sandbox and we can load multiple separated textures as long as the mtl points to them correctly.

What happens if you drag all the same files in the sandbox ?

Yes I just tried different configurations in the sandbox, by changing the last texture file applied(for example interchanging the name of textureFile2 and textureFile3) the result is completely different, so it means all the textureFiles are not applied. because in the other case, the result should be the same.
Note: I made a small edit to my post, it seems that it’s the last textureFile that is applied to the scene, not the first one.

Here below you can see in the first picture a screenshot of the sandbox with the original files structure. and in the second image it’s a screenshot of the sandbox with the same files but just I switched names between the textureFile1 and textureFile3 (in other terms the textureFile1 is the last textureFile read in the second image)

could you share your mtl file as well ?

It looks like this

newmtl Solid
Ka 1.0 1.0 1.0
Kd 1.0 1.0 1.0
Ks 0.0 0.0 0.0
d 1.0
Ns 0.0
illum 0

newmtl texture1
Ka 1.0 1.0 1.0
Kd 1.0 1.0 1.0
Ks 0.0 0.0 0.0
d 1.0
Ns 0.0
illum 0
map_Kd textureFile1.jpg

newmtl texture2
Ka 1.0 1.0 1.0
Kd 1.0 1.0 1.0
Ks 0.0 0.0 0.0
d 1.0
Ns 0.0
illum 0
map_Kd textureFile2.jpg

newmtl texture3
Ka 1.0 1.0 1.0
Kd 1.0 1.0 1.0
Ks 0.0 0.0 0.0
d 1.0
Ns 0.0
illum 0
map_Kd textureFile3.jpg

newmtl textureFile4
Ka 1.0 1.0 1.0
Kd 1.0 1.0 1.0
Ks 0.0 0.0 0.0
d 1.0
Ns 0.0
illum 0
map_Kd textureFile4.jpg

Might be link to textureFile4.jpg which is not part of your texture.

Could you share your entire model ? (dropbox, github or what works for you)

I ll try to debug it.

It is part of my model, I just forgot to add it to my post (I just made an edit). Ok I’ll share my model in a few

Here is a link to a drive folder containing my model:

It looks like the material assignment in the .obj is wrong so only the latest parsed material texture3 is used for the entire object.

Actually adding a group name before any usemtl line with g groupName in the .obj makes it work as expected.

May I ask how you generated your obj ? In Babylon we require at least an object name or group name tag for multi materials to work.

I could try to adapt in babylon but would prefer to understand where those kind of obj come from first ?

This photogrammetric model (“Reservoir_multi-texture”) was exported straight from Agisoft Metashape Pro. For testing purposes, here we deliberately asked the software to split the texture into multiple images during its building process since there are good chances that some of the models we’ll be confronted with in the future will have multiple textures mapped this way. While the 3D scans we produce on our side using Metashape are typically single-textured, some of the files obtained from outside sources (municipal/academic libraries, partners, or drone-mapping services) are sometimes prepared as multi-textured OBJs. We’re trying to minimize as much as possible the pre-processing needed before being up and running in Babylonjs (future users won’t always have the software skills or time to remap textures).

We already plan on using the 3DSMax and Blender exporters when possible for projects where other geometries are added over the scan meshes, they manage the textures wonderfully. But some of our projects were designed in Rhino3D and exporting from Rhino to 3DSMax can be tiresome so we’re looking into getting OBJs straight from there to Babylonjs. After modeling and exporting some quick test scenes, it seems Rhino behaves in the same way Metashape does (as well as some other photogrammetry softwares) with multi-material OBJs, leading Babylonjs to apply the last appended usemtl definition to all the geometries within the OBJ file.

Here are the test files exported from Rhino3D in case you want to fiddle around:


Anyhow, thanks for the help!

Fix is in progress Fix obj without groups or name by sebavan · Pull Request #7402 · BabylonJS/Babylon.js · GitHub it will be in the next nightly.