The roof & wall's material looks flat and lacks depth — more like 2D than 3D

Questions
1

Hi BabylonJS Community!

I’m trying to create realistic wall and roof materials for a metal building, but I’m running into a visual issue. The materials look very flat, almost like 2D surfaces, and they lack a proper 3D structure or depth. They don’t resemble realistic materials — especially the roof, which should have some surface variation or texture to feel more natural.

The visual issue:

image
image948×827 72.7 KB

Playground: https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#40.

Expected roof visualisation: Roofing Tiles 013 A on ambientCG (please, click “3D preview” to see my expectations) The PBR maps used on playground downloaded directly from this website.

Can you please help me with that? Fixing my playground code or having some better ideas to create material for roof and walls that have a 3D feel are highly appreciated :slight_smile:

Thank you in advance!

2

Don’t set the maxHeight to 0 when calling applyDisplacementMap.

image
image1632×732 108 KB

image
image1920×1368 99.5 KB

2 Likes
3

Thank you @roland, it definitely helped :slight_smile:

I’m just wondering why now after applying your’s suggestion the roof material looks like it has two “surfaces”:

Playground: https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#45

Screenshot:

image
image821×725 38.9 KB

Tried with setting sideOrientation to BABYLON.Mesh.DOUBLESIDE (BABYLON.Mesh.BACKSIDE, BABYLON.Mesh.FRONTSIDE is not acceptable as it shows only one mesh side)

4

beside the setting you needed to change , comparing it to the tool displaying the texture you linked , your materials does not look as good simply because of lighting. Use better direction in your scenes lighting to make the materials normal/height effects display better.

image
image1311×783 42.2 KB

5

That’s because you are using sideOrientation: BABYLON.Mesh.DOUBLESIDE here:

        var roof = BABYLON.MeshBuilder.ExtrudePolygon("polygon", { shape: shape, holes: [], sideOrientation: BABYLON.Mesh.DOUBLESIDE, updatable: true }, scene);

It creates two planes. Each of the plane’s geometry is than displaced when calling applyDisplacementMap, each in the opposite direction.

The solution is easy. Don’t use sideOrientation: BABYLON.Mesh.DOUBLESIDE and set backFaceCulling = false on the material. Both sides of the single plane will be rendered and the vertices are displaced as expected:

        var roof = BABYLON.MeshBuilder.ExtrudePolygon("polygon", { shape: shape, holes: [], updatable: true }, scene);
        roof.material = this.createMetalTileMaterial(scene, WIDTH);
        roof.material.backFaceCulling = false

image
image1714×798 40.5 KB

4 Likes
6

Thank you @roland, works like a charm, you saved me second time!! :beer_mug:

Playground: https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#55

1 Like
7

image
image1920×1051 129 KB

Just another mission on the BabylonJS starship. No thanks needed, Chuck. :wink:

4 Likes