Away3D includes a large selection of materials. There are various shading techniques that can be used by these materials, which allows for a selection of materials ranging from those that display a simple texture map to those more advanced materials, which produce more interesting detailed results like reflections, lighting, and shadowing.

In this article by Matthew Casperson, author of Away3D 3.6 Essentials, we will cover Pixel Bender, and seen how it has been used by Away3D to create some of these advanced materials. Those materials that can be lit from an external light source are listed, along with a table that breaks down the types of light sources that affect these materials. We will also see how resources, like textures, can be embedded into the final SWF, or loaded from external resources.

Away3D 3.6 Essentials

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

(For more resources on 3D, see here.)

The reader will comprehend this article better by referring the previous articles on:

• Away3D 3.6: Applying Animated and Composite materials.
• Materials, Lights and Shading Techniques with Away3D 3.6.
• Away3D 3.6: Applying Basic and Bitmap Materials.
• Models and Animations with Away3D 3.6.

Light materials

Light materials can be illuminated by an external light source. There are three different types of lights that can be applied to these materials: ambient, point, and directional. Also, remember that these materials will not necessarily recognize each type of light, or more than one light source. The table under the Lights and materials section lists which light sources can be applied to which materials.

WhiteShadingBitmapMaterial

The WhiteShadingBitmapMaterial class uses flat shading to apply lighting over a bitmap texture. As the class name suggests, the lighting is always white in color, ignoring the color of the source light.

protected function applyWhiteShadingBitmapMaterial():void
{
 initSphere();
 initPointLight();
 materialText.text = "WhiteShadingBitmapMaterial";
 var newMaterial:WhiteShadingBitmapMaterial =
  new WhiteShadingBitmapMaterial(
  Cast.bitmap(EarthDiffuse)
 );
 currentPrimitive.material = newMaterial;
}

The WhiteShadingBitmapMaterial 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 are also valid for the WhiteShadingBitmapMaterial.

ShadingColorMaterial

The ShadingColorMaterial class uses flat shading to apply lighting over a solid base color.

protected function applyShadingColorMaterial():void
{
 initSphere();
 initPointLight();
  materialText.text = "ShadingColorMaterial";
  var newMaterial:ShadingColorMaterial =
   new ShadingColorMaterial(
    Cast.trycolor("deepskyblue")
   );
  currentPrimitive.material = newMaterial;
}

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

The color parameter can accept an int or String value. However, due to a bug in the ColorMaterial class, only an int value will work correctly. In the previous example, we have manually converted the color represented by the string deepskyblue into an int with the trycolor() function from the Cast class.

PhongBitmapMaterial

The PhongBitmapMaterial uses phong shading to apply lighting over a TransformBitmapMaterial base material.

protected function applyPhongBitmapMaterial():void
{
 initSphere();
 initDirectionalLight();
 materialText.text = "PhongBitmapMaterial";
 var newMaterial:PhongBitmapMaterial =
  new PhongBitmapMaterial(Cast.bitmap(EarthDiffuse));
 currentPrimitive.material = newMaterial;
}

PhongBitmapMaterial is a composite material that passes the init object to a contained instance of the TransformBitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the TransformBitmapMaterial are also valid for the PhongBitmapMaterial.

PhongColorMaterial

The PhongColorMaterial uses phong shading to apply lighting over a solid color base material.

protected function applyPhongColorMaterial():void
{
 initSphere();
 initDirectionalLight();
 materialText.text = "PhongColorMaterial";
 var newMaterial:PhongColorMaterial =
  new PhongColorMaterial("deepskyblue");
 currentPrimitive.material = newMaterial;
}

PhongMovieMaterial

The PhongMovieMaterial uses phong shading to apply lighting over an animated MovieMaterial base material.

protected function applyPhongMovieMaterial():void
{
 initSphere();
 initDirectionalLight();
 materialText.text = "PhongMovieMaterial";
 var newMaterial:PhongMovieMaterial =
  new PhongMovieMaterial(new Bear());
 currentPrimitive.material = newMaterial;
}

PhongMovieMaterial is a composite material that passes the init object to a contained instance of the MovieMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the PhongMovieMaterial are also valid for the MovieMaterial.

