Away3D 3.6: Applying Basic and Bitmap Materials

Exclusive offer: get 50% off this eBook here
Away3D 3.6 Essentials

Away3D 3.6 Essentials — Save 50%

Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D

$29.99    $15.00
by Matthew Casperson | February 2011 | Enterprise Articles Web Graphics & Video

Away3D includes over a dozen material types that can be used to display 3D objects with a huge variety of effects, with some of the materials using the Pixel Bender technology new to Flash Player 10 to create a level of detail that has not previously been seen in Flash applications.

In the previous article by Matthew Casperson, author of Away3D 3.6 Essentials, we covered Materials, Lights and Shading Techniques with Away3D 3.6. In this article the focus will be on:

  • The different materials that can be created in Away3D
  • Illuminating materials with lights

 

Away3D 3.6 Essentials

Away3D 3.6 Essentials

Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D

  • Create stunning 3D environments with highly detailed textures
  • Animate and transform all types of 3D objects, including 3D Text
  • Eliminate the need for expensive hardware with proven Away3D optimization techniques, without compromising on visual appeal
  • Written in a practical and illustrative style, which will appeal to Away3D beginners and Flash developers alike
        Read more about this book      

(For more resources on Away3D 3.6, see here.)

To demonstrate the basic materials available in Away3D, we will create a new demo called MaterialsDemo.

