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 video from any camera (regular speed, slow motion, timelapse, etc.)
  2. Hit the 'Create a PanoMoment' button on https://my.panomoments.com/me (or hit the camera icon in the native app).
  3. [Optional + Web Only] Enter Start/End times (in seconds) to render only a portion of the timeline.
  4. Select your video file (mov/mp4 are supported) and hit 'Upload'.
  5. [Optional] After receiving the rendering completed email, try changing the Fade, Clockwise, Speed settings (and others) to fine-tune the experience.

360 PanoMoments (with a 360 Video Camera)

  1. Capture 360 Video from a static location (ie. the camera shouldn't be moving in most circumstances).
  2. Ensure your video is in equirectangular projection (cubemap is not currently supported).
  3. Hit the 'Create a PanoMoment' button on https://my.panomoments.com/me (the native app doesn't currently support 360 uploads).
  4. [Optional] Enter Start/End times (in seconds) to render only a portion of the timeline.
  5. Select your equirectangular 360 video file (mov/mp4 are supported) and hit 'Upload'.
  6. After receiving the rendering completed email, click the link to open your PanoMoment using a Desktop browser.
  7. Use the [ ] keyboard keys to configure the rotation alignment and the \ keyboard key to configure the clockwise/counter-clockwise rotation direction. Both of those settings influence the how the PanoMoment "story" is told. Note the "Alignment, Heading (ie. starting frame), and Clockwise" values and go back into the editor and save these values.

360 PanoMoments (with a Rotating Camera)

  1. Capture between 180-360 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. See here for more info on converting images to video.
  4. Hit the 'Create a PanoMoment' button on https://my.panomoments.com/me (the native app doesn't currently support 360 uploads).
  5. Select your equirectangular 360 video file (mov/mp4 are supported) and hit 'Upload'.
  6. After receiving the rendering completed email, click the link to open your PanoMoment using a Desktop browser.
  7. Use the [ ] keyboard keys to configure the rotation alignment and the \ keyboard key to configure the clockwise/counter-clockwise rotation direction. Note the "Alignment, Heading (ie. starting frame), and Clockwise" values and go back into the editor and save these values.
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.

Embed Customization

PanoMoments Pro and Commercial users can further control how embeds are displayed by adding the following query variables to the src URL:

disabledLogo=1
disabledFullscreen=1
disabledShuffle=1
disabledShare=1
disabledQuality=1
disabledInfo=1

For example, the following iFrame will disable the PanoMoments logo and the Info panel:

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

Customize and Build

We see PanoMoments as a living canvas. That's why we've released the PanoMoments SDK, so everyone can build incredible interactive media experiences with PanoMoments as the foundation.

Parallax Scrolling - New!

You can now pass through the scroll position to the embedded iFrame on standard PanoMoments (360 PanoMoment support is coming soon). 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 (embedded below on desktop browsers) and feel free to play around with the code here - https://glitch.com/edit/#!/panomoments-parallax.