How do I create this raycast light effect via pixi? A mask maybe?

[timetocode]

I'm trying to recreate the feel of this ray cast line of sight demo. I've got the core algo working great, but I'm unsure what the best way would be to render the visible area. Specifically, if you play around with the first demo on that page, you'll see that the light source can be dragged around and reveals the map. This 'revealing of the map' is what I'm trying to do. I know how to do this via canvas composite operations -- the idea here is to turn each triangle from the line of sight algo into an image and then select a composite operation to add/subtract the triangle from the background image. How do I accomplish this effect via PIXI.js?

It sounds possible via an alpha mask -- but an alpha mask is a sprite as far as I know. I could draw all of the triangles to a canvas or texture thus programatically creating the image that represents the mask, but I don't know if this is the type of thing that I can do every frame or if it would be too slow. There may be a much easier approach that hasn't occurred me at all. Any ideas?

Here is an image of an algo I've got where line of sight is calculated from a light source. So far I am using regular pixi graphics to draw and fill yellow triangles that demonstrate the visible region. My end goal is to replace the black background with art, and then have the visible area (shown in yellow) show up more brightly than the out-of-sight area (everything black). This is fundamentally similar but a bit different than what visually occurs in the linked demo above (which fully hides everything outside of the triangles, rather than having a subtle 'fog of war' effect). I would need this effect to be realtime at 60 fps.

thank you!

[Exca]

I have made similar thing with the help of this tutorial: https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows

Basically what I do is this:
- Draw occlusion map
- Draw normals
- Draw colors
- For each light, generate occlusion map for light ( 256x1 for example) with raycasting and set each pixel to be distance to angle.
- Render the lights to lightmap containing all the lights. For each light pixel shader calculates the distance and angle to light position. If distance is larger than what the angle is in occlusion map for light then ignore that pixel. Otherwise calculate the light intensity and draw to lightmap with light color.
- Finally render everything you have with color map, light map and normals.

I've gotten to 60fps on pc and 30fps on ipad mini with that setup. On ipad I have to stop using normals though. Currently that can do infinite numbers of static lights (increases the load time, but doesn't affect time spent in renderloop) and fixed amount of dynamic lights. If occlusion map would change, then this method is not a good one.

In your case (assuming 1 light and square shadow generators) I would propably draw a lightmap with graphics tools instead of raytracing and generate texture from that. Then create a filter that takes the lightmap as input texture and combines it with the main game area. That way you would have total control on how the light gets applied.

[ivan.popelyshev]

@Exca right, its better to use filters