Dot3BitmapMaterial

The Dot3BitmapMaterial uses normal mapping to add depth to a 3D object.

protected function applyDot3BitmapMaterial():void
{
 initSphere();
 initDirectionalLight();
 materialText.text = "Dot3BitmapMaterial";
 var newMaterial:Dot3BitmapMaterial =
  new Dot3BitmapMaterial(
   Cast.bitmap(EarthDiffuse),
   Cast.bitmap(EarthNormal)
  );
 currentPrimitive.material = newMaterial;
}

Dot3BitmapMaterial is a composite material that passes the init object to a contained instance of the BitmapMaterial class. This means that in addition to those parameters in the following list, the init object parameters listed for the BitmapMaterial are also valid for the Dot3BitmapMaterial.

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: £18.99
Book Price: £30.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

(For more resources on 3D, see here.)

Pixel Bender materials

Away3D includes a number of materials that make use of Pixel Bender shaders. These materials will quite often produce effects of a much higher detail than is possible with the materials listed so far. The ability to use Pixel Bender shaders is one of the advantages Away3D version 3.x has over Away3D version 2.x. This is due to the fact that Away3D 3.x targets Flash Player 10, whereas Away3D 2.x targets Flash Player 9.

Dot3BitmapMaterialF10

The Dot3BitmapMaterialF10 class is a Pixel Bender version of the Dot3BitmapMaterial class.

protected function applyDot3BitmapMaterialF10():void
{
 initSphere();
 initDirectionalLight();
 materialText.text = "Dot3BitmapMaterialF10";
 var newMaterial:Dot3BitmapMaterialF10 =
  new Dot3BitmapMaterialF10(
   Cast.bitmap(EarthDiffuse),
   Cast.bitmap(EarthNormal)
  );
 currentPrimitive.material = newMaterial;
}

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

The textures used for the bitmap and normalMap parameters must have the same dimensions.

PhongPBMaterial

The PhongPBMaterial class uses phong shading and normal mapping to add depth and illuminate a 3D object. In addition, it uses a specular map to define the strength of the reflected light, with brighter areas reflecting more light than darker areas.

In the following image, which is embedded in the application as the class EarthSpecular, the oceans are shown in white, meaning that light will be reflected off those areas. The land masses are shown in black, which prevents light from being reflected off those areas.

protected function applyPhongPBMaterial():void
{
 initSphere();
 initPointLight();
 materialText.text = "PhongPBMaterial";
 var newMaterial:PhongPBMaterial = new PhongPBMaterial(
  Cast.bitmap(EarthDiffuse),
  Cast.bitmap(EarthNormal),
  currentPrimitive,
  Cast.bitmap(EarthSpecular));
 currentPrimitive.material = newMaterial;
}

The PhongPBMaterial class indirectly extends the TransformBitmapMaterial class, which means the init object parameters listed for the TransformBitmapMaterial class also apply to the PhongPBMaterial class.

PhongMultiPassMaterial

The PhongMultiPassMaterial class is like the PhongPBMaterial class, except that it can be illuminated from multiple light sources.

protected function applyPhongMultiPassMaterial():void
{
 initSphere();
 initPointLight();
 materialText.text = "PhongMultiPassMaterial";
 var newMaterial:PhongMultiPassMaterial =
  new PhongMultiPassMaterial(
   Cast.bitmap(EarthDiffuse),
   Cast.bitmap(EarthNormal),
   currentPrimitive,
   Cast.bitmap(EarthSpecular)
  );
 currentPrimitive.material = newMaterial;
}

The PhongMultiPassMaterial class indirectly extends the TransformBitmapMaterial class, which means the init object parameters listed for the TransformBitmapMaterial class also apply to the PhongMultiPassMaterial class.

FresnelPBMaterial

The Fresnel effect refers to the phenomenon where the amount of reflectance seen on a surface depends on the viewing angle. The most common example of this is seen on the surface of a body of water. If you look down directly at a pool of water you will be able to see down through the water without much reflected light. But if you look at the water's surface from an angle you will see much more reflected light.

