This fork works as a drop-in to render a single photo sphere. Just add a sphere.jpg file to the root directory to create a one-page rendering.
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
Open test.html and press "makeIt"
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
GPLv3 http://www.tldrlegal.com/license/gnu-general-public-license-v3-(gpl-3)
- We load EXIF XMP data
- AJAX request as string
- Use Javascript string positioning to pull out the xmp chunk
- Pull out our attributes we need
- Create an image of full_width x full_height and put the linked image on at x, y with crop_width x crop_height.
- 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)
- Boom!