# Displacement map on shape

**URL:** <https://forum.babylonjs.com/t/displacement-map-on-shape/21659>\
**Category:** Questions\
**Created:** [June 14, 2021, 8:34am UTC](https://forum.babylonjs.com/t/displacement-map-on-shape/21659 "2021-06-14T08:34:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [June 14, 2021, 8:34am UTC](https://forum.babylonjs.com/t/displacement-map-on-shape/21659/1 "2021-06-14T08:34:26Z")

</div>

I am trying to apply displacement map on a face of a box.

[PG link](https://www.babylonjs-playground.com/#WUYDVT#22)

It works on a sphere, but no on a box ☹

Can anybody explain how to apply displacement map on one face of a box?

Thanks!!

---

<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:** [June 14, 2021, 10:32am UTC](https://forum.babylonjs.com/t/displacement-map-on-shape/21659/2 "2021-06-14T10:32:45Z")

</div>

You must set the vertices updatable:

[https://www.babylonjs-playground.com/#WUYDVT#25](https://www.babylonjs-playground.com/#WUYDVT#25)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/a/ca183697ba7b817a73f605fc417d26ec9ee60647.png)

You can subdivide the cube to increase the vertex count to get better result, but it’s still not very nice:

[https://www.babylonjs-playground.com/#WUYDVT#26](https://www.babylonjs-playground.com/#WUYDVT#26)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/d/2d136843ae688b9132173713aefac0045ebe1d1c.png)

The cube is not really suited for this displacement map.

Note that there’s a bug with `Mesh.increaseVertices`, the PG above will only work once this PR is merged:

> <https://github.com/BabylonJS/Babylon.js/pull/10501>
>
> See https://forum.babylonjs.com/t/displacement-map-on-shape/21659

---

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [June 15, 2021, 1:11am UTC](https://forum.babylonjs.com/t/displacement-map-on-shape/21659/3 "2021-06-15T01:11:36Z")

</div>

Thanks for the explanation!!

How about I create a ground using CreateGroundFromHeightMap and merge it with the face of the cube that I want?

Do you think it would be too inefficient?

Is sphere the only shape that can be used with displacement map??

---

<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:** [June 15, 2021, 8:07am UTC](https://forum.babylonjs.com/t/displacement-map-on-shape/21659/4 "2021-06-15T08:07:14Z")

</div>

Any shape can be used with displacement map, but the result will depend on this shape and the map.

> [@DOEHOONLEE](#):
>
> How about I create a ground using CreateGroundFromHeightMap and merge it with the face of the cube that I want?

You can also create a ground and apply the displacement map on it.

---

<div class="post-metadata">

**Author:** ![DOEHOONLEE](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/doehoonlee/32/16289_2.png) [@DOEHOONLEE](https://forum.babylonjs.com/u/DOEHOONLEE)\
**Post date:** [July 2, 2021, 5:01am UTC](https://forum.babylonjs.com/t/displacement-map-on-shape/21659/5 "2021-07-02T05:01:59Z")

</div>

Sorry for the late reply! Yes, applying a displacement map on a ground sounds like a smart idea 😃