Controls: W, A, S, D to move. Q and E to strafe, Tab to view map (you can still move on the map).

Requires Firefox or Chrome (WebGL 2.0 required).

This tech demo demonstrates a shader-based 2D raycasting system, similar to the one used in Wolfenstein 3D except run entirely on the GPU instead of the CPU. Raycasting is used to create a simulated but fake 3D environment by projecting a completely 2D top down map onto the screen in such a way that it appears 3D.

Before we had dedicated graphics cards computers weren’t powerful enough to run complex 3D scenes and so techniques like this were invented to create the illusion of 3D. Wolfenstein 3D wasn’t the first game to do this but it was perhaps the most popular and made it famous. While this technique has been implemented many times over the years, to my knowledge it has never been implemented purely in fragment shaders before.

This tech demo makes use of two fragment shaders, the first calculates raycasts on a 2D map, searching in a cone ahead of the player to find how far away the walls are. The resulting information is encoded into the colour channels of two textures: one texture stores the distance to the wall, the type of wall, and where on the wall the ray hit, and the other stores lighting information. The second shader reads the textures output by the first, translates the information into 3D and renders the results to the screen.

This demo also includes several improvements over the original algorithm that are made possible by the power of modern graphics cards: Tiles on the grid can be edited in real time, allowing for moving and scaling walls, and a primitive form of real time lighting can be calculated.