Import 3D Model With Texture Materials - A Simple Process?

[Rolento]

Hi All

I am trying to import a 3D model (created in Blender or 3D Studio Max) and I am also wanting to have all materials imported and applied to the 3D model too.  So in essence I want to do the following:

1) design model in 3D Studio Max (create mesh and apply all textures to subset meshes at design time)

2) export 3D Studio Max model and convert to Babylon model (both mesh and textures materials included in exported file)

3) create a simple playground script that loads the exported model (and meshes) from step 2, then render them in a 3D scene

I have searched the forums and I cant find anything obvious that talks to the above design/development process.  If someone can point me in the direction of documentation that enables me to achieve 1, 2, 3 above I would very much appreciate it.

FYI - my main questions are:

1) when creating the 3D model in 3DS or Blender is there anything specific I have to do to ensure the "materials" are correctly exported such that BabylonJS can read the model and materials and render them?

2) if the exported file (from 1) has to be converted into a specific BabylonJS format is there a tutorial?

3) what BabylonJS code do I need to use to; import the 3D model, import the materials, apply the materials to the model? 

4) as I understand a 3D model imported cannot be more than 64k vertices due to WebGL constraints, in this situation is there a decimation tool that is recommended to simplify the complexity (vertex count) of the model?

Ideally if someone has a PG script that explains how to import a 3D model and have the materials applied that would be great.

* I suspect the above has been documented somewhere, unfortunately I cant find it (so I apologise if thats the case)

Thanks in advance

[davrous]

Hello,

You may have a look to this video: http://doc.babylonjs.com/tutorials/05._Game_Pipeline_Integration_with_Babylon.js to better understand how to use our exporters. To answer to your questions:

1 - no, the materials will be referenced in the .babylon file and will live as .png, .jpg, .dds, etc. files. You have nothing specific to do in Blender or 3DS Max, our exporters are handling that for you.

2 - I don't understand what you mean there.

3 - Simply load the .babylon either using the SceneLoader.Load or ImportMesh function like with this code: http://www.babylonjs-playground.com/?16 and the textures will be loaded automatically. You can use also the sandbox tool: http://www.babylonjs.com/sandbox where you can drag'n'drop the .babylon files + the associated textures (.png & .jpg for instance) into it, it will load your exported 3D models.

4 - I don't have a specific decimation tool to recommend.

David

[Rolento]

Hi David

Thank you for the information, I will check out the references and try and knock something together.  This is exactly the kind of guidance I was looking for, so thanks again!

[gryff]

Hi @Rolento : as @davrous said in his answer if you assign your materials and textures properly in Blender (the modelling tool I use) then you have a good .babylon file. Step 2 is irrelevant . If you have not assigned your materials properly then the Blender exporter will produce a .log file indicating where you missed materials

As for meshes greater than 64K, if you create your own meshes, try to design your meshes in a low polygon format in the first place!!. You can always add more vertices later with the mult-resolution or subsurf modifiers. One trick you can use is to have a hi and low poly version of your meshes, then bake textures from the hi poly version to the low poly version. Then use the low poly version with BJS.

Now, if you are obtaining your models from elsewhere, there is a decimator in Blender (and I assume 3DMax) but you can also look at MeshLab which seems to have a lot more options than the Blender decimator. I avoid using such tools for any kind of animated mesh as they produce triangulated meshes which don't always fit well with rigs and shapekeys.

cheers, gryff

 

[8Observer8]

On 22/01/2017 at 7:25 PM, Rolento said:

3) what BabylonJS code do I need to use to; import the 3D model, import the materials, apply the materials to the model?

Maybe my example will be useful for you: https://jsfiddle.net/8Observer8/pmkg2tov/

I unwraped the cube in Blender and textured it in GIMP.

[Rolento]

Hi @gryff

Thanks for the clarification regarding how materials are assigned to a shape - the process is now a lot clearer in my mind.

Regarding decimation of models, I will take a look at MeshLab because my challenge is that I am being provided with high fidelity models that frequently exceed the 64k limit.  So I need to decimate them so I can use them as desired.  So thanks again for pointing me in the right direction (btw - I did not even know Blender had a decimation tool so I will play with that too).

[Rolento]

Hi @8Observer8

