Pseudo 3D Compute Shader

 
TDMovieOut.2.jpg
 
 

The Idea

Inspired by an everyday artwork by beeple I wanted to create a pseudo 3D shader. This shader  uses basic 2D vector maths to create an 3D illusion. 

 
 
 

 
principles.png

The Algorithm

This explanation can better be understood with some basic knowledge about fragment shaders. I am using GLSL 4.5.

  1. A pixel at random location is filled with red color. (Dark-red in illustration)
  2. Each time the shader detects a red pixel, it will generate a vector using a random length and choosing from 6 directions. The limitation to 6 directions is responsible for the pseudo 3D look. Pixels along this vector are filled green using a basic line drawing algorithm. The original red pixel will be deleted (filled with black) so it wont trigger this function again. The pixel at the end of the vector is filled red. This will trigger the function described here in the next frame. 
  3. Each time a green pixel is detected, the algorithm will repeat the exact same function described in step 2, with the execption of filling the final pixel red. In addition there is a stepping function added, meaning not all the pixels along the vector are filled yellow, but only the ones along a certain distance. The remaining length of the vector is then saved in the pixel information of the blue square, and allows another function, triggered by blue pixels, to continue drawing yellow pixels. This process is then repeated until all the pixels along the vector are filled yellow. 

Of course, this is a simplification of the process.