Import .obj file with vertex colors

Questions
1

I was trying to import a .obj file that has vertex colors into a scene following the available documentation (Use the OBJ File Loader Plugin - Babylon.js Documentation). The problem is that when I add the flag BABYLON.OBJFileLoader.IMPORT_VERTEX_COLORS = true; it gives me the error in the image below. If I remove the flag, the object is imported correctly but without the colors.

image

Unfortunately I can’t point you to a playground because I can’t load the file on the playground (CORS issues).

Any ideas?

2

Your .obj file has most certainly no vertex color data (or a color data section not recognized by the loader): this error is what I get when I try to import a .obj file that has no vertex color data and if I set BABYLON.OBJFileLoader.IMPORT_VERTEX_COLORS to true.

1 Like
3

Yeah I am thinking maybe the file is the problem here because when I try to load that file in other engines that accept vertex colors I have to import the mtl and jpg file for the texture to appear.

I am diverging a bit from the point of the topic but do you know if Babylonjs has a standard approach to load a .obj file with .mtl and .jpg for color/texture?

Thank you.

4

If a .mtl file with the same name than the .obj file exists in the same repository than the .obj file, it will be parsed and the textures loaded.

1 Like
5

I just tried that and you are right, the engine tries to search for the .mtl file with the same name.

The problem is I am loading the files externally as in I am giving the user the option for load their .obj files from the local system and when the engine tries to load the .mtl file it says that the browser does not have access to that file which makes sense.

I have a work around where I load the files separately but I would like to import the files in only action. This is much more web dev than 3D dev I know but if you happen to know a solution for this it would be very helpful. Anyway you have helped me quite a bit already so thank you very much.

6

A possibility would be to ask the user to make a .zip with all the files and upload this archive. Then you can decompress the file (there are javascript lib to do that) and extract the different files.

Or if it is an option, you can use .glb files instead of .obj, as you can embed everything in a single .glb file.

7

The .mtl file’s location is located in the .obj file. It is defined in a line starting with matlib following by a URL . this URL can be anything you want. It can be a location on a remote server, it can be base64 encoded. This way you can deliver any .obj file with a remote-located .mtl file.

8

Might help as a refeerence - Babylon.js Viewer without server (kiosk mode)

9

I think this issue is still valid, I’ve got the same problem.

obj file content

                g tetrahedron
                
                v 1.00 1.00 1.00 0.666 0.3 0.1
                v 2.00 1.00 1.00 0.2 0.666 1.
                v 1.00 2.00 1.00 0.2 0.1 0.666
                v 1.00 1.00 2.00 0.666 0.3 0.3
                
                f 1 3 2
                f 1 4 3
                f 1 2 4
                f 2 3 4




        //BABYLON.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
        BABYLON.OBJFileLoader.SKIP_MATERIALS = true;
        BABYLON.OBJFileLoader.GENERATE_NORMALS = true;
        BABYLON.SceneLoader.Append("", "simple.obj", scene, (scene) => {
            camera.target = scene.meshes[0].position
        });

PL not working
PL: https://playground.babylonjs.com/#HX99ST#1
UPDATE: PL: https://playground.babylonjs.com/#HX99ST#3

EDIT: used versions

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
10

The string needs to be converted to a base64 data url, otherwise it won’t work. It requries a bit more than ‘data:’ before the content.

Also - i thought you wanted to do that to the .mtl file, and not the .obj file. This needs to be done inside the .obj file that is stored on the server

11

Im on it to put the obj properly in there.

In this case, i need the colors in the obj.file in the format

p point values
c color values (rgb)

v p1 p2 p3 c1 c2 c3

UPDATED PLAYGROUND: https://playground.babylonjs.com/#HX99ST#3

12

In fact the string does not need to be base64 encoded, but you need to instruct the scene loader to use the “.obj” plugin loader, as you did in your second PG:

https://playground.babylonjs.com/#HX99ST#4

There’s still the error because there’s a bug in the .obj loader when handling the vertex colors.

It will be corrected by:

6 Likes