1

How do I use a Cardboard Camera 360 image in aframe?

The resolution of Cardboard Camera is not 2:1. Can this be corrected with an img tag parameter?

2 Answers 2

4

Edit: I have created a web app for viewing Cardboard Camera images. You still need to convert, but after that it's as easy as dragging and dropping onto this page.

It is also possible to upload to Imgur and share via URL using this kind of url:

https://spano.pyrik.dev/?url=https://i.imgur.com/PgAHSy8.jpg

For more details see this page.


Right now it is not easy to display Cardboard Camera images in A-Frame with proper stereo. But if you're really keen:

  1. Get vr.jpg source files off your phone and onto your computer.

  2. Use this web service to convert the vr.jpg to over-under equirectangular.

  3. Split the image obtained in step (2) using a tool like ImageMagick. This command works:

    magick convert <IMAGE.png> -crop 1x2@ +repage +adjoin pano_%d.png

Rename the outputs "left" and "right".

  1. Create an A-Frame scene with two entities textured with the left and right images. Use the stereo component to show the left-textured sky to the left eye and the right-textured sky to the right eye. Or download/fork this repository.

Here's an example using a sample from the Cardboard Camera app.

2

First you can preview the image via any photo app, then use share function to save the image to your email or other place you can get the image. The 360 image's file name created by cardboard camera will be IMG_yyyymmdd-xxxxxx.vr.jpg.

For 360 image, you could try render it onto a a-curvedimage. a-curvedimage will render the image onto a cylinder.

The default settings for a-curvedimage is not used for cardboard camera 360 image. To get result as render on default a-sky, I use following parameters

<a-curvedimage src="IMG_20160506_123456.vr.jpg" height="140" radius="100" theta-length="360" rotation="0 0 0"></a-curvedimage>

You can check a-curvedimage document for more detail.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.