search

leandigo / leanorama

jQuery plugin for displaying and navigating panoramic images
MIT License
185 stars 75 forks source link

Question: how to create/take cubic projection photos? #10

Open sgon00 opened 10 years ago

sgon00 commented 10 years ago

Hi, I tried google, but I failed to find any useful information. I don't know where to ask this question. I found hugin can create panorama photos, but I have no idea if that helps creating cubic projection photos or not. I don't know how to take photos to achieve that too. Are there any useful tutorials or online resources about this? Thank you very much. If this kind of questions should not go here, I am very sorry about it.

ztorage commented 10 years ago

This question probably shouldn't go here, but I'm in a good mood, so here goes.

You cannot "take" cubic-projection photos. There's no camera that's built for that. As the Readme says, Leanorama is intended to display equirectangular panoramas like this: http://www2.adamfranco.com/qtvr/2007-04-05_back_deck_snow%20-%2010000x5000%20-%20SLIN%20-%20Blended%20Layer0002.jpg remapped into a cubic projection.

Taking an equirectangular photo can be difficult. While there are some equipment to help you with it, you'll eventually have to take a few dozen photos from the exact same point, while turning your camera a few degrees each time, until you capture the whole "spherical" space around you. When you have all the photos, you'll have to stitch them together using some software tool. Take a look here: http://wiki.panotools.org/Category:Software:Platform has quite a list there. For Linux, Hugin would be my choice.

Taking an equirectangular photo can also be quite easy, if you don't mind the occasional stitching glitch. There are many panorama photography apps for Android and iOS. Just look for "Panorama" or "360 photo" in the app stores. The ones with good ratings produce fair equirectangular pics.

Once you have your equirectangular photo, you'll need to remap it to a cubic projection - this results in 6 files - one for each side of the cube. If you install Hugin, you'll be happy to know it comes with a nice command-line tool called "nona". You need to create a project file for it that looks like this:

p E0 R0 f0 h1273 n"TIFF_m" u0 v90 w1273 m g1 i0 m2 p0.00784314 i a0 b0 c0 d0 e0 f4 h2000 n"orig-pano.jpg" p0 r0 v360 w4000 y0 i a0 b0 c0 d0 e0 f4 h2000 n"orig-pano.jpg" p0 r0 v360 w4000 y-90 i a0 b0 c0 d0 e0 f4 h2000 n"orig-pano.jpg" p0 r0 v360 w4000 y180 i a0 b0 c0 d0 e0 f4 h2000 n"orig-pano.jpg" p0 r0 v360 w4000 y90 i a0 b0 c0 d0 e0 f4 h2000 n"orig-pano.jpg" p-90 r0 v360 w4000 y0 i a0 b0 c0 d0 e0 f4 h2000 n"orig-pano.jpg" p90 r0 v360 w4000 y0

replace the "h2000" with "h" and "w4000" with "w" and then run: nona -o output-dir project-file.pto replacing output-dir and project-file with your actual values.

This will product 6 TIFF files you'll have to convert to JPEG or PNG. Then, you can use these files in the "sides" parameter of Leanorama.

sgon00 commented 10 years ago

ztorage, THANK YOU VERY MUCH for writing the detail explanation. Now, I finally completely understood. By following your guide, it works perfectly. Thanks again!

ztorage commented 10 years ago

Glad I could help

faceless105 commented 9 years ago

Have you considered enabling this to work with equirectangular photos without having to be remapped? There are a lot of 360 cameras coming out that handle the stitching on the hardware so it's becoming a pretty common layout. Otherwise, this explination was pretty critical to help me out with this.

ztorage commented 9 years ago

Leanorama requires cubic projection, since it's based on a rendering a cube in CSS3D. In order to support a different projection, it would be necessary to remap the image to a cubic projection when panorama is loaded, which would be very demanding on the CPU if done in Javascript. As far as I'm aware, there are no sufficiently advanced image manipulation libraries available for client-side Javascript to perform this kind of remapping on the fly. And even if there were, the process would have taken at least a few minutes for a panorama of a decent resolution, which would have a severe negative impact on the user experience.

However, there might be other HTML5/JS solutions based on Canvas or webGL that work with equirectangular projections. I vaguely remember seeing something of the sort back in the day, but I don't remember the names. On Jan 7, 2015 6:11 PM, "John" notifications@github.com wrote:

Have you considered enabling this to work with equirectangular photos without having to be remapped? There are a lot of 360 cameras coming out that handle the stitching on the hardware so it's becoming a pretty common layout. Otherwise, this explination was pretty critical to help me out with this.

— Reply to this email directly or view it on GitHub https://github.com/leandigo/leanorama/issues/10#issuecomment-69044563.