Working at Visual Jazz does expose me to some interesting scenarios/ I mean, playing with dolls for a couple of weeks isn’t my usual idea of a good time, but this funky little microsite had some pretty cool features that had my brain ticking over the whole time.
Some interesting 3D modelling and animation coupled with my first attempt augmented reality in flash made for some puzzling times. Drench all that in a healthy dose of girly-ness and you get www.livinmyworld.com.au.
Read on to find out more some of the more nerdy details š
The idea behind the Liv doll site was to invite visitors to try out some of the different clothing accessories on a 3D version of a doll. Once they have found a look that they are happy with they can use a webcam and augmented reality to take a photo of themselves posing with the doll. This photo can then be saved, printed or sent on to their friends.
My job as the ActionScripter was to take all the designs, models and animations and make it all work. Easy peasy… sort of.
The base of the site was pretty simple. It followed a basic page structure using on lots of flat colours, shading and bouncy transitions to help bring the site to life. Overall it was a very ‘happy’ site and I had a lot of fun putting it together.
The tricky stuff started with the 3D. Papervison was my weapon of choice. Mostly because I had used it before, but also because we hit some early snags with Away3D and I didn’t have time to try and resolve them.
Because we were allowing the user to change the hair, top and pants on the 3D model, each part had to be imported separately. The 3D guy had loads of fun generating the different clothes, animating them, and then splitting them up for me.
These split up files meant that I needed to create a way to manage the loading of models and the related textures. That was easy enough, but part way through the process we noticed that some of the model combinations resulted in clipping. This didn’t look very good and actually had an impact on the performance.
I discovered that if I applied an alpha channel to the offending model’s texture, the clipping went away and the performance improved (Sounds strange right? Adding transparency made it run better? Go figure). With this in mind I created a data management object which would load the required models and textures, then figure out what masking was required to make it all look good.
Sounds easy when I write it like that, but it actually got quite complex. I basically had to write a matrix that would look at what clothes you were matching up, load the required textures, then merge the alpha channel with the textures before finally applying it to the model.
Next big thing was the animation of the models. Not that playing the animation was hard, but keeping all the models in sync as they were swapped around was. The animation controls in PaperVision weren’t the greatest for what I needed to do so I ended up using the DAE MC2 classes. They allowed me to treat the animations a bit more like a MovieClip, so it was a lot easier to keep everything in sync.
The final big hurdle was the Augmented Reality (AR). For this I used the awesome FLAR ToolKit for this. Unfortunately, a lot of the docs were in Japanese, so I ended up hunting down a tutorial/example over at Mikko Haapoja’s Blog. This got me up and running in no time.
Out of the box it didn’t perform as well as I would have liked, so I spent a bit of time tweaking the code to make it run better. Nothing too spectacular, just simple things like shrinking the size of the webcam image to reduce the number of calculations required and only calculating ‘every other’ frame.
Another little tweak I did was to apply a basic ‘ease’ to the model position. This helped smooth out the little motions that the camera picked up and helped make AR feel much more responsive.
That’s about it.
Overall I am extremely happy with the site. The designers and 3D modellers I work with at Visual Jazz did an awesome job of building the assets and despite the technical difficulties I mentioned above, it all came together well in the end.
If you haven’t checked it out already, go have a look at it here. You can also read a bit about it on the VJ Site.