Twisted normals with the Three.js normal shader -

Question

I'm attempting to use the Three.js r.58 normal shader to make a displacement map. I have it displacing correctly, but the lighting doesn't seem to be respecting the post-displacement normals, even when I use computeTangents().

When I turn off the displacement, I see that the default normals are definitely funny. Here's a top view of a sphere, lit from the side (the white dot marks a pointLight):

And here's a demo page: http://meetar.github.io/three.js-normal-map-0/index0.html

What's causing this? And is there documentation for the Three.js normal shader anywhere?

Answer 1

The "twisted" normals are the result of each vertex normal being evaluated as the RGB value (255, 255, 255), which corresponds to the tangent space XYZ coordinates (1.0, 1.0, 1.0). This seems to be the default behavior when a three.js normalmap material is used without passing a normal map. If you pass an all-white normal map, you'll see the same behavior.

To pass a normal map to the normalmap shader, add this line to your uniform declarations:

uniforms[ "tNormal" ].value = new THREE.ImageUtils.loadTexture( 'normalmap.png' );

To pass a "flat" normal map, make your "normalmap.png" solid (128, 128, 255) lavender, which normalizes to tangent-space coordinates (0.0, 0.0, 1.0).

For a great breakdown of normal maps including lots of examples, check out this link: http://wiki.polycount.com/NormalMap/

Answer 2

1. You are not passing in a normalMap, which is required. Try passing in a flat one.

2. ComputeTangents() can do strange things on vertices that have discontinuous UVs -- like at the north pole.

3. The code is the doucmentation. :-)