How to implement a realtime 2D light renderer with fog/colored light on the GPU? Since long ago I wanted to implement a 2D lightning algorithm based on an idea I saw on YouTube. The video is realtime, but it runs on the CPU and the resolution is pretty low. I'm curious if anyone has an idea how to do this on the GPU.

The algorithm works the following way:


We have light data maps, these hold the color of the material (e.g. a red glass has 0xFF0000) and how transparent that pixel is.    
Work out the light values of each pixel in growing circles from a light source. In other words, first calculate values right next to the light (8 pixels), then the neighbours of these pixels and so on. The color of a pixel is its value from the lightning data map, its alpha equals: (alpha of the pixel next to it closest to the light source - own alpha). So it is some kind of ray casting algorithm that calculates value for each pixel and can handle colored glass and fog/smoke.


So the CPU implementation is pretty trivial. My problem is that I want to use this in a mobile game, but I don't know how this would work as a shader.
How can this be implemented on the GPU (that would run on mobile, so with OpenGL ES 2.0/3.0, maybe with Metal - if this is not possible then with OpenCL/CUDA)?

Note: I am not looking for full implementations, just ideas/shader pseudocode how this would be possible.
If your wall geometry is vector graphics you can simply extrude the segment away from the light position. This means 2 triangles per draw call, all the extrusion offsets can  can be handled in the vertex shader.



Image 1: For each wall generate a shadow volume extrusion.

Quick and extremely dirty sample implementation of shadow volumes here:


http://webglplayground.net/saved/AeN6yoNGih (please do not save your own version, fork instead)


Now since your shader can color the triangles as they see fit you can apply a shader on the triangles that is colored. Just like you would render transparent surfaces. To do this proper you may need a offscreen buffer for getting a proper color accumulation mode.



Image 2: Coloring the volumes based on distance to light.

Certainly the coloring algorithm may be whatever you like. for example the color could become darker the nearer you are to the extrude edge etc. 

And here is very quickly done extremely dirty live example of colored shadow volumes:


http://webglplayground.net/saved/9xgxDbtY7f (please do not save your own version, fork instead), very bad code style done on the run (and on my phone).


This is just one way hopefully others will elborate. You can also use the exact same methods as you would in 3d. As for nonuniform fog, you could just use a raymarcher.