Channels ▼

JVM Languages

Heightmap Terrain Rendering

Source Code Accompanies This Article. Download It Now.

Mikael is a senior programmer for Redikod. He can be contacted at [email protected]

When done right, terrain provides a smooth-surface model of mountains, rivers, cliffs, hills, and other geographic phenomena. The point of terrain is that it gives users the impression they are traversing the real world. From a more abstract perspective, however, terrain really only involves variations in height. For instance, a grassy plain is a terrain with constant height (except for maybe some bumps and hills). On the other hand, a mountain region is a terrain that has significant height variations, creating large glyphs between areas that lend the illusion of mountains. Rivers are plains combined with curves that contain lower heights than the surrounding plain. For example, the terrain in Figure 1 is described by three areas of greater height—the three green hills—and the rest is a deep gorge filled with water.

Figure 1: Typical 3D terrain.

Heightmaps let you create natural terrain by providing an elegant solution to storing variations in height and smoothing surfaces. To illustrate, Figure 2 is a grayscale image that looks like a donut with a white speck in the middle. A grayscale image is a collection of pixels where each pixel goes from 0 to 255, where 0 is black and 255 white. What if you could use each pixel to determine height? If a black pixel (value 0) could be the lowest height and a white pixel (value 255) the highest, you'd have a map that depicts height—a heightmap. Another great thing about this is that since pixels go from 0 to 255, you get automatic interpolation of the terrain (thus creating smooth terrain) if you just blur images.

Figure 2: Grayscale image.

In this article, I examine how to use heightmaps for creating realistic 3D graphics. For purposes of illustration, the platform I use is the Java ME JSR 184 specification (, the Mobile 3D Graphics (M3G) API that provides a scalable, small-footprint, interactive 3D API for mobile devices such as cell phones from Sony Ericsson. The complete source code accompanying this article is available at

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.