Reference normalTexture()

normalTexture()

Sets a normal map to add surface detail to shapes under lighting.

normalTexture() works like texture(), but for a tangent-space normal map: an image whose red, green, and blue channels encode the direction of the surface normal (not brightness). Call it before drawing a shape and its surface normals get perturbed by the map, so lights react to detail that isn't actually in the geometry. This is the same kind of map glTF models use. Pass an optional scale to tune the strength.

Call normalTexture(null) to turn it off, or scope it between push() and pop().

bumpTexture() creates a similar effect from a grayscale height map instead. The two are easy to mix up because they produce similar results, but they expect different images: a normal map is the blue-tinted kind that stores directions, while a bump map is grayscale and stores height. Only one can be active at a time, so setting one replaces the other.

A light source is needed to see the effect. Models loaded with loadModel() apply their own normal map from the .mtl file's map_Bump.

Note: On a shape whose texture coordinates wrap all the way around, such as sphere(), the two edges of the image meet. The image has to tile for them to line up, otherwise a seam shows where they join.

Note: normalTexture() can only be used in WebGL mode.

Examples

Syntax

normalTexture(tex, [scale])

Parameters

tex
p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture: normal map, or null to clear it.
scale
Number: strength multiplier for the surface detail.

Related References