Tips for 2D fog of war implementation

[Jarrlist]

Hello,

Background:
I have a prototype of a game.
It's kind of a TopDown/RTS/Tower-defence/open-world kind of thing, with a procedurally generated map.

I have created a LineOfSite (LOS) component, that some entities have, In the update loop i query this component to figure out witch parts of the map I have vision of, then I can spawn enemies outside of the range etc.

I have leaned on bevy_ecs_tilemap quite heavily, and for fog of war what I do is going through all loaded tiles, and dim the color of the tile if it is outside of LOS.

In this way I can make enemies outside of LOS invisible, and dim the tiles to communicate where the edge of LOS is, which is what I want.

What I want to do
This is obviously an incredibly inefficient way of doing this, so what I wanted to do is solve this using shaders.

The idea was to put a transparent black color on the top layer of the camera, generate Circles from the LOS calculations and combines those (Union), then us this as a mask for the black color.

In this way I do not have to loop over tiles and can better use out of the GPU,
The fog gets smooth lines, and I can possibly even add some fade between LOS and no-LOS.

But I could not figure out a good way of doing this / get it working.

I saw bevy_fog_of_war, by foxzool, but that plugin seems a bit to advanced for the simple thing I am trying to do.
I am just trying to put a transparent color "in fromt of" the camera and mask it using shapes I calculate in run time.

Question:
Does anyone have suggestions for how I should go about this?
I just want to be pointed in the right direction.