Channels ▼

JVM Languages

Heightmap Terrain Rendering

Source Code Accompanies This Article. Download It Now.


To convert heightmaps into something you can render, you need to read the pixels of the heightmap, then create surfaces that reflect the variations in height. An easy-to-use surface in this problem is a "quad"—two triangles put together to form a rectangular surface.

Figure 3 is a quad that consists of two triangles. As you can see, the quad has four endpoints that are disjointed because we are using two triangles to represent it. These four corners can be given different heights; thus, you have the beginning of describing heights in a 3D world. Because one quad isn't enough to describe an entire terrain, you'll use lots of them if you want the terrain to look realistic.

Figure 3: Quads.

public static Mesh createQuad(short[] heights, int cullFlags)
    // The vertrices of the quad
    short[] vertrices = {-255, heights[0], -255,
      255, heights[1], -255,
      255, heights[2], 255,
      -255, heights[3], 255};
Listing One

// Create the model's vertex colors
VertexArray colorArray = new VertexArray(color.length/3, 3, 1);
colorArray.set(0, color.length / 3, color);

// Compose VertexBuffer out of previous vertrices  // and texture coordinates
VertexBuffer vertexBuffer = new VertexBuffer();
vertexBuffer.setPositions(vertexArray, 1.0f, null);

// Create indices and face lengths
int indices[] = new int[] {0, 1, 3, 2};
int[] stripLengths = new int[] {4};

// Create the model's triangles
triangles = new TriangleStripArray(indices, stripLengths);
Listing Two

// Create the appearance
  Appearance appearance = new Appearance();
  PolygonMode pm = new PolygonMode();
Listing Three

To implement a quad, I start with an x-z plane with variable y-coordinates for varying height. I introduce the method createQuad to my MeshFactory (available in the full source code archive at All createQuad needs to know is the different heights at the different corners of the quad, along with the culling flags. Listing One is a quad consisting of four vertices, each with varying y-components but static x and z. Listing Two creates the arrays necessary for describing a Mesh in an M3G system. The VertexBuffer holds two vertex arrays—the color array and position array. Listing Three, the next step in creating the quad, includes standard appearance stuff. However, the smooth shading means that colors of the vertices are interpolated over the whole surface, creating a smooth appearance. Now all that's left is to create the Mesh, which is straightforward:

// Finally create the Mesh
    Mesh mesh = 

       new Mesh(vertexBuffer, 
       triangles, appearance);

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.