How to use pbr material

oli · March 20, 2020, 6:23pm

Hi - I am trying to assign a pbr material to a geometry… but could not yet make it work correctly. Here is wood a texture

It consists of 4 files
Wood023_2K_Color.jpg
Wood023_2K_Displacement.jpg
Wood023_2K_Normal.jpg
Wood023_2K_Roughness.jpg

What kind of works is the following:

pbrMat1 = new BABYLON.PBRMaterial(“pbrMat1”, scene);
pbrMat1.albedoTexture = new BABYLON.Texture(“Wood021_2K_Color.jpg”, scene);

Problems I have are the folowing:
1.) The texture needs to be rotated by 90 degrees. How to do that?
I tried
pbrMat1.albedoTexture.rotation = ???
But I couldn’t find what to put right.
2.) How to assign the remaining 3 textures?
I tried:
pbrMat1.bumpTexture = new BABYLON.Texture(“Wood021_2K_Displacement.jpg”, scene);
But I need to make the texture very pale - otherwise the result looks very strange (blotchy).

Is there any demo online that shows hoe to do it right?

Deltakosh · March 20, 2020, 6:37pm

Hey!

Why not rotating it before using a tool like Paint.net ?
I suggest reading:

oli · March 20, 2020, 6:47pm

Hi - I have checked the two articles, but could not really find a solution.

Unfortunately I do not have a GLTF model with associated textures from Substance Painter. I have a mesh that is dynamically created in Babylon that I want to cover with a material coming from Substance Designer.

Imagine a furniture that should look as realistic as possible but which is not an imported mesh, but a one that is created based on user input.

PirateJC · March 20, 2020, 6:55pm

Could you send us an example playground to help you troubleshoot?

oli · March 20, 2020, 7:00pm

Thats a bit difficult because I dont know where to place the textures. I currently have them on my dropbox, but I would not like to keep them there forever to make the playground example work. Is there any place to store them instead?

PirateJC · March 20, 2020, 7:12pm

Check this out.

https://doc.babylonjs.com/resources/external_pg_assets

Lots of options, but lots of folks use github (myself included).

oli · March 20, 2020, 7:18pm

I have created a playground using the dropbox… so it might not work in the future, but at least it works now.

You can see the problem right away.

https://playground.babylonjs.com/#CSPJ7A

Evgeni_Popov · March 20, 2020, 7:50pm

Don’t use the displacement but the normal texture here:

pbrMat1.bumpTexture = new BABYLON.Texture("https://dl.dropbox.com/s/ksm0ajhuk1efikp/Wood021_2K_Displacement.jpg", scene);

Note that the normal texture on your dropbox is wrong (https://dl.dropbox.com/s/ksm0ajhuk1efikp/Wood021_2K_Normal.jpg)

Evgeni_Popov · March 20, 2020, 7:51pm

You should also use the roughness texture:

pbrMat1.metallicTexture = new BABYLON.Texture("https://dl.dropbox.com/s/ksm0ajhuk1efikp/Wood021_2K_Roughness", scene);

On my local dev, with the right textures:

HiteshSahu · March 20, 2020, 7:52pm

1.) The texture needs to be rotated by 90 degrees. How to do that?

Ans: You need to use uv scaling and set it to -1 to invert your diffuse, normal, specular textures

        woodMat.diffuseTexture.uScale = 1;
        woodMat.diffuseTexture.vScale = 1;

        woodMat.specularTexture.uScale = -1;
        woodMat.specularTexture.vScale = -1;

         woodMat.emissiveTexture.uScale = 1;
        woodMat.emissiveTexture.vScale = -1;

2.) How to assign the remaining 3 textures?

Ans: Don’t USE PBR it will require an HDR background to work and it is expensive to load and render. A simple StandardMaterial with diffuces,specular etc texture should be enough for you:
let hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("./assets/skybox/hdr/environmentSpecular.dds", scene);

        scene.environmentTexture = hdrTexture;

[/quote]

If you still want to use PBR use PBRMetallicRoughnessMaterial

   var pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
     pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
    pbr.metallic = 1.0;
    pbr.roughness = 0.0;
    pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("./assets/skybox/hdr/environmentSpecular.dds", scene);

    sphere.material = pbr;

You can pick a mesh by name or ID after gltf is loaded if it allows changing material then you can do it.
But I will suggest you to predefined PBR material in the model itself.

Hope that helps

I have done something similar Hitesh Sahu
, I changed the dragon material to dark grey.

PirateJC · March 20, 2020, 8:03pm

Here’s the playground version of @Evgeni_Popov is suggesting:

https://playground.babylonjs.com/#CSPJ7A#1

oli · March 21, 2020, 10:07am

