Turning a screenshot into a Facebook 360° Image
This is a short post showing how you can turn any equirectangular photo into a 360° image on Facebook that displays like this:
You could use a photo like this plate carrée projection, but I’ll get my photo as a 360° screenshot from an A-Frame scene like this one for this tutorial.
There are really only a few steps involved:
1 While you’re viewing an A-Frame scene take a 360° (e.g. equirectangular) screenshot by pressing <ctrl> + <alt> + <shift> + s. That should give you an image like below in your computer’s “Downloads” folder:
2 Right now, we just have a normal 2D image, and Facebook would treat it as such if we were to upload it — we need to edit the metadata of the image to specify that we have a 360° image.
Facebook seems to only read JPGs for 360° exif data, so I convert the A-Frame screenshot (saved as a PNG initially) into a JPG before injecting my metadata, although if I’m wrong feel free to let me know!
If you don’t want to use a scripting tool, I’d recommend https://www.thexifer.net/, a website that you can use to upload and edit exif data. Really all you need is to set “ProjectionType” to “equirectangular”.
I use exiftool to run the following command:
exiftool -ProjectionType=”equirectangular” photo.jpgAnd that’s all you need to Facebook to recognize this as a 360° image!
3 Once you have your exif injected photo, you should be able to just upload it to Facebook like any other photo and once it processes, you’ll have something like this:
Final notes:
- Facebook published a more in-depth breakdown of how to specify 360 metadata including specifying field of view and image dimensions for proper display.
- Screenshots are outlined in more detail on the A-Frame blog, if you’re curious.
- It won’t affect many scenes you’ll find, but it’s worth noting the screenshot shortcut technique shown here only works for A-Frame 0.4.0 and above: https://aframe.io/blog/aframe-v0.4.0/
