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!

source image
I chose an image from one of my favourite games of the early 2000s, Halo. Image courtesy of halopedia.org
depth map
And the corresponding depth map I quickly put together

To get the best result I recommend focusing on the text in the centre while moving your cursor around the screen.

View demo