When I first saw the designs for it I remember saying to myself ‘Gosh darn! How is one supposed to go about doing that??’ (I may have used some more colourful language but you get the jist) I had never done 3D before, and that was just the beginning. There was depth of field, keyed out video, and a pile of information to be displayed.

Luckily, it all came together in the end – you can read about how in this post.

The main idea behind the site was for a big 3D column with 3 spiralling streams of video screens wrapped around it. The user could spin and pan the column around to see the different screens. When they click on one, it would come to the foreground where a video would then play.

The first place I started was to learn about PaperVision 3D. Luckily for me, there is a huge number of posts and tutorials to get me started. Yay for the internet!

Once I had the customary 3D primitives floating around on screen, I started looking into the problem of faking depth of field. The idea I had was to create a series of blurred textures for each object, then swap them out based on their distance from the camera. If you want a bit more detail on this, check out an post I wrote on it here.

There were of course some other tricky items involved – because the screens have some depth to them, simply blurring the textures did not look right. I had to make it so that when the screens got about halfway back, they were swapped over with a basic plane.

The next 3D problem was the curved lines. We could have just had some curved lines modelled up in max, but because we wanted the lines to blur, they had to be done in a similar way to the other blurry objects. I ended up coming up with a bit of code that would generate the curved lines from a series of small straight lines, basically aligning them from end to end. This allowed me to blur individual segments, which wasn’t a perfect result, but worked pretty damn well.

I can’t even remember the exact method – I just know that it included a fair bit of trigonometry and experimentation.

The last 3D part was getting the videos to line up with the 3D screens when they were selected. It took a bit of playing around, but after a bit of googling and tweaking some figures I finally got it all lining up nicely. There is bit of a formula to getting 3D graphics to line up, but once you know it, it just works.

Oh, as for the big green curved shapes, they were pretty simple. They were simplymodelled up by the 3D guys and loaded into the scene via a Collada (DAE) file. Apart from some minor texture path issues, they were probably the easiest parts of the site.

The videos themselves were pretty cool. Each of the students represented on a screen was filmed on a keyed background, walking out from behind the panel. They would then introduce themselves before returning back to behind the panel. It was a pretty simple trick, but proved to be quite effective. There was a little bit of trickery involved getting the walking in and out to look right, but we got there in the end.

After all of that, the only remaining content was a series of different informational pages. These were pretty straightforward and were achieved by using a template system that was run off of XML based content. This allowed us to easily add and edit content to the site without the need for an entire rebuild.

Overall it was a pretty cool project, so check it out if you get the chance – Sciences at Melbourne. You can also read about it on the Visual Jazz site.

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.