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!

Ralph Hauwert has recently revealed some of his magic showing off the shading power of flash player 10. I was really wondering about the texture quality of the new 3d goodness so I’ve put a small skybox demo using Ralph’s branch of papervision for fp10 and this stunning shot by Roger Taylor this panoramic shoot we did of an landscape installation by Anne Walk.

I must admit I was totally stunned by the results, the quality is absolutely  amazing if you are used to 3d in fp9. The textures are silky smooth and it still runs better than dedicated panorama viewers for flash 9!

Some fullscreen(1440×900) results on my Macbook pro core duo 2.4 Ghz (santa rosa):

• standalone: 39-41 fps
• safari: 44-45 fps
• firefox: 24-25fps

These results are curieus to say the least. First of all how can flash player in safari run faster than standalone? And why is firefox running at half the speed of safari?

And what does it mean for future websites made especially for flash player 10. Well they are going to look really really good. With the help of all the other goodies (pixelbender, better font renderer, color management, h.264 support ) coming with fp10 we are going to see some really high quality productions in 2009!

Check out this fp10 panorama! Hit space for stats, use arrow keys to zoom in and out. Feel free to share your (fullscreen)results. Keep in mind that for fps counter to be meaningful the panorama must be moving.

On the penetration of flash player 10 side. There are no official numbers for adobe yet but our website ( +- 50000 visitors a month) it’s right now at 45% and growing really fast, 3-5% a week. So if you are starting an ambitious project today, consider targeting flash 10 because you don’t want your project to feel outdated by the time you launch

Source is not available for download because it’s all work in progress.