Create 3D Photo from Image JavaScript Tutorial

In this tutorial, we’re going to show you how to create an illusion of 3D photo from image using JavaScript and Pixi.js webGL library. Let’s check it out!

The Concept

So in order to turn an ordinary photo into 3D one, we need to use a depth map (or some would call displacement map or height map) Like the name said, Depth map is an image file that show the depth for each pixel in the 3D world. As you can see in this example, the front of the car is closer to the screen hence the bright color while the rest of the garage is darker depending their distance.

Then we’ll pass the depth map for processing and get the final result like this one. (Image credit: Oculus.com)

This is the same technique with previous video that I have created a water ripple effect.

The Code

Let’s start with download the latest version of Pixi.js and include it to the page.

<script src="pixi.min.js"></script>

Then create a pixi.js application. This is the fastest way to start using pixi.js. I’m going to pass the current viewport as the resolution. Then add it to our HTML page which the browser will see it as canvas element.

let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
document.body.appendChild(app.view);

And here is the image we’re going to add to the scene. Let’s create a sprite from the image URL and set the resolution to the current viewport. Then add it to the stage.

let img = new PIXI.Sprite.from("pikachu.jpg");
img.width = window.innerWidth;
img.height = window.innerHeight;
app.stage.addChild(img);

And now the next step is to create the depth map. I’m going use Photoshop to create it. First open the original image. Then create a new layer, fill it with black color and reduce the opacity so you can barely see the original image below.

Then select the brush with white color and 20% opacity. Start painting the area of the image that closest to the screen. The closer the more you have to highlight the area. You don’t have to be 100% accurate so don’t worry about the edges and some small details. Use brush with black color to remove any excess part.

And here is the finished depth map. Not a perfect job but it will do. (Note: Many people try to use Machine Learning to help creating depth map automatically. Here is the example)

Now then next step is to create sprite from the depth map and add it to the stage. Then create a displacement filter from our depth map and apply it to the stage.

depthMap = new PIXI.Sprite.from("pikachu-map.jpg");
app.stage.addChild(depthMap);
        
displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
app.stage.filters = [displacementFilter];

Mouse Event

Now you won’t see any 3D effect yet because we need to move the image on mouse movement. You can do that easily by adding mousemove listener.

We’ll scale the the displacement filter according to the mouse position. We need to substract the half of the screen size with mouse x and y position. So when mouse is on the right side of the screen, the result will be negative and create an illusion that the camera is moving to the right. Same goes for the left side.

window.onmousemove = function(e) {
  displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
  displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
};

I’ll also divide the result with some static number to reduce the sensitivity. You can adjust it to your preferences.

See the final result in the video below!

So that’s all for this tutorial. Hope you guys enjoy. If you love this kind of tutorial, don’t forget to follow our Facebook and subscribe our Youtube Channel. Stay tune for more. Thanks for visiting and see you next time Bye!