How to create a good workflow

Questions
1

Hi guys,

We are currently creating models of buildings in 3DMax and implementing them in a BabylonJS viewer with some custom functionalities ( spaces highlights, floor plans etc ). We want to implement this solution for a couple hundred buildings.

These are the problems that we are facing right now and some solutions that we tried:

  1. The model of a building that is exported from 3DMax to GLTF, when it is loaded in the browser freezes for about 10 seconds, after the GLTF file is transferred ( as I researched I understand that this is cause by the reading and interpretation of the file by js, that blocs the main thread ). Is there a better solution for loading a bigger model without freezing the main thread?

  2. There are some properties that the PBR materials in 3DMax doesn’t translate to BabylonJS or to the GLFT export. Currently we are exporting the GLTF model and then playing with the materials in the sandbox, but we don’t have a workflow from this point to implement this properties either in 3DMax materials or in the code. Is there a solution for this?

  3. We use IBL, but some materials are getting a tinted color from it. Is there a property or other method to not let it borrow the color?

Any advice on any topic is welcomed!

Thanks!

2

  1. Is your model a lowpoly ? 10s of freezing seems a lot, even the loading screen doesn’t react?

  2. You will probably be interested by the Replay function of the Inspector:

    image
    image1351Ă—821 283 KB

  3. Here I think you can simply unsaturate your hdr into Photoshop, drag&drop the .hdr file into a sandbox, and use the Inspector’ “generate .env” function:

    image
    image1833Ă—934 448 KB

4 Likes
3

  1. Here is a link with a model of a floor with some fitouts in place. As you can see when it freezes, you cannot interact with the tab in anyway. Gherkin - Gherkin

  2. I missed that, it works great. I had an issue with the ambient color, it saves it in the json, but its not applied when applying the delta file.

  3. Great! No more blueish walls, but they still get a grey look, and cannot get them white. Any ideas on how to get the white? If I remove the env texture on the walls and create an ambient light in the scene will overexpose the other objects, right?

4

image
image763Ă—107 4.58 KB

Your model doesn’t looks like too heavy, 3.6MB is a light file. Did you try without draco compression just to see if it’s better on scene loading or not?

About the greyish walls, you can try to play with ambientColor of your materials, added to a white ambientColor of the scene. And also still editing the HDR, using exposure or contrasts for example.

Nice app by the way.

1 Like
5

Did a quick profile for the first question. It looks like a ton of time is being spent on ConvertCubeMapToSphericalPolynomial. What kind of IBL environment are you using? Might be good to use an env file to make this part much faster. See Use a HDR environment (for PBR) - Babylon.js Documentation.

@sebavan will know more about this.

3 Likes
6

Totally agree as the .env contains those data there won t be any need to generate them

7

It is loading super fast now. It was a combined problem from the environment texture and a the skybox. I converted the environment CubeTexture to an env file and transformed the EquiRectangularCubeTexture for the skybox to a normal CubeTexture.

Thanks a lot for the help guys!

2 Likes