11.9 - Heightmaps / Displacement Maps¶

Heightmaps¶

An example heightmap (1)

A heightmap is a gray scale image that is used to vary the height of a surface. Given a flat plane, the height of a surface that “floats” above the plane is specified by the colors in the gray scale image. The image values, which are intensities in the range [0.0, 1.0], are considered percentages of a maximum height. The example to the right shows a gray scale image (i.e., a heightmap) with a wireframe representation of the surface it represents.

For a gray-scale image all pixel colors have an equal amount of red, green, and blue. Therefore, any of the three component values can be used to represent a height value. The typical image uses eight bits to represent each color value. Therefore, the number of possible height values is limited to 256 (i.e., 2⁸).

The accuracy of a heightmap is dependent on the number of vertices used to define the initial plane. The more subdivisions in the plane, the higher the resolution of the rendered surface. Trade-offs are made to use the least amount of memory for a desired accuracy and resolution.

A heightmap modifies the geometry of a model. Therefore, the work of a heightmap is performed in a vertex shader (not a fragment shader).

Heightmap Example¶

A heightmap (3)

The image to the right is used as a heightmap in the following WebGL program. The lighter areas represent high areas of the surface, while the darker areas represent lower areas. Experiment with the resolution of the plane model and study the vertex shader. The vertex shader changes the geometry of the surface as follows:

• Get the color of the heightmap at a vertex location using its corresponding texture coordinates.
• Calculate the height of this vertex by using the color value, which is between 0.0 and 1.0, as a percentage to scale the maximum height.
• Use the height as the y component of the vertex.

The color of the surface is taken from the heightmap to simplify the example and to emphasize the relationship between the heightmap image and the resulting surface. Typically the color of the surface would come from a different texture map.

Re-start Show: Code   Canvas   Run Info Download Files Download Edited Files

• heightmap.vert
• heightmap.frag

// Vertex Shader precision mediump int; precision mediump float; // Scene transformation uniform mat4 u_Clipping_transform; // Projection, camera, model transform // The texture unit to use for the color lookup uniform sampler2D u_Texture_unit; // The maximum height of the heightmap uniform float u_Maximum_height; // Original model data attribute vec3 a_Vertex; attribute vec2 a_Texture_coordinate; // Data (to be interpolated) that is passed on to the fragment shader varying vec2 v_Texture_coordinate; void main() { // Get the height from the heightmap image vec3 heightmap_color = vec3(texture2D(u_Texture_unit, a_Texture_coordinate)); float height = heightmap_color[0] * u_Maximum_height; // Set the new vertex vec3 new_vertex = vec3(a_Vertex[0], height, a_Vertex[2]); // Pass the vertex's texture coordinate to the fragment shader. v_Texture_coordinate = a_Texture_coordinate; // Transform the location of the vertex for the graphics pipeline. gl_Position = u_Clipping_transform * vec4(new_vertex, 1.0); }

// Fragment shader program precision mediump int; precision mediump float; // The texture unit to use for the color lookup uniform sampler2D u_Texture_unit; // Data coming from the vertex shader varying vec2 v_Texture_coordinate; void main() { gl_FragColor = texture2D(u_Texture_unit, v_Texture_coordinate); }

../_static/11_heightmap/heightmap.html

Experiment with a heightmap.

Please use a browser that supports "canvas"
Which Model:
Plane (25 vertices; 32 triangles)
Plane (289 vertices; 512 triangles)
Plane (16,641 vertices; 32,768 triangles)

Maximum height: 1.00

0.0 2.0
Display options:
Wireframe model
Animate

Show: Process information    Warnings    Errors

Open this webgl program in a new tab or window

Displacement Maps¶

A heightmap displaces vertices from a flat (planar) surface. A variation on heightmaps is a displacement map, which displaces vertices from a non-planar surface. The direction of displacement follows a vertex’s normal vector. To keep a surface contiguous after displacement, “smooth normal vectors” must be used. Assuming that a “smooth normal vector” has been normalized to unit length, the vector is scaled by a gray-scale value from the displacement map and added to a vertex’s location. As with heightmaps, the accuracy of displacement maps is dependent on the density of its original triangular mesh.

Displacement of vertices

