[SOLVED] Regarding PBR material in Babylon.js vs Unigine

Dear all,
I am trying to replicate the look of the material ball from unigine engine into babylon.js. The material ball appears as follows in the Unigine engine preview window.

However, it appears as follows in babylon.js

There are significant differences in the appearnces of the two models. The unigine output appears more metallic whereas Babylon/js output appears more plastic. I am using the default environment map (environment.dds). I think it might as well be due to the environment map used. What could be other possibilities for differing outputs? Is the default material that is assigned to the gltf file PBR or is it some other material type?

What I have done so far:
The original model that ships with unigine is an fbx file. I converted it to gltf format using the fbx2gltf converter. Then I load my gltf model using BABYLON.SceneLoader.Append function. The mesh loads fine. For textures, I load them separately and update their vScale to -1 because the textures appeared upside down. I also set the normalmap texture invertY to true.

//load all textures
const albedoTexture = new BABYLON.Texture("models/gltf/textures/material_ball_alb.png", scene);
const aoTexture = new BABYLON.Texture("models/gltf/textures/material_ball_a.png", scene);
const metalTexture = new BABYLON.Texture("models/gltf/textures/material_ball_sh.png", scene);				
const normalTexture = new BABYLON.Texture("models/gltf/textures/material_ball_n.png", scene);
albedoTexture.vScale = -1;
aoTexture.vScale = -1;
metalTexture.vScale = -1;
normalTexture.vScale = -1;
normalTexture.invertY = true;

Next, I loop through all materials and assign my pbr textures to the appropriate fields in the material. Since the metallness and roughness are stored in red and green channels, I set the values of useMetalnesssFromMettalicTextureBlue to false and useRoughnesssFromMettalicTextureGreen to true.

var materials = scene.materials;
   if(m.id !== "skyBox")
      m.albedoTexture = albedoTexture;
      m.ambientTexture = aoTexture;
      m.bumpTexture = normalTexture;						
      m.metallicTexture = metalTexture; 
      m.invertNormalMapX = true;
      m.invertNormalMapY = true;
      m.useRoughnessFromMetallicTextureAlpha = false; 
      m.useMetallnessFromMetallicTextureBlue = false;
      m.useRoughnessFromMetallicTextureGreen = true;  

Why I could not provide a playground scene?
The model is not public and I dont own it therefore I cannot host it on any server.


pinging @sebavan

OK some updates. I changed the background hdr to a closer looking background to the preview window. The metallic value stored in the gltf file is 0.4 which gives this result in the new background.

Changing the metallic value to 0.8 gives this result

So I think it might be the texture value stored in the metalness texture needs to be adjusted at load time or something?

using gltf should provide with common values, I am not sure why the two engines would render them differently.

Could you also try to check and reuse your .hdr file from unigine to babylon with: Using An HDR Environment For PBR | Babylon.js Documentation

Finally are you sure all post processing, gamma correction and such are off in Unigine?

cc @PatrickRyan


Thanks sebavan. I think I have got it. I set the metallic and roughness values to 1. I now get the exact same result if I disable the post effects in unigine. Here is the final result that I get in babylon.js which is almost the same. Unfortunately I cant figure out where the environment map is stored by Unigine but this is exactly what I wanted. Thanks sebavan.