It seems like every other site on FWA is using 3D Flash these days. 3D effects are great for adding an element of surprise to a website, since it’s still a relatively new technique. I’ve been building 3D engines since the Director 5 days, so it’s great to see 3D finally hitting the mainstream.

In this post I will describe some of the technical constraints to be aware of when building 3D Flash sites, then I will give examples of recent sites that are doing 3D right.

I’m a big believer in designing within technical constraints. Working with the technology rather than fighting it. Some of the most beautiful design is done in static black and white. Embracing constraints can actually inspire designers and lead to innovative solutions.

3D FLASH CONSTRAINTS

Responsiveness

With 3D sites its important to keep the frame rate up (at least 20 fps). Otherwise your animations are going to be jittery and responsiveness is going to suffer. The simplest way to increase frame rate is to make the active 3D area smaller (in pixel size). Other options to increase performance are:

• Reduce the number of 3D objects
• Use 3D panels with bitmap textures over 3D models
• Use 2D sprites over 3D objects
• Use flat color textures over bitmap textures
• Use non-precise bitmap textures over precise bitmap textures

Interaction

If you go to the trouble of using a 3D engine you need to make it interactive. Playing canned animations on button click does not provide any advantage over a pre-rendered video animation that may be cheaper to produce and may look better (see an example here). One way to provide a nice immersive 3D experience is to move the camera slightly on mouse move (sometimes called ‘mouselook’). This approximates how the world looks when we move our head around. It’s also important to keep motion and camera movement simple. Too much flying around can cause confusion and even nausea 🙂

Simplicity

Complex, realistic 3D environments are beyond the ability of the current generation of Flash 3D engines. It is often better to add a few simple 3D elements to an otherwise 2D site. For example the 3D page flip (click the ‘Flash94 CMS’ button here for an example ). A great source of inspiration for this type of design is TV motion design. TV ads often use subtle 3D animations on otherwise flat layouts.

Load Time

The 3D engine itself is typically ~100k. Then you have the 3D models and textures which can be large. To avoid file bloat, use simple or programatically generated shapes and simple textures. One trick is to display some simple 3D geometry after the engine has loaded and before the rest of the models and textures are loaded.

Development Time

Building a 3D site typically takes at least twice as long as building the equivalent 2D site, depending on the complexity of the 3D elements. When building a 3D Flash site it’s important to iterate early and often. Often 3D sites can be unusable due to bad camera placement or unintuitive controls. It’s critical to get an early ‘hands on’ with the prototype in order to refine the interaction.

EXAMPLE 3D FLASH SITES THAT WORK

Eco Zoo

This is probably the slickest 3D flash work on the web (check out the pop-up books). Incredible attention to detail including depth-of-field blurring. Uses a fixed-size 3D area and Paper Mario style planes over true 3D models. One gripe is that since the camera movement happens on mouse drag you don’t get the 3D feeling until you start dragging around. Using a custom engine built by Roxik who is doing some incredible 3D work out of Japan.

Fifa Street 3

Combines simple 3D planes with pre-rendered 2D sprites. Uses a 2D overlay menu. Fixed size, centered 3D area. Subtle mouselook gives 3D feel without sacrificing usability. Built by B-Reel using Away3D.

Lumina Live

Simple but effective. Features a number of randomly positioned planes that form the pixels on a plane. This is reminiscent of one of the first papervision demos. By Kilo Studio.

Karim CZ

Uses simple 3D transitions and flat textured planes. A nice twist on the classic portfolio site. By Phillipe Roy, using Papervision.

If you know any other examples of great usable 3D Flash sites please share in the comments.