Displacement Map

Hey guys

Is it possible to use displacement map in Babylon.js? I found some old links about that, Found applyDisplacementMap() but it doesn’t work for me. And Babylon.js - Displacement Map demo with this link existing, I believe there is a way to achieve that.

Not sure why it wouldn’t be working for you?

Playground Link of Example

Yes but why it doesn’t work on box? Then it crossed my mind that for displacement to properly work mesh should probably have a lot of subdivisions, then I tried ground with subdivisions and again displacement did nothing. So I am not sure what am I doing wrong or what am I missing.

https://www.babylonjs-playground.com/#WUYDVT#1

You must flag the ground as updatable for displacement to work:
https://www.babylonjs-playground.com/#WUYDVT#2

1 Like

Easily done, add 24 (or any number of) vertices per side of each triangular facet https://www.babylonjs-playground.com/#WUYDVT#3

comment out line 11 to return box to flat shaded mesh as created.

1 Like

Okay thank you, that was helpful, but now what I actually need is displacement on custom mesh. Is that possible?

https://www.babylonjs-playground.com/#WUYDVT#5

Is there a way to make this updatable , or how it works if it works

Note: When creating your own custom mesh to make it updatable you need to add a second parameter with value true when applying the mesh to the vertex data.

vertexData.applyToMesh(customMesh, true);
2 Likes

Oh I figured it out. I’ve set forceUpdated to true inside applyDisplacementMap function.

https://www.babylonjs-playground.com/#WUYDVT#6

Thank you for your help

1 Like