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.
Latest Tweets
[…] Read more addthis.com « More cool examples of PV3D […]
[…] “Building 3D Flash sites that work” […]
[…] Papervision 3D. Tags: 3D, design, Papervision 3D, web sites trackback Felix Turner has an interersting article on building 3D sites that work, mostly from the standpoint of technical constraints. There are […]
Good stuff! – and nice examples.
I think 3D stuff is going to expload in popularity with Flash Player 10 – hopefully that (and articles like this) will make people start thinking more about how they can make 3D functional, not just pretty.
[…] http://www.airtightinteractive.com/news/?p=166 October 10, 2008 | In Flash | No Comments […]
@James, just the addition of having a Z index is going to completely revolutionize the way we’ve been doing 3d. Having a z property just like x/y, it’s going to allow everyone to add 3d techniques to their site without having to figure out how to implement an engine like papervision. That’s good and bad but that’s always the case as it is now. There’s the good and there’s the bad. 🙂
I’ll brag on http://therepublik.net — I feel like we did a pretty good job balancing responsiveness with the client’s design vision. Curious what others think — after staring at something so long, it’s easy to loose sight of whether it’s actually any good.
Hey there, I have to agree with most of what you say, but sometimes breaking out of those constraints is what makes something new, and it’s exactly what great websites do 😉
Btw, if you want to check a good collection of 3d websites out there just check http://dailypv3d.wordpress.com, i try my best to keep a list 😉
[…] thefwa.com??????Flash???????????thefwa.com???????????????3D??????????????????3D?????????????Cool???????????????3D???Flash????????????? http://www.airtightinteractive.com/news/?p=166 […]
[…] http://www.airtightinteractive.com/news/?p=166 […]
Cool work, but in some countries the performance is very poor. Actually in Uruguay a lot of people is using an old PIII… . I know the power of this, of course. Very, very impressive.
[…] Flash – Building 3D Flash Sites that Work […]
Landed on this page by accident.
Just wanted to point out that the 3D flip on our site mentioned above is done using a very slick, hot and efficient technology called ‘tweening’… Keep thing simple: right 🙂
cheers + nice article.
Pascal – g94
Another great example of mixed 3d/2d scripting and intuitive interactivity here:
http://www.reigoplaylist.com/
And lots of FREE MUSIC to download too.
[…] > Building 3D Flash Sites that Work | Airtight News […]
[…] En substance voici ce qu’il faut retenir de Building 3D Flash Sites that Work: […]
Nice post! No love for meta4orce? 😉
http://blog.iainlobb.com/2008/08/meta4orce-creating-3d-flash-games-with.html
Great article! Agree on so many levels. We do tons of site sin 3D and really struggle with our clients in making them aware that the user interface and overall site experience MUST be able to live in a 3D environment and not just another square peg shoved in a round hole.
We recently launched this new site for the show The Starter Wife – http://www.tswlife.com/
It is a social networking, gaming, episodic and multi-user 3D environment that takes advantage of all the features of Papervision.
Other sites that simply jam designs into 3D just for the hell of it are boring and lifeless, 3D is an art not a template.
@Iain: I love the meta4orce site – even the 3D menus are really nice. Great work.
[…] Read entire article…Click here! […]
Check the bands papervision 3d site http://www.favelatheband.com
la connaissance n’a pas de prix
[…] this article, Airtight Interactive will describe some of the technical constraints to be aware of when building 3D Flash sites, then […]
Call me narrow-minded, but Lumina Live seems like an example of terrible web design to me; It does not clearly explain its purpose, nor does it make it easy to access the content as a first time visitor. It seems like a cool website engine waiting to have some actual stuff in it.
hai……….
Each engine has its own strengths. We recently did a microsite where we wanted to have really good character animation. After looking at several engines, we settled in on Away3D. We are really impressed with one can do with the engine today and are looking forward to where it will go.
In particular, we are interested to show how bones animation will evolve. In our site, we did all of the animation in 3d Studio Max and then imported the md2 data. For every gesture we had to important an entire animation, whereas it would have made the data much smaller if there had been a simple way to only bring in the bones information rather than everything.
Check it out for yourselves. We are quite proud of the quality of the animation. http://www.tetrapak-umwelt.de.
If you don’t speak German I’ll give you a tip — when the rabbit comes onto the stage you can select a question from “Frag den Hasen”. Here you will be given a list of questions that you can chose from. We used a really cool lip synching tool to get him to speak quite a lot of dialog.
I LOVED TSWLife – Mollywood! It was genius!! It is the coolest most interactive game I have ever seen on the net for fashion, communication and fun. I miss it. If anyone knows where another game like that is – please let me know because I’ve not been able to find one. And unfortunately, the Mollywood site (tswlife) was shut down. As per this info, if flash is what made that site so interactive and great, there should DEFINITELY be more like it. It was definitely a one of a kind! I so miss that game!! Thanks.
I want to learn how to do that, when I see those masterpieces, and I compare them with the websites I build, my self-esteem goes straight to zero
cool examples Sir I wanna learn 3D flash could u help me please
best regards Behzad