The web developer's guide to 3D site building

Tech bringing a new sense of depth to website design


The ability of the web to deliver 3D content is nothing new: people have been finding ways to create 3D within Flash since ActionScript 1.

But in the last year there's been a sea-change in terms of the richness and proliferation of 3D content on the web. 3D is here to stay, and it's time that every web designer and developer sat up and took note. So what's been happening?

The use of Flash for the delivery of visually rich and immersive content only really opened up with the introduction of AS3 and Flash Player 9. AS3 is a much more robust and powerful programming language than its predecessor and the AVM2 (ActionScript Virtual Machine 2) with Flash Player 9 introduced many advantages.

While there were 3D libraries for AS2, it was with AS3 that open source 3D libraries including Papervision3D and Away3D emerged as a way to bring 3D to Flash with relative ease. Sandy has also developed an AS3 Library plus there's Alternativa, which is free for non-commercial use.

Flash Player 10

With every version release of the Flash Player, a wealth of new features and possibilities is introduced and Flash Player 10 is no exception. Penetration is sitting at around 75 per cent for most markets, so it shouldn't be long before publishing for Flash Player 10 will become the norm. Here are a few of the exciting new features it offers to 3D developers.

Native 3D: Until now, 3D hasn't been a native feature of Flash. And while it will in no way replace the open source 3D libraries, it will offer a superior solution in cases where simple 3D is required. There are no cameras, effects, depth sorting, complex objects or 3D model support.

However, because it's native it's very fast and lightweight. For designers who just want simple interactive 3D elements, it offers a whole new range of possibilities. Any display object can now be rotated and animated along the x, y or z axis in 3D space via the Flash IDE or ActionScript.

Pixel Bender: The Pixel Bender toolkit is available free from Adobe. It provides a tool to create, compile and export pixel shaders for use in Flash Player 10 and other CS4 products. Taking various forms of input, the pixel shader is run on every pixel of the input source with the simple task of outputting the value of the pixel after calculations have been performed.


PIXEL BENDER: The Pixel Bender toolkit is used to create shaders that can be used within Flash to create filters and effects

It runs at a lower level than ActionScript and runs calculations in parallel, so it has the ability to perform complex tasks at lightning speed. It's primarily intended for filters and effects and can be animated, so expect to see a fast uptake for its use in transition effects and the like. Developers can share their filters at the Pixel Bender exchange.

There's also the ability to pass other types of data such as bitmapData, vectors and byteArrays to the shader. This means that experienced users will be able to harness its speed for doing complex calculations for applications like advanced physics simulations, sound processing and number crunching in 3D engines.

Alchemy: Alchemy enables you to compile existing C and C++ code libraries to AS3 as a SWF or SWC to run within FP10 or AIR 1.5. The compiled libraries can then be accessed directly using AS3. This means developers can tap into thousands of open source C and C++ libraries and compile them to be used in their web applications to expand the possibilities of what's technically possible.

The compiled library will be ideal for tasks that require intensive calculations. Adobe Labs suggest uses such as audio/video transcoding, data manipulation, XML parsing, cryptographic functions or physics simulation. They suggest performance can be considerably faster than trying to achieve the same result using AS3 alone.

Drawing API: With every recent release of Flash there have been modest updates to the drawing API but with Flash 10, the changes are anything but modest. For starters, there's a much faster and more powerful way to draw lines using the new drawPath method and the introduction of winding.

Triangle drawing methods have been added, primarily aimed at 3D effects but useful for a lot more besides. Significant improvements to bitmap fills when combined with the new triangle provide a powerful means for distorting bitmaps.

And the list goes on, including a set of new graphics data classes that can act as containers for drawing information and can be passed around, used with any target or reused.

Contemplating what the introduction of all these features means makes you think. On the one hand, there's excitement at the huge increase in potential, all the new toys to play with and the fact that pretty much any visuals that can be conceived can probably now be realised within ActionScript. Yet at the same time there is trepidation in the spiralling complexity of it all.

The sites of the future that define the next era in Flash will demand a superior level of technical understanding to even be conceived. The role of the purely graphical Flash designer may become limited while designers with technical ability begin to shine.