PBR material looks bad

Questions
1

Hi BabylonJS community.

I’m trying to create metal shed wall(s) and currently working on it’s material. For me the material quality is bad:

  • there is like an additional border for the walls

  • it looks like the metal sheet has incorrent displacement map implemented

Screenshot 2024-05-16 155431
Screenshot 2024-05-16 155431891×555 237 KB

Screenshot 2024-05-16 155456
Screenshot 2024-05-16 155456886×580 201 KB

The playground: https://playground.babylonjs.com/#7P3QO9#10.
So generally material looks quite unnatural (all assets taken from there: Corrugated Iron Texture • Poly Haven) and I would like to have really good visual material quality like on this playground: https://www.babylonjs-playground.com/#EWKFRK#8 (taken from this thread: Can't get PBR materials quite right).

For my app requirements simple Box is not enough, have had to implement mesh as Polygon.

Working on that for two days and I’m stucked :frowning: My question is if I understand or do something wrong with that PBR material on polygon mesh?

2

Hello, and welcome :slight_smile:

  • About the artifacts on the borders :

    • It comes from the fact that you are extruding with some thickness, before applying a displacement.
    • The displacement is moving faces in the direction of its normals. In the case of the faces which are on the borders (due to the thickness, it ends up with these strange waves. Remove the depth: WALL_THICKNESS from the BABYLON.MeshBuilder.ExtrudePolygon call, if you want to get rid of it.
    • Otherwise, you will need to do additionnal work on the material + UV, so that these faces are not concerned by the displacement

  • About the general PBR quality of the render : in PBR all is about lighting. You have only one hemi light, which means there is very few to do good use of all the normal maps and stuffs, for reflexion. For example in the playground you gave as example, there is a scene environnement texture, which is exactly here to feed the reflexions with some details
    As an example take this PBR Glossy Demo. Here are the render with and without the scene reflexions, without any changes on the PRB materials (diffuse, normal, displacement, or whatever)

    pbr_demo
    pbr_demo1408×689 204 KB

    Good looking of PBR really comes from environment and lights :wink:

++
Tricotou

3 Likes
3

pg with env texture: https://playground.babylonjs.com/#7P3QO9#11

In general I would recommend you to read the PBR material docs:
https://doc.babylonjs.com/features/featuresDeepDive/materials/using/introToPBR
https://doc.babylonjs.com/features/featuresDeepDive/materials/using/HDREnvironment
https://doc.babylonjs.com/features/featuresDeepDive/materials/using/masterPBR

Having a better understanding of the PBR concepts should help you setting up the materials as you need.

2 Likes
4

Thank you Tricotou! This explains to me a lot! :slightly_smiling_face:

5

sebavan, can you please update playground? It seems that it got overwritten.

6

the playground https://playground.babylonjs.com/#7P3QO9#11 from the previous reply adds this extra line:

scene.createDefaultEnvironment({ createGround: false, createSkybox: false })

which internally creates an environment texture.