360 Virtual HTML5 panorama

Concept

This is a lab project in creating technology for a mobile friendly, immersive 360 experience that is both touch and mouse controlled. I wanted to support as many devices as possible, and the experience runs very smoothly on iOS devices, Android 3.0+, and all desktop browsers. This type of technology can be used with panoramic photos, but this example is actually virtual - the room is built and rendered in 3D. Swipe to spin, pinch/mousewheel to zoom in/out.

360 panorama
Check it out

Design Process

The panorama can be either a real photograph, typically shot with 8mm panoramic lenses - or as in this case, a virtual 3D scene. I modeled this 3D scene in 3DS Max and rendered it with the VRay render engine. VRay is very well suited to photorealistic interior renders - it's Global Illumination engine is blazing fast.

Technology

The panorama is essentially a 6 faced cube box rotating around the viewer. The HTML5 version of the panorama is using CSS3 3D transforms to achieve this - they are GPU accelerated on iOS devices and desktop, so they are buttery smooth. There is also a Flash fallback for any browsers that don't support CSS3 3D transforms (IE 9 and below).