Call or email today for a free consultation.
HTML CSS3 3D Panorama viewer with accelerometer and compass in the stock
- Mobile-responsive tables March 19, 2014 at 2:39 pm
- Contenteditable text editor in a web browser October 22, 2013 at 5:55 pm
- HTML CSS3 3D Panorama viewer with accelerometer and compass in the stock October 22, 2013 at 12:35 pm
- Circular rotation in Javascript October 22, 2013 at 10:13 am
- How to stroke text in Illustrator: A tutorial July 21, 2013 at 11:20 pm
- How I saved a client $60,000 (or, Where To Tap) July 21, 2013 at 9:21 pm
- How much does a website cost? July 21, 2013 at 8:21 pm
- Use htaccess to rewrite URLs with query strings July 21, 2013 at 7:22 pm
- Ian Tregillis web site July 21, 2013 at 3:04 pm
- Web design as an art form July 21, 2013 at 2:59 pm
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