I tought I’d share the solution to calculating smooth shaded normals in the shader since it took some asking around to find the solution. I did not see any three.js implementation of this.
So, if you’re displacing the vertices in the vertex shader (with some noise in my case), you will need to recalculate also the normals in the shader if you want to use lighting.
You can use the derivatives
dFdy to calculate flat shading in the fragment shader.
However if you want to use smooth shading, it is a bit harder.
Basically, you can calculate the normal by the cross product of the tangent and bitangent.
And you can calculate the tangent and bitangent by calling the displacement function with the neightbour position.
This is what it boils down to:
vec3 tangent = neighbour1 - position; vec3 bitangent = neighbour2 - position; vec3 normal = normalize(cross(tangent, bitangent));
If instead you’re using a texture to do the displacement, you can sample the neighbour texel. This is shown here.
I did a minimal codepen example of this: