1. Ying Zhu Georgia State University
Computer Graphics Algorithms
Advanced Texture Mapping Techniques: displacement mapping, multi-texture, bump mapping, and projective texture mapping
Ying Zhu
Georgia State University

2. Heightmap and displacement mapping
Heightmap is an image used to store surface elevation data for display in 3D computer grahics.
In displacement mapping, a heightmap can be used to displace the position of vertices.
In bump mapping, a heightmap can be used for generating the normal map.

3. Heightmap

4. Heightmap
Heightmaps are widely used in games, terrain rendering software, GIS, scientific visualization, etc.
Another name for heightmaps is “digital elevation models”
Heightmaps are good for storing digital terrain elevations because they require less memory for a given level of detail than regular polygon mesh models.

5. Heightmap How to generate a heightmap? Terragen Picogen
Many video games have editors for generating heightmaps
See for a list

6. Displacement mapping in OpenGL/GLSL
Create a heightmap
Load the heightmap in an OpenGL program, and then pass it to the vertex shader as a texture image.
In the vertex shader, retrieve an RGB or RGBA vector from the heightmap for the vertex.
This is called vertex texture.

7. Displacement mapping
Convert the RGB or RGBA vector to a grayscale value. This is the amount of displacement for this vertex.
Multiply the grayscale value to the normal vector of this vertex, and then add the result to the current vertex position.
The normal vector guides the direction of the displacement.
Multiply the new vertex position with the model-view-projection matrix.

8. Displacement mapping
After vertex displacement, the original normal is no longer valid.
You may need to recalculate the normal vectors, or create a normal map from the heightmap, or simply don’t do lighting at all.

9. Displacement mapping

10. Multi-texture mapping
Multi-texture is quite easy with GLSL
Load multiple texture images in the OpenGL program and then pass them to the shader.
In the pixel shader, you can multiple, add, or mix the texture colors from multiple texture images.

11. Multi-texture mapping

12. Bump mapping
Create the illusion of a bumpy, uneven surface without using a lot of small polygons
Bump mapping is actually a per-pixel lighting technique

13. Bump mapping Basic idea
Create a normal map that stores the normals for each pixel
The “bumpiness” is encoded in the normal map.
Load the normal map in the OpenGL program and then pass the normal map to the shader program as a texture image.
In the fragment shader, retrieve the normal for the pixel from the normal map and then calculate lighting color with this normal vector.
The key idea: Instead of interpolating the normals from the vertices, the normals are retrieved from the normal map.

14. Normal maps

15. Normal maps How to create a normal map?
Convert a picture to a normal map using image editors (e.g. Photoshop, GIMP)
Create a high resolution version and a low resolution version of the same 3D model, and then generate a normal map from the high resolution version for the low resolution version.
Advanced modeling tools: Maya, Blender, etc.
Nvidia’s Melody (

16. Normal maps How to generate normal map in GIMP?
Install GIMP (
Download the GIMP Normalmap plugin ( and follow the instructions in the readme file to install it.
Open an image in GIMP.
From the menu, choose Filters  Map  Normalmap
Change the “Scale” value if you want to increase the “bumpiness”.
Create the normal map and save it to an image file.

17. Simple bump mapping Bump mapping on a flat surface is quite easy
Simply use the normal retrieved from the normal map for per-pixel lighting calculation.
There is no need to transform the normal.
This is because the coordinate system of the normal map and the coordinate system of the pixel is the same.

18. Simple bump mapping

19. General bump mapping
Bump mapping on a curved surface is more complicated
Retrieve the normal from the normal map
Transform the pixel position to the tangent space (i.e. the normal map’s coordinate space)
Calculate lighting in the tangent space.
This is called tangent space bump mapping

20. General bump mapping Tutorials on the tangent space bump mapping

21. Projective texture mapping
Project a texture from a (sometimes invisible) projector.
Projective texture mapping is the basis for shadow mapping, lightmap, texture decal, etc.

22. Projective texture mapping

23. Projective texture mapping
In regular texture mapping, the texture coordinates from each vertex is static, often calculated in the modeling software such as Maya, 3DS Max, or Blender.
In projective texture mapping, the texture coordinates are calculated dynamically from the position of the vertex.
Ignore the texture coordinates provided by the 3D model file.

24. Projective texture mapping
The basic idea
Suppose you look from the projector’s viewpoint, you will always see the texture image -- front and center.
If you can project a 3D vertex to this 2D image, then the 2D location of the projected vertex is its projective texture coordinate.
So the key is to construct a matrix to project any vertex to a 2D image from the projector’s viewpoint.

25. Projective texture mapping
The steps:
Construct a model-view-projection-bias matrix from the projector's viewpoint, using GLM’s lookat() and perspective() functions.
A scale and bias matrix is used to scale the eventual texture coordinates to [0, 1] range.
Pass this projectorMVPB matrix to the vertex shader.

26. Projective texture mapping
The steps (continued):
In the vertex shader, multiply the vertex position with this projectorMVPB matrix, and then use the first two component's of the transformed position as the texture coordinates for this vertex.
Pass the texture coordinates to the fragment shader.
Carry out texture mapping in the fragment shader as usual.

27. Projective texture mapping
Since the texture may be clamped at the border, it’s better to use a texture with a black border.

28. Projective texture mapping
An (old) tutorial on projective texture mapping from Nvidia
This tutorial describes the matrices for transforming the vertex position to projective texture coordinates.