Hi BabylonJS Team and community,
I feel like this must have been answered already, but after digging into the forum and documentation, I didn’t find a solution.
So my question is: How do you remove these weird artefacts when using a HeightMap or a Ribbon?
Playground: https://www.babylonjs-playground.com/#ON8FM#30
Thansl for your help 
cc @PatrickRyan
@PichouPichou, what you are seeing is coming from the fact that the height map is an 8-bit image so there is a lot of precision being lost when converting to int. As you can see, the artifacts are basically pixelation on the height map, so even a super smooth height map will show these kinds of artifacts. Since function is also deprecated, I would suggest a different approach as we won’t be going back to this to enable the support of float images for the function.
Instead, using Node Geometry, you should be able to pass a 16-bit float image in exr format to the graph and let node geometry create your mesh for you. Unfortunately, when I was looking into this question, I found a bug with importing exr into node geometry, so I am opening an issue right now. Once the fix goes in for it, I will share an example with you showing the process. Stay tuned.
Ok, thanks a lot for your detailed answer @PatrickRyan, and the alternative solution!
I am not sure if this is linked, but I also have these kinds of artefacts when using Ribbon with a CustomMaterial, as you can see in this playground.
What should I do in this case?
Bump up the subdivisions you are seeing the normal interpolation between vertices. Your other option is a postPass on the render but then you would have to make decisions on the “blur” between vertices.
if you reaaaaly wanna be fancy, disregard the normal directly and just use it a sample point on a shader that takes position/normal/lights into consideration and does some mixing/filtering to smooth those normal inversions with sample steps.
