How to use pbr material

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

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?


  1. Why not rotating it before using a tool like ?
  2. I suggest reading:

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.

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

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?

Check this out.

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

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. :slight_smile:

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

pbrMat1.bumpTexture = new BABYLON.Texture("", scene);

Note that the normal texture on your dropbox is wrong (

You should also use the roughness texture:

pbrMat1.metallicTexture = new BABYLON.Texture("", scene);

On my local dev, with the right textures:

1 Like

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/", scene);

        scene.environmentTexture = hdrTexture;


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/", 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.

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

1 Like

@PirateJC and @Evgeni_Popov
Thanks for your support, but I have the feeling that in
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("", scene);
pbrMat1.metallicTexture = new BABYLON.Texture("", scene);

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


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:

I have put links to all textures on the dropbox.

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

.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:

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

1 Like

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 “” by this new texture in the PG:

You should get something like:

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!

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.

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!


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.

1 Like