interactive technology privateer

The Backstory

After nerding out over skyboxes and continuing my exploration of Away3D I stumbled upon the Elevation class. After a little research I learned that it’s a super fast and easy way for making terrains! More nerding out and reminiscing over the old counterstrike days followed.

The Description

Terrain is just that, terrain. It’s what you walk on. It’s the river that you ford, the mountains you climb, the road you travel and the hills that you roll (over).

The Classes

There are two classes that you’ll use to make your very own terrain: Elevation and SkinExtrude. Elevation generates verticies from a heightmap (more on this later). And SkinExtrude just displays it all.

The Setup

To make this thing work you’re going to need two images: a heightmap and a material. The material is just that, the material that gets rendered (in this case it gets applied to the SkinExtrude). The heightmap is a bit different, all it does is describe different heights using a single color channel, 0 being the lowest and 255 being the tallest.

There’s a ton of different ways to obtain these images: there a programs made to generate random terrain, you could use actual USGS data, you could snag them from some game mod, etc. For this demo I just went into Photoshop.

First I created my base image:

1. Create a new layer
2. Apply Filter > Render > Clouds
3. Apply Filter > Artistic > Watercolor

That gives me something like this:

Now I need to make it look like terrain, so I just created a Gradient Map layer and chose a gradient (pretty much at random). This gives me my material:

As for the heightmap, I just took my base image, created a layer over it filled with pure red (#ff0000) and set that layers’ Blend Mode to Multiply. So, here’s my heightmap:

Pretty simple, and if you take some time on the material you could get some really good looking terrain.

The How-To

With our material and heightmap in-hand all we need is some code to put them into action:

// grab the BitmapData from the embedded images
var heightmap:BitmapData = Cast.bitmap(new TerrainTutorial.jpgHeightmap());
var terrain:BitmapData = Cast.bitmap(new TerrainTutorial.jpgTerrain());
 
// create the material to be applied to the terrain
var material:BitmapMaterial = new BitmapMaterial(terrain, {smooth: true});
 
// create an Elevation instance
var elevation:Elevation = new Elevation();
 
// generate verticies based on the embedded heightmap image
var verticies:Array = elevation.generate(heightmap, "r", 12, 12, 5, 5, 1);
 
// create the actual terrain with the generated verticies and apply the material to it
this.extrude = new SkinExtrude(verticies, {coverall: true, material: material});
 
// SkinExtrudes are facing the wrong way by default, so we rotate it
this.extrude.rotationX = 90;
 
// add it to the scene
this.view.scene.addChild(this.extrude);

Not so bad. The place you’ll want to pay attention to is the elevation.generate() function call. Here’s a rundown of it’s parameters:

1. sourceBmd: The heightmap bitmap data
2. channel: The color channel in the heightmap to calculate the heights from
3. subdivisionX: How many pixels wide a subdivision (face) is
4. subdivisionY: How many pixels tall a subdivision is
5. scalingX: Width scale factor
6. scalingY: Height scale factor
7. elevate: Elevation scale factor

The subdivisionX and subdivisionY are what to pay attention to. The smaller the number, the more accurate the terrain but the more faces there will be. When working with terrains you will constantly balance accuracy and face count.

The Example

Here’s an example using the material and heightmap from the how-to.

The Code

Download the code for this example here. Keep in mind that this was built using Flash 10, so if you’re using Eclipse or Flex Builder then you’ll have to change some stuff in your project before it will compile.