hello and welcome to red stapler Channel in this tutorial we are going to show
you how to create a 3d effect from just one photo using javascript and pixi.js
WebGL library let's check it out
so in order to turn the photo into 3d one we need to use a depth map like the
name said that map is an image file that showed the depth of each pixels in 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 on their
distance and then we'll pass the depth map for processing and get the final result
like this one this is the same technique with previous video that I have created
a water ripple effect check the tutorial on our channel if you are interested now
for this tutorial again we will use pixi.js a 2d WebGL library you can
use native WebGL if you like but it will be much faster and easier with the
library let's start with download the latest version and included to the page
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 are 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 and now the next step is to create a depth map or
some would call displacement map or a height map I'm going to use Photoshop to
create it first open the original image then create a new layer and fill it with
black color then reduce the opacity so you can barely see the original image
below as a guide 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 you can
adjust the layer opacity to see the result use brush with black color to
remove any excess part and here is the finished depth map but a perfect job but
it will do now the next step is to create the sprite from the depth map and
add it to the stage
then create a displacement filter from our depth map and applied to the stage
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 mouse move listener then scale
the displacement filter according to the mouse position we need to subtract the
mouse x and y position with half of the screen size so when the 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 I will also
divide the result with some static number to reduce the sensitivity you can
adjust it to your preferences and here is the final result so that's all for
this video hope you guys enjoy if you love this kind of tutorial don't forget
to Like and subscribe if you are new to this channel stay tuned for more thanks
for watching and see you next time bye