Had a chance to play with Mr.Doob‘s excellent JavaScript 3D library three.js today and came up with this. Resize your browser down and Refresh to increase performance. Grab the code via ‘View Source…’.
I’m getting ~54 FPS on Chrome, ~43 FPS on Safari and ~30 FPS on FireFox. The iPad gives a sad 7 FPS. To run on IE you will need the Google Chrome Frame Plugin.
There’s definitely a lot of potential in this library.
What’s better than a YouTube video? Sixteen YouTube videos – in 3D! 
This is a for-fun, proof-of-concept demo loading in multiple instances of the new YouTube chromeless player and displaying them with Flash 10′s native 3D . Warning – this demo will probably run at a crawl and may crash your browser.
There is a known issue with SWFAddress 2.2: When navigating directly to a deep link, the preloader does not display or jumps straight to 100%. When using the ‘#’ symbol in the URL, the browser loads the main SWF twice which cause the preloader to break.
The fix is to use a mini pre-preloader as supplied in the SWFAddress samples (‘samples/cs3/c.fla’). The mini-loader is loaded twice but since it’s so small it doesn’t matter. I’m adding this information here since the issue is pretty buried in the SWFAddress forum.
[UPDATE] OK, another SWFAddress gotcha by virtue of obscurity: If your back button is not working, check you have specified the ‘id’ attribute in the swfobject.embedSWF() call. The ‘id’ attribute can be any string.
swfobject.embedSWF('c.swf?path=main.swf', 'flashContent', '100%', '100%', '9.0.45', null, {}, {}, {id: 'myId'});
This is an oldie but goodie. Ben Dawkins‘ 2004 video for ‘RPMDAP’ by Bogdan Raczynski downloads break-dancing pixel guys into a typical crappy UK student flat. Also succeeds in making batch files sound cool. How long before someone does something like this in papervision?
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.
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:
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
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.
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.
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.
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.
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.
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.
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.
If you follow this blog you’ll know I’ve been obsessed with 3D ribbons for a while now. I ported my AS ribbon code to Processing and I’m very happy with how it turned out. It’s refreshing to not have to worry about frame rates, since processing’s 3D performance is so good
Here’s the processing sketch and source code. You will need a fast machine with OpenGL support to run the sketch – basically don’t blame me if it crashes your browser 
.
[UPDATE - it seems OpenGL sketches don't like to run off the web. I uploaded a P3D version here that should be more compatible. Since it's not using additive blending you get a strange pink color instead of the nice glowy white...]
Untitled from felixturner on Vimeo.
It would be nice to get some realtime glow/blur in here to smooth things out a bit. I think this library may do the trick but it could take me a while to figure it out.
