## Lesson 22 - Bump Mapping

#### Introduction

This lesson is an introduction to bump mapping. Bump mapping was invented by Jim Blinn in 1978 as part of his work for the visualization of the Voyrager space-probe project. Bump mapping is a technique in computer graphics for simulating bumps and wrinkles on the surface of an object. This is achieved by perturbing the surface normals of the object and using the perturbed normal during lighting calculations. The result is an apparently bumpy surface rather than a smooth surface although the surface of the underlying object is not changed. (We'll look at actual height-mapping in lesson 34).

#### How Does It Work?

Three.js uses the height map for simulating the surface displacementwhich yields the modified normal. How does this work? Before a lighting calculation is performed for each visible point (or pixel) on the object's surface:

• Look up the height in the heightmap that corresponds to the position on the surface
• Calculate the surface normal of the heightmap
• Combine the surface normal from step two with the true ("geometric") surface normal so that the combined normal points in a new direction
• Calculate the interaction of the new "bumpy" surface with lights in the scene using, typically, the Phong reflection model

But how is the "height map" calculated? The answer is that the height map is a second texture or image (usually monochrome) whose values are treated a range of values.

or example, the original image (there are now two you can switch between) was

The height map for that image is:

The lighter the tone, the "lower" it is simulated as and vice versa.

#### Using a Bump Map

The actual code is very simple. We initialize the GFXScene same as always. Then the bump mapping is very simple as three.js does all the work:

``````function makeMesh( bumped, image ) {

gfxScene.remove(mesh);

var geom = new THREE.CubeGeometry( 2, 2, 2 );

var texture = new THREE.ImageUtils.loadTexture("images/" + image + ".jpg");
var bumpName = "images/" + image + "-bump.jpg";
var bump = bumped === true ? new THREE.ImageUtils.loadTexture(bumpName) : null;
var scale = bumped === true ? 0.2 : 0;

var mat = new THREE.MeshPhongMaterial( { map:texture, bumpMap:bump, bumpScale:scale } );

mesh = new THREE.Mesh( geom, mat );