Line of sight triangles in v5

[timetocode]

Congrats on v5 you awesome people!

So a long time ago  I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links.

Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain

Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight

It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/

To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it.

It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook.

TY TY

[jonforum]

hum, if am not wrong, this kind of stuff should be done in a shader to get good performance.
Di you check work of this guys.
https://tarvk.github.io/pixi-shadows/build/demos/system/
https://github.com/TarVK/pixi-shadows
i think it similar of what your target? a kind of Ray casting.
Also @ivan.popelyshev show here how proceed with a kind of ray shadow from a source with shaders.
Maybe play with can inspire you.
https://www.pixiplayground.com/#/edit/5bqI8BM2qadFFt8eCWc7n
 

Quote

mask/subtract the triangles generated in canvas

... this will mean, high cpu work instead of gpu ?

hope those link can't help you.
Also if you can share some code this will help to understand.

[timetocode]

On a visual level pixi-shadows is very similar, the main issue is the performance. I'm definitely doing a form of raycasting, but with heavy optimizations. I'm targeting integrated gpus and mid-level chromebook cpus

I've already got a huge speed increase (maybe 1000x) via an algo that generates triangles by casting rays from the center of the player to the known vertices of obstacles in a spatially-culled sub-section of the whole game world.  Here's what the triangles look like:

The challenge is using these triangles to get the right visual result in a way that is also fast. The triangles unfortunately are the visible area as opposed to being the shaded area which in the past meant that instead of drawing the triangles directly onto the game, I ended up subtracting the triangles from a darkened overlay to create this effect:

Here's it a little fancier with dithered look, and also some shadows long the edge of walls generated a different way:

Everything above was made as a hybrid of canvas compositing operations generating textures that then were combined with pixi and it run quickly but creates too much GC pressure due to generating textures every frame. Maybe I should try a mesh....? Or manual addition of triangles via webgl? I need to draw 10-50 triangles per frame, dynamically and potentially entirely different one frame to the next. I also need a sane way to place these triangles in the scene such that they line up with the obstacles in a game with a giant world and a moving camera. I have no idea how to line up the vertices of a mesh in gpu coordinates with the x,y coordinates of the stuff in my pixi containers.

It would also be ideal if the triangles could be used for masking or reverse-masking (e.g. an object that is partially covered by the shadow is partially cropped by the shadow) but I could live without that as I do this manually at the moment.

I'm not shy about math or learning a bit of webgl, so I am open to suggestions.

[Exca]

I have done similar thingie with v3, though it was heavily optimized with assumptions about what kind of lights there were, what was the world size etc.

What I did in short was this:

- Build a texture (2048x2048) with all the shadow casters in it.
- For each light, do a raycast to 512 directions (on gpu) and build a 1x512 texture with each pixel value telling how long the light can go from that point.
- Render lights using that texture (calculate angle, check if distance is over the value in texture, if it is, ignore pixel, otherwise draw light with light settings).
- Draw lights into a single texture and blend that with diffusetexture.
- Split the lights into static & dynamic groups for performance.

That solution also included normal mapping but in this case that's not needed. Maximum world size was 2048x2048 in this case, as everything had to fit inside a single texture.

[Exca]

The method was based on this: https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows

[jonforum]

It reminds me of what has been implanted in this game.
https://ncase.me/sight-and-light/


I suppose that you have already got your hands on these articles, I share them in case.

it in canvas no pixi but it will be cool to see this in pixidemo ! 

a codepen **
https://codepen.io/xno/pen/YOQZzw
https://codepen.io/pandaec/pen/rzxYNB

a jsfiddle **
http://jsfiddle.net/nLMTW/
http://jsfiddle.net/s2un50dp/

Shadertoy ** best performance i think
https://www.shadertoy.com/view/4dfXDn

Some code for do it in a shader GLSL 
https://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl
and a very good article 
https://www.redblobgames.com/articles/visibility/

[ivan.popelyshev]

Sorry guys, too many things on me, but it looks like @jonforum already gave good references.

[timetocode]

Some good stuff, and yea the canvas-punch-out style lighting is nearly identical to what I have. I'll try and learn enough about meshes to make the same thing out of a pixi mesh instead of out of canvas + compositing triangles. I already have all of the triangles, and a mesh is just indices and uvs...how hard could it be right??? Famous last words..

That shadertoy lighting is sooo nice looking lol. I'm not sure if I could legitimately go down that path as the triangles for me are generated in javascript and used within the game logic (not just for rendering). Though that looks so nice it is tempting to try to figure out an alternative. 

[ivan.popelyshev]

Still on vacation. I cant check the example, but it sounds like you need custom shader and attributes, like in https://pixijs.io/examples/#/mesh/triangle-textured.js

[ElliePanda]

If you need a good simple example of using shaders with RenderTextures and meshes, this one posted on another thread has let me get my project up and running:  https://codepen.io/ivanpopelyshev/pen/jOWLjKd