The example you provided is useful, it neatly shows how a simple scene can be put together using an imported model and texture file.  I guess one of the challenges I have is that the models I am importing will be complex (i.e. have many subset meshes which require different materials to be assigned).  So, I need to experiment with code/processes that help me achieve that.  I think with the help I have received thus far I should be in good shape.

Fingers crossed...

[gryff]

@Rolento: some more info about using MeshLab.

Here is an example that was created using MeshLab : The Three Guys that I created when I first started to experiment with BJS (almost 3 years ago).

The models came from here: Lincoln 3D Scans and are all very hipoly - the bust of Einstein alone has 355,000 verts, 710,000 triangles  before decimation. (Scroll down the page to find them, all in one row.)

I followed the methods outlined in this video Decimating Sculpts with MeshLab

A couple of other thoughts for you

1. The Blender exporter if it finds a huge mesh will split it.into pieces - but you have no control on that.

2. If your large mesh has sufficient multiple materials - it maybe possible to split the mesh by material before export.

cheers, gryff

 

 

[Rolento]

Hi @gryff

Thanks for the reference sites and advice.  I will have a play and see what works best for me.  By the sounds of it the Blender decimator is not too hot, and it seems I would be better off using another solution like MeshLab.  Anyway, I will give both options a try.

Thanks.

[gryff]

Morning @Rolento

You have another option of dealing with hi-poly models - re-topology. And it  can be done in Blender, but may take more time:

Basic Re-topology in Blender

How to Retopo in Blender 2.6x

It can also be done in other software (Zbrush & Cinema 4D?) perhaps more quickly.

I'm no expert on using this technique, but I believe @Pryme8 has experience with re-topology and can perhaps provide some additional advice and thoughts.

cheers, gryff

[gryff]

@Rolento : for something a little faster with re-topology, you might want to look at this free tool

Instant Meshes

And a video on its use : Instant Meshes: A free quad-based autoretopology program

It looks pretty simple to use

cheers, gryff

[JCPalmer]

On 1/24/2017 at 0:03 PM, gryff said:

A couple of other thoughts for you

1. The Blender exporter if it finds a huge mesh will split it.into pieces - but you have no control on that.

2. If your large mesh has sufficient multiple materials - it maybe possible to split the mesh by material before export.

1. Is probably correct for most .  2 is wrong.  Basically what happens is, if you exceed 65k BJS defined vertices, then it is chunked and parented to the 1st chunk.  The only exception is when there are multiple materials.  Then it must remain one mesh.  You get a warning.

This whole area is fading as most hardware these days can support 32 bit indexes.

[gryff]

@JCPalmer : I think you misunderstand me Jeff - or I did not explain it well

If you have a hi-poly mesh - say 200,000 vertices with six different materials - in Blender Edit mode it is possible to separate the vertices with each material into a separate object. So you have control on how the mesh is split.

cheers, gryff

[Pryme8]

Whoa, 200k verts. why?

Normal mapping and correct modeling will get you way down on this.

Now the multi material thing, Id recommend importing them as a single object  but not as a unified mesh... so that way you can assign different materials to the different sections.

Now if your doing custom texturing your gonna need to research UV mapping and how to set it them up to get your mip ratios clean.

[Rolento]

Hi @gryff

Sorry for the delayed reply, I have been off the scene recently (too much work - grr). Thanks for your pointers/advice, the approaches you have provided will help my get what I need done.  Much appreciated!

[Tom2021]

Hi, Ive just started looking into Babylon to upload 3d models onto the web.

At the moment my exported model from 3ds max 2020 has no textures when drag and dropped into Babylon sandbox, and then when I add an albedo map and tile UVs it assigns the material to all objects. 

Id like to find out a way to use my vray materials created in 3ds max automatically upload to mesh in sandbox? and if not is there a way to assign different textures to different meshes in sandbox?

I also notice there's a separate application called playground, where you use code to upload the meshes, I dont understand how this works as I try to put my file and folder names and run script but does not work. 

Finding it difficult to wrap my head around this at the moment, any advice would be greatly appreciated.

 

Many thanks,

Tom

[Tom2021]

Think I've figured out assigning different materials to different objects. But the materials are not looking as realistic as I would like them, the bump and roughness maps dont seem to be working properly. I will continue to research, any advice again is greatly appreciated. 

 

Tom