package
{

Some primitives show off a material better than others. To accommodate this, we will apply the various materials to the sphere, torus, cube, and plane primitive 3D objects in this demo. All primitives extend the Mesh class, which makes it the logical choice for the type of the variable that will reference instances of all four primitives.

import away3d.core.base.Mesh;

The Cast class provides a number of handy functions that deal with the casting of objects between types.

import away3d.core.utils.Cast;

As we saw previously, those materials that can be illuminated support point or directional light sources (and sometimes both). To show off materials that can be illuminated, one of these types of lights will be added to the scene.

import away3d.lights.DirectionalLight3D;
import away3d.lights.PointLight3D;

In order to load textures from external image files, we need to import the TextureLoadQueue and TextureLoader classes.

import away3d.loaders.utils.TextureLoadQueue;
import away3d.loaders.utils.TextureLoader;

The various material classes demonstrated by the MaterialsDemo class are imported from the away3d.materials package.

import away3d.materials.AnimatedBitmapMaterial;
import away3d.materials.BitmapFileMaterial;
import away3d.materials.BitmapMaterial;
import away3d.materials.ColorMaterial;
import away3d.materials.CubicEnvMapPBMaterial;
import away3d.materials.DepthBitmapMaterial;
import away3d.materials.Dot3BitmapMaterial;
import away3d.materials.Dot3BitmapMaterialF10;
import away3d.materials.EnviroBitmapMaterial;
import away3d.materials.EnviroColorMaterial;
import away3d.materials.FresnelPBMaterial;
import away3d.materials.MovieMaterial;
import away3d.materials.PhongBitmapMaterial;
import away3d.materials.PhongColorMaterial;
import away3d.materials.PhongMovieMaterial;
import away3d.materials.PhongMultiPassMaterial;
import away3d.materials.PhongPBMaterial;
import away3d.materials.ShadingColorMaterial;
import away3d.materials.TransformBitmapMaterial;
import away3d.materials.WhiteShadingBitmapMaterial;
import away3d.materials.WireColorMaterial;
import away3d.materials.WireframeMaterial;

These materials will all be applied to a number of primitive types, which are all imported from the away3d.primitives package.

import away3d.primitives.Cube;
import away3d.primitives.Plane;
import away3d.primitives.Sphere;
import away3d.primitives.Torus;

The CubFaces class defines a number of constants that identify each of the six sides of a cube.

import away3d.primitives.utils.CubeFaces;

The following Flash classes are used when loading textures from external image files, to handle events, to display a textfield on the screen, and to define a position or vector within the scene.

import flash.geom.Vector3D;
import flash.net.URLRequest;
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.text.TextField;

The MaterialsDemo class extends the Away3DTemplate class (download code Ch:1).

public class MaterialsDemo extends Away3DTemplate
{

One of the ways to manage resources that was discussed in the Resource management section was to embed them. Here, we see how an external JPG image file, referenced by the source parameter, has been embedded using the Embed keyword. Embedding an image file in this way means that instantiating the EarthDiffuse class will result in a Bitmap object populated with the image data contained in the earth_diffuse.jpg file.

[Embed(source = "earth_diffuse.jpg")]
protected var EarthDiffuse:Class;

A number of additional images have been embedded in the same way.

[Embed(source = "earth_normal.jpg")]
protected var EarthNormal:Class;
[Embed(source = "earth_specular.jpg")]
protected var EarthSpecular:Class;
[Embed(source = "checkerboard.jpg")]
protected var Checkerboard:Class;
[Embed(source = "bricks.jpg")]
protected var Bricks:Class;
[Embed(source = "marble.jpg")]
protected var Marble:Class;
[Embed(source = "water.jpg")]
protected var Water:Class;
[Embed(source = "waternormal.jpg")]
protected var WaterNormal:Class;
[Embed(source = "spheremap.gif")]
protected var SphereMap:Class;
[Embed(source = "skyleft.jpg")]
protected var Skyleft:Class;
[Embed(source = "skyfront.jpg")]
protected var Skyfront:Class;
[Embed(source = "skyright.jpg")]
protected var Skyright:Class;
[Embed(source = "skyback.jpg")]
protected var Skyback:Class;
[Embed(source = "skyup.jpg")]
protected var Skyup:Class;
[Embed(source = "skydown.jpg")]
protected var Skydown:Class;

Here we are embedding three SWF files. These are embedded just like the preceding images.

[Embed(source = "Butterfly.swf")]
protected var Butterfly:Class;
[Embed(source = "InteractiveTexture.swf")]
private var InteractiveTexture:Class;
[Embed(source = "Bear.swf")]
private var Bear:Class;

A TextField object is used to display the name of the current material on the screen.

protected var materialText:TextField;

The currentPrimitive property is used to reference the primitive to which we will apply the various materials.

protected var currentPrimitive:Mesh;

The directionalLight and pointLight properties each reference a light that is added to the scene to illuminate certain materials.

protected var directionalLight:DirectionalLight3D;
protected var pointLight:PointLight3D;

The bounce property is set to true when we want the sphere to bounce along the Z-axis. This bouncing motion will be used to show off the effect of the DepthBitmapMaterial class.

protected var bounce:Boolean;

The frameCount property maintains a count of the frames that have been rendered while bounce property is set to true.

protected var frameCount:int;

The constructor calls the Away3DTemplate constructor, which will initialize the Away3D engine.

public function MaterialsDemo()
{
super();
}

The removePrimitive() function removes the current primitive 3D object from the scene, in preparation for a new primitive to be created.

protected function removePrimitive():void
{
if (currentPrimitive != null)
{
scene.removeChild(currentPrimitive);
currentPrimitive = null;
}
}

The initSphere() function first removes the existing primitive from the scene by calling the removePrimitive() function, and then creates a new sphere primitive and adds it to the scene. Optionally, it can set the bounce property to true, which indicates that the primitive should bounce along the Z-axis.

protected function initSphere(bounce:Boolean = false):void
{
removePrimitive();
currentPrimitive = new Sphere();
scene.addChild(currentPrimitive);
this.bounce = bounce;
}

The initTorus(), initCube(), and initPlane() functions all work like the initSphere() function to add a specific type of primitive to the scene. These functions all set the bounce property to false, as none of the materials that will be applied to these primitives gain anything by having the primitive bounce within the scene.

protected function initTorus():void
{
removePrimitive();
currentPrimitive = new Torus();
scene.addChild(currentPrimitive);
this.bounce = false;
}

protected function initCube():void
{
removePrimitive();
currentPrimitive = new Cube(
{
width: 200,
height: 200,
depth: 200
}
);
scene.addChild(currentPrimitive);
this.bounce = false;
}

protected function initPlane():void
{
removePrimitive();
currentPrimitive = new Plane(
{
bothsides: true,
width: 200,
height: 200,
yUp: false
}
);
scene.addChild(currentPrimitive);
this.bounce = false;
}

The removeLights() function will remove any lights that have been added to the scene in preparation for a new light to be created.

protected function removeLights():void
{
if (directionalLight != null)
{
scene.removeLight(directionalLight);
directionalLight = null;
}

if (pointLight != null)
{
scene.removeLight(pointLight);
pointLight = null;
}
}

The initPointLight() and initDirectionalLight() functions each remove any existing lights in the scene by calling the removeLights() function, and then add their specific type of light to the scene.

protected function initPointLight():void
{
removeLights();

pointLight = new PointLight3D(
{
x: -300,
y: -300,
radius: 1000
}
);
scene.addLight(pointLight);
}

protected function initDirectionalLight():void
{
removeLights();

directionalLight = new DirectionalLight3D(
{
x: 300,
y: 300,

The direction that the light is pointing is set to (0, 0, 0) by default, which effectively means the light is not pointing anywhere. If you have a directional light that is not being reflected off the surface of a lit material, leaving the direction property to this default value may be the cause. Here we override the default to make the light point back to the origin.

direction: new Vector3D(-1, -1, 0)
}
);
scene.addLight(directionalLight);
}

The initScene() function has been overridden to call the applyWireColorMaterial() function, which will display a sphere with the WireColorMaterial material applied to it. We also set the position of the camera back to the origin.

protected override function initScene():void
{
super.initScene();
this.camera.z = 0;
applyWireColorMaterial();
}

Away3D 3.6 Essentials Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D
Published: January 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Away3D 3.6, see here.)

The initUI() function adds a textfield to the stage. This textfield will be used to display the name of the currently applied material.

The TextField object is added as a child of the main Sprite class (from which the Away3DTemplate class extends), and has no direct association with the Away3D engine. As such the x and y coordinates shown below relate to a 2D position on the screen, and not a 3D position within the Away3D scene.

protected override function initUI():void
{
materialText = new TextField();
materialText.x = 10;
materialText.y = 10;
materialText.width = 300;
this.addChild(materialText);
}

The initListeners() function has been overridden to register the onKeyUp() function to be called when a key on the keyboard has been released.

protected override function initListeners():void
{
super.initListeners();
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
}

The onEnterFrame() function is overridden to animate the current primitive.

protected override function onEnterFrame(event:Event):void
{
super.onEnterFrame(event);

If bounce property is true the current primitive will bounce along the Z-axis between 400 and 600 units from the origin. This is used to show off the effect produced by the DepthBitmapMaterial class.

if (bounce)
{
++frameCount;
currentPrimitive.z =
500 + Math.sin(frameCount / 10) * 100;
}

If bounce is false, the current primitive will be fixed at a position of 500 units along the Z-axis.

else
{
frameCount = 0;
currentPrimitive.z = 500;
}

The current primitive will also be slowly rotated around the X and Y axes.

currentPrimitive.rotationX += 1;
currentPrimitive.rotationY += 1;
}

The onKeyUp() function uses a switch statement to call a function in response to certain keyboard keys being released. The comment next to each case statement shows the key that the keyCode property relates to.

protected function onKeyUp(event:KeyboardEvent):void
{
switch (event.keyCode)
{
case 49: // 1
applyWireColorMaterial();
break;
case 50: // 2
applyWireframeMaterial();
break;
case 51: // 3
applyColorMaterial();
break;
case 52: // 4
applyBitmapMaterial();
break;
case 53: // 5
applyDepthBitmapMaterial();
break;
case 54: // 6
applyMovieMaterial();
break;
case 55: // 7
applyInteractiveMovieMaterial();
break;
case 56: // 8
applyAnimatedBitmapMaterial();
break;
case 57: // 9
applyDot3BitmapMaterialF10();
break;
case 48: // 0
applyDot3BitmapMaterial();
break;
case 81: // Q
applyEnviroBitmapMaterial();
break;
case 87: // W
applyEnviroColorMaterial();
break;
case 69: // E
applyFresnelPBMaterial();
break;
case 82: // R
applyPhongBitmapMaterial();
break;
case 84: // T
applyPhongColorMaterial();
break;
case 89: // Y
applyPhongMovieMaterial();
break;
case 85: // U
applyPhongPBMaterial();
break;
case 73: // I
applyPhongMultiPassMaterial();
break;
case 79: // O
applyShadingColorMaterial();
break;
case 80: // P
applyWhiteShadingBitmapMaterial();
break;
case 65: // A
applyTransformBitmapMaterial();
break;
case 83: // S
applyCubicEnvMapPBMaterial();
break;
case 68: // D
applyBitmapFileMaterial();
break;
case 70: // F
applyExternalDot3BitmapMaterial();
break;
}
}

The remainder of the MaterialsDemo class is made up of the functions called by the onKeyUp() function that create a primitive 3D object, apply a material to it, and create a light if one is needed. The materials that are applied by these functions, the function itself, and a table showing the parameters that the materials accept are listed in the coming sections.

Unlike the classes used to create the primitive 3D objects which usually accept a single init object as the constructor parameter, the Away3D material classes have constructors that accept a combination of regular parameters and an init object. To distinguish between the two, the regular parameters will be shown in bold in the following tables.

Basic materials

The basic materials don't rely on a texture, and so can be used without having to load or embed any external resources. This makes them easy to use, and they are great for quickly prototyping an application.

WireColorMaterial

For most of the previous demos, we have not specifically applied any particular material to the 3D objects. When no material is specified, Away3D will apply the WireColorMaterial material, which shades the 3D object with a solid color (this color is randomly selected at runtime unless a specific color is supplied) and draws the outline of the 3D objects triangle faces.

Here we will specifically create a new instance of the WireColorMaterial class and apply it to the 3D object. The color of the material has been specified by a String representing the color's name.

protected function applyWireColorMaterial():void
{

The initSphere() function is called to add a sphere primitive to the scene.

initSphere();

The name of the material is assigned to the TextField text property, which will display the material name on the screen.

materialText.text = "WireColorMaterial";

The material itself is then created and assigned to the local newMaterial variable. Here we have defined the solid color to be dodgerblue (using a String to define the color), while the color of the wireframe will be white (defined by the int 0xFFFFFF) with a width of two pixels.

var newMaterial:WireColorMaterial =
new WireColorMaterial("dodgerblue",
{
wirecolor: 0xFFFFFF,
width: 2
}
);

The new material is then assigned to the primitive via the Mesh material property.

currentPrimitive.material = newMaterial;
}

Away3D 3.6: Applying Basic and Bitmap Materials

The following table lists the parameters accepted by the WireColorMaterial constructor. Those in bold are passed directly to the constructor, while the remaining parameters are passed in via an init object.

The WireColorMaterial class extends the WireframeMaterial class, which means the init object parameters listed for the WireframeMaterial class also apply to the WireColorMaterial class.

Away3D 3.6: Applying Basic and Bitmap Materials

WireframeMaterial

The WireframeMaterial only draws the outline of the triangle faces that make up the 3D object. In this example, the wireframe color has been specified using an int. This int value is equivalent to the dodgerblue color used in the applyWireColorMaterial() function.

protected function applyWireframeMaterial():void
{
initSphere();
materialText.text = "WireframeMaterial";
var newMaterial:WireframeMaterial =
new WireframeMaterial(0x1E90FF,
{
width: 2
}
);
currentPrimitive.material = newMaterial;
}

Away3D 3.6: Applying Basic and Bitmap Materials

Away3D 3.6: Applying Basic and Bitmap Materials

Away3D 3.6 Essentials Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D
Published: January 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Away3D 3.6, see here.)

