kennydude / photosphere

Photosphere -- THIS IS A PROOF OF CONCEPT. NO SUPPORT IS GIVEN

IMPORTANT NOTICE:

THIS IS VERY OLD AND YOU SHOULD NOT USE THIS. NO RESPONSES TO EMAILS OR TICKETS WILL BE GIVEN FROM ME

---

PHOTOSPHERE

This allows you to view the new Photospheres in Android 4.2 without a problem without Google+

Thanks to

• Three.JS
• http://stackoverflow.com/questions/1578169/how-can-i-read-xmp-data-from-a-jpg-with-php
• Uses a portion of Modernizr that has been modified https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl-extensions.js

TO TEST

Open test.html and press "makeIt"

TO USE

Get Three.js (or use the bundled copy) and sphere.js and run:

new Photosphere("link-to-image.jpg").loadPhotosphere(document.getElementById("element-on-page"));

If you are including this into some gallery app which can read EXIF XMP tags, you can make it render faster (this is why you don't need every single shot for it to work, Android adds these tags in):

new Photosphere("link...").setEXIF({
	"full_width" : "GPano:FullPanoWidthPixels value",
	"full_height" : "GPano:FullPanoHeightPixels value",
	"crop_width" : "GPano:CroppedAreaImageWidthPixels value",
	"crop_height" : "GPano:CroppedAreaImageHeightPixels value",
	"x" : "GPano:CroppedAreaLeftPixels value",
	"y" : "GPano:CroppedAreaTopPixels value"
}).loadPhotosphere(...);

Tada! :D

LICENSE

GPLv3 http://www.tldrlegal.com/license/gnu-general-public-license-v3-(gpl-3)

HOW IT WORKS

1. We load EXIF XMP data
2. AJAX request as string
3. Use Javascript string positioning to pull out the xmp chunk
4. Pull out our attributes we need
5. Create an image of full_width x full_height and put the linked image on at x, y with crop_width x crop_height.
6. Load Three.JS using Panorma-like details (I used the Three.JS example for this and baked it into the class. I don't have a clue about 3D stuff nor am I really that interested)
7. Boom!

photosphere's Issues

Trying to embed a simple Photosphere on it's own

Hi Kenny,

I'm following your instructions to embed a simple Photosphere on a page but cannot get it to show up.

Here's the link

www.dropinquarters.com/sphere/index.html

I have sphere.js in /lib and three.min.js in /extern in the root of the sphere directory that also contains the .jpg for the photosphere itself.

Thanks

Use this library with FlashCanvas

Hello,
I try using this with FlashCanvas because many browser does not supporting your library (Android, Safari on Mac, Mac Browsers, older IE...)!

Could you help my implenting this? I have set up a test page here: http://goo.gl/XGM3B. You could see the modified sphere.js here: http://goo.gl/NY3Sk.

Thanks very much for your help. I build a free community for photo spheres (also in English with android app)!

Issue on Stackoverflow: http://stackoverflow.com/questions/13541605/use-flashcanvas-with-three-js

Further development of Photosphere viewere

Hi kennydude & developers

Thanks for your great work! May I connect with you in order to discuss possible collaboration and funding for the further development of an independent Photosphere viewer? I am looking at the following enhancements and would like to hear your opinion on the viability of gettign these in place if you can focus on develpment. Perhaps we can Skype? My Skype Name is henriblom

Circumnavigate iOS non-support of WebGL
Add interactivity to the viewer, like going to external links from hotspots on the sphere image, or loading enhanced resolution views and next vantage point sphere perspective on zoom in

Thanks henkblom

Doesnt work on local machine

Hi,
I've downloaded the code, and tried to run it locally from my hard drive, but when I click on makeIt, nothing appears, what needs to be done to get it working (ideally I want to test my own image but I cant get your example to work).

Thanks

Error when rendering the panorama

Hi,

I'm trying to add the panorama to a website based on the example that you've provided.

Added all the files and the script to the page but I get an error when creating the panorama after clicking on the link. This is the error that I see in the console WebGL: INVALID_VALUE: texImage2D: width or height out of range

The image for the panorama is 2580 x 1594px. Is that too big or is there something else that causes this error?

Any help would be appreciated.

issue on panorama

hello ,
this demo working in web , but after downloading it is not working in my system

Auto-Rotate.

It's not really an issue. Just wondering how one could stop the auto-rotation that occurs in these. I see some things in the three.min.js file but thought I'd ask before I start changing stuff. :)

Black screen

Every image but your example gives me a black screen.

Why Android viewer not work ?

Right now if I tried to build Android version of the viewer. The program seems to run but when it try to display sphere, I got pink surface all around the display regardless of whatever sphere image used to test.

As the developer had stated that its not working, I'm not sure what kind of work needed to make it work. It would be nice if someone could enlighten me the details of what missing. It also may be good to the community for that someone may be able to solve and make it work.

Thanks

Android Browser Support

I can not get the demo to work using the Android Chrome browser, Native Andorid Browser or Opera Mini. I thought since it used the canvas tag it might work? http://caniuse.com/canvas

IE10: responseText does not work

Tried to run this in IE10 and I got errors when accessing responseText. From the watch window, it seems like responseText is set as some "SystemError" where as responseBody is valid (albeit a byte array).

I assume that IE fails to interpret the body (jpeg data) as a UTF-8 (or 16?) string, so body is valid and text is not. Switched the custom ajax implemtation in photosphere with a jquery ajax call and things started working better (i.e. now they work, previously they did not).

IE11, Firefox, Chrome, Safari on Mac were all ok.

Please make it more realistic

it looks very unrealistic...why? can't it be make to be like the google plus viewer? it's not ready for production at all right now...

see - https://plus.google.com/communities/115970110085205516914