Raycasting and inverse masking

[Zealot]

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.

[jonforum]

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 December 3, 2020 by jonforum

[Zealot]

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.

[Exca]

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);

[Zealot]

Hi @Exca, thanks for your reply, I'll be looking into it, it may take a while since I'm a noob at shaders but I'll keep you updated!