Need help with integrate object in babylonjs

Hey!
Nice to meet you boys and girls.
I’m very new to this, and I did a mistake :upside_down_face: so now I need some help to fix it.
I read about 3d a little bit, and I thought that is simple, so I bought an object and I wanted to put in a 3d scene but it seems is required to do some changes with it before to use it with babylon.
I read about how to export from 3dsMax to GLTF and I think I’m pretty close but I still need some help for a better quality.
I decided to ask for it, so if is there a 3d artist which know very well how the things work with 3dsMax and babylon please and have few minutes maybe hour, ping me.
I can pay if you think there is alot of work.

Thanks for your time!

@PatrickRyan might have a good idea how to do this.

@Biscuit, welcome to the Babylon.js community! I can help to answer your questions about the pipline from 3ds Max to glTF so that you can import into Babylon. What is it that you are having problems with? If you can also post screen shots, a playground that highlights the problem, or the original Max file I can take a look at what’s going on.

Hey. Thanks.
Basically I have few questinos related to workflow. I’ll send you a PM soon.

Or no :slight_smile: It seems I cann’t so I’ll ask here
So I bought a character which has standard materials, most of them with diffuse, specular, opacity and bump map
image

But when I export it as gltf, it look not very well so I started to search possible issues.
And I found

  1. it is better to use pbr materials directly in 3dsMax, because exporter convert standard to pbr but may it lost few things on export
  2. bump map which i have is not ok, is required a normalMap (with blue color) as bump
  3. I don’t know how and where to use specular map on this pbr material, seems to not have big effect if I put it as roughness, maybe because this is not actually a roughness map? I mean like with bumpMap,… I used bumpMap from package but it looks weird, so I generated a normalMap which look good. I have to do the same thing with specular to be able to use it as roughness or?
  4. Related to opacity teture. It is a png texture, but I don’t have the option to use its alpha.
    I tried to find a workaround here too. First I removed the background and save it as png, now I have the options to use alpha, but seems to be reversed, so I reverse colors too, now it is pretty close, but I have some issue with transparency. If i set transparency mode to AlphaTest, it looks good, but the transparency is not so smooth. If I let it like is by default with alpha blend I can see through body. If I enable needDepthPrePass is fixing a little bit, but eyelashes are no more transparent. So I suspect it has something to do with opacity texture.

I’m still playing with it. I’ll come back later with updates :grinning:

One more thing. I found that if I’m using specular as roughness and check inv to reverse it, seems to work well. So maybe point 3 from above list is fixed.
Still have issue with opacity

@biscuit, there are a few things you are tangling up in your application of the textures in you materials, so I’ll lay out a complete flow for you to follow.

The glTF spec requires Physically-Based Rendering (PBR) materials for the format, with PBR Metal-Rough being the default material model. You can have access to the PBR Spec-Gloss material model with an extension but you need to know that wherever your model is being used has implemented the Spec-Gloss extension for your model to render correctly. Babylon.js can handle either, but for compatibility’s sake I would suggest using the Metal-Rough material model as there are only a few instances where you want to introduce color into your specular contribution on dielectric materials which would require the PBR-SG material model. Most models will work well with the PBR-MR model so I would stick with that.

A good primer on the PBR workflow is the Allegorithmic PBR Guide which will give you all the information you need about how to author the specific maps for PBR materials. This has both the theory behind the rendering methods as well as practical guides to get the most out of your maps.

Now to tackle your questions directly:

  1. If you are exporting to glTF from the Babylon exporter, all of your materials in 3ds Max should use the Physical Material shader. The reason for that is that the exporter will need to convert any non-physcial material into a PBR material when writing out the glTF, so you should be working in that to begin with as conversions from blinn-phong to PBR-MR are approximations and not exact. Working directly with physical materials gives you direct control over what is written to file.
  2. The difference between a bump map and a tangent space normal map is that the bump map stores data in one channel (0-1) and tells the pixel in the texture where it sits in relation to the surface along the surface normal. The normal map stores a vector (X, Y, Z) in the RGB channels of the texture and tells the pixel in the texture what its normal direction is exactly, which can be different than the surface normal. This gives you far more control over how lighting reacts with your surface and is why you don’t see bump maps being as popular as they once were. If you need to convert bump maps into tangent space normal maps, you can use a conversion tool like CrazyBump which is free and has been around for a very long time. Though it is always best to create your normal map from scratch by baking the difference between a low-poly and high-poly mesh. Some of my favorite tools for that are from Allegorithmic, but there are others like Marmoset Toolbag, xNormal, Knald, and Quixel (though Quixel needs a copy of Photoshop to run as it works on top of Photoshop).
  3. If you are using a specular map, that is not a roughness map. A roughness map determines how rough a pixel is from 0 (not rough at all, reflects the environment) to 1 (completely rough and all reflections are broad with no discernible detail). A specular map determines how much light a pixel reflects and what the light color is. The specular map is paired with a gloss map that determines how sharp the specular reflection is which implies how smooth the surface is. So you will need a roughness map, which you can easily create in any image editor by laying down values between 0 and 1 for the UV islands in your model as a starting point. You will also need a metalness map to complete your PBR material which is a texture that denotes a pixel is non-metallic, or dielectric, (0) or metallic (1). There are very few areas in a metalness map that aren’t black or white and normally are transitions between metallic and dielectric like dirt on a metal shovel head. The more detail you put into the roughness map, the better your materials will look, but you have to know why you are putting in that change in roughness. A desktop will have a single roughness value, but adding detail into the roughness map can imply scuffs in the finish, water rings on the surface, scratches, etc. There should be a reason that there is a difference in roughness and that is because the materiality of surface has changed. For example, a painted surface that has been scratched reveals a different material below and thus changes roughness.
  4. For opacity, you need to separate meshes that need a BLEND alphamode from meshes that need an OPAQUE alphamode. You assign the meshes that have some transparency a material that uses the file alpha (in Max) and a texture with an alpha channel. The rest are assigned no transparency in their material. The reason is that if you put meshes into the transparent queue, you will suffer from Z-fighting where the renderer does not use a depth pass to determine which mesh is in front of which. Using a depth pass is more costly than loading extra meshes and textures as the depth sort is done per frame. The best method is to isolate all meshes needing transparency into one material and use a second material for the opaque meshes. Then the depth sorting that is done by the opaque meshes will usually take care of and Z-fighting that occurs with your transparency queue meshes.
  5. Simply inverting the specular map does not equal a roughness map. You are inverting the amount of light reflected by each pixel, but that does not equate to how rough a material is. Roughness has to do with how sharp the reflection of the environment is on the material, not how much light is reflected off of it.

Let me know if any of this doesn’t make sense or if you have more questions about anything.

5 Likes

Sory for late reply, I was a little bit bussy at work.

Thanks for you detailed explanation @PatrickRyan.
It seems I have a lot of things to learn. I began with babylonjs and I’ll end with 3d design :smile:
But one thing is sure. I know how I’ll spend next weekends and holidays :yum:

Thanks again and peace!

1 Like

the solution helped