glsl-perturb-normal

(click for demo)

Perturb a normal in the fragment shader using a normal map. This can be used to add surface detail during per-pixel lighting.

Note: You need to enable GL_OES_standard_derivatives.

#extension GL_OES_standard_derivatives : enable

varying vec3 vNormal;
varying vec2 vUv;
varying vec3 vViewPosition;

uniform sampler2D normalMap;

#pragma glslify: perturb = require('glsl-perturb-normal')

void main() {
  //extract normal map from your texture
  vec3 normalRGB = texture2D(normalMap, vUv).rgb;

  //expand into -1.0 .. 1.0 range
  vec3 normalMap = normalRGB * 2.0 - 1.0;
  
  //get surface normal and camera-space position
  vec3 N = normalize(vNormal);
  vec3 V = normalize(vViewPosition);

  //perturb the normal
  vec3 normal = perturb(normalMap, N, V, vUv);

  //... lighting
}

Usage

vec3 perturbed = perturb(vec3 M, vec3 N, vec3 V, vec2 texcoord)

Perturbs a normal where:

• M is a unit vector from your normal map (e.g. decoded from a RGB texture)
• N is the normalized surface normal
• V is the normalized camera-space position
• texcoord is the UV coordinates of your mesh

This uses GL_OES_standard_derivatives to compute the derivatives, so it may not work on older or low-end devices.

Credits

The algorithm here is from Chris­t­ian Schüler's blog post Normal Mapping Without Precomputed Tangents.

License

MIT. See LICENSE.md for details.