Tutorial: How to build an elevation
March 5th, 2008
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.
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.
Popularity: 5% [?]
how are you saving the images in the library? (I’m using FlashDevelop, so I can’t just drop ‘em in the GUI way so far as I know)
Comment by rey
— March 5, 2008 @ 3:39 pm
I got it with:
[Embed(source="elevate2.jpg")]
public var ElevationJpg:Class;
…
var imgObj:Bitmap = new ElevationJpg();
var source_elevation:BitmapData = imgObj.bitmapData;
But now I am curious as to whether there is an easy way to set the position to the center of the extrude object like you seem to be doing. Neither view.camera.lookAt(extrude.position) nor view.moveTo(extrude.position) seem to do that for me.
Comment by rey
— March 5, 2008 @ 5:19 pm
Just pass in the init object of the SkinExtrude the following: recenter:true or use object3d.movePivot(x,y,z); Note that a bug has been fixed for movePivot(), use the latest version from svn repository.
Comment by Fabrice Closier
— March 6, 2008 @ 3:35 am
[...] assume here you already know how the elevation class works, see the tutorial How to create an elevation for more details on the Elevation [...]
Pingback by trace(myBitmapdata); » Blog Archive » Away3D Surface Tracking tutorial
— May 28, 2008 @ 3:50 am
I ´m trying the example and i get like 3 FPS ?? and when i dee the online example i see it ok… i´m doing something wrong?
this is my code:
[...]
private function iniciar():void
{
scene = new Scene3D();
camara = new Camera3D( { zoom:10, focus:100, x:500, y:900, z: -1000 } );
viewport = new View3D( { scene:scene, camera:camara } );
viewport.x = 250;
viewport.y = 250;
addChild(viewport);
var mat:IMaterial = new BitmapMaterial((new road_class() as Bitmap).bitmapData, { smooth:true } );
var elevate:Elevation = new Elevation();
extrude = new SkinExtrude(
elevate.generate((new road_bump_class() as Bitmap).bitmapData, ‘r’, 5, 5, 6, 6, 2),
{material:mat, recenter:true, closepath:false, coverall:true, subdivision:0, bothsides:false, flip:false } );
extrude.rotationX = 90;
scene.addChild(extrude);
addEventListener(Event.ENTER_FRAME, render, false, 0, true);
}
private function render(e:Event):void
{
viewport.render();
extrude.rotationY ++;
}
[...]
Comment by Pablo
— June 7, 2008 @ 5:21 pm
This is not the place to start a thread, please join the dev group for technical support. Fast answer: the amount of triangles is defined by the (width/Xstep)*(height/Ystep) so exact same code generates more triangles if the bitmapdata you pass has a greater width, greater height or both. Just pass higher steps accordingly.
Comment by Fabrice Closier
— June 8, 2008 @ 1:17 pm
[...] assume here you already know how the elevation class works, see the tutorial How to create an elevation for more details on the Elevation [...]
Pingback by Flash Tutorials | Away3D tutorials roundup | Lemlinh.com — September 5, 2008 @ 5:59 am
I am trying your tutorial and I am receiving this error message in the output of Flash:
Scene 1 Layer ‘Layer1′ Frame 1, Line 4 1013: The private attribute may be used only on class property definitions.
Comment by Carroll Altman
— September 15, 2008 @ 11:21 am
To Carroll: You copied and pasted the code from this page into the flash text editor.
In there you don’t need to add the word ‘private’ in front of a function. Just delete the private words and it’ll be fine.
Comment by Escape-Artist
— September 16, 2008 @ 5:37 am
hello, im doing several test of this tutorial and i cant make it work,
i added the code in and deleted the “private” words ,then add the images in library and linkage ass class the elevate2.jpg to elevation and elevate3.jpg as roadcolor, im using flash cs3 with as3 and away3d v2.
Comment by wicho — February 3, 2009 @ 5:06 pm
For technical support, please join our dev group.
Comment by Fabrice Closier
— February 5, 2009 @ 6:41 am
Someone get this to work, really? Why do a tutorial if you do not post all the code and source files? I decompile your swf and there’s a lot more setup that what you try to pass here, just be cool and post the source please, really. And answer the questions posted.
Comment by mine
— June 11, 2009 @ 10:29 am
Thanks for the tutorial. But I can’t make it all work.
You should’ve posted the entire source files.
Cause thousands of noobs will waste several more hours to solve it.
Comment by Roma
— June 23, 2009 @ 5:52 am
You should’ve posted the entire source files.
No details!Or give more examples!
Comment by teshu
— August 25, 2009 @ 8:54 am
I could not get this to work either…
Comment by Peter McAlenney
— November 25, 2009 @ 10:58 am
That’s why we do have a google group where you can post your questions. Please register if you need technical assistance.
Comment by Fabrice Closier
— November 27, 2009 @ 7:44 pm
Does anyone know if there are any videos available to help with this?
Comment by Camera Flip Bracket
— March 2, 2010 @ 5:35 am
There are no videos on this, but in case you want to go the easy way, Prefab3D generates them for you. http://www.closier.nl/prefab
Comment by Fabrice Closier — March 2, 2010 @ 8:36 am
It shows how to create elevation using the Away3D 1.9.4 library or higher. The class which is called the Elevation which is the companion on class SkinExtrute. Great effort by the author for this post. Thanks for this nice post.
Comment by wheel spin roulette
— March 9, 2010 @ 7:13 am