in graphics, webgl-threejs

NeHe Lessons 20 and 22 – Alpha Masks and Bump Maps


This post is part of ongoing series on implementing the legacy NeHe lessons (originally done in C++ with OpenGL 1.x) using the three.js library. This post covers  Lesson 20 (Alpha Masks) and Lesson 22 (Bump-Maps).

Both of these are using images with WebGL to create some interesting effects.  They’re pretty simple though so we’ll cover them pretty quickly.

Alpha Masks

The key point to alpha masks is to create a textured object using TWO images. One is the full color image where the part you want rendered is non-black and the rest of the images is black (i.e. pixel values of 0).  The second image is black and white, with the white portions corresponding to the non-black parts of the first image.  Then when the two images are combined to form a masked texture in three.js the black portions of the resulting texture are transparent and only the non-black parts of the first image are shown.

Bump Maps

Bump maps also use images to produce the effect, but in a very different way. Bump mapping was invented by Jim Blinn in 1978 as part of his work for the visualization of the Voyager 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 – only the apparent reflection of the light off the surface is changed.

More information and live demos of both these lessons can be found at Geo-F/X here.

The Lessons and Source

You can find the Lesson 20 at Geo-F/X here  and lesson 22 is here  As always, the sources are on github here. Feel free to contact me at or comment on this article directly below.

Write a Comment