[2D] Blocking camera vision using obstacles

[jonybekov]

Hey, guys!

I want to implement camera vision which can be blocked by obstacles using three.js & react-three-fiber. Here's the result that I want to achieve:
https://user-images.githubusercontent.com/39439363/195945408-e64cc9c0-3bc7-4d8b-be0c-f7e92fe47880.mp4
Credit: https://js13kgames.com/games/ninja-vs-evilcorp/index.html

As you can see above, the yellow area is camera vision and it's not going through obstacles.

I found a couple of resources that may help to solve this problem using raycasting:
https://www.redblobgames.com/articles/visibility/
https://ncase.me/sight-and-light/

The problem is that I cannot cast rays to all directions (only limited degree and distance).
I have no idea how to do this.
I'd really appreciate your help.

Here's a sandbox for starting point:
https://codesandbox.io/s/camera-vision-with-obstacles-yelst9