ColorMaterial

The ColorMaterial applies a solid color to the surface of a 3D object. This example shows the color being supplied as the string version of the dodgerblue hexadecimal representation.

protected function applyColorMaterial():void
{
initSphere();
materialText.text = "ColorMaterial";
var newMaterial:ColorMaterial =
new ColorMaterial("1E90FF");
currentPrimitive.material = newMaterial;
}

Away3D 3.6: Applying Basic and Bitmap Materials

The ColorMaterial class extends the WireColorMaterial class, which means the init object parameters listed for the WireColorMaterial class also apply to the ColorMaterial class.

If the debug init object parameter is set to true, an instance of the ColorMaterial class will be drawn just like the WireColorMaterial class.

Away3D 3.6: Applying Basic and Bitmap Materials

Bitmap materials

Bitmap materials display a texture on the surface of a 3D object. These textures are usually defined in external PNG, JPG, or GIF files created with an image editing application like Photoshop.

BitmapMaterial

The BitmapMaterial class applies a bitmap texture to the surface of a 3D object. In this example, the bitmap is created from the embedded image contained in the EarthDiffuse class.

protected function applyBitmapMaterial():void
{
initSphere();
materialText.text = "BitmapMaterial";

Here we use the static bitmap() function from the Cast class to cast the EarthDiffuse class into a BitmapData object as required by the BitmapMaterial constructor.

var newMaterial:BitmapMaterial =
new BitmapMaterial(Cast.bitmap(EarthDiffuse));
currentPrimitive.material = newMaterial;
}

