Model reflection and smoothness

Questions
1

Hi,

I have a silly question that I can’t figure out after lots of tests.
I’m loading an OBJ model in babylonjs and threejs. I have a very complex environment with different lights.
For some reason, what ever lights I’m configuring I can’t achieve the same look as the one that I have in threejs. I’m probably not familiar with the basics…
On threejs I’m able to see every part of the model reflected in the light.

threejs
threejs1053×538 55.3 KB

On babylonjs, the model is always smooth without any reflection

babylonjs
babylonjs1702×768 131 KB

I hope that the question is not too stupid…

Thanks for any help.
D.

2

Probably it is because you have no environment for PBR materials.
Try to add these lines:

    const hdrTexture = new BABYLON.CubeTexture("https://playground.babylonjs.com/textures/environment.env", scene);
    hdrTexture.gammaSpace = false;
    scene.environmentTexture = hdrTexture;
3

Thank you for your fast response.
I have tried to add that to my scene, but I can’t see any change in how the model looks.

4

Is there any way to have a look at your model or put it into Playground?

5

This is the model that I have used. Don’t worry about copyright, it is free to use.

Thanks!

6

Here it is - Babylon.js Playground
You need to convert your mesh to flat shaded mesh:

myMesh.convertToFlatShadedMesh();

I also added one directional light to illuminate facets :slight_smile:

image
image745×601 31.4 KB

You can also convert your model (which uses Standard material) to GLB to use PBRMaterial and environment reflections - https://playground.babylonjs.com/#MULGTD#1

image
image632×658 70.2 KB

3 Likes
7

This is exactly what I needed.
You truly are a Jedi master!
Thank you for the quick help and the playground.

Thanks again,
D.

1 Like
8

Quick question.
I’m using an asset container and I’m trying to achieve the same results you have with the GLB file.

I have created a playground with the asset container:

I’m trying to figure out how to update the mesh.convertToFlatShadedMesh and where. Whatever I do, I either get exceptions or it just doesn’t work. What should I use from the container object to modify the shaded mesh?

Thanks again,
D.

9

Here you are :slight_smile: - https://playground.babylonjs.com/#TFMLPD#2

10

Thanks for the update.

I’m trying to make it work in my environment without success.
My environment looks more like this, with parent meshes for the physics imposters.

In the PG above, I can see the mesh properly with the parent meshes.

But, for some reason, once I add the convertToFlatShadedMesh my model is becoming a mess, like this:

pg_output
pg_output1540×759 112 KB

Any idea? I can’t reproduce it in the PG.

Thanks for any help,
D.

11

Ideas:

  1. The model itself is not correct. Could you try to make the same setup with one of the reference models (there are a lot of them here - The Meshes Library | Babylon.js Documentation
  2. If you use your three.js setup as reference it also may be wrong regarding flat shading - see this thread at three.js forum - How to set flatShading or smooth to material (load object with GLTFLoader)? - Questions - three.js forum (this also may point that the model is not correct).

Also, note that by default every material can have only 4 lights; if you want to use more, add:
myMaterial.maxSimultaneousLights = 8;

12

Thanks again.

Well, something is wrong with my environment and I can’t figure out what.
The technique above works great for OBJ files.

I have used the same model that you used in your playground and it still looks wrong in my environment.
In addition, I have tested the one of the models you mentioned from the babylonjs repo:
BABYLON.SceneLoader.LoadAssetContainer(“https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/Playground/scenes/”, “ufo.glb”, scene, function (container) {
container.addAllToScene()
container.meshes[1].convertToFlatShadedMesh();
})

They both work great in the playground but are messed up in my environment.

Even the following basic code looks wrong.
container.addAllToScene();
container.meshes[1].convertToFlatShadedMesh();

I will use the OBJ files for now. If you have any idea I would love to hear about it. I feel bad for bugging you about it :slight_smile:

BTW - I’m using react-babylonjs. I’m not sure if it matters… I have stripped all scene and engine configuration but it still breaks…

Thank you for all the help!!!
D.

13

Also, please note that

  1. Usually models don’t need to be converted to flat shaded meshes .
  2. OBJ files, especially ‘free models’, often suffer from wrong normals.

This part
container.meshes[1].convertToFlatShadedMesh();
will work only for specific model.

14

Got it, thank you for the tip. I will remember that!

15

Just wanted to update you that your solution worked as you described.
My problem was that I was not aware that I used a react-babylon project with Babylon v 4.2. Migrating to v5 solved the problem.

Thanks again,
D.

2 Likes