How to use OBJ loader in playground

[ozRocker]

I'm trying to load an OBJ in the playground.  There are 2 meshes in the OBJ with exact same number of vertices.  This works in normal code when I use BABYLON.SceneLoader.Load() but when I use this special playground technique I get funny side-effects.  One of the meshes is twice the number of vertices as the other one: http://www.babylonjs-playground.com/#28YUR5#202  You can see it in the console output.

Is there another way to load an OBJ in the playground?

[GameMonetize]

Hey! the objloader is already available in the PG:

http://www.babylonjs-playground.com/#28YUR5#204

It works better

 

[ozRocker]

ah ok, thank you!  It works

http://www.babylonjs-playground.com/#28YUR5#205

[ozRocker]

Do you know why material doesn't work?  Am I meant to do something to set it up?  console output tells me its undefined http://www.babylonjs-playground.com/#28YUR5#207

 

 

[GameMonetize]

There is a material as I can see the texture on your character. This is weird..

[ozRocker]

I've made a playground here http://www.babylonjs-playground.com/#28YUR5#209

What you can see from the console output is that the textures get loaded after a slight delay.  If I try to access materials straight away its undefined.  I have to wait until the textures are fully loaded to access materials.  Is there a callback function I can use to access the material after the textures have been loaded?

[GameMonetize]

ok I understand the issue: OBJ file are based on a couple of extension: obj for the meshes and mtl for the materials

In this case the obj is loaded first and the callback is called as expected. Then the mtl is loaded and affected to the mesh.

To be sure to get the mesh with material you will have to do what you do in the PG or to register for scene.registerBeforeRender

[ozRocker]

7 hours ago, Deltakosh said:

ok I understand the issue: OBJ file are based on a couple of extension: obj for the meshes and mtl for the materials

In this case the obj is loaded first and the callback is called as expected. Then the mtl is loaded and affected to the mesh.

To be sure to get the mesh with material you will have to do what you do in the PG or to register for scene.registerBeforeRender

Thank you for that.  Now I know how it works I found where I can insert a little hack.

in babylon.objFileLoader.ts I changed calls:

return new BABYLON.Texture(url, scene);

to

return new BABYLON.Texture(url, scene, true, true, 1, textureLoad);

then in my OBJ loading code I have this:

texturesLoaded = 0;
var newMesh;

//Callback function
textureLoad = function() {
	texturesLoaded++;
	if (texturesLoaded == 2) {
		var material = newMesh.material;
		material.backFaceCulling = false;
		material.emissiveColor = new BABYLON.Color3(0.7, 0.7, 0.7);
	}
}

//.OBJ loading
BABYLON.SceneLoader.ImportMesh("", "uploads/models/" + directory + "/", objFile, Assets.scene, (meshes) => {
	Tools.debug(1, "Mesh imported");
	newMesh = meshes[0];
}, () => {
	Tools.debug(1, "Progress");
}, (scene, message, exception) => {
	Tools.debug(1, "Error: " + message);
});

texturesLoaded and textureLoad are global variables.  Of course this is assuming there are only 2 textures

 

I like to use the callback function instead of polling because polling will make asynchronous back to synchronous

[jeff720925]

When I play on the link, everything is working well. http://www.babylonjs-playground.com/#28YUR5#204

But it fails after I download the zip file and play locally.

Browser debugging console log "importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse"

Do you know what's going on?

[brianzinn]

@jeff720925 - Do you get a 404, does your file have a .obj extension and are you loading the objFileLoader in your page? ie: <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>

[jeff720925]

10 minutes ago, brianzinn said:

@jeff720925 - Do you get a 404, does your file have a .obj extension and are you loading the objFileLoader in your page? ie: <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>

Thank you for this. I did not get a 404 error. But your suggestion with external link works

Playground has loaded many other JS files as default. But it does not help to put any necessary external link to the downloaded source.

 

[brianzinn]

 

1 hour ago, jeff720925 said:

But it does not help to put any necessary external link to the downloaded source.

If I understand that correctly - the reason is to keep the babylonJS engine size down loaders and some other "extensions" not included.  Just add what you need.  You can also build your own .js file with all the extra files through the website. Anyway, good you got it going.

[peej]

I can't get these links to work anymore in the playground. Nothing appears in the scene. I know this is an old thread, but I think maybe what it suggests to do doesn't work anymore in the latest versions?

I am trying to debug some .obj loaders. I've attached a .obj file that I can't get to load. I've tried in the playground and using various loading methods, including appending with the scene loader, using the meshTask, objFile loader. I'm also not getting an error loading the files. Could it be something with this particular .obj file format?

Update: I tried loading it in Windows 3D builder and it did load. It said there were problems with the .obj, so I let 3d Builder update it and then saved it, but that new version also didn't load.

Maybe it's something to do with cross origin loading of files?  For example:

This playground loads https://www.babylonjs-playground.com/#0SHBCK#3

This one does not, notice the change in the url to the .obj, from HTTPS to HTTP https://www.babylonjs-playground.com/#0SHBCK#2

I'll keep investigating, but perhaps someone knows before I figure it out or can fix it?

yamaha-yzr-r6.mtl yamaha-yzr-r6.obj

Edited January 10, 2020 by peej