Mission Control II: Video Display System

Description

Created with Loren Judah, this second entry in the Mission Control series takes things even further with streaming video in a physical 3D space.

Concept

After completing the first Mission Control, we were highly motivated to push the boundaries of web technologies even further, this time creating a 3D environment for browsing a catalog of video work in a more immersive way than a traditional web portfolio. We especially wanted to experiment with removing the normal layer of flat UI elements in favor of a more pure and tactile set of interactions.

Technology

The backend of MC II is driven by a custom PHP script that pulls data from the portfolio website in JSON and then processes each project. The script grabs additional video data from the Vimeo Developer API and generates the dynamic background textures with a combination of GD and ImageMagick calls. Theora versions of each video are created as needed with ffmpeg2theora. Key front-end technologies include HTML5 video, CSS3 effects and, most notably, WebGL, which allows for hardware-accelerated 3D graphics directly within a web browser.

Thanks

Many thanks to Ricardo Cabello (Mr.doob) for his wonderful 3D Javascript engine, Three.js, and to AlteredQualia for his helpful feedback on performance tuning.

Demonstration