<p>In this <a href="http://gmrv.es/Publications/2016/CMTKPO16/main.pdf" rel="nofollow noreferrer">SIGGRAPH paper</a> is described a similar operation for the visibility calculation from every pixel in the domain (you only need calculate it from actors position), which has been implemented in GPU. </p>

<p>Although it is oriented to fluid dynamics, it may be a starting point to look.</p>

<p>You can see other related shader examples like <a href="https://www.shadertoy.com/view/4d2SzG" rel="nofollow noreferrer">this one</a> with implicit geometry.</p>

CC BY-SA 4.0
2019-04-02T20:27:54.113Z
Thanks, I will take a look. In the meantime I have made use of https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas with decent results, offloading the heavy work into a WebWorker Thread.
Jonathan
CC BY-SA 4.0
2019-04-01T15:42:08.473Z
2019-04-01T15:42:08.473Z
David
<p>I am currently working on an algorithm to calculate visibility in a 2D top-down level.</p>

<p>The level contains</p>

<ul>
<li>actors, with <code>position</code> and "sight" information</li>
<li>walls, with <code>start</code> &amp; <code>end</code> positions</li>
<li>light sources, with <code>position</code> and <code>range</code></li>
</ul>

<p>I have written a fragment shader that renders my scene based on a texture I compose of the informations above.</p>

<p><a href="https://i.sstatic.net/rnsp4.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/rnsp4.png" alt="basic line of sight calculation"></a></p>

<p><a href="https://i.sstatic.net/wrNqK.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/wrNqK.jpg" alt="Left side: my level rendered, right side: the actual texture that is fed to the shader"></a></p>

<ul>
<li>Red channel = line of sight for actors (in the example just the selected token is an actor)</li>
<li>Green channel = light sources with their range and their respective line of sight</li>
<li>Blue channel (not present in example) = night-vision of actors (means areas are shaded despite no light present)</li>
</ul>

<p>I am using <a href="https://github.com/BabylonJS/Babylon.js/" rel="nofollow noreferrer">Babylonjs</a> and am naively rendering all those calculations one after the other into a DynamicTexture using the canvas 2d context.</p>

<p>Can I use the GPU for some of these calculations (or all?) I am no expert for shader programming and don't know where to start / look.</p>

<p>The code for my line-of-sight calculation can be found here: <a href="https://gitlab.com/aiacta/visibility" rel="nofollow noreferrer">https://gitlab.com/aiacta/visibility</a></p>

<shader>
2D Line of Sight + Visibility Calculations
Jonathan
# 2D Line of Sight + Visibility Calculations

(Asked by: username_0 on 2019-03-26)

I am currently working on an algorithm to calculate visibility in a 2D top-down level.

The level contains

* actors, with `position` and "sight" information
* walls, with `start` & `end` positions
* light sources, with `position` and `range`

I have written a fragment shader that renders my scene based on a texture I compose of the informations above.

[![basic line of sight calculation](https://i.sstatic.net/rnsp4.png)](https://i.sstatic.net/rnsp4.png)

[![Left side: my level rendered, right side: the actual texture that is fed to the shader](https://i.sstatic.net/wrNqK.jpg)](https://i.sstatic.net/wrNqK.jpg)

* Red channel = line of sight for actors (in the example just the selected token is an actor)
* Green channel = light sources with their range and their respective line of sight
* Blue channel (not present in example) = night-vision of actors (means areas are shaded despite no light present)

I am using [Babylonjs](https://github.com/BabylonJS/Babylon.js/) and am naively rendering all those calculations one after the other into a DynamicTexture using the canvas 2d context.

Can I use the GPU for some of these calculations (or all?) I am no expert for shader programming and don't know where to start / look.

The code for my line-of-sight calculation can be found here: <https://gitlab.com/aiacta/visibility>

**Tags:** shader


---

## 1 answers

### Answer by username_1 on 2019-04-01. Score: 1

In this [SIGGRAPH paper](http://gmrv.es/Publications/2016/CMTKPO16/main.pdf) is described a similar operation for the visibility calculation from every pixel in the domain (you only need calculate it from actors position), which has been implemented in GPU.

Although it is oriented to fluid dynamics, it may be a starting point to look.

You can see other related shader examples like [this one](https://www.shadertoy.com/view/4d2SzG) with implicit geometry.

> **Comments:**
> **username_0**: Thanks, I will take a look. In the meantime I have made use of https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas with decent results, offloading the heavy work into a WebWorker Thread.  

---

