Hey community,

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 `dFdx`

and `dFdy`

to calculate **flat shading** in the fragment shader.

However if you want to use **smooth shading**, it is a bit harder.

The solution came from this old article and a bit from this example and this other example from spite.

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: