Papervision3D is an open source, real time, 3D engine for the Flash Player. It offers an intuitive Actionscript 3 API that provides access to advanced tridimensional functionalities in a relatively small time. The library is being developed by Carlos Ulloa, John Grden and Ralph Hauwert and the source code is available at the project homepage http://code.google.com/p/papervision3d/, together with the most recent SVN releases.
In this article we will see how to use some of the features offered by Papervision3D, such as using textures, shaders and bump textures. The example will create the planet Earth, apply a texture to it and use a bump map to simulate the different heights of the ground.
We begin by extending BasicView, which is a class provided by the Papervision3D library that already includes all those basic elements, such as the viewport or the camera, required for a 3D application. The texture, the light shader and the bump map will be using embedded images:
[Embed(source="/assets/earth512.jpg")]
public static var earthTexture:Class;
[Embed(source="/assets/earthBump.png")]
public static var earthBump:Class;
[Embed(source="/assets/envLight.png")]
public static var envmap:Class;
The bump map image is a blurred, black and white version of the texture image, it will be used internally to render the surface in a more realistic way. It has been modified with Photoshop and also has a text written on, that will gracefully render over the texture, as you can see in the example.
The images will then be loaded and used to create the materials for the planet:
private var light:PointLight3D;
private var bumpSphere:Sphere;
private var bumpSphereMaterial:ShadedMaterial;
private var bumpBitmapMaterial:BitmapMaterial;
private var bumpEnvmapShader:EnvMapShader;
private function init3D():void {
light = new PointLight3D(false, false);
var bitmapAsset:BitmapAsset = new earthTexture() as BitmapAsset;
var envmapAsset:BitmapAsset = new envmap() as BitmapAsset;
var bumpTexture:BitmapData = (new earthBump() as BitmapAsset).bitmapData;
bumpBitmapMaterial = new BitmapMaterial(bitmapAsset.bitmapData);
bumpEnvmapShader = new EnvMapShader(light, envmapAsset.bitmapData, envmapAsset.bitmapData, 0, bumpTexture);
bumpSphereMaterial = new ShadedMaterial(bumpBitmapMaterial, bumpEnvmapShader);
bumpSphere = new Sphere(bumpSphereMaterial, 300, 10, 10);
scene.addChild(bumpSphere);
}
The planet Earth is created as a sphere, that uses bumpSphereMaterial for rendering. The bumpSphereMaterial is built using the initial planet texture image and an environmental map shader: the shader mixes together a light source, an environment texture image and the bump map, that will be used to render the sphere in a fast and efficient way. The sphere is then added to the 3D scene and is ready for rendering.
At this point the planet is drawn on the screen, but motionless. We can easily make it move along it's y axis, by overriding a method that is called by Papervision3D whenever it is required to render the object again:
override protected function onRenderTick(event:Event=null):void {
bumpSphere.yaw(1);
super.onRenderTick(event);
}
The yaw() method, along with pitch() and roll(), is used to rotate the object around one of its axis. Other convenience methods, such as moveForward(), make it a lot more easy to move objects around the scene, which is a 3D space.
Papervision3D offers a complete set of 3D functionalities under an excellent performance, considering that all the rendering is done inside the flash player, without any hardware support. The performance is guaranteed by fast algorithms and the possibility to use culling, clipping for those objects that are outside the view frustum and can be always be enhanced by the developer. A careful design of the application can consider variations of the level of detail of the various objects on the scene, with regard to the number of polygons or number of objects visible at once; one should always keep in mind that the rendering is done with software emulation, in flash player 9, but will benefit from the new flash player 10, which also considers the z dimension. Flash player 10 however will not have complete support for 3D and Papervision3D will only benefit from its enhancements.
There is much more Papervision3D can do, such as object interactivity or support for third party textures. The library has complete support for the well known Collada file format, thus it is able to use textures and animations created by software like Maya, 3DS Max or Blender, as long as they export in a Collada format.
You can see the compiled example by following this link: Papervision3D example.
