# How to give a circular FOV effect around the character with raycaster?

**URL:** <https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216>\
**Category:** Phaser 3\
**Created:** [August 26, 2022, 2:27am UTC](https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216 "2022-08-26T02:27:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![muice](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/muice/32/6822_2.png) [@muice](https://phaser.discourse.group/u/muice)\
**Post date:** [August 26, 2022, 2:27am UTC](https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216/1 "2022-08-26T02:27:18Z")

</div>

I want to use raycast like YouTube videos on this link to give a circular view around the character.  
I’m developing using the phaser-raycaster library, and I need help in creating a function that limits the field of vision to a circle.

[![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/edbac7682261b0567f16c2e731b9c7b1f9df2bfc.jpeg)](https://www.youtube.com/embed/rQG9aUWarwE)

This ray reaches the end of the map without hitting the pink circle.  
sample code [[link]](https://codepen.io/wiserim/pen/RwWZdLw)

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3588417e7f893283ba0d27b82b8562fbd0c8866f.png)

what i want

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d3fef854a804f0f7e703869fba405519003909b0.png)

my one

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3883699e59aa85f844ccfb38d8aaef30dc67f37a.png)

sorry for my bad english

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 28, 2022, 5:30pm UTC](https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216/2 "2022-08-28T17:30:11Z")

</div>

Maybe you have to put the origin inside a polygon obstacle.

https://codepen.io/samme/embed/preview/rNdEMQP?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=rNdEMQP

https://codepen.io/samme/embed/preview/qBozJYa?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=qBozJYa

---

<div class="post-metadata">

**Author:** ![muice](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/muice/32/6822_2.png) [@muice](https://phaser.discourse.group/u/muice)\
**Post date:** [August 30, 2022, 6:48am UTC](https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216/3 "2022-08-30T06:48:40Z")

</div>

wow

Samme, thank you.  
Thanks to your help, I was able to make it this far.  
My last task is now to blur the edges of the polygon.  
and i want make the objects in the small circle area visible from the code below.  
If you look at my code, you know what I’m trying to do.  
https://codepen.io/scm1400/embed/preview/GRxVERx?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=GRxVERx

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 31, 2022, 5:43pm UTC](https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216/4 "2022-08-31T17:43:52Z")

</div>

For the blur I think you can draw the intersections graphics onto a render texture and apply a postFX filter. I don’t have quite the right filter though.

https://codepen.io/samme/embed/preview/gOzYgvd?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=gOzYgvd

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 1, 2022, 3:06pm UTC](https://phaser.discourse.group/t/how-to-give-a-circular-fov-effect-around-the-character-with-raycaster/12216/5 "2022-09-01T15:06:37Z")

</div>

Got help from Rich:

https://codepen.io/photonstorm/embed/preview/MWGgOog?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MWGgOog