Introduction to PanoMoments

PanoMoments come in two flavors: a "360 PanoMoment" that captures the entire 360 degrees and associates space + time, and also a standard "PanoMoment" that can be thought of as an interactive HD GIF. The latter can be captured with just about any video camera (even your smartphone) and is a great way to get started with PanoMoments capture. The 360 version requires extra hardware; either a 360 video camera or a rotating camera rig, but is simple to capture once you get the hang of it. Both versions create what we consider to be "living photos" and represent a new choice in the world of photography.

With PanoMoments, one of the most important concepts to understand is that instead of a linear timeline, you're working with a circular timeline. This fundamental difference from video, and constraint, allows you to easily direct the viewer’s attention, particularly when working with 360 captures. It also forces you to think creatively about how to tell an interesting story that not only loops, but also can be played forwards and backwards.

How to Create PanoMoments

Take a look through the quick overview below, and then checkout the more detailed workflow guide, hardware recommendations, and FAQ - but note that most of the documentation is currently focused on the original 360 PanoMoment form (we'll be updating this documentation shortly). And if you have further questions, feel free to send us an email.

Standard PanoMoments

  1. Capture from any video camera (regular speed, slow motion, timelapse, etc.)
  2. Trim the video to 300 frames or less using a video editor or set the Start / End times on the first page of the uploader.
  3. Upload and you're done!

360 PanoMoments (with a 360 Video Camera)

  1. Capture 360 Video from a static location (ie. the camera shouldn't be moving)
  2. Trim the equirectangular video to 300 frames or less using a video editor or set the Start / End times on the first page of the uploader.
  3. Upload and then configure the rotation alignment.

360 PanoMoments (with a Rotating Camera)

  1. Capture between 180-300 frames equally spaced around 360° with a still / video camera and fisheye lens mounted 60-80mm in front of the the No Parallax Point (to emulate human head rotation) using a robotic panorama head to automate the rotation / capture process.
  2. Convert Fisheye photos to Equirectangular with a 4-click batch process using a lens specific template for software like Hugin or PTGui. No stitching is required.
  3. Encode the set of equirectangular images to a video using FFMpeg
  4. Upload and then configure the rotation alignment.
Rotating Camera

Animating with Unity

PanoMoments can be animated with your favorite animation software, but 360 PanoMoments are a bit more involved to animate. While you can easily convert 360 video to the PanoMoments format, creating an animated 360 PanoMoment with this workflow is a bit of a roundabout solution. To make things a bit easier, we've released a very simple (yet slightly rough) Unity project that is pre-configured to directly export to a PanoMoments compatible format. We see Unity becoming the primary toolset for animating PanoMoments, and as a way for the creative community to explore an entirely new VR medium. Check out this post on Unity Connect for a walkthrough on the animation process.

Embedding PanoMoments

PanoMoments support the oEmbed API which allows the viewer to be embedded across any of the 1000’s of sites that support Embedly. This includes sites like Medium, Reddit, the NY Times, and many more. All you have to do is copy the PanoMoment URL like: https://my.panomoments.com/u/MomentCaptureStudio/m/composite-europe and then simply paste it into any site that accepts Embedly. Here’s a quick demo on how to embed a PanoMoment on Medium:

To embed in sites that don’t directly support the Embedly API, you can just copy / paste either the Embedly Card or iFrame Embed code snippet found on https://my.panomoments.com/me (click the share icon under the PanoMoment you’d like to embed). The Embedly Card snippet looks like this:

<blockquote class=”embedly-card”><h4><a href=”https://my.panomoments.com/u/MomentCaptureStudio/m/composite-europe">Cross-fade Composite</a></h4></blockquote><script async src=”//cdn.embedly.com/widgets/platform.js” charset=”UTF-8"></script>

And the iFrame snippet looks like:

<iframe id=”embedPanoMoment” pano=”PanoMoments” allowfullscreen=”1" allow=”vr” frameBorder=”0" width=”420" height=”320" scrolling=”no” src=”https://my.panomoments.com/embed/5ae8dd1d41b5f60011737a40"></iframe>

You’ll also find the Embedly Card snippet under the <embed> option in the sharing UI on every PanoMoment.

Customize and Build

We want to encourage folks to build on top of PanoMoments; we see them as a living canvas. Later in 2018 we're hoping to release an SDK, but even with just the iFrame embedding, you can build some incredible experiences.

Parallax Scrolling - New!

You can now pass through the scroll position to the iFrame. Just append parallaxScroll=1 as a query variable on the embed src field and you're ready to go. It's simple to do and creates an awesome interactive parallax website design. Check out the simple example below and feel free to play around with the code here - https://glitch.com/edit/#!/panomoments-parallax.