Geometry Shader-based 2D Shadows

Controls: Left mouse button: Move objects. Middle mouse button: Spawn new light. Right mouse button: Delete light.

The Algorithm

For the lecture Image Synthesis at the TU München, I adapted the two algorithms shadow volumes and shadow mapping for the use in 2D scenes. In the canvas above you can test one of the two algorithms - shadow mapping. At first I implemented the two algorithms using C++ and OpenGL. My implementation makes use of geometry shaders and layered depth maps for performant rendering.

However, unfortunately neither of these two features are supported in WebGL so far. Thus, the WebGL widget you can find above does all vertex processing on the CPU and only implements shadow mapping. The JavaScript implementation above uses tricks proposed by the following article to bypass the lack of depth maps in WebGL 1: https://csantosbh.wordpress.com/2014/03/29/2d-omnidirectional-shadow-mapping-with-three-js/

Documents

Slides of my talk for the lecture Image Synthesis at TU München
Source code of the C++ implementation on Github

Videos