This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Away3D Basics 6 - The Color Materials

Away3D Basics 6 - The Color Materials

We've already touched upon materials in our former tutorials. This tutorial explores how to work with the most basic color materials, the phong shader and lighting.

Add some color or wireframe materials and you'll get a real sense of that third dimension. This tutorial will explain the basics of working with color materials in the popular 3D engine Away3D.

Prerequisites

This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. All of these examples require the file Cover.as. This file is used with the tutorials to prevent your machine from locking up as it tries to display many Flash files at once. If you are uncertain about how to use the sample Class files provided, check out this tutorial.

Color materials

By default, every 3D object in Away3D has a standard material consisting of a randomly selected color plus a black wireframe material. Most of our tutorials to this point have used these, so every time you reload a tutorial, the 3D models will display with different colors. This material is called the WireColorMaterial.

As with all things in Away3D, you can write this in both a compact and verbose way. The compact way is to just pass the colors to the init-object while creating an object:

var sphere:Sphere = new Sphere({material:"orange#red"});
view.scene.addChild(sphere); 

This is really compact, but some programmers dislike "automagical" solutions like this since it makes it harder to read the code for those new to the Away3D library. To use the more verbose syntax, this is how you specify the color material and add it to a sphere:

var wireColorMaterial:WireColorMaterial = new WireColorMaterial();
wireColorMaterial.color = 0xFFA500;
wireColorMaterial.wireColor = 0xFF0000;
var sphere:Sphere = new Sphere();
sphere.material = wireColorMaterial;
view.scene.addChild(sphere); 

This is much more code, but it is easier to read if you don't know what the init-object is and does. Use the option that best suits your coding style.

image

(ExWireColorMaterial.as)

The WireColorMaterial also supports setting the width of the wire:

wireColorMaterial.thickness = 5; 

This will set the wires to a fixed width along all wires.

You can also specify a pure color material (no wires) by removing the hash character when specifying materials:

var sphere:Sphere = new Sphere({material:"orange"}); 

Using the verbose method, you'd do it like this:

var colorMaterial:ColorMaterial = new ColorMaterial();
colorMaterial.color = 0xFFA500;
var sphere:Sphere = new Sphere();
sphere.material = colorMaterial; 

image

(ExColorMaterial.as)

There is also the opposite - a material that shows wires only:

var colorMaterial:WireframeMaterial = new WireframeMaterial();
colorMaterial.color = 0xFFA500;
colorMaterial.thickness = 2;
var sphere:Sphere = new Sphere();
sphere.material = colorMaterial;
view.scene.addChild(sphere); 

image

(ExWireframeMaterial.as)

This material has no "quick" syntax as the former ones. While convenient for testing, these materials are not much to look at but adding a little light and shading will do wonders.

Setting an object to use just a color material makes it really hard to understand how that object rotates, but by adding an outline, it becomes much more useful. Outlines can be added to all materials and you'll need to use a WireframeMaterial to do this.

var outlineMaterial:WireframeMaterial = new WireframeMaterial(0x000000);
outlineMaterial.thickness = 3;
turtle.outline = outlineMaterial; 

This will show the outer edge ouf our sphere with a 3 pixel wide outline, like on the turtle below.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

code: ExColorMaterial2.as

While not exactly a "Cartoon shader" (note the flickering in the lines), this combination is very useful for things like displaying technical illustrations. It gives an illustrated 2D look to your 3D models.

Light and reflective color materials

A shader takes light into account when rendering the material of a 3D object. If you are using a material that requires light and you forget to add the light source, your model won't be rendered. Away3D offers 3 kinds of light sources, but only one works across several materials - the DirectionalLight3D.

var light:DirectionalLight3D = new DirectionalLight3D();
view.scene.addLight(light); 

After adding the light source, you'll now see the object but not as it should be. The reason is that new lights are created at the world centre (position 0,0,0). To get a good result, we'll need to move our light towards the camera and offset the position a little:

light.direction = new Vector3D(500,-300,200); 

This is just some random variables and the reflection will differ based on this position as well as the three primary settings for the directional light: ambient, diffuse and specular. They all take values from zero to one. Below are their default values:

light.specular = 1;
light.diffuse = 0.5;
light.ambient = 0.5; 

NOTE: There is also a "brightness" property for the lights. This is a multiplier for the values above and it cannot be set after a light is rendered the first time. Make sure you set this when the light is created.

ShadingColorMaterial

This material is great for setting up the lights in your scene. Every face will be evenly lit, so you can see how the light affects the model. You set the color using either the init object or the .color property of the material.

var mat:ShadingColorMaterial = new ShadingColorMaterial(0xff00ff);

Cick the spheres below to randomize the color.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

code: ExShadingColorMaterial.as

PhongColorMaterial

