[2D] Blocking camera vision using obstacles

Questions
,
1

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:


Credit: Ninja vs EVILCORP

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/

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:

2

The problem is that I cannot cast rays to all directions (only limited degree and distance).

Yes, three.js cameras are based on projection so they can always see much less than 180 degrees, but you could use 4 x 90deg cameras, or 3 x 120deg, or rotate one camera to cover 360 degrees. That would be the easy approach.

Or make your own special camera (I had made a distortion-free 180deg camera once in Flash, then combined two of them for 360 degrees for 3D spherical view, but I have yet to translate it to three.js code).

Or it might be possible to make a shader for speed.