How to make a 3D Photo for Facebook from your Unity project
Facebook 3D Photos are one of the hot trends of the moment, especially now that is possible to upload them from Facebook website. They could be a great innovative tool to market your AR and VR applications (and even for the non-XR ones)… so let’s see how you can create them for
What are Facebook 3D Photos?
Facebook 3D Photos are Facebook posts where you can see a photo that has some kind of depth perception. Moving your mouse (or your finger) over it, you perceive some parallax motion between the objects that are at different depths and so the photo has some kind of 3D-effect. Of course, the photo is not a real 3D one, but the resulting effect is nice nonetheless.
In the beginning, it was possible to upload them only from selected smartphones (e.g. iPhone), and so only a few people could you use them. But some days ago, Facebook has expanded the range of allowed devices, including some high-end Android phones and also the Facebook web-app.
This means that whoever has access to a web-browser can now upload a 3D Photo on Facebook and that’s a piece of awesome
We always do innovative apps… so isn’t it a good idea also to do some kind of innovative marketing on Facebook?
How to upload a 3D Photo on Facebook
To upload a 3D Photo on Facebook, you need two things:
- An image;
- A
depth-map of the image. The depth-map is a black-and-white image that specifies for every pixel what is the depth of the represented object. So, white pixels represent very close objects and black pixels represent far background objects.
Facebook uses the depth-map to understand the depth of the objects represented in the photo and so create the 3D-effect.
But… how to create this depth map? Some phones automatically create it for the photo they shoot, but in all the other cases, we don’t have it…
The standard approach
The suggested approach by Facebook is: draw the depth map yourself. So, take a screenshot of your Unity application, import it on Photoshop, and create some kind of black and white image that is white where there are the background objects, black on the background and gray in-between. Of course, it may be a long process, and also requires some mastery of Photoshop.
I want to be honest about this approach:
In the case of real photos taken by your smartphone, you have no other choice, because you have no other data besides the color image itself. But are we sure that there isn’t a better way for Unity projects?
The better way for Unity projects
When Unity renders a scene, of course, it has to compute a depth map of the objects in the scene. This is necessary so that to render the occlusions of the 3D objects correctly. So, if we could take a screenshot of the Unity game and at the same time save the related depth-map, we would have all the necessary material to create 3D photos for Facebook. Easy peasy… and surely better than waste my time on Photoshop.
I decided to waste some time on Unity, instead. Here at New Technology Walkers we have just launched the mixed reality game Hit Motion: Reloaded and so I thought it could be a great idea to create a 3D Photo post on Facebook to showcase it. In this case, a 3D Post (a post showing a 3D model) wouldn’t have been good, because of how mixed reality is implemented on the Vive Focus. And then I didn’t want the user to explore a 3D model, but just to see an innovative screenshot. I opened Unity and I said to myself “In 5 minutes, I will have that 3D Photo”.
More than one day later, I understood that I was a bit too optimistic :). The problem is that while obtaining a color screenshot of your program is quite easy, accessing the depth buffer of a camera in Unity is not that trivial. But with a lot of resilience and the support of various online resources (thanks Ronja for your great tutorials), I managed to create a Unity plugin that lets you shoot 3D Photos in Unity very easily!
And then, since I believe a lot in an AR/VR community where we all help each other, I also decided to release it opensource! This way, you all will be able to shoot easily 3D Photos!
How does it work?
To use the plugin, you have just to download it from its page on GitHub and then read the README.
Inside the plugin there is a prefab with an additional camera that, when you give some specific command (by default it is the “P” key on the keyboard), shoots a photo from its point of view, saving both the color and depth map on the drive of your device. Once you have those two files, the only thing that you have to do is selecting both of them and dragging them into your Facebook timeline… Facebook will do the rest and will give you a 3D Photo post. Easy, isn’t it?
So, by just dragging a prefab in the scene and then dragging two photos, you will have your 3D Photo. I recommend you to read the whole documentation that I have written, because most probably you will need to change some parameters and also the trigger mechanism (when shooting a photo from a VR headset, you want to assign the photo command to one of the buttons on the controllers, not to a key on the keyboard). Anyway, I’m sure that this will be very easy for you to implement.
I used it also for
The solution is universal for every Unity project, so it is not limited to AR and VR ones. It works out of the box for Windows and Android and should be slightly modified to implement
I hope that you will appreciate the job that I have done and I hope that you will download my plugin and will all start flooding Facebook with your 3D Photos! I can’t wait to see the ones created with the Oculus Quest…
And if this has been useful to you, I would
UPDATE: If you are an Unreal dev, I found this other plugin, released some days before mine, that can help you. Enjoy!
Disclaimer: this blog contains advertisement and affiliate links to sustain itself. If you click on an affiliate link, I'll be very happy because I'll earn a small commission on your purchase. You can find my boring full disclosure here.
