A demo of a normal map in three.js, showing some problems and solutions:
Getting normals to work
I asked: "Why do these normals look twisted?" http://stackoverflow.com/questions/17453298/twisted-normals-with-the-three-js-normal-shader-r-58
- Using a flat normal texture - correct normals
Adding a displacement map
- Using a displacement map - normals are still flat
I asked: "Can normals be recalculated post-displacement?" http://stackoverflow.com/questions/17528878/compute-normals-from-displacement-map-in-three-js-r-58
- Recalculating post-displacement normals in the fragment shader - hard edges only
- Recalculating post-displacement normals with JavaScript - smoothed
Getting specular right
- Flat normal map with disconnected specular
- Flat normal map with correct specular - had to use pointVector instead of pointHalfVector as in many examples.
Getting normals from displacement map
- Displacement map used as a bump map - using pieces of the normalmap and phong shaders, showing noisy but correct normals. This uses Morten Mikkelsen's method of taking the derivative of the heightmap: http://mmikkelsen3d.blogspot.sk/2011/07/derivative-maps.html
Getting specular right 2
- Displacement, bump, and specular all from the same map - with the specular genes from the r.59 phong map spliced in