Rolento

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :)

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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... :)

Share this post


Link to post
Share on other sites

@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 :)

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites
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 :P.  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.

Share this post


Link to post
Share on other sites

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

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.