Papervision3D

Mook, the team behind the Nitro Group website, brings us a new interactive experience for Foot Locker.

Robert Sargent tells us all about it:

We recently completed development on an immersive Papervision3D experience for Foot Locker. The website is part of an integrated campaign for the launch of Nike’s Tuned 10 sneaker. The campaign was based around the concept of evolution and its visual aspects were informed by the “trixels” which form the sneaker.

Much of what you now see on the website came about after some R&D performed by Mook’s Flash Development team in July. Initially, we wrote a framework which allowed us to triangulate any 3D object and turn its constituents into objects in their own right. We found we were able to do this without too much trouble, even on complex Collada objects and objects with animated materials.

For the website itself, the custom object and material classes were refined to allow us to manipulate the triangles at a fairly low level, animating them to form different shapes, change colour etc. We began by using Tweener but settled on TweenMax after noticing a significant performance improvement. We also began working on a way to transition between different bitmap materials until we ran out of time.

The Papervision sits on our location-based architectural framework which we developed as an extension of PureMVC earlier in the year. The framework incorporates SWFAddress and will soon enable us to rapidly deploy accessible and searchable content underneath Flash content. Unfortunately, we had to disable SWFAddress shortly before the website went live. When we tested it on slower machines, we noticed that a change in the browser address bar causes a noticeable lag in the Flash rendering engine, making the website appear to blink.

The scope of the project was a moving target from start to finish, with the requirements changing repeatedly. We ended up doing quite a lot more development than is apparent on the site. For example, the camera controller has a number of applications which were not used. We even gave it the ability to react to explosions inside the world with a Battlestar-style camera shake.

The biggest hurdles we faced were related to performance. Our original idea was to morph between the sneaker in its entirety. Eventually, we had to compromise for a mixture of 2D and 3D effects. There’s a number of other things we’d like to improve upon, particularly the “static” feel between transitions. We feel the website still looks too much like the experiments did two months ago!

Overall, we’ve been highly impressed with the PV3D engine. The initial R&D incorporated the Great White alpha and we continued to use it during the site build. We were updating on a daily basis and fixing anything that broke which, I’m pleased to say, was very little indeed. We stopped at about revision 638, just before the camera classes were refactored and unified. This might sound like madness but if life in beta is good enough for Google it’s probably good enough for the rest us.

Great job, Rob, Tom, Andy and Miguel!