The Cast class offers a number of convenient functions to cast between types, but using these functions is not a requirement. A new instance of the BitmapMaterial class could also have been created using the following code:

var newMaterial:BitmapMaterial = new
BitmapMaterial(new EarthDiffuse().bitmapData);

Away3D 3.6: Applying Basic and Bitmap Materials

Away3D 3.6: Applying Basic and Bitmap Materials

TransformBitmapMaterial

A bitmap material is usually applied to the surface of a 3D object based on its UV coordinates. The TransformBitmapMaterial material has a number of properties that allow its appearance to be scaled, offset, and rotated within the UV coordinates space.

Here we have used the rotation init object parameter to rotate the material by 45 degrees. This rotation shows up quite clearly on the cube, thanks to the checkerboard texture.

When transforming the material you will most likely want to set the repeat init object parameter to true. This ensures that the texture is repeated across the surface of the 3D object. If repeat is set to false (which it is, by default), the texture will be transformed and applied once, with the edge of the transformed texture then stretched across any remaining surface area. The screenshot on the left shows the result, if repeat is set to true. The screenshot on the right shows the result if repeat is set to false.

Away3D 3.6: Applying Basic and Bitmap Materials

protected function applyTransformBitmapMaterial():void
{
initCube();
materialText.text = "TransformBitmapMaterial";
var newMaterial:TransformBitmapMaterial =
new TransformBitmapMaterial(Cast.bitmap(Checkerboard),
{
repeat: true,
rotation: 45
}
);
currentPrimitive.material = newMaterial;
}

