trace(myBitmapdata);

Many have requested tutorials, so here is my first one!

This tutorial shows you how to create an elevation using the Away3D 1.9.4 library or higher.

In the extrusion package there is a class called Elevation, which is a companion of the SkinExtrude class. This tutorial will show you how they work together.

A little word on the SkinExtrude, (a dedicated tutorial on this class will be soon available). The SkinExtrude class does only one thing: connect a collection of Number3D, points in 3D space with x, y and z values. It generates a mesh between them and you can define how detailed you want the subdivision of the surface.

Elevation is a class that reads channel information of a BitmapData object, and generates a series of points (Number3D values) based on the color value and the elevation factor passed to the generate method. By itself, the class just returns a multidimensional array containing those points in space.

So what can we do with this data? Well in this case, just pass it to the SkinExtrude class, and like magic, the engine will render those points linked to each other as an elevated mesh, no coding required.

To get started, in order to build the demo shown above you need to spend a few minutes in Photoshop or any other graphical editing package. For the demo, we want to build a piece of a road across some landscape. Begin to build the color information first and then start to build the elevation information afterwards, so that both seamlessly fit, as if they were above each other. In Away3d we need to know which channel (color) will be used for elevation, so if you pass an "r", the information will be based on the red channel values, similarly for other colour channels (r,g,b,a). In this case, we choose to use the red channel.

In order to build your elevation you need to draw some gradients going from 0, to 255 in that color. Any other color will be ignored, so you can use another color that does not have red in its composition to draw these gradients. How you can do this in Photoshop is beyond the scope of this tutorial.

Here is the color information that will be used for the material of the generated mesh.

And here is the gradient, more red means higher elevation.

Back to Flash

Now that our job is done in Photoshop, it's time to import these images into Flash. Note that the size of the images is not relevant for this tutorial, but you should try to avoid importing too many kb's.

Set up your project file as usual, and import the SkinExtrude and the Elevation class.

import away3d.extrusions.Elevation;
import away3d.extrusions.SkinExtrude;

The rest of the code needed to generate the demo shown is below:

//here a little function that generates the bmd from the library, above player 9.0.115 you can directly access the library
//with this one you are fully 9.0 compatible, just add a linkage name to your image in the lib, and pass that id to this function.

private function imageFromLib(source_ID:String):BitmapData
{
var classRef:Class = getDefinitionByName(source_ID) as Class;
return new classRef(classRef.width, classRef.height);
}

private function build():void
{
// instance bitmapdata for elevation info
var source_elevation:BitmapData = imageFromLib("elevation");
// your material using the color bitmapdata
var mat:IMaterial = new BitmapMaterial(imageFromLib("roadcolor") , {smooth:true});
// instance of the elevation class, you can now call the generate method, multiple times if needed.
var elevate:Elevation = new Elevation();
// we pass to the SkinExtrude class the generated points from the elevation class
extrude = new SkinExtrude(elevate.generate(source_elevation, "r", 5, 5, 50, 50, 4), {material:mat, recenter:true, closepath:false, coverall:true, subdivision:1, bothsides:false, flip:true});
extrude.rotationX = 90;
// show time!
this.scene.addChild(extrude);
}

A note on the parameters for the Elevation.generate method:
elevate.generate(source_elevation, "r", 5, 5, 50, 50, 4)

That's it.

The big work is mostly on the designers side for once!! I can imagine to build a series of tiles containing low and high definition elevations made that way then swap info depending on camera position, to build a road game or similar and keep polycount managable.

Note that I do not include a whole class, not only because copypasting is bad for the human brain, but because we've spend an enormous amount of time to set up some cool doc system with examples for you guys on away3d.com. You'll find there all you need to know to get started, in case you are now ready to explore the Z axis !