In this tutorial you’ll learn how to create an interactive fake 3D image effect for images with depth maps and plain WebGL.
If you use Facebook, you might have seen the update of 3D photos for the news feed and VR. With special phone cameras that capture the distance between the subject in the foreground and the background, 3D photos bring scenes to life with depth and movement. You can recreate this kind of effect with any photo, some image editing and a little bit of coding.
Usually, these kind of effects would rely on either Three.js or Pixi.js, the powerful libraries that come with many useful features and simplifications when coding. Today you won’t use any libraries but go with the native WebGL API.
Tags: #3D, #Code, #Hover, #Interactive, #Javascript, #Tutorial, #Web Design, #Web Development