@PirateJC and @Evgeni_Popov
Thanks for your support, but I have the feeling that in
https://playground.babylonjs.com/#CSPJ7A#1
the following lines don’t do anything (please correct me when I’m wrong). At least I cannot see any difference when commenting them out.

pbrMat1.albedoTexture.rotation = Math.PI / 2;
pbrMat1.bumpTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PirateJC/assets/master/Wood023_2K_Normal.jpg", scene);
pbrMat1.metallicTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PirateJC/assets/master/Wood023_2K_Roughness.jpg", scene);

I also tried the same concept with a different texture, and it does not give the desired look.

oli · March 21, 2020, 10:38am

@HiteshSahu

I have checked all possible uscale, vscale combinations (+1, -1) on the albedo texture but none of them rotated the texture by 90 degrees.

Unfortunately your solution under 2.) does not help me. I need to know how what to do to use a Substance designer material in Babylon. Maybe the wood material was not ideal for testing, so here is a material that should make things a bit clearer. Again it is taken from cc0textures - it s Planks012 material:

https://cc0textures.com/view?id=Planks012

I have put links to all textures on the dropbox.

https://dl.dropbox.com/s/iz4qhtffzrjsv8j/Planks012_2K_AmbientOcclusion.jpg
https://dl.dropbox.com/s/ig3lh2yw86wwy64/Planks012_2K_Color.jpg
https://dl.dropbox.com/s/53moky4z3x5dig2/Planks012_2K_Displacement.jpg
https://dl.dropbox.com/s/2so67t8e285ddnf/Planks012_2K_Metalness.jpg
https://dl.dropbox.com/s/wakwjwojdwbbjt0/Planks012_2K_Normal.jpg
https://dl.dropbox.com/s/35pdkbo6qpd7r89/Planks012_2K_Roughness.jpg

But what to do now to make it work in Babylon?

Evgeni_Popov · March 21, 2020, 12:36pm

.rotation does not work, you should use .uAng / .vAng / .wAng instead.

The two textures bump and metallic have an impact, but it’s best seen when changing the metallic/roughness properties and adding an environment texture:

https://playground.babylonjs.com/#CSPJ7A#3

Try to comment the textures in the above PG, you will see some differences.

Evgeni_Popov · March 21, 2020, 1:42pm

You need to create a single picture with metalness in the red channel and roughness in the green channel.

I have done it for you and uploaded the picture here: Planks012-2-K-Metalness-Roughness — ImgBB

You must upload this texture in your dropbox and replace “https://dl.dropbox.com/s/2so67t8e285ddnf/Planks012_2K_Metalness.jpg” by this new texture in the PG:

https://playground.babylonjs.com/#CSPJ7A#4

You should get something like:

oli · March 21, 2020, 2:20pm

Hello @Evgeni_Popov and thanks for the new demo on PG.

I have uploaded the metalness/roughness texture to dropbox and replaced the metalness texture as you suggested. Afterwards I have tweaked the pbrMat1.roughness = 0.5 and now it’s the way I want it! Thank you!

https://playground.babylonjs.com/#CSPJ7A#5

Thanks also for the hint regarding rotation using .wAng - that was exactly what was needed.

Regarding combination of metalness and roughness in red and green channel - I think that support for using separate greyscale images should be implemented - it would make things easier.

Evgeni_Popov · March 21, 2020, 3:08pm

The problem is that Babylon can’t support all kind of combinations: some people have textures in separate files and/or in separate channels, not always the same depending on the software you used to build them.

Also, the number of different textures can’t be raise too much because it means more sampler in the glsl code, that’s why different types of data are stored in different channels when possible.

What would be nice is a tool that would let you upload all the different textures as separate files and build the required textures by Babylonjs in the right format. If someone has some spare time!

oli · March 21, 2020, 3:33pm

@Evgeni_Popov

The problem is that Babylon can’t support all kind of combinations

That’s right - PBR seems to be quite a mess (across different programs).

But what would help is an article on what would be the best / standard way to go with Babylon - without tricks and special features - just the recommended way to do it.

Which maps are expected to be combined in one file on which channel?
What is the meaning of black and white on each channel?
What is the maximum possible “stack” of textures and how to assign to a material in Babylon?

And then put that into a PG example that has a material with all possible features used in the recommended way. Then newbies like me could check what all the used maps look like and understand if a greyscale needs to be inverted, or needs to be put into another channel.

Topic		Replies	Views
Issue using PBR Material Questions	4	669	October 5, 2022
How to recreate PBR with the NodeMaterial Questions	26	1738	August 8, 2021
Applying PBR Texture to Imported GLTF mesh/file Questions	2	819	July 1, 2022
Apply a texture mask onto PBR material Questions material , texture	7	1251	January 11, 2024
How to assign textures for imported gltf model Questions material	5	891	December 4, 2021

How to use pbr material

Related topics