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
