Upgrade your web design
3232Design is a Minneapolis web design studio offering affordable high-quality communication design specializing in websites and interactive media; also producing and integrating business systems, print marketing, online marketing and brand identity design for creative professionals and small to medium-sized businesses.

Call or email today for a free consultation.

HTML CSS3 3D Panorama viewer with accelerometer and compass in the stock

show all entries...

I built a panorama viewer a while back to figure out CSS3D transforms. It's pretty cool on a desktop, just click and drag to move it anywhere (assuming you've got a browser that supports CSS3). It's mind-blowing on an iPad, just wave it around to get a window on the virtual environment.

A while back I wanted to display my panoramic photos interactively using the gyro information from my iPad. There are only two places to get an HTML5-based viewer for panoramic photos, and both of those are for-pay closed-source. So I wrote my own, just to see how it was done.

If you visit my panoramic photo viewer, each time you reload the page it will display a different photo. Pretty cool, huh? It's built entirely in HTML5 and CSS3, using CSS3's 3D transforms to power the spinning. 

It's a fairly complicated process, but it all starts with a wide-angle lens. Stick that to a camera, and stick that onto a tripod with a specially-calibrated pano head to spin the lens around its nodal point. Take some photos, and don't forget to take one straight down at the ground when you're done.

Next, use Hugin (on the Mac) to stitch the photos together into a single panoramic image. Then export the image as separate cube faces, like you're on the inside of a square room and these images line the walls. This is exactly how QuickTime VR used to work.

Then the magic happens. My code takes those faces and spins them around the camera, using perspective to meld the faces together. There are still some bugs I need to work out, but it's still pretty cool to see a completely interactive 360 degree web experience. 

Comments

No comments yet.