As soon as I saw an early version of the music video shot in Ottowa for the single off his new “In a Cabin With” album, I thought; this should be interactive. So now three months later; here it is.

Read on for some behind-the-scenes technical details.

I started by making a prototype to see if it was possible to combine high-res h264 video video with 3D rendering. And thanks to Flash Player 10 it was! The most efficient way to render 360 panorama’s is to use cubic projection, as this method requires way less geometry (4 triangles at most at any one time) then cylindrical or spherical projection. In this case saving a lot of performance needed for the high-res h264 decoding. For the 3D rendering I used an early version of Papervision3D 3.0 for Flash Player 10.

Once I had the panorama video working, I thought that re-creating the YouTube player seemed like the best interface for this piece. Once the interface was done came the time to create the final video edit. I re-edited the two cylindrical panorama’s created by Steye, one of ouside and one of inside, into one cylindrical panorama which transitions between ouside and inside. The frames of that final cylindrical render were converted to cubic faces using the batch processor of CubicConverter. The resulting cubic faces were then comped back into one video render with the audio track added.

Encoding the final video files was the final hurdle to overcome as there were two aspects that seemed to be hard to unite into an acceptable end result, both quality-wise and performance-wise. The first was to stay within the bitrates currently concidered standard. And what better standard to take for online video delivery then YouTube. Normal YouTube video’s are streamed at around 700kbps, and their HD video at around 2000kbps. So those were my targets for the h264 encodings. However YouTube delivers acceptable quality within these bitrates with material of much lower resolution, then this video required (1024×728 for the low quality version and 1440×1024 for the HQ version). That’s because this video contains the video for all four faces (front, back, left and right).

So it was clear that I had to use the best h264 encoder out there to encode these files. So, off I went testing different h264 encoders from Apple, Sorenson, MainConcept, mencoder and x264, and different applications, each allowing access to different encoder settings. I tried Adobe Media Encoder, Quicktime, Sorenson Squeeze, Episode, Handbrake and ffmpeg. And I’m very glad, and also not surprised, to say that I achieved the best results by far with the open-source alternatives; ffmpeg using the Doom9′s x264 encoder. Ffmpeg allows you to use b-frames and CABAC which are the two features of h264 that really give a significant quality improvement. My findings were that the x264 encoder also preserved the color and contrast information best from all encoders (especially MainConcept in Squeeze resluted in a very high contrast and unacceptably dark video in my case), while surpisingly also requiring the least CPU upon decoding in the Flash Player. So, like I said; x264 rules them all at the moment. And if you need more tweaking of the encoder, x264′s command-line interface gives you access to all the parameters that really make h264 shine.

I hope you enjoy the end result. Happy Holidays!

I’m proud to announce that our first game in collaboration with Hanazuki has just been launched. The game plays an important role in an installation that Hanazuki did for the Cinekid festival.

Working with the internet legend Niko Stumpo has been a delight, so we definitely are not going to stop at one game, we are already cooking up the next one

Click here to play the Fattybumbum game.

This demo was made shortly after the initial release of Jiglib. It was a study of how far you can push realism in the sence of rendering and animation. Here CompositeMaterial is used with a BitmapMaterial and a GouraudMaterial. This is much faster then using a ShadedMaterial. All you need to do is modify the GouraudMaterial to use a transparent light map. Andy Zupko’s ShadowCaster is used for casting the die shadows. Jiglib is used for the 3D physics, also slightly modified to facilitate fixed timestep. Unfortunatelly the end result is still far from the desired 60fps. Hit spacebar too see the stats, check it out.

UPDATE: Something troubled me when checking the performance in the browser with Flash Player 10 compared to Flash Player 9. On my machine FP9 ran at approx 40fps but FP10 hardly reached 25fps. Changing the wmode from “direct” to “normal” fixed the performance issue in FP10. Especailly in Firefox the performance difference is significant. Still on my machine FP9 seems to perform slightly better then FP10. Mental note: next time take more care in setting the proper wmode.

We are proud to announce the launch of the portfolio website we created for the London-based design and art direction studio Wallzo. No flashy 3D stuff this time, but a clean, sober browsing experience. Have a look.

While playing with FlickrAPI, we came up with a cool way of exploring the Flickr interestingness. It quickly became an addiction. You can view it here, we hope you will enjoy it as much as we do.