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.

(Basic09_WireColorMaterial.as)

The WireColorMaterial also supports setting the width of the wire:

 

wireColorMaterial.width = 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; 

 

(Basic09_ColorMaterial.as)

 

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

 

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

 

(Basic09_WireframeMaterial.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.width = 3;
sphere.outline = outlineMaterial; 

 

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

code: Basic09_ColorMaterial2.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.addChild(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.y = 500;
light.x = -300;
light.z = -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.

code: Basic09_ShadingColorMaterial.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.

(Basic09_PhongColorMaterial.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.

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.

 

Comments

---

---

---

---

---

Submit a comment

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