0 Shares 371 Views

Give 3D Parallax Effect to the 2D Images Using Depth Map

Fatik Owais Aug 03, 2017
learn-how-to-give-3d-parallax-effect-to-the-2d-images

3D Parallax effect if used correctly can add cool interactivity to your website that can grab your visitor’s attention. There are websites that have done excellent implementation of mouse follow parallax effect, and in this tutorial we are going to replicate this effect. Traditionally to create such effect a photograph is used on which layers of elements are added, and on mouse movement these different layers move with different speeds giving the illusion of depth. As seen in the example below, the scene is divided into multiple layers. The layer that will move in slower speed and cover shorter distance will give the effect of being nearer to the observer.

gif1

Our client at Arpatech demanded to have such effect, but here’s the catch; it has to be applied on a real life photograph of a room like below.

3d-parallax-effect-to-the-2d-images

Such complex scenery would require precise cutting of objects through photoshop and then to make multiple layers out of them. And still it would not look natural, as the scene have not much distinct elements to play with, most objects in this image are blending with one another. Even if we use the layers method, we will end up making the landing page heavy as the layers would be in PNG format due to the need of transparency. With the new method JPGs can be used, significantly reducing the load time of the page.

By the end of the tutorial you will be able to achieve this result:

gif2

Pretty cool, considering that it can be achieved in a matter of minutes starting from just a normal 2d image.

The secret sauce behind it is depth map. Apple uses this tehnique to create stunning portrait mode photos that replicates the blur background effect of big lens cameras like DSLRs. What depth map do is provide distance information of each pixel in the photograph. iPhone 7 calculate the distance through the dual camera setup.

pasted-image-0-1

Luckily we can create our own depth map using our own perception and a single photoshop brush. Let’s get started:

How Depth Map Works:

To create a depth map first you need to understand how depth maps work. It adds distance information to a 2d image, and it do it using only the shades of black. The darker the black is the further away it belongs in the scene, the lighter the black is the nearer it belongs. Complete white color means that the object is the nearest.

pasted-image-0-2

In the above image the left one is actual RGB image, and the right one is its depth map. As we can see the petals are in lighter tone, and as the objects are distancing the tone of them are getting darker. In 3d terms the tone of the color is representing the z-axis information of pixels.

Creating Depth Map Using Photoshop:

  1. Open your photograph in Photoshop

pasted-image-0-3

2) Create a new layer, fill it black and turn down the layer opacity to around 50% so you can see the original image below.

pasted-image-0-4

3) Turn down the Hardness of brush to 0% and start painting over on the black fill layer. Paint the objects with light tone that are nearer, and paint the objects with dark tone that are further.

pasted-image-0-5

4) Turn up the opacity of the painted layer to 100% so you can see the final result.

pasted-image-0-6

It don’t look great, but it gets the job done. And we deliberately don’t have to be precise with the edges, it have to be shifted outwards to give the best result. Save the file as jpg and make sure it is of the same dimensions as the original image.

Setting Up The HTML Page:

To interpret the depth map we are using pixi.js library’s Displacement Filtre.

 

Here is the complete code. Feel free to play with the values to adjust the effect according to your liking.

 

Change the original.jpg with the filename of your original 2d image file. And change depthmap.jpg with your newly created depth map.

Demo:

 

See the Pen Mouse Follow Parallax Effect Using Depth Map by fatik (@fatik) on CodePen.


Using this method you can give subtle 3d parallax effect to 2d images in no time without running into much complexities. Thanks to Pixi library, the animations are very smooth.

 

 

 

Fatik Owais

Fatik Owais

Fatik loves to play creative roles in the development of great products at Arpatech.
Fatik Owais

Latest posts by Fatik Owais (see all)