Materials, Lights and Shading Techniques with Away3D 3.6

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

£18.99    £9.50
by Matthew Casperson | February 2011 | Open Source Web Graphics & Video

In this article by Matthew Casperson, author of Away3D 3.6 Essentials, we will explore the various materials that can be applied to 3D objects. 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.

This article covers the following:

  • Managing resources by embedding them, or loading them from external files
  • Defining colors
  • Pixel Bender
  • The various shading techniques used by Away3D materials

 

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.)

The difference between textures and materials

Throughout this article, a number of references will be made to materials and textures. A texture is simply an image, like you would create in an image editing application like Photoshop or view in a web page. Textures are then used by materials, which in Away3D are classes that can be applied to the surface of a 3D object.

Resource management

Quite a number of the materials included in Away3D rely on textures that exist in external image like a PNG, JPG, or GIF file. There are two ways of dealing with external files: embedding them or accessing them at runtime.

ActionScript includes the Embed keyword, which can be used to embed external files directly inside a compiled SWF file. There are a number of benefits to embedded resources:

  • The Flash application can be distributed as a single file
  • There is no wait when accessing the resources at runtime
  • The security issues associated with accessing remote resources are avoided
  • There is no additional network traffic once the SWF is downloaded
  • The SWF file can be run offline
  • The embedded files can have additional compression applied

The downside to embedding resources is that the size of the final SWF is increased, resulting in a longer initial download time.

Alternatively, the external files can be saved separately and accessed at runtime, which has the following advantages:

  • The SWF file is smaller, resulting in shorter initial download times
  • Resources are only downloaded when they are needed, and cached for future access
  • Resources can be updated or modified without recompiling the SWF file

There are several downsides to accessing resources at runtime:

  • Permissions on the server hosting the resources may need to be configured before the external files can be accessed
  • Distribution of the final Flash application is more difficult due to the increased number of individual files
  • There will be a delay when the application is run as the remote resources are downloaded

Away3D supports the use of both embedded and external resources, and both methods will be demonstrated below.

Embedding the resources is usually the best option when managing resources. It prevents a number of possible errors due to unreliable networks and security restrictions, and produces a SWF file that is much simpler to distribute and publish.

However, for applications where it is not possible to know what resources will be required beforehand, like a 3D image gallery, loading external resources is the only option. You may also want to load external resources for applications where there is a large volume of data that does not need to be downloaded immediately, like a large game with levels that the player won't necessarily see in a single sitting.

Defining colors in Away3D

The appearance of a number of materials can be modified by supplying a color. A good example is the WireColorMaterial material (the same one that is applied to a 3D object when no material is specified), the fill and outline colors of which can be defined via the color and wirecolor init object parameters.

Colors can be defined in Away3D in a number of different formats. Common to all the formats is the idea that a color is made up of red, green, and blue component. For example, the color purple is made up of red and blue, while yellow is made up of red and green.

By integer

Colors can be defined as an integer. These int values are usually defined in their hexadecimal form, which looks like 0x12CD56. The characters that make up the int can be digits between 0 and 9, and characters between A and F. You can think of the characters A through to F as representing the numbers 10 to 15, allowing each character to represent 16 different values. For each color component, 00 is the lowest value, and FF is the highest. The first two characters define the red components of the color, the next two define the green component, and the final two define the blue component.

It is sometimes necessary to define the transparency of a color. This is done by adding two additional characters to the beginning of the hexadecimal notation, such as 0xFF12CD56. In this form, the two leading characters define the transparency, or alpha, of the color. The last six characters represent the red, green, and blue components. Smaller alpha values make a color more transparent, while higher alpha values make a color more opaque.

You can see an example of a color being defined as an int in the applyWireframeMaterial() function from the MaterialsDemo class.

By string

The same hexadecimal format used by integers can also be represented as a String. The only difference is that the prefix 0x is left off. An example would be "12CD56", or "FF12CD56". The MaterialsDemo applyColorMaterial() function demonstrates the use of this color format.

Away3D also recognizes a number of colors by name. These are listed in the following table. The MaterialsDemo applyWireColorMaterial() function demonstrates the use of colors defined by name.

Materials, Lights and Shading Techniques with Away3D 3.6

Pixel Bender

Pixel Bender is a technology, new to Flash Player 10, that implements generalized graphics processing in the Pixel Bender language. The programs written using Pixel Bender are known as kernels or shaders. Shaders have the advantage of being able to be run across multiple CPUs and CPU cores, unlike the graphics processing done via the Flash graphics API. This gives shaders the potential to be much faster.

The term shader and kernel can be used interchangeably with respect to Pixel Bender.

One of the advantages of using Away3D version 3.x over version 2.x is the ability to use Pixel Bender shaders. The implementation of these shaders is largely hidden by the material classes that utilize them, meaning that they can be used much like the regular material classes, while at the same time offering a much higher level of detail.

A common misconception is that Flash Player 10 uses the Graphics Processing Unit (GPU), which is common to most video chipsets these days, to execute shaders. This is incorrect. Unlike some other Adobe products that also make use of Pixel Bender shaders, Flash Player 10 does not utilize the GPU when executing shaders.

