Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active August 21, 2021 04:14
Show Gist options
  • Save bryik/68b4044557f25bd9c578540fc4969b65 to your computer and use it in GitHub Desktop.
Save bryik/68b4044557f25bd9c578540fc4969b65 to your computer and use it in GitHub Desktop.
Download ZIP
A-Frame and Cardboard Camera
Raw
.block
license: mit
Raw
README.md

Displaying Cardboard Camera Stereo Panoramas with A-Frame

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

Instructions:

  1. Convert original vr.jpg Cardboard Camera image into over-under equirectangular with this webservice.

  2. Split the 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 (or fork this Gist and use bl.ocks).

  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 Cardboard panorama: Google.

Example Pen by bryik on CodePen.

Raw
index.html
<!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/TlntvRG.jpg">
<img id="right" src="http://i.imgur.com/2DWWNu3.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>
@caffeinum
Copy link

Hey, how come I haven't found this a few days ago! :D
But now I built a web-app for this, which does all this automatically. You can upload and view examples here: https://vr.caffeinum.com

@jumpjack
Copy link

I wrote this script to create a cardboard image starting from a single equirectangular full panorama (360x180), any idea about what's wrong with it?

set R=%~n1.vr.jpg

:mpo
call :set ImageWidthR ImageHeightR
exiftool -s2 -ImageWidth -ImageHeight "%R%"

for /f "tokens=1,2 usebackq delims=: " %%i in (`exiftool -s2 -ImageWidth -ImageHeight "%R%"`) do set %%i=%%j




set /a FullPanoWidthPixels=ImageWidth
set /a FullPanoHeightPixels=ImageHeight

set /a CroppedAreaImageWidthPixels=ImageWidth
set /a CroppedAreaImageHeightPixels=ImageHeight

set /a CroppedAreaLeftPixels=0
set /a CroppedAreaTopPixels=0



exiftool -XMP-GPano:all^
 -XMP-GPano:UsePanoramaViewer="True"^
 -XMP-GPano:CroppedAreaLeftPixels="%CroppedAreaLeftPixels%"^
 -XMP-GPano:CroppedAreaTopPixels="%CroppedAreaTopPixels%"^
 -XMP-GPano:CroppedAreaImageWidthPixels="%CroppedAreaImageWidthPixels%"^
 -XMP-GPano:CroppedAreaImageHeightPixels="%CroppedAreaImageHeightPixels%"^
 -XMP-GPano:FullPanoWidthPixels="%FullPanoWidthPixels%"^
 -XMP-GPano:FullPanoHeightPixels="%FullPanoHeightPixels%"^
 -XMP-GPano:ProjectionType="equirectangular"^
 -XMP-GPano:LargestValidInteriorRectLeft="0"^
 -XMP-GPano:LargestValidInteriorRectTop="0"^
 -XMP-GPano:LargestValidInteriorRectWidth="%FullPanoWidthPixels%"^
 -XMP-GPano:LargestValidInteriorRectHeight="%FullPanoHeightPixels%"^
 -XMP-GPano:InitialHorizontalFOVDegrees="50"^
 -XMP-GImage:"ImageMimeType=image/jpeg"^
 -XMP-GImage:"ImageData<=%~n1.vr.jpg" ^
 %~n1.vr.jpg


goto :eof

:set
 @if "%1"=="" goto :EOF
 @set %1=
 @shift
@goto :set

The resulting image look squeezed in vr.caffeinum.com and is not loaded at all in http://storage.googleapis.com/cardboard-camera-converter/index.html due to "missing right image" (but I put it there!), but it shows fine in https://photo-sphere-viewer.js.org/guide/cropped-panorama.html#playground

@caffeinum
Copy link

@jumpjack so actually I tried to work with raw metadata, but hadn't have any success. I went with just copying the javascript from cardboard camera converter website and using the exported functions in my code. I remember they use the metadata feature that's not very standard, and I had trouble writing / reading it with JS, so gave up

@jumpjack
Copy link

is there also the opposite function, to convert from equirect to cardboard?

@caffeinum
Copy link

@jumpjack I would try using breakpoint somewhere inside the code on this page, while it is processing, and looking the state for some hints http://storage.googleapis.com/cardboard-camera-converter/index.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment