Workflow for creating a level ? Trouble properly loading meshes from the editor,materials etc

[HappyDev]

I want to design a basic level/scene for my game so I use the web editor import various meshes and move them around in the positions I desire cause I can’t do that with code as the moving axes and what not are very helpful in the editor.

Then after the scene is exported from the web editor I import it via code and I do the rest stuff there. Problem is how am I supposed to load the materials needed for them meshes I use in the editor ?

For starters, I have a simple low poly tree obj model with its material. I import it to the web sandbox and export it to gldb format so I can use it in the editor.

The situation looks like this in the editor:

The tree is properly textured and looks good. When I export the file and import it via code it looks like this(right tree is the manual imported via code , left tree is the one imported via the web editor):

Clearly the material,texture is missing. Funny thing is that when I manually import the seperate obj of the tree model my scene looks like this:

Which still isn’t looking properly but it seems like the scene tree gets the materials from the obj I loaded.

Anyways, what am I missing in the procedure of creating a level, also if there is a better way via another program please care to mention it as I just use the web editor like a scene design tool with no scripts etc.

[sebavan]

Adding @julien-moreau the Editor Guru

[julien-moreau]

Hey @HappyDev
First, I suggest that you use the desktop version of the editor: Getting Started - Babylon.js Documentation
The documentation is available here: Babylon.js Documentation

A complete workflow documentation can be found here (thanks again @the-simian): GitHub - simiancraft/BabylonJs-Editor-Workflow-Boilerplate: A repository to demonstrate and serve as a boilerplate for an iterative workflow with the Babylon.js Editor

To understand better:

• What menu have you used to export the scene from the editor?
• Which format have you chose to export? .babylon? .gltf? .glb?

Thanks for your answers. Will fix once I can reproduce

[HappyDev]

Thanks for replying ! It’s nice to have the attention of an Editor Guru ! [Have in mind that I will check the links with the workflow after I’m done writing this post so I will update ASAP if I find what I’m doing badly !, but for now the situation is outlined below)

So first things first:

This is the model of the tree along with its material

I drag and dropped the obj file in the sandbox online tool to check it. At first it shows like a grey model so then I dragged and dropped the mtl file too so it looks green and all that. Then I export it via the GLB button I have circled in the screenshot :

Note that when I tried to export it to babylon with the other button, when I tried to open said babylon file in the online editor it showed as empty, so that’s why I used the GLB option.

So now we are in the online editor. The way I work as of now is like this.

1)Start a new project cause the default is filled with things I don’t need.
2)In the new project I do this:

And choose the scene I have created so far with the editor.

I choose all the meshes.
3) So now we are here, my scene (with no tree added yet) :

4. Now to import the tree from the GLB I exported earlier into the scene via the same menu in 2nd step(Import Meshes From):
   
   

i select both root and tree_circle, although I’m not understanding correctly what is root supposed to be. The result is this :

5. Now to export the scene so I can work normally with my code and do the rest of the game.
   

   

6. How the scene I exported in the 5th step looks when I loaded with my code looks:
   

   

The gun was not added via the editor and I import it as a separate obj file with the assetManager cause I got confused about how I would do it with the editor since I would face the same problems with the materials and all that as the tree. So I did it manually.

So that’s the whole process, it’s obvious I’m messing something up in the way I do things but my inexperience in how am I supposed to design a level and then implement the rest of the game logic with just plain vscode really holds me back.

So I hope something can be done cause I’m really excited to actually program using Babylon but really can’t figure out the level design workflow.

[julien-moreau]

@HappyDev right it is weird it must not happen so I have a bug.
To help me reproducing, can you try to share me all the files you are using? I tried to import an obj then a gltf file but I haven’t encouter your problem . Anyway I encountered another bug that I just fixed

I think that importing meshes directly using that menu is not a good idea anymore and I think I’ll remove because it saves the meshes in the .editorproject file and they are not updatable anymore by the artists.

To import multiple scene files in your project (.obj, .glb, .babylon etc. are considered to be scene files) you can use the same method as the documented workflow (Explaining the Workflow - Babylon.js Documentation). Scroll a little bit to see the animated image drag’n’dropping all the scene files in the editor. This action can be done each time you want to append a scene file in your project.

Using that method, please let me know if you have the same bug. If it’s the case, I’ll fix that ASAP
Thanks!

[HappyDev]

Thanks for making the time to look it up and good work on the new bug !(which I helped making it come up with my stupid fiddlings with the editor ??? haha)

Tree Model obj,mtl and png file: Simple Voxel Art Trees by TheOdd1In
When I try to import it as plain obj via drag n drop as you suggested I get this in the desktop editor:

And this when I load the scene via code :

Which looks clearly better but with materials missing. So because even after drag n dropping the mtl file and the png file that came along the tree’s obj I drag and dropped everything in the babylon sandbox and export it as a glb file. Then I drag n drop this glb file in the desktop editor with the result being this:

Which looks like the mtl file and the png file were loaded correctly this time and the tree looks colored !

So now to export it I just save the scene via the menu I showed in the previous scene. When I load it I get this:

Clearly the png file is not loaded correctly cause it’s not even named like that. So I go to my asset folder that looks like this :

And rename the png file to the name that the error suggests(palette (Base Color).png) , making my scene look like this:

Which probably is the correct way the model is supposed to look in the scene. It looks a bit darker compared to the editor but it’s because I’m using different lighting in the editor than the actual way I coded the game cause, correctly if I’m mistaken, I can load only meshes with code from the exported scene as lights are not exported or are not meshes,but that does not bother me.

So that’s the whole procedure, it seems I got something once I fiddled with the desktop editor which seems to be working better but the thing with the palette missing seems weird to me as I can’t find a way to make the scene look for the file and use it correctly with its original name (tree_circle.png) cause rename it for every mesh I’m gonna import seems not ok.

Please care to correct whatever stupid thing I’m doing and provide alternatives cause obviously you know more than me.

Also sorry if I dragged the post a bit making too long but I wanted to be as detailed as possible for you to have a clear picture of the subject AND for someone that is so beginner like me that can’t figure out basic things and might happen look at the post !

[julien-moreau]

@HappyDev thanks for sharing, I’ll have a look this evening and come back once I have a solution or a fix

[julien-moreau]

@HappyDev reproduced! In local mode (local webserver), I haven’t got the same error in texture name but I effectively got a naming error.

I think this has been fixed but I’m trying to find if I can generate another bug before releasing

[HappyDev]

You are a god, I guess I’m waiting for the new release of the editor ?

[julien-moreau]

@HappyDev found no more bugs about textures loaded from OBJ scenes. You can find the alpha.2 here: http://editor.babylonjs.com/electron/preview/BabylonJS%20Editor%20Setup%203.1.2-alpha.2.exe

[HappyDev]

Well it seems somewhat fixed as it looks like this now when the scene is loaded with no errors

Still you can notice some difference in how it looks in the editor though.

I can provide the whole scene file too if you want to take a look : https://drive.google.com/open?id=1XGp-eKeMkkb_vpL3AB4CMml4OXl0E96r

Is this a bug or am I messing something up ?

[julien-moreau]

@HappyDev looks like a bug. Can you send me the entire project (scene.editorproject + scene folder) as a zip please? So I can reproduce easier and fix quicker.

Maybe the geometry has been merged (I doubt), or the material ids are not unique. Having your scene will allow me to check that

Thanks!

[HappyDev]

I appreciate your quick reply !

Well it seems there is another bug, when I reload the scene after I closed the program the materials seem be missing so the trees look black. Anyway, here are the files you requested.

Scene : https://drive.google.com/open?id=1V0TmkLCktq7yeWepcUDmHM2e6r2hK6fX
Tree Model(Probably cause you want to reimport it) : https://drive.google.com/open?id=1-QjWsgZyf5mZFAMinhgsEX_8DUZ4wbO9

[julien-moreau]

Thanks! Having a look right now
Anyway it would be easier to have the complete project folder. The one generated when you CTRL+Z containing the “scene.editorproject” file and the “scene” folder containing all the assets.

[HappyDev]

Here is the whole folder : https://drive.google.com/open?id=1Tj8QnyVv9DDPfZX3xepefv5B-wCC3sti

I should probably mention that I’m only using the exported scene via importing it with code.

Basically I use the editor as a level design tool.

[HappyDev]

So I think I got how to make it properly, the steps seem to be the following :

1)Drag n drop your model in the scene
2)Then add the textures,hopefully are provided, using the menu ADD->ADD from file in the Texture Viewer tool.
3)Drag n drop the texture from the previous step from the texture viewer onto your model
4)Finally via the SCENE menu choose EXPORT FINAL SCENE AND ASSETS
5)In the exported folder you can find a scene.babylon file and the textures so you just can load the scene file via the assetmanager and the textures will be loaded too automatically.

Now if you want to reopen the scene in the local editor later you just have to select both the scene file and the texture(s) and drag n drop them and the scene will look properly in the editor.

Will try to update with screenshots for everyone that may have trouble with the workflow.

[julien-moreau]

@HappyDev
You can find the preview version here: http://editor.babylonjs.com/electron/preview/BabylonJS%20Editor%20Setup%203.2.1-beta.4.exe

This fixes the OBJ workflow

[HappyDev]

Better late than never !

Really glad for using such an awesome tool !

[withADoveInOneHand]

Hah yeah, 7 months later is now now, baby.