Fog of War for games

Resources
, ,
1

Not too long ago, I ran into a challenge of implementing Fog of War system for my game, so I wrote an article on how to implement it in Three.js

image
image800×512 162 KB

Hopefully some of you might find this useful. Questions and comments are welcome.

17 Likes
2

Good article! :+1:

1 Like
3

OMG, Chess with Fog-of-War! That would be an amazing game, where you can only see squares that your pieces can move to. :exploding_head:

3 Likes
4

Haha, that’s kind of what my game is :thinking:

…that is, if chess pieces had talent trees and could level up. Yup, pretty much the same as chess! :wink:

1 Like
5
5 Likes
6

Great article! Thanks, it solved my problem. But I’ve got 1 question. How did you do it such smooth? When I tried implement it in my game, I’ve got this:
image

Ofc it’s not bad, but if you know how can I get smoother effect I will be grateful for any suggestion.

7

That’s quite easy. A box blur. I have a custom shader to draw the fog mask, in it I sample 9 pixels instead of 1. So you get a nice smooth gradient.

8

the rendered hides mesh when transparent true is set, how to make it work?
with threejs/r128 it works

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,      // Red color
  alphaMap: texture,     // Use our mask
  transparent: true,     // Required for transparency
  side: THREE.DoubleSide // Show both faces
});
9

Maybe you looking for alphatest
Into renderer set alpha:true

10

not, i think they changed settings of transparency when updated to new version

11

Try texture of transparent flower, not data texture with luminance.