Spherical Panorama Virtual Tour Viewer for iPhone
Hint hint: Hey Google Maps Team! Why don’t you guys use this for implemnting Google Street View in the iPhone Safari browser? :-P
I had one of those weekends when you need to try and do something new. So I finally went ahead and created what I wanted for a long time. Virtual Tour Viewer for iPhone. Version 0.1
Index page of the Virtual Tour
Spherical panorama view on iPhone
You can see it live by pointing your iPhone to this url:
Virtual Tour Viewer for iPhone:
http://bit.ly/6HEqD
Update Feb 1, 2010: Since I no longer update and improve the code I modified the application that now it uses a newer iphone panorama viewer from the 360cities.net website.
Please let me know what you think of it using comments below this article or by emailing me at jan dot vrsinsky at gmail d o t c om.
The app probably works only on iPhone and it has been tested only with my iPhone 3G. Any feedback and bug reports are appreciated.
I also want to thank waine a. lee and to Ryan Scherf, the author of jSwipe, for being an inspiration for me to write this (although they didn’t know ;-)).
Read on: Goals, Roadmap, Technologies are below.
Goals:
I created this project just for fun, however the real-world use cases are being able to present a virtual tour of a restaurant, hotel or any other kind of real estate using iPhone. Virtual Tour Viewer for iPhone can work as a standalone application (the tour is only on iPhone) or as a counterpart of it’s destop rich-media variant to target iPhone audience when they are travelling for example.
Roadmap:
I’d like to create a jQuery plugin from this so others can use it easily. Then add a lot of features needed for in a mature virtual tour product. Such as loading the tour data from a web service, adding hotspots for moving from one panorama to another, external links, image pop-ups, etc. We’ll see.
Technologies used:
jQuery, webkit 3d css transformations, PtGui, Google Maps Static API, iPhone ;-)
Panoramic images used in the example:
All images are © Copyright 2009 Jan Vrsinsky. Please let me know if you want to use them – jan dot vrsinsky at gmail d o t c om.
howtoshoot360.com
32 comments
Sue
July 20, 2009Very cool, Jan,
I don’t have an iphone or I would try it – I’m impressed – I hope Google maps team is impressed too.
Jan
July 20, 2009Thanks. I’m sure they’ve seen something like this. I just don’t know why they haven’t done it yet ;-)
Vincent Ogloblinsky
August 17, 2009Hi Jan,
Very great work. I have a good web app with your code running, drop me a mail in order to give you the link
Regards
Magnus
September 6, 2009Hi, huge nice service, could it be used if i have Eractangular projections images to show of my images?
great work
Jan Vrsinsky
September 6, 2009Hi Magnus, you first need to convert them into 6 cube faces (using e.g. PtGui).
Mao_@rt
September 14, 2009Hi Jan
Very impress by your work!
I do a lot of panoramic photography and i was looking for an app to run from my iphone as well as from my website…
How could i use it?
Cheers mate and keep up the good work ^_^
Jan Vrsinsky
September 21, 2009Hi Mao, just got back from my holiday. I’ll drop you and email so you can ask specific questions. However, in general, you can use the code by visiting the bit.ly link in the article and viewing source code… just make sure you keep all the names and the licence itself in your modifications. And if you make any improvements please share a link so everybody can look at it, thanks!
Lamarr
October 28, 2009So how can I use this app? do you have a script code so I can add my own content?
Thanks
Richard
November 27, 2009Great job.
I think it would be more better if offline user can enjoy the VR too.
I tried to put all the html and javascript into a view-based iphone native app. However, the script stop loading pictures in the VR scene. Since I’m just a beginner of iphone programming, I’m not sure what causing the error. any idea? the xcode project file can be found here:
http://rapidshare.com/files/312939964/VRZ3.zip.html
James
December 1, 2009I had a hi-res tour that I was using in CubeWorld that was hi-res – and it showed; however when I use this I found that I had to resize the original images to 283 x 283 and doing so makes the resolution much blurrier. Any advice? Great work, this is amazing!
Jan Vrsinsky
December 8, 2009Hi, thanks for all interesting comments and questions. I have no time for answering. Sorry. This was from the beginning meant as an online solution, not an iphone app. Of course it could be converted to an app with some effort. Hopefully I will have time soon to create a new version. In the meantime please send your contributions, it’s interesting to look at them!
Richard: Yes, offline version would rock. Take a look at the PangeaVR free app for iphone, too.
James: I would need to dive into the code again, I can’t now, sorry.
Lamarr: Check the license in the code. Anybody can use it but you have to know how. I don’t provide any support, at least not now, sorry.
Check back early 2010. I hope there’s going to be better news! In the meantime, enjoy the panoramas at http://www.360cities.net, where I work now.
Jan
January 28, 2010Hi, somebody asked me if I can modify the iphone viewer so it can work with horizontal (cylindrical) panoramas. Anybody willing to help? It’s trivial. You just remove the up and down rotation in the code. I don’t have time for that now, unfortunately. Also, if you are using the iphone viewer on your site, let me know how you like it. Thanks
Tony
January 30, 2010HI Jan,
I came across your work via a posting on Google groups “Flashpanoramas” and I have to say I really like what you have built.
I had a bit of a play today with some of my recent panos I shot in Vietnam and they run extremely well in Safari on the iphone. Just some little issues with zoom when you rotate from Portrait to Landscape but no biggy.
Here’s a couple of links:
iphone url: http://tinyurl.com/yglckvc (iphone only)
web url: http://tinyurl.com/yzxoq66 (full FPP version)
Keep up the good work, I’ll follow on Twitter and hope to see what you are up to next.
regards,
Tony
Jan
January 30, 2010Hi Tony. Thanks for the links! Yes, there are some bugs. Some of them are caused by incompatibilities between iphones (2g, 3g and 3gs behave slightly different) which I didn’t deal with and some of them are just regular bugs. I don’t have time to update the code, unfortunately, sorry :)
Tony
January 30, 2010Hey Jan, don’t get me wrong I’m loving be able to write a bit of page code and have my panos on iphone :-) looking so good.
Jan
January 30, 2010For everybody who wants to view panoramas on iphone:
360cities.net, an immersive panoramic photography hosting website, now supports iphone. There’s no special URL, just load any image in your iPhone to see it. It’s still an early version with many bugs, so it’s not announced publicly yet, but it will definitely be improved and updated. Note: This new version on 360cities.net is not my work anymore, 360cities gets the credit and will continue to develop it.
If you want to see YOUR panoramas on iphone, just upload them to 360cities.net and then view the image on your iphone.
(Note: this could be a biased comment, I work for 360cities)
Mike
January 30, 2010Hey Jan,
I love the work, but I’m a little confused about 1 thing. I’m not a photographer so I’m a real newbie when it comes to taking panorama images.
I looked at your code and saw that the js is calling 6 images. I’m assuming you took 6 images all taking a 90 degree turn 1 after the other. But how do you take a floor shot without having the tripod of the camera in the image?
Jan
January 30, 2010Hi Mike.
Panoramas are usually stored in equirect format. It’s an image with the width:height ratio of 2:1. Try searching image.google.com for equirectangular to get the idea. There are tools like Hugin or PtGui for creating equirects from the pictures taken by your camera.
The iphone viewer indeed needs 6 cube faces to work, however you don’t need to take the panorama that way. There are tools for converting equirects to 6 cube faces. PtGui is one of them.
To avoid the tripod being visible in your panorama you need to take a down shot without the tripod. The easiest is to hold the camera, point it downwards and take the shot. You don’t need to worry about your legs being visible in the image because you can use just a small area of the image that is missing when you combine all the other shots.
Of course there are more advanced techniques that allow you to remove your shadow in a panorama, to take the down shot in the dark when you NEED to use a tripod, etc. But I hope this answer is a good start for your adventures with panoramic photography :) Let me know if you have further questions. I’ll be happy to help.
A link for your inspiration :) http://www.360cities.net/image/flugpano-papierfassung
Roberto Da-Costa
January 30, 2010Hello Jan, sorry for the bother but I have been doing lots of research into this i-phone app and love it! we are working on some applications for us, the dilemma that I have is that we shoot cylindrical panoramas. Are there different steps we need to take to shoot spherical from cylindrical? thanks! sorry for the newbie comment
Jan
January 31, 2010Hi Roberto. I suggest you check out the guides at http://www.panoguide.com/howto/
Richard
February 3, 2010Hi Jan,
I’m really enjoy playing with your code. I tried to put your code into a native iphone program via PhoneGap, work like a charm :) despite the rubberband bouncing of the UIwebview.
just one quick question: I tried to enlarge the 3D viewport by adjusting the values in CSS. (viewport height & width, cube size…) none of them work, any clue?
I also tried to play with a Object VR animation with the Jswipe, but it behaved oddly and not as responsive as yours. thx.
Roberto Da Costa
February 17, 2010Hey Jan, we are playing with the code and converting this i-phone script to hopefully work with the Google Android based OS as soon as we have a link I’ll post it up!
thanks again!
Jan
February 17, 2010Hi Roberto, awesome!!! Can’t wait!
jan
February 21, 2010Hi Jan,
i am posting some panos on 360cities (search for Jan Totzek, if you like to), but i also would like to have a solution to show my panoramas for the iphone on my on homepage which is http://www.totzek.de.
I would like to play with your code also. maybe this is stupid, but where can i find this code? sorry, i am not a programmer, but want to show this a friend of mine, who will help me.
would be great, if this will be a solution to show panos without flash for pc and for the iphone!
jan totzek
Alex
May 17, 2010Hi Jan,
I would also love to get panos working on my site for the iphone.
How do i get the code/example template page?
Great work and many thanks
Alex
Joe Girolamo
June 10, 2010Great script! I have it working great on iPod touch and iPhone 3G. Any ideas for pinch zoom?
Jan Vrsinsky
June 27, 2010Hi all, currently the further development of the code is done by developers at 360 cities. You can view the code there, just load any page on your iphone or in using the user agent switcher plugin for firefox set to emulate iphone. Also Klaus (krpano author) has created great javascript/css viewer for iphone.
Cheers
Jan
Miguel
November 9, 2010Hey Jan, Any idea what kind of changes would panoviewer.js need to run on the desktop (Chrome5, FFOX 3.6)? I’ve played with copies of your javascript files and it seems there’s some css display issues that don’t let cubefaces show up. I had to tweak iphone.css to get one of the cubefaces showing but the rest are not showing. Any idea what I might be missing? Thanks.
Jan Vrsinsky
November 10, 2010Hi, I haven’t studied this subject since the time I published the code but at that time it was not possible to do the same thing as easily because major browsers didn’t support HTML5 CSS 3D transformations. I think it has gotten better by now but I’m not sure if all of them support it properly – they probably do. I’m not able to provide any support for the code but you might want to investigate this link
- Apple panorama viewer demo http://www.apple.com/html5/showcase/vr/
Miguel
November 10, 2010Thanks for the link Jan, that’s very helpful!
Melisa
July 20, 2011Hey Jan,
This is really cool, and I want to try it! Is there a link to download the xcode project or something?
Thanks!
Jan Vrsinsky
July 27, 2011Hi Melisa, unfortunately I don’t maintain the code and it’s not available for download now. I suggest you explore the link above (apple’s showcase) or krpano panorama viewer that also works on the iphone. good luck!