Learn Three.js - Third Edition

Using the canvas as a bump map

As you saw earlier in this chapter, we can create a simple wrinkled texture with a bump map. The higher the intensity of a pixel in this map, the higher the wrinkling. Since a bump map is just a simple black and white image, nothing keeps us from creating it on a canvas and using that canvas as an input for the bump map.

In the following example, we use a canvas to generate a random grayscale image, and we use that image as an input for the bump map that we apply to the cube. See the 23-canvas-texture-bumpmap.html example. The following screenshot shows the example:

The JavaScript code required for this is not ...