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!
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 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.
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.