The FresnelPBMaterial class replicates this effect by reflecting a sphere map that represents the surrounding environment by a varying degree according to the viewing angle of the surface.

protected function applyFresnelPBMaterial():void
{
 initPlane();
 materialText.text = "FresnelPBMaterial";

The reflected image comes from a sphere map, which is a texture that displays the surroundings of an object as if it were reflected off the surface of a sphere. This texture has been embedded as the SphereMap class.

 var newMaterial:FresnelPBMaterial = new FresnelPBMaterial(
  Cast.bitmap(Water),
  Cast.bitmap(WaterNormal),
  Cast.bitmap(SphereMap),
  currentPrimitive,
   {
     smooth: true
   }
 );
 currentPrimitive.material = newMaterial;
}

You can see how the Fresnel reflection works in the following images. In the image on the left, the flat areas reflect the base blue water material. When looking at the surface from a more side on angle, the orange environment material is now reflected.

The FresnelPBMaterial class indirectly extends the TransformBitmapMaterial class, which means that the init object parameters listed for the TransformBitmapMaterial class also apply to the FresnelPBMaterial class.

CubicEnvMapPBMaterial

The CubicEnvMapPBMaterial uses environment mapping to add the reflection of a cube of textures to a base-normal mapped texture.

protected function applyCubicEnvMapPBMaterial():void
{
 initSphere();
 materialText.text = "CubicEnvMapPBMaterial";

The reflections shown by the CubicEnvMapPBMaterial class come from six textures that form a cube that appears to surround the 3D object. These six textures are placed into the sky Array.

 var sky:Array = new Array();
 sky[CubeFaces.LEFT] = Cast.bitmap(Skyleft);
 sky[CubeFaces.FRONT] = Cast.bitmap(Skyfront);
 sky[CubeFaces.RIGHT] = Cast.bitmap(Skyright);
 sky[CubeFaces.BACK] = Cast.bitmap(Skyback);
 sky[CubeFaces.TOP] = Cast.bitmap(Skyup);
 sky[CubeFaces.BOTTOM] = Cast.bitmap(Skydown);

 var newMaterial:CubicEnvMapPBMaterial =
  new CubicEnvMapPBMaterial(
   Cast.bitmap(EarthDiffuse),
   Cast.bitmap(EarthNormal),
   sky,
   currentPrimitive,
    {
      envMapAlpha: 0.5
    }
   );
 currentPrimitive.material = newMaterial;
}

The CubicEnvMapPBMaterial class indirectly extends the TransformBitmapMaterial class, which means the init object parameters listed for the TransformBitmapMaterial class also apply to the CubicEnvMapPBMaterial class.

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: £18.99
Book Price: £30.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

(For more resources on 3D, see here.)

Loading textures from external files

Although it is quite often and more convenient to embed resources into the SWF file, there are times when this is not desirable. Away3D includes a number of classes to aid in loading external resources.

There are some considerations to be aware of when accessing external resources. One of the issues is that the loading process is asynchronous, which means that the actual process of downloading an external resource is done in the background. Normally, you would deal with the data once it has been retrieved by way of a call-back function, which is called when the Event.COMPLETE event is dispatched.

For a simple bitmap material, the BitmapFileMaterial class deals with this background loading for you. You supply the URL of the external texture image, and the BitmapFileMaterial class takes care of all the asynchronous loading process.

Other material types don't have an equivalent of the BitmapFileMaterial to handle loading of external textures. For this Away3D supplies the TextureLoadQueue class, which will load a number of external resources as a group and notify you when they are all ready.

BitmapFileMaterial

As you can see, the BitmapFileMaterial is very straightforward to use. By hiding the details of the asynchronous loading process, the BitmapFileMaterial class allows us to simply apply it like any other material. All we need to do is supply the location of the texture file to load.

protected function applyBitmapFileMaterial():void
{
 initSphere();
 materialText.text = "BitmapFileMaterial";
 var newMaterial:BitmapFileMaterial =
  new BitmapFileMaterial("earth_diffuse.jpg");
 currentPrimitive.material = newMaterial;
}

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

Using the TextureLoadQueue