The TransformBitmapMaterial class extends the BitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial class are also valid for the TransformBitmapMaterial class.

Away3D 3.6: Applying Basic and Bitmap Materials

Summary

This article covered applying the Basic and Bitmap materials.


Further resources on this subject:


About the Author :


Matthew Casperson

Matthew Casperson has worked in IT for nearly a decade in a variety of roles including development and support, and in his spare time loves nothing more than to experiment with the latest web and multimedia technologies. Many of these experiments can be found on Matthews personal website at http://goo.gl/2Hgr.

Away3D Essentials is Matthews first book, but hopefully won't be the last!

Books From Packt


Away3D 3.6 Cookbook
Away3D 3.6 Cookbook

OGRE 3D 1.7 Beginner's Guide
OGRE 3D 1.7 Beginner's Guide

3D Graphics with XNA Game Studio 4.0
3D Graphics with XNA Game Studio 4.0

Panda3D 1.6 Game Engine Beginner's Guide
Panda3D 1.6 Game Engine Beginner's Guide

Unity 3D Game Development by Example Beginner's Guide
Unity 3D Game Development by Example Beginner's Guide

Papervision3D Essentials
Papervision3D Essentials

Blender 2.5 Materials and Textures Cookbook
Blender 2.5 Materials and Textures Cookbook

OpenSceneGraph 3.0: Beginner's Guide
OpenSceneGraph 3.0: Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
K
S
g
f
9
V
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software