Skip to content

Instantly share code, notes, and snippets.

@bryik
Last active June 9, 2017 01:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryik/4bf77096d3af66b11739caaf01393837 to your computer and use it in GitHub Desktop.
Save bryik/4bf77096d3af66b11739caaf01393837 to your computer and use it in GitHub Desktop.
A-Frame and NVIDIA Ansel
license: mit

Displaying Ansel Stereo Panoramas with A-Frame

Update: for an easier way, see Overunder Panorama Viewer.

Ansel stereo panoramas are surprisingly good, better than Cardboard Camera and nearly as impressive as scenes handmade for VR viewing.

Instructions:

  1. Split the original over-under equirectangular image in two using the following ImageMagick command:
magick convert <IMAGE.png> -crop 1x2@ +repage +adjoin pano_%d.png

Note: replace <IMAGE.png> with the name and format of the image you want to split.

This command will add two new files to your directory. I suggest renaming them to avoid confusion:

  • pano_0.png -> left.png
  • pano_1.png -> right.png
  1. Upload the left and right images to the host of your choice. Beware of CORS issues. Imgur worked for me.

  2. Go to this codepen and hit the "fork" button.

  3. Replace the links on lines 4 and 5 with your own.

CodePen has a number of different views, "debug" is the cleanest.

References

Credit for Ansel panorama: Dougstar02.

Example Pen by bryik on CodePen.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/oscarmarinmiro/aframe-stereo-component/6db3472a301c7e90b5a4dbc0e08d8c4269b0f20e/dist/aframe-stereo-component.min.js"></script>
<a-scene antialias="true">
<!-- Paths to left and right images -->
<a-assets>
<img id="left" src="http://i.imgur.com/YAaxpv6.jpg">
<img id="right" src="http://i.imgur.com/JUxTnzK.jpg">
</a-assets>
<!-- Camera -->
<a-entity camera look-controls position="0 0 0" stereocam="eye:left;"></a-entity>
<!-- Sky sphere -->
<a-sky id="sky1" radius="5000" src="#left" stereo="eye:left"></a-sky>
<a-sky id="sky2" radius="5000" src="#right" stereo="eye:right"></a-sky>
</a-scene>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment