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 work in this situation.

All the examples I've found of lit displacement maps either use flat shading or pre-computed normal maps. Is it possible to calculate the normals dynamically based on the displaced vertices instead?

Edit: I've posted a demo of a sphere with a displacement map showing flat normals:

Here's a link to the github repo with all of my examples illustrating this problem, and the solutions I eventually found: https://github.com/meetar/three.js-normal-map-0

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

Answer 2

What I was describing above is called a "bump map" and it comes as a default with the three.js phong shader. I combined the normalmap shader with chunks of the phong shader responsible for bump mapping:

http://meetar.github.io/three.js-normal-map-0/bump.html

Though the normals are a bit noisy they are basically correct.

Answer 3

You can also calculate a normal map from the displacement map with JavaScript. This results in smooth normals, and is a good option if your displacement map isn't changing too often.

This method uses the code found in this demo: http://mrdoob.com/lab/javascript/height2normal/

Demo here: http://meetar.github.io/three.js-normal-map-0/index14.html