Displacement maps work well for non-planar surfaces that “bulge outward,” such as a sphere. However, for surfaces that curve “inward” the displacement can cause vertices to invert their relative locations and flip the orientation of triangles. An example is shown in the diagram to the right. Note that an “outward bulge” stretches the area defined by the surface while an “inward bulge” compresses the area. These distortions may be visually noticeable.

To allow for motion along a vector in the opposite direction of the normal vector, the values from a displacement map can be converted to the range [-1.0,1.0] using the formula color*2.0 - 1.0.

Displacement maps can also be used in fragment shaders to offset the location of a fragment before lighting calculations are performed. This does not change the fragment location in the final image, but it can change the color assigned to the fragment and give the illusion of a rough surface.

Displacement Map Example¶

rocks.png

The following WebGL program uses a displacement map on a curved surface using the image to the right as the displacement map. Please experiment with the program.

Please study the vertex shader program which changes the geometry of the surface as follows:

• Get the color of the heightmap at a vertex location using its corresponding texture coordinates.
• Multiply the color times the maximum displacement to get the displacement for this vertex. (The color value is a percentage in the range [0.0,1.0].)
• Scale the vertex’s normal vector by the displacement to get a “displacement vector”.
• Add the displacement vector to the vertex’s location.

Re-start Show: Code   Canvas   Run Info Download Files Download Edited Files

• displacement_map.vert
• displacement_map.frag

// Vertex Shader precision mediump int; precision mediump float; // Scene transformation uniform mat4 u_Clipping_transform; // Projection, camera, model transform // The texture unit to use for the color lookup uniform sampler2D u_Texture_unit; // The maximum height for the displacement map. uniform float u_Maximum_height; // Original model data attribute vec3 a_Vertex; attribute vec3 a_Normal; attribute vec2 a_Texture_coordinate; // Data (to be interpolated) that is passed on to the fragment shader varying vec2 v_Texture_coordinate; void main() { // Get the displacement from the displacement image vec3 displacement_map_value = vec3(texture2D(u_Texture_unit, a_Texture_coordinate)); float displacement_percentage = displacement_map_value[0]; // Scale the normal vector using the displacement vec3 direction = a_Normal * (displacement_percentage * u_Maximum_height); // Move the position of the model's vertex vec3 new_vertex = a_Vertex + direction; // Pass the vertex's texture coordinate to the fragment shader. v_Texture_coordinate = a_Texture_coordinate; // Transform the location of the vertex for the graphics pipeline. gl_Position = u_Clipping_transform * vec4(new_vertex, 1.0); }

// Fragment shader program precision mediump int; precision mediump float; // The texture unit to use for the color lookup uniform sampler2D u_Texture_unit; // Data coming from the vertex shader varying vec2 v_Texture_coordinate; void main() { gl_FragColor = texture2D(u_Texture_unit, v_Texture_coordinate); }

../_static/11_displacement_map/displacement_map.html

A Displacement Map

Please use a browser that supports "canvas"
Non-planar surface: 16,641 vertices & 32,768 triangles.

Maximum height: 1.00

-1.0 1.0
Display options:
Wireframe model
Animate

Use the mouse wheel to zoom in for a closer look.

Show: Process information    Warnings    Errors

Open this webgl program in a new tab or window

A Fun Example¶

A displacement map can be used to create a realistic model of the earth using publicly available data from NASA. The image below is a greyscale image that represents a heightmap of the earth.

GDEM-10km-BW.png [4]

The following WebGL program renders a sphere using the image above as a displacement map. The image has been stretched at the top and bottom to compensate for compression at the north and south poles. (Use the mouse wheel to zoom in for a closer look.)

Summary¶

A heightmap is a special case of the more general displacement map concept. Use the example vertex shader implemented for displacement mapping for any future WebGL development.

The WebGL examples in this lesson were written to help you understand displacement mapping – not to create fantastic renderings. Displacement mapping is typically combined with other surface property techniques to create life-like renderings.

A disadvantage to heightmaps is the need for a large number of vertices in a model’s triangular mesh, which increases memory requirements and slows rendering.

Glossary¶

heightmap

Use a value from a texture map as the “height” of a vertex.

displacement map

Use a value from a texture map to offset the location of a vertex along it’s normal vector.

Self Assessment¶