Phong shading does the same as ShadingColorMaterial, but performs smoothing across the faces for a more realistic look. Phong shading does a good job of imitating  high-gloss objects that are made of plastic.

image

(ExPhongColorMaterial.as)

Each light may also have it's own color. By default, the light is set to pure, white light. The color of the light and material mix, so if you add a yellow light to a blue sphere, you'll get a green sphere as a result. In the Flex application below, you can play with the different settings and you also copy and paste any combination you like into your own projects.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

code: DirectionalLight3DTest.mxml, Viewport.mxml

In the next part of this tutorial, we'll look closer at textures and the more advanced shaders. These can really enhance the look of a model and if done properly, it can produce almost photorealistic results.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by mohammadf on 04/25 at 09:55 PM

after load some of samples of flash away3d like turtle in this page ,those give a lot of memory during play and refresh.
i use firefox 2 or ie8 and flash player 10.
in two browser this problem arised.
how prevent this problem?


Posted by mohammadf on 04/28 at 11:52 PM

hi,
in HoverCamera mode when rotate camera with set targettiltangle or targetpanangle ,camera rotat about origin((0,0,0)) .
my question is how rotate it about center of target position ?
thank you.


Posted by Jens C Brynildsen on 05/20 at 10:50 PM

Hi Mohammad,
Just change the target. I sometimes create a small cube and set the HoverCam’s target to this. By doing that, my camera will always look at the cube, so I can move the cube where I want the camera to look.

When I have my camera animation set up, I just remove the cube from the scene using removeChild(cube). The cube will still be there, but the camera won’t see it.

J


Posted by Tosumeua on 01/20 at 06:29 PM

is that all. shading looks much worse than in papervision… no offense


Posted by Jens C Brynildsen on 01/29 at 12:13 AM

@Tosumeua I agree. The Phong shading in PaperVision looks better, but I very seldom use that. I mainly use Bitmap materials and for that, Away3D rocks :)


Posted by lightsplasher on 03/25 at 11:18 PM

This magazine has some very nice tutorials, thank you for making them.  I just want to point out one issue on this page. (I think mohammadf brought this up too)  The rotating turtle (code: Basic09_ColorMaterial2.as) leaks memory very quickly.  If you leave the page running the browser will crash after a bit.  I have rebuilt the code using the 3.4.2 version tag of Away3D and the most recent version in SVN and both the resulting SWF’s leak memory slower; however, they both will still crash the browser eventually. 

One approach is to not call the render function unless there is a mouse event that needs to update the display.  (No automatic movement of the 3D object)  This will save on the CPU use and prevent memory issues until these things are fixed at the library level.  (Unless of course the user moves the turtle around by hand for a few hours) :)


Posted by Jens C Brynildsen on 04/23 at 07:05 PM

@lightsplasher Sorry about that. May be an issue with the version of Away3D that I compiled this with. I’ll have to go over all the tutorials again very soon due to the 3.5/2.5 release this week.

I’ll then recompile and add the cover.as to this file as well + remove cover.as from all the examples. While practical to use on the examples, it’s causing to much confusion for those doing the tutorials.

J


Posted by tugboat on 10/28 at 03:30 PM

Is there a way to add a MouseEvent3d listener to the faces of the shape, rather than the shape itself? 

The following doesn’t work for me, but would be amazing if it did:

var sphere:Sphere = new Sphere({radius:45,segmentsW:i*2,segmentsH:i*2});
for(var i:int = 0; i < sphere.faces.length; i++)
{
  sphere.faces.addEventListener(MouseEvent3D.MOUSE_DOWN,sayHi);
}

function sayHi(e:MouseEvent3D)
{
  trace(“HI”);
}

view.scene.addChild(sphere);
view.render();

Thank you.


Posted by Jens C Brynildsen on 11/02 at 10:39 AM

@tugboat If you take a look at the classes in Away3D that implement MouseEvent3D, you’ll actually see what you can use.

Object3D and MovieMaterial are the classes that you can use. In other words - you could change the material of the faces you want to detect the click for, or rip those faces out of the mesh and make it a separate object.

J


Posted by Stju on 11/17 at 04:58 PM

This topic was from different types of color materials, but no word about transparency..
How to make a transparent cube? This is should be very basic, maybe a have missed something, but serched the net, but have not found even one example…
This is what I want to achieve:
http://stju.info/assets/transparent_cube.png
Any help would be greatly appreciated!


Posted by Jens C Brynildsen on 11/27 at 04:55 PM

@Stju You’re entirely right - I’ve forgotten to mention this very obvious feature! For any of the materials, you can set the “alpha” property, making the material as transparent as you like.

mat.alpha = 0.5; // sets material to 50% transparent

You can also achieve transparency effects using transparent PNGs.

J

Submit a comment

Only registered members can comment. Click here to login or here to register