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

**URL:** <https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643>\
**Category:** Questions\
**Created:** [May 25, 2025, 6:59am UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643 "2025-05-25T06:59:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![chuck\_norris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chuck_norris/32/39744_2.png) [@chuck\_norris](https://forum.babylonjs.com/u/chuck_norris)\
**Post date:** [May 25, 2025, 6:59am UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/1 "2025-05-25T06:59:02Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/5/65ae4d27963c374f8c9a1c0c7112cb7bb6e9a37b.jpeg)

**Playground** : [https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#40](https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#40).

**Expected roof visualisation** : [Roofing Tiles 013 A on ambientCG](https://ambientcg.com/view?id=RoofingTiles013A) _(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 🙂

Thank you in advance!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 25, 2025, 10:07pm UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/2 "2025-05-25T22:07:32Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/e/bed7d61e48fad855d83bf55cb3661abccacf0726.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/3/f321af8d33fa43417227d8509659749213673d43.jpeg)

---

<div class="post-metadata">

**Author:** ![chuck\_norris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chuck_norris/32/39744_2.png) [@chuck\_norris](https://forum.babylonjs.com/u/chuck_norris)\
**Post date:** [May 26, 2025, 11:15am UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/3 "2025-05-26T11:15:37Z")

</div>

Thank you @roland, it definitely helped 🙂

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](https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#45)

**Screenshot** :

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

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

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [May 26, 2025, 2:56pm UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/4 "2025-05-26T14:56:50Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/0/f0d318ba09de3c9aa7645fcf6889f0fe9d0141fb.jpeg)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 26, 2025, 5:57pm UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/5 "2025-05-26T17:57:57Z")

</div>

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

```auto
        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:

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

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/e/4e4ec92cb761411a4a7aeba6bf27f8a784a14f6a.jpeg)

> **[Babylon.js Playground](https://playground.babylonjs.com/?BabylonToolkit#7P3QO9%2346)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![chuck\_norris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chuck_norris/32/39744_2.png) [@chuck\_norris](https://forum.babylonjs.com/u/chuck_norris)\
**Post date:** [May 27, 2025, 10:53am UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/6 "2025-05-27T10:53:46Z")

</div>

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

**Playground** : [https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#55](https://playground.babylonjs.com/?BabylonToolkit#7P3QO9#55)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 27, 2025, 11:17am UTC](https://forum.babylonjs.com/t/the-roof-walls-material-looks-flat-and-lacks-depth-more-like-2d-than-3d/58643/7 "2025-05-27T11:17:25Z")

</div>

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

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