Creating (faux) 3D scenes from 2D images with WebGL
As soon as I read this post about turning static images into 3D scenes I knew I had to try it for myself.
This demo uses the pixi.js WebGL renderer to do the heavy lifting, all we need to do is feed it the image we want to transform and a depth map of said image (a representation of how close objects in the scene are). Pixi.js will then create a displacement filter and shift pixels around to simulate a 3D scene. Neat!
To get the best result I recommend focusing on the text in the centre while moving your cursor around the screen.