<p>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.</p>

<p><a href="https://i.sstatic.net/u80e2.png"><img src="https://i.sstatic.net/u80e2.png" alt="enter image description here"></a></p>

<p><strong>Image 1</strong>: For each wall generate a shadow volume extrusion.</p>

<p>Quick and extremely dirty sample implementation of shadow volumes here:</p>

<ul>
<li><a href="http://webglplayground.net/saved/AeN6yoNGih">http://webglplayground.net/saved/AeN6yoNGih</a> (please do not save your own version, fork instead)</li>
</ul>

<p>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.</p>

<p><a href="https://i.sstatic.net/o2KTd.png"><img src="https://i.sstatic.net/o2KTd.png" alt="enter image description here"></a></p>

<p><strong>Image 2</strong>: Coloring the volumes based on distance to light.</p>

<p>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. </p>

<p>And here is very quickly done <em>extremely dirty</em> live example of colored shadow volumes:</p>

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

<p>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.</p>

CC BY-SA 3.0
2016-01-10T17:57:52.223Z
Thanks for the answer! But I am not looking for a simple 2D shadows algorithm (there are lots on the web), I am looking for a shadow/light algorithm that can handle volumetric fog and colored transparent surfaces (as seen in the Youtube video).
sydd
CC BY-SA 3.0
2016-01-10T18:17:25.673Z
@sydd that is just a shader on the shadow volume. Easy to extend.
joojaa
CC BY-SA 3.0
2016-01-11T17:43:40.670Z
@sydd added colored example
joojaa
CC BY-SA 3.0
2016-01-12T17:23:18.417Z
thanks, it looks nice! But as I wrote my post is about porting the algorithm I described to the GPU. Actually someone gave an answer on SO at http://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl . This answer is what im looking for, but its slow, thus I dont think that this algorithm is feasible for a real game.
sydd
CC BY-SA 3.0
2016-01-12T18:19:55.377Z
@sydd raycasting can be accelerated by precomputing the data into a better datastructure.
joojaa
CC BY-SA 3.0
2016-01-10T17:37:36.223Z
2016-01-11T17:39:42.400Z
2016-01-11T17:39:42.400Z
joojaa
<p>Since long ago I wanted to implement a 2D lightning algorithm based on an <a href="https://www.youtube.com/watch?v=74uXA7SmDqE" rel="noreferrer">idea I saw on YouTube</a>. 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.</p>

<p>The algorithm works the following way:</p>

<ul>
<li>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.    </li>
<li>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.</li>
</ul>

<p>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)?</p>

<p>Note: I am not looking for full implementations, just ideas/shader pseudocode how this would be possible.</p>

<raytracing><algorithm><shader><real-time><opengl-es>
How to implement a realtime 2D light renderer with fog/colored light on the GPU?
sydd
# How to implement a realtime 2D light renderer with fog/colored light on the GPU?

(Asked by: username_0 on 2016-01-10)

Since long ago I wanted to implement a 2D lightning algorithm based on an [idea I saw on YouTube](https://www.youtube.com/watch?v=74uXA7SmDqE). 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.

**Tags:** raytracing, algorithm, shader, real-time, opengl-es


---

## 1 answers

### Answer by username_1 on 2016-01-10. Score: 6

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.

[![enter image description here](https://i.sstatic.net/u80e2.png)](https://i.sstatic.net/u80e2.png)

**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.

[![enter image description here](https://i.sstatic.net/o2KTd.png)](https://i.sstatic.net/o2KTd.png)

**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.

> **Comments:**
> **username_0**: Thanks for the answer! But I am not looking for a simple 2D shadows algorithm (there are lots on the web), I am looking for a shadow/light algorithm that can handle volumetric fog and colored transparent surfaces (as seen in the Youtube video).  
> **username_1**: @username_0 that is just a shader on the shadow volume. Easy to extend.  
> **username_1**: @username_0 added colored example  
> **username_0**: thanks, it looks nice! But as I wrote my post is about porting the algorithm I described to the GPU. Actually someone gave an answer on SO at http://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl . This answer is what im looking for, but its slow, thus I dont think that this algorithm is feasible for a real game.  
> **username_1**: @username_0 raycasting can be accelerated by precomputing the data into a better datastructure.  

---

