Smooth the ground with heightmap

Hello,

I’m looking for a function in Babylon that would smooth the terrain at the sharp angles. Is there such a function? I can’t find any.

I tried to increase the subdivision, but that doesn’t change anything. This reinforces the problem. And if I put too much subdivision, when a character walks on the ground with the collisions activate, it becomes unplayable. Therefore raising subdivisions is not the solution.

I also try 10 different heigtmap find on google and I always have sharp angles on the edge for example or mountain forms a simple small pyramids, spikes. This is not a heigtmap problem because they all do that. You can see it on this heigtmap coming from Babylon, it’s the same problem and it doesn’t look very realistic:

https://www.babylonjs-playground.com/#1DFTDT#26

I search on the forum : three response to this and those who ask it have no solution also.

I have the feeling that there is a lack of a smoothing function for terrains (which smoothes only sharp angles) in Babylon in ways that can improve the rendering of our terrains.
This could be a request for functionality if it doesn’t exist. It is difficult to creating nice ground with heightmap in Babylon.

Thanks for your help.

Might be a good question for our in house Artist @PatrickRyan ? and @bghgary who worked on lot on smoothing maths at some point ?

I have found a good start to the solution:

1) Blur with the Photoshop water drop brush all the edges of the different colors which mix in degrading the colors (play with more or less opacity of the brush).
2) Then play with the brightness and contrast to tweak the result. (Mountain more or less high, more or less flat…)

The solution is quite fast and improves all the heightmaps to avoid sharp or sharp edges.

The final result is satisfactory. But I think that a small smoothing function to integrate in Babylon could be interesting.

2 Likes

@Dad72, you are correct in that it’s always cheaper to modify the source art than try to work around a problem like this in code. The image you are using has a lot of contrast in it and that contrast changes quickly over just a few pixels. This is why the blur is helping you in that it is spreading out the change in contrast so that the much lower resolution ground vertices are not receiving wildly different heights from one to the next.

The best way to judge your height map would be to set the resolution to the same as the subdivisions on the ground and zoom in so you can see the pixels. Sampling pixels around areas of contrast will show you the relative change in height from one vertex to the next. You can also control the drastic changes by reducing the height range when you create the ground. In your PG, you have the range from 0 to 100 meters in the parameters of CreateGroundFromHeightMap. Changing that range will reduce the spikes you see in the ground, which is what the brightness/contrast adjustment you are doing in Photoshop is simulating. Having a wider range in your height map tones does not hurt so long as the contrast isn’t too sharp over a few number of pixels. You just need to control the min and max height to tune how much variation there is in the displacement.

The other path you can take is a custom node material which allows you to control the amount of displacement on the mesh and you can blend as many textures as you want need. I had made this PG for another topic on highlighting a grid on a mesh that had displacement on it and while it’s not exactly what you are doing, it has a lot of the same elements so might be good for you to look at. You can see in the node material editor that the displacement has a simple float multiplier to control displacement, but you could use a remap node to set min and max values for displacement. This also helps in that you could change your displacement dynamically and have more access to things like bump mapping which is not available in the mix material. Let me know if you have questions when looking through this.

https://playground.babylonjs.com/#JYK4D0

1 Like