Fully spherical panorams are neat.
SAFARI FUN-NOTE: You have to manually enable WebGL in Safari or all hell breaks lose. Even so, it seems there are still problems abound with three.js / WebGL.
Photospheres are a neat take on panoramic photos, except that they used to only display in Google products like Google+.
That was until kennydude created sphere.js, a library for viewing Photospheres powered by three.js! Oh and it's all FOSS. This is cool.
A Photosphere is a spherical projection stored in a .jpeg along with some extra EXIF data in XMP format.
The same image rendered within an <image>
tag:
And an example of the extra EXIF data:
<rdf:Description rdf:about="" xmlns:GPano="http://ns.google.com/photos/1.0/panorama/">
<GPano:UsePanoramaViewer>True</GPano:UsePanoramaViewer>
<GPano:CaptureSoftware>Photo Sphere</GPano:CaptureSoftware>
<GPano:StitchingSoftware>Photo Sphere</GPano:StitchingSoftware>
<GPano:ProjectionType>equirectangular</GPano:ProjectionType>
<GPano:PoseHeadingDegrees>350.0</GPano:PoseHeadingDegrees>
<GPano:InitialViewHeadingDegrees>90.0</GPano:InitialViewHeadingDegrees>
<GPano:InitialViewPitchDegrees>0.0</GPano:InitialViewPitchDegrees>
<GPano:InitialViewRollDegrees>0.0</GPano:InitialViewRollDegrees>
<GPano:InitialHorizontalFOVDegrees>75.0</GPano:InitialHorizontalFOVDegrees>
<GPano:CroppedAreaLeftPixels>0</GPano:CroppedAreaLeftPixels>
<GPano:CroppedAreaTopPixels>0</GPano:CroppedAreaTopPixels>
<GPano:CroppedAreaImageWidthPixels>4000</GPano:CroppedAreaImageWidthPixels>
<GPano:CroppedAreaImageHeightPixels>2000</GPano:CroppedAreaImageHeightPixels>
<GPano:FullPanoWidthPixels>4000</GPano:FullPanoWidthPixels>
<GPano:FullPanoHeightPixels>2000</GPano:FullPanoHeightPixels>
<GPano:FirstPhotoDate>2012-11-07T21:03:13.465Z</GPano:FirstPhotoDate>
<GPano:LastPhotoDate>2012-11-07T21:04:10.897Z</GPano:LastPhotoDate>
<GPano:SourcePhotosCount>50</GPano:SourcePhotosCount>
<GPano:ExposureLockUsed>False</GPano:ExposureLockUsed>
</rdf:Description>
Now that we understand the gist of what's going on, we can dream of creating gorgeous high-resolution panoramas with your DSLR that plop into your Occulus Rift.
Or maybe some custom hardware that instantly captures every constituent image with an array of cameras.
Using Jekyll's Front Matter, we can add custom variables to each post's Markdown file that are accessible in every template involved in rendering this post.
Here's this post's Front Matter:
---
layout: post
title: "Free the Photosphere"
date: 2014-1-4 22:20:22
blurb: "Fully spherical panoramas are neat."
categories: blog
extra_js:
- three.min.js
- sphere.js
photosphere: PANO_20140112_152336.jpg
---
And in my post template I add the following:
{% if page.photosphere %}
<div id="photosphere" style="height:480px"></div>
<script>
window.onload = function() {
new Photosphere("/img/{{page.photosphere}}").loadPhotosphere(document.getElementById("photosphere"));
};
</script>
{% endif %}
And at the bottom of the master layout:
{% for js_name in page.extra_js %}
<script src="/js/{{js_name}}"></script>
{% endfor %}
04 Jan 2014