Creating 3D Images On Facebook Using Depth Maps

Facebook, the social media app, now offers a way to render 3D images on your browser. That is not only amazing, but it does not require 3D glasses or headset. No specialized hardware is needed other than your smartphone screen or computer monitor display. It is supported on most all popular web browsers like Google Chrome, Brave, Firefox and Safari. 3D imaging is supported via Facebook’s API that renders the image using algorithms that takes depth information to create a 3D rendering in a 2D space (your display).

There are different ways to create a 3D image. Originally it was done by creating what is called an anaglyph. This creates the image by layering different colors to create a stereoscopic image to represent a 3D image. However this requires using a color filter to view e.g. 3D glasses. Notice that the 3D glasses have different color filters for each eye, typically red and cyan. It is actually your brain that processes the information from what you see that creates the 3D effect. That is a more complicated topic for this discussion.

Another way to create a 3D image requires processing what is called a depth map. A depth map simply creates a distance representation of your image from a reference point. It provides details of depth based on how near and how far away, in terms of perspective, a part of the image is. You are basically using this to define the nearness of an object is to your viewpoint in the image.

For example, in the depth map, the background is considered the farthest away from the viewer. The subject of the image, let’s say the person, is considered the nearest to the viewer’s eye. Therefore separation must be created between the background and the subject. Other ways to create 3D effects without using glasses requires some sophisticated hardware that is built into the device. They do use a form of depth mapping which you will learn about in this article.

Facebook first made this feature available on the iPhone X and iOS. The feature made good use of the dual-camera system on the iPhone to render 3D images. In the future there will most likely be more apps that can support this feature. I have 2 ways to manually create the 3D image. One involves programming, which requires a steep learning curve. The other way is by using Adobe Creative Cloud, which can be simpler to learn. I will explain the latter.

Create The Depth Map

If you have Adobe CC 2019, open Photoshop. Open the image you want to render into 3D. It can be any resolution and for image format (PNG, JPEG) make sure it is raster based (avoid vector). The image I am working with has a resolution of 16 MP (4928 x 3264) at 300 ppi. Once you have your image opened convert it into greyscale.

Image -> Mode -> Grayscale

It should now look like this.

The image converted to greyscale.

Now we are going to identify the different regions or depth of the image in reference to your point of view. Identify which are the farthest and which is the nearest. For me it is the nose and face region that is nearest, while the background is the farthest. So we must separate these regions to create the depth.

We are going to use the lasso tool in Photoshop for this part. First we must create a layer to begin. Using the marquee tool select the whole image or better yet on your computer type Command-A (Mac) or Ctrl-A (PC). Now copy the image Command-C (Mac) or Ctrl-C (PC). Next paste to create a new layer by typing Command-V (Mac) or Ctrl-C (PC). You should now have 2 layers. We will get rid of the background layer, so go ahead and delete it.

Now we begin the process of segmentation to create our depth map. Using the lasso tool, make your object selection of the nearest and farthest regions. What we are doing here is dividing up the regions by distance from your view point. The base layer will be original image, while the top layers will be the regions we divide. The process works like this.

Lasso the object (like so):

Using the lasso tool.

Type Command-C(Mac) or Ctrl+C(PC), then Delete (del) object, then paste it back Command-V(Mac) or Ctrl+V(PC). The object is now separated from the background. Keep doing this process with other regions of your image.

You should now have multiple layers. This is just an example and the results are different for everyone, depending on the image and their perspective.

So the layers are ordered from the farthest (bottom) to the nearest (top).

Now you must go back to each layer and adjust its settings. This part is really not an exact procedure because it will depend on your perspective of depth. Some people will have a different view than others, but the idea here is to separate near from far. In order to do this we must use fill color to create the object distance in the image. For example, the nearest regions in the image, should be lighter than the farther regions (darker).

To do this you must set the contrast on the layer.

Image -> Adjustments-> Brightness/Contrast

Play around with those settings for each layer. You actually can use the reverse as well, by making the foreground darker and the background lighter. It is really up to the creator on how they want to create this separation.

The next step will be color fill. Follow these steps.

1.Select a layer
2. Using the Magic Wand tool, select everything except the object in your layer. 
3. Select Inverse (Shift+Ctrl+I). 
4. Go to Edit –>Fill (Shift+F5) 
5. Select the fill color you want.

In my case, the closer the object the lighter the fill color. For advanced users you can also create gradients to further add some details to the depth. I will not go over this process, but that can certainly be done.

Now we can merge the layers together. Select all your layers and then follow these steps.

1. Layer -> Merge layers
2. Filter -> Blur -> Gaussian Blur.

The depth map is now created. It should look something like the image below.

Depth map of the image.

Save your image file in which format you prefer. I used JPEG for mine. Now we are ready to upload to Facebook, but first make sure you follow these steps.

1. Name your depth map 'image_depth.jpg'
2. Name your image as 'image.jpg'

Now the naming convention I used was for simplicity purposes only. You can name it whatever you like, but the image and the depth map should follow the naming convention like the one I used. Facebook will specifically check this, so if there is something wrong it will not work.

The depth map and image do not have to be the same file size, based on my experience. I had saved the depth map at a lower resolution than the original image due to greyscale conversion.

Upload The Image

Drag and drop your files into Facebook like you are uploading a new photo to post on your feed.

Drag and drop the files onto Facebook.

You will now see Facebook’s 3D rendering go to work.

Facebook rendering the 3D image for your feed’s timeline.

Once that is done, your friends can see the image in 3D on your feed.

View The Image

The final 3D image is now viewable from a browser.

The user’s will need to move their mouse or fingers (touchpads) around to see the 3D effect. For smartphone users, it requires moving the phone sideways or tilting or pivoting and rolling the display to see the effects or move it around with their fingers. Once again, the 3D image will render on any supported browser.

There are tools and apps online that can automate the process of creating depth maps for uploading 3D images to Facebook. Check the Apple Store if you are on iOS or macOS and Play Store for Android users. This example is how to do it manually if you want more customization.

Enjoy 3D without glasses!