The process becomes a little more complicated when you need to load several textures to create one material. Take the Dot3BitmapMaterial class as an example. It requires both diffuse texture and normal map.

The TextureLoadQueue can be used to load multiple external resources as a group. This allows us to initiate the loading of all the textures required by a class like Dot3BitmapMaterial, and then create a new instance of the class when all are loaded.

protected function applyExternalDot3BitmapMaterial():void
{
 initSphere();
 initDirectionalLight();
 materialText.text = "External Dot3BitmapMaterial";

First, we create a new instance of the TextureLoadQueue class.

 var textureLoadQueue:TextureLoadQueue =
  new TextureLoadQueue();

We then need to create two additional objects for each file to be loaded. The first is a URLRequest object, whose constructor takes the URL of the external file as the first parameter.

 var req:URLRequest =
  new URLRequest("earth_diffuse.jpg");

The second is a TextureLoader object.

 var loader:TextureLoader = new TextureLoader();

We then pass both of these objects to the TextureLoadQueue addItem() function.

 textureLoadQueue.addItem(loader, req);

This process is repeated for the normal map texture file.

 req = new URLRequest("earth_normal.jpg")
 loader = new TextureLoader();
 textureLoadQueue.addItem(loader, req);

The Event.COMPLETE event will be dispatched by the TextureLoaderQueue object once all of the external files have been loaded. Once this event has been dispatched, we can get access to the bitmap data required to create the material. For convenience, we will create an anonymous function to respond to this event.

 textureLoadQueue.addEventListener(
  Event.COMPLETE,
  function(event:Event):void
  {

We create two BitmapData variables, which will be assigned to the data contained in the two external files we have just loaded.

   var diffuse:BitmapData;
   var normal:BitmapData;

Unfortunately, the TextureLoaderQueue does not index the loaded images in a way that is easy to access. Instead, it provides an array of TextureLoader objects, and each individual TextureLoader object can then be identified and then processed. This involves iterating over the whole array to find out which TextureLoader objects relate to which external files.

   for each (var image:TextureLoader in textureLoadQueue.
images)
   {

Regardless of which external file the current TextureLoader object obtained its data from, we first create a new BitmapData object and draw the contents of the TextureLoader into it.

    var bitmapData:BitmapData =
     new BitmapData(image.width, image.height);
    bitmapData.draw(image);

Using the filename property of the current TextureLoader object, we can work out which external file it obtained its data from. This allows us to reference the new BitmapData object we just created with either the diffuse or normal variable.

    if (image.filename == "earth_diffuse.jpg")
     diffuse = bitmapData;
    else if (image.filename == "earth_normal.jpg")
     normal = bitmapData;
    }

Now that we have a reference to the diffuse and normal-map bitmaps, we can go ahead and create the Dot3BitmapMaterial object.

    currentPrimitive.material =
     new Dot3BitmapMaterial(diffuse, normal);
   }
  );

Finally, with the anonymous call back function in place we can now request that the TextureLoaderQueue start loading the files by calling its start() function.

  textureLoadQueue.start();
  }
 }
}

While we have used the TextureLoaderQueue class to load two external image files here, the same logic applies to loading just one file or dozens of files. You can also use the Flash / Flex Loader class directly to load external resources.

Summary

We have covered Pixel Bender, and seen how it has been used by Away3D to create some of these advanced materials. Those materials that can be lit from an external light source were covered.

We have seen how resources, like textures, can be embedded into the final SWF, or loaded from external resources. Embedding resources is generally the best solution as it avoids a number of potential issues like security restrictions and network failures, but for those situations where loading external resources is required, we saw how the BitmapFileMaterial and LoaderQueue classes can be used.

Further resources on this subject:

• Tips and Tricks on Away3D 3.6 [Articles]
• Away3D 3.6 Cookbook [Books]
• Away3D 3.6: Applying Basic and Bitmap Materials [Articles]
• Models and Animations with Away3D 3.6 [Articles]
• Creating and Warping 3D Text with Away3D 3.6 [Articles]
• Materials, Lights and Shading Techniques with Away3D 3.6 [Articles]
• Away3D 3.6: Applying Animated and Composite materials [Articles]

About the Author :

Books From Packt