# How to use pbr material

**URL:** <https://forum.babylonjs.com/t/how-to-use-pbr-material/9346>\
**Category:** Questions\
**Created:** [March 20, 2020, 6:23pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346 "2020-03-20T18:23:38Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 20, 2020, 6:23pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/1 "2020-03-20T18:23:38Z")

</div>

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

> **[Wood 023 on CC0 Textures - Public Domain PBR Materials](https://cc0textures.com/view?id=Wood023)**
>
> Free materials never looked this good! Get hundreds of PBR materials and textures for free under the Public Domain license.

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?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [March 20, 2020, 6:37pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/2 "2020-03-20T18:37:13Z")

</div>

Hey!

1. Why not rotating it before using a tool like [Paint.net](http://Paint.net) ?
2. I suggest reading:

- [Start with Physically Based Rendering (PBR) - Babylon.js Documentation](https://doc.babylonjs.com/how_to/physically_based_rendering)
- [Master Physically Based Rendering (PBR) - Babylon.js Documentation](https://doc.babylonjs.com/how_to/physically_based_rendering_master)

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 20, 2020, 6:47pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/3 "2020-03-20T18:47:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [March 20, 2020, 6:55pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/4 "2020-03-20T18:55:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 20, 2020, 7:00pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/5 "2020-03-20T19:00:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [March 20, 2020, 7:12pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/6 "2020-03-20T19:12:46Z")

</div>

Check this out.

[https://doc.babylonjs.com/resources/external\_pg\_assets](https://doc.babylonjs.com/resources/external_pg_assets)

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

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 20, 2020, 7:18pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/7 "2020-03-20T19:18:42Z")

</div>

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](https://playground.babylonjs.com/#CSPJ7A)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2020, 7:50pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/8 "2020-03-20T19:50:07Z")

</div>

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

```javascript
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](https://dl.dropbox.com/s/ksm0ajhuk1efikp/Wood021_2K_Normal.jpg))

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2020, 7:51pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/9 "2020-03-20T19:51:34Z")

</div>

You should also use the roughness texture:

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

```

On my local dev, with the right textures:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/cc4574094e7602a5c1a0b260b7246a15f539864c.jpeg)

---

<div class="post-metadata">

**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\
**Post date:** [March 20, 2020, 7:52pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/10 "2020-03-20T19:52:14Z")

</div>

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](http://hiteshsahu.com/Skyrim)  
, I changed the dragon material to dark grey.

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [March 20, 2020, 8:03pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/11 "2020-03-20T20:03:48Z")

</div>

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

[https://playground.babylonjs.com/#CSPJ7A#1](https://playground.babylonjs.com/#CSPJ7A#1)

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 21, 2020, 10:07am UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/12 "2020-03-21T10:07:53Z")

</div>

@PirateJC and @Evgeni_Popov  
Thanks for your support, but I have the feeling that in  
[https://playground.babylonjs.com/#CSPJ7A#1](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.

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 21, 2020, 10:38am UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/13 "2020-03-21T10:38:50Z")

</div>

@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](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?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 21, 2020, 12:36pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/14 "2020-03-21T12:36:09Z")

</div>

`.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](https://playground.babylonjs.com/#CSPJ7A#3)

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 21, 2020, 1:42pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/15 "2020-03-21T13:42:14Z")

</div>

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](https://ibb.co/RDDvzcC)

You must upload this texture in your dropbox and replace “[https://dl.dropbox.com/s/2so67t8e285ddnf/Planks012\_2K\_Metalness.jpg](https://dl.dropbox.com/s/2so67t8e285ddnf/Planks012_2K_Metalness.jpg)” by this new texture in the PG:

[https://playground.babylonjs.com/#CSPJ7A#4](https://playground.babylonjs.com/#CSPJ7A#4)

You should get something like:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8e1b652aec17dfac1eb7e7249022d9dec86c31f5.jpeg)

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 21, 2020, 2:20pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/16 "2020-03-21T14:20:13Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 21, 2020, 3:08pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/17 "2020-03-21T15:08:21Z")

</div>

> [@oli](#):
>
> 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!

---

<div class="post-metadata">

**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\
**Post date:** [March 21, 2020, 3:33pm UTC](https://forum.babylonjs.com/t/how-to-use-pbr-material/9346/18 "2020-03-21T15:33:16Z")

</div>

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