Adobe has indicated that GPU rendering support for Pixel Bender may be included in future releases of Flash Player.

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
Select your format and quantity:
        Read more about this book      

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

Lights and materials

Lights and materials are two sides of the same coin in Away3D. The effect of a light can only be seen on a material, and materials that can be illuminated will generally show up completely black without a light source.

Away3D includes three classes, all from the away3d.lights package, with each one representing a different type of light:

  • Point lights, represented by the PointLight3D class, emit light in all directions from a point in space. The intensity of the point light is calculated using the inverse square law of attenuation (light intensity = 1 / distance2).
  • Directional lights, represented by the DirectionalLight3D class, emit light along a vector, like a flash light. Unlike the point light, the intensity of the directional light does not diminish with distance. The intensity does decrease as the angle between the vector along which the directional light is shining and the surface it is shining on increases.
  • Ambient lights, represented by the AmbientLight3D class, shine on all surfaces equally. Ambient lights can be used to add a minimum amount of light to those materials that implement them.

Only a subset of the materials available in Away3D can be illuminated, and those materials may only support a subset of the different types of lights. The following table lists those materials that can be lit, which types of lights they support, and whether the material can be illuminated by multiple light sources.

Materials, Lights and Shading Techniques with Away3D 3.6

There does not appear to be any overall design when determining which types of lights are supported by which materials. The phong shading materials are a good example. PhongMultipassMaterial supports both point and directional lights, while PhongPBMaterial only supports point lights. Neither supports the ambient light type, unlike the PhongBitmapMaterial, PhongColorMaterial, and PhongMovieMaterial classes.

The choice of what type of light source to use in your Away3D applications will usually be determined by your choice of material, and not the other way around.

Shading techniques

Away3D materials use a number of shading techniques, sometimes in combination, to achieve their end result. These techniques can be used to apply a texture to the surface of a 3D object, illuminate a 3D object using an external light source, display a reflection of the surrounding environment, or simulate the appearance of a bumpy surface.

Texture mapping

Texture mapping is used to apply an image, usually from a PNG, JPG, or GIF file, to the surface of a 3D object. It is used on its own to display a single texture, or it can be used in conjunction with the other shading techniques.

The following image shows a sphere that uses texture mapping to display a single texture representing the Earth:

Materials, Lights and Shading Techniques with Away3D 3.6

Normal mapping

Normal mapping is a technique that is used to add the appearance of depth to a 3D object. This is done by using the information stored in an image called a normal map to calculate how each part of the material should be shaded. This shading gives the impression of a bumpy surface.

Normal mapping has the benefit of adding depth detail without using additional polygons. A normal mapped low-polygon 3D object will generally be rendered faster than a high-polygon 3D object with a standard material, while maintaining much of the visual quality of the high-polygon 3D object.

A useful utility for creating normal maps can be found at http://www.tartiflop.com/disp2norm/. This tool will create normal maps from a grayscale displacement map that can be applied to flat or spherical 3D objects.

The following image is an example of a normal map that can be applied to a sphere:

Materials, Lights and Shading Techniques with Away3D 3.6

This effect is shown in the following image, where you can see how the sphere appears to have a rough surface. From the angle in the screenshot, this roughness is especially apparent over the African continent.

Materials, Lights and Shading Techniques with Away3D 3.6

Environment mapping

Environment mapping is used to draw a 3D object's surroundings as a reflection. Reflecting the true surroundings of a 3D object on its surface is far too computationally expensive, but the effect can be approximated using a single texture, or a collection of textures that form a cube that appears to surround the 3D object.

Environment mapping is useful for creating the appearance of shiny 3D objects, like those with a polished or metallic surface. In the following image, the first two 3D objects have had a material applied that implements environment mapping (reflecting a marble texture). The torus on the left has applied an environment map over a base texture map, while the one in the middle has applied the environment map over a solid color. As a comparison the torus on the right has had a material applied to it that uses only texture mapping.

The effect that is produced by environment mapping can be difficult to appreciate in a static screenshot, but it is immediately apparent as the 3D object moves relative to the camera.

Materials, Lights and Shading Techniques with Away3D 3.6

Flat shading

Flat shading is used to illuminate each polygon against a light source. It is very quick to calculate, but since each triangle face is shaded as a whole it does tend to highlight the edges of a low-polygon 3D object.

The following sphere has been illuminated using flat shading. As you can see it is easy to discern each of the triangle faces that make up the sphere.

Phong shading

Phong shading will calculate the illumination of each pixel on the surface of a 3D object against a light source. This eliminates the sharp edges that can be produced by flat shading, but does so with a performance cost.

The following sphere has been illuminated using phong shading. Because each pixel is lit independently of the triangle faces, the end result is much smoother than the flat shading technique discussed previously.

Materials, Lights and Shading Techniques with Away3D 3.6

Summary

Away3D includes a large selection of materials. The various shading techniques that can be used by these materials were covered in this article. In the next article we will cover Applying Basic and Bitmap Materials with Away3D 3.6.


Further resources on this subject:


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
Select your format and quantity:

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


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