Interactive Music Video with Steye

By Adrien Jeanjean

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!

14 Responses to “Interactive Music Video with Steye”

  1. Kristian J. Says:

    Wow! When I clicked the link, I was certain that it would be very choppy on my humble netbook. But it was smooth as silk.

    Definetely gonna check out that encoder – thanks for sharing your expreience.

  2. Adrien Jeanjean Says:

    Thanks Kristian,

    Nice to hear it runs smooth for you. Hadn’t had the chance to test it on a notebook :)

  3. Taras Kuba Says:

    Well done! Goes very smooth.
    I think you are the first to use 360° video for music.

    Do you know camera model this video was shot on?

  4. Adrien Jeanjean Says:

    Thanks Taras. I don’t know which camera model was used. The shoot was done by Orientation Travel Productions.

  5. Interactive Music Video with Steye « barcinski-jeanjean Says:

    [...] 原文でつづきを読む [...]

  6. Özgür ALTAY Says:

    Great job again. It is really smooth with the Pappervision engine.

    BTW can you tell about the camera system used in here?

  7. victor Says:

    hi, love the video, can you tell how you did to wrap the videos in the cylinder?

  8. Adrien Jeanjean Says:

    Thanks Victor. It’s not a cylinder but a cube. And that’s all explained in the article. If you have any specific questions let me know.

  9. victor Says:

    I mean when you recorded the video and edited it you make a cylindrical panorama of the videos, how did you paste the videos together? and how did you solve the distorsion of the lens?

  10. Adrien Jeanjean Says:

    Ah, I see. Well, Steye did that stage of the editing so I couldn’t tell you exactly. I was supplied two cylindrical video’s and picked up from there. I’ve forwarded your question to him so we’ll have to wait for his comment on that. Will keep you posted.

  11. Adrien Jeanjean Says:

    Got word back from Steye: It’s just basically a collage of 14 different shots dispersed over 360 degrees. No fuss about lens distortion. Then he used Trapcode’s Horizon 3D After Effects plug-in for the linear version of the music video.

  12. victor Says:

    tnx thats,great, im gonna try and see what happens

  13. website video production Says:

    I have had this happen. good advice, wish I had read this a month ago.

  14. Jonas Van Gestel Says:

    Very nice!

    Maybe you should check out the technology Camargus is working on too. They’re some guys from the University of Hasselt – Belgium that have developed a camera and player that shoots and interactively plays in full 360° at once.

    You can check out some experiments and demos on their site: http://www.camargus.com/ or you can contact codefellas.com if you would like to use the technology in your own (commercial) project.

    I think your Flash solution runs way smoother in the site, but maybe you can come to a better / faster workflow if you combine your Flash skills with their recording technology?

    Cheers,

    Jonas
    http://www.theblackbox.org
    http://www.adobeusergroup.be

Leave a Reply