Jump to content

Raycasting and inverse masking

Recommended Posts

I'm aware this question has been asked dozens of time already, sorry about that 😇

I'm looking to implement a classic field of view in my game, with a fog of war hiding game elements, for that I've been thinking of using an "obfuscating" element (a PIXI.Graphics reactangle) covering the whole game stage, coupled to a pretty classic 2d-visibility algorithm, here's what I managed to have on my scene:


The lines are representing the triangles being drawn, the yellow area is what I want to reveal to the player, any entity outside of that area should be hidden (behind the obfuscating graphic). My issue is pretty much on how masking works: using that yellow area as my mask I'd effectively need to "reverse" the masking, displaying only the Graphic outside of the mask.

I'm using Pixi 5.3.3, what's the best approach to that? The older solutions I've found looks outdated (pre 5.0), I don't really know where to start here.

Link to post
Share on other sites

i cant really help you, i never try this kind of feature with PIXI ,but i can just refer you to a list of demo codepen, jsfiddle ,Shadertoy 

is this can help to get some inspiration ! they have really good math logic to learn this.

it's true that it would be great to have a demo on Pixi or a easy plugin for raycast.
For now only demo with Canvas or pure webgl.

Edited by jonforum
Link to post
Share on other sites

Hi @jonforum thanks once again for your insight

I've been playing a bit with blend mode and while I'm still not there yet I managed to have that render, I'm not going to use it and it's not optimized at all but I think it looks cool 😁

Still experimenting with blend modes this time to see how I can "substract" areas out of the overlay.

Link to post
Share on other sites

You could make a filter that takes the world texture as input and the light mask as input and then just draw the world if light has value at that same position. And otherwise keep value hidden.

Something like this:

vec4 world = texture(worldTex,uv);
float light = texture(lightTex,uv).a; //Using only one channel for light, this could also be light color + alpha for intensity
gl_FragColor = mix( vec4(0,0,0,1), world, light);

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...