How to Load a .MTL File for a .OBJ File?

I never write on forums looking for answers. I always feel I need to gut it out myself. But I am completely stumped on this.

I have spent two whole days looking for solutions to this simple problem and don’t find any examples showing how to do this.

One fellow said he just drops the .MTL file somehow uses a default file. Having worked with the .OBJ format for years I was surprised to hear there was such a thing. I have no idea how set that up.

Another fellow said the way to do it was to pass in a URL in the OBJ to point to it. Well, I set up a Python server that dishes the .MTL file and when I put


in the Browser address it pops open File Manager on that file, and the Python server shows the file has a GET.

But I put:

mtllib localhost:8000/OBJ_Color_Library.mtl

in the .OBJ file and nothing happens.

I would really rather just pass a blob thru a URL, which works great with the OBJ data content, but the MTL content remains ignored.

There is no clear definitive documentation on how to do this, even though there is this MTLParser out there I have tried.

Here’s another approach I tried:

This fails also in all is variations.

I find the assertion that”

“Babylon.js will know how to load the obj file and its mtl file automatically”


to be quite ironic. Babylon may know how to do it, but nobody else does.

All you have to do is place the .mtl file somewhere and point at it from the .obj file.

For eg, from scenes/StanfordBunny.obj of the Playground public repository, line 3:

There’s a StanfordBunny.mtl file in the same location than StanfordBunny.obj and it is being used when loading the file:

It is not obvious it creates the material from the .mtl file because the diffuse color is grey in the .mtl file (Kd 0.80000 0.800000 0.80000), but I have modified the .mtl file in my local installation to set a green diffuse texture (Kd 0.0000 0.800000 0.0000):

Not sure about your use case, but check out this thread, maybe it helps

Keywords: MTLFileLoader and Tools.PreprocessUrl.

Also as I understand, usually when you export OBJ + MTL files, if they are in the same directory MTL will load automatically when you load OBJ. But might depend on the creation/export process.

As you can see from my two playgrounds, I have loaded the OBJ data via a Blob/URL:

    const OBJ_ArrayBuffer = OBJ_String;
    const OBJ_Blob = new Blob([OBJ_ArrayBuffer]);
    const OBJ_Url = URL.createObjectURL(OBJ_Blob);

        BABYLON.SceneLoader.Append(OBJ_Url, undefined, scene, function (scene) {
            scene.createDefaultCameraOrLight(true, true, true);
            scene.activeCamera.alpha += Math.PI;
        }, undefined, undefined, ".obj");

  1. Is there any option for referencing an MTL file in this scenario? As you can see in my playgrounds, I have tried multiple methods.

Is the only way to include an MTL reference thru an actual .OBJ file written to disk somewhere?

2… If so, where are these files to be physically located:

mtllib StanfordBunny.mtl
          o StanfordBunny

Do you just place those in the root of your website?

The path you use in the mtllib command in the .obj file should be relative to the .obj file, so intead of mtllib localhost:8000/OBJ_Color_Library.mtl do mtllib OBJ_Color_Library.mtl if OBJ_Color_Library.obj is at the root of your web server.

If you have a mtl subfolder and put the .mtl file in it, you can do mtllib mtl/OBJ_Color_Library.mtl, again assuming OBJ_Color_Library.obj is at the root.

There’s currently no way to pass the content of the mtl file to the load method. However, looking at the code, it seems you could put a base64 encoded mtl content instead of the name of the file in the mtllib command, because the parameter after mtllib is parsed as a url… For this to work (in case it works, I didn’t test it!), you will have to pass an empty string as the root url in the append / importMesh method.

[…] Actually, I just tested it:

I have not had a chance to test it because I must leave my computers to go out in the wilds for a few days. I will check this out on Sunday when I get back.

Thank you so much for your help!


Thanks so much, guys. I think I finally have my OBJ and MTL working as desired.


However, I have these basic problems with what the Playground is doing in with my OBJ and MTL file in comparison with what my desktop programs do with it. Here’s MS-Office and Windows 3D viewer’s instant responses on being loaded with this data:

  1. The desktop viewers instantly display something. The Playground is initially blank. It’s not until you hit it with the mouse and try twirling things that something shows up.

  2. There’s none of the clearly defined edges of the faces and the sharp shadowing of the desktop viewers.

What do I need to do here to achieve instant display with clearly defined edges?

Also I should mention that it seems like you can rotate the object in the playground to make it invisible. I don’t want that behavior either. The desktop apps don’t do it.

You don’t provide normals, so you should create them yourself (you can call Mesh.createNormals() to let the system create them).

To clearly see the faces, you can then call Mesh.convertToFlatShadedMesh() so that normals are computed only relatively to each face and not to adjacent faces.

Lastly, if you want to see your mesh even from the back, you should disable back face culling no the material:

Evgeni, you are such an incredible help. I would have spent months figuring that out I expect.

I have adjusted the parameters a little to get the camera position where I want it.

But I wonder if you could point me in the right direction to make this material a bit more shiny or glossy.

What I am really trying to accomplish is to make the contours and edges of this object as clearly distinct as possible. Any suggestions? Thanks again for all your help!

You could use the edge renderer, for eg:

Or the screen space curvature post process:

Holy cow! That is fantastic! I love it! It sounds like ScreenSpaceCurvaturePostProcess was invented precisely for this problem! And I’d been thinking about putting colored lines on the edges for application reasons, and here you’ve given me that option right out of Bablylon! What a system! What a phenomenal user support community! You folks are fantastic! Thank you so much!