Compute normals from displacement map in three.js r.58?

Question

I\'m using the normal shader in three.js r.58, which I understand requires a normal map. However, I\'m using a dynamic displacement map, so a pre-computed normal map won\'t

Answer 1

This answer is based on your comments above.

You can do what you want, but it is quite sophisticated, and you will of course have to modify the three.js 'normal' shader.

Have a look at http://alteredqualia.com/three/examples/webgl_cubes_indexed.html. Look at the fragment shader, and you will see

vec3 normal = normalize( cross( dFdx( vViewPosition ), dFdy( vViewPosition ) ) );

Alteredqualia is using a derivative normal in the fragment shader ( instead of an attribute normal ) because the vertex positions are changing in the vertex shader, and the normal is not known.

What he is doing is calculating the normal using the cross product of the x and y screen-space derivatives of the fragment position.

This will set the normal as the face normal. It will be discontinuous at hard edges.

three.js r.58