Visualizing field of vision for a spy game

Questions
, ,
1

I would like to darken parts of the scene which the main character cannot see for a “spy” game. The scene is viewed from third person view. By visiblity I mean a simple 2d ray casting from player location all around (like in Commands). Similar to this demo < 2d Visibility >.

Any suggestions how to implement this?

I image the solution along following lines (everything below is just my theory):

  1. determine shape of field of vision using the algorithm from the linked site, or some other clever way. This step sounds relatively easy - if everything else fails, I can cast ~360 rays from the character standpoint for satisfactory results :slight_smile:
  2. render this polygon by WebGLRenderTarget in white against grayish background, producing a lightmap
  3. multiply fragment color by this “lightmap” (x = u, y = v), z coordinate is up/down, the game takes place on the flat xy surface

No idea idea how to implement the third step. Maybe in postprocesing? Can I access/calculate world coordinates of a fragment during post-processing?

Cheers.

2

Hey, you might find my article on fog of war helpful. It gives you a part of what you want, specifically a way to hide things.

Fog of War for games

the implementation is available on github under MIT as well:

good luck!

1 Like
3

Wow! That was fast. Unfortunately the article stops when the things gets interesting.
However, the implementation, especially the shader seems like a practical approach.

Btw, seems like a great game! It’s refreshing to see someone working on a proper game for the web, and not cheating on graphics by making it retro-themed!

1 Like