Materials, Lights and Shading Techniques with Away3D 3.6

6 min read


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.


Please enter your comment!
Please enter your name here