Displacement map for terrain shading problem

Hello
I tried using displacementMap in a mesh with planeBufferGeometry and meshStandardMaterial. The height is proper and when using wireframe mode I can see all vertices moved up correctly. However the shading looks as if all the faces have the same starting normals and react to light exactly the same:
image

I expected the result of shading to be similar as when flatShading is enabled:
image

Is this the correct result? How can I achieve similar “shadowed” areas with smooth shading?

Here is a jsfddle:
https://jsfiddle.net/y7ps2dfc/

That’s because all your normals are still pointing in the same direction after you apply the heightmap, kind of like this:
normals

You need to add a normalMap to the material as well, so the normals all point away from their respective faces, as in this example: https://en.wikipedia.org/wiki/Normal_(geometry)#/media/File:Surface_normals.svg

When you apply .flatShading, the normals are automatically calculated in the fragment shader, but with smooth shading, you need to tell Three.js which way you want the normals to point.

2 Likes

Thank you for clarifying. I was hoping it was possible to set some flag to recalculate normals, but I guess this will do fine. Thanks for help :slight_smile: