Real-time 2D shadows with WebGL

Lighting and shadows can add a lot of depth to 2D rendering. This tutorial will show you a simple approach to the math and shaders I used to generate shadows in WebGL.
== Links ==
Source code
github.com/jordwest/2d-shadow...
twgl.js
twgljs.org/
2D Visibility by Red Blob Games
www.redblobgames.com/articles...
WebGL Fundamentals
webglfundamentals.org/
Godot game engine
godotengine.org/

[@unformedvoid2223]

Omg I was playing around like this with lighting shaders in Game Maker 8.0 almost ten years ago! And I was using exactly the same technique with shadows! What a nostalgic feeling. Great video!

[@mraine9266]

Great video. Dynamic lighting always seemed like a black magic, so it’s great to know it’s actually pretty easy

[@mharti7984]

Awesome, exactly what I needed.

[@nosh5935]

i've been coding in javascript for about a year now and am studying to become a professional with it. a lot of my classes have revolved around p5.js, which is a great library, but seeing stuff like this simply put just makes me simultaneously excited about coding and also so aware of how little i know
great job, i love these videos, amazing work. i genuinely feel inspired to make things because of them

[@JordanWest]

That's awesome, creative coding you can get excited about is definitely the best way to learn

[@al20ov87]

Excellent video!

[@chenchen1256]

nice job, I love it,

[@debonairrose]

beautiful music

[@ynxinl2555]

Magic~

[@flameofthephoenix8395]

I've thought of a method similar to this to get a double shadow effect, although it's not been tested yet.

[@chris_burrows]

Thank you, that was really helpful, but what specifically were the pitfalls you mentioned earlier about this approach? It seems like it out performs the raycast method every time no?

[@JordanWest]

One potential issue is that you're wasting a bunch of triangles for walls that are behind other walls. Probably not an issue in most cases, but if you have a lot of walls it might mean extra load on the GPU. Though iterating through all the walls on the CPU to calculate lit areas could be slow too!

[@flameofthephoenix8395]

@@JordanWest This could I believe be fixed by taking the sum of the area of the triangles, and seeing which sum is smaller, then checking if the small sum is entirely inside the large sum, and if it is you have to not render the small sum shadow.

[@flameofthephoenix8395]

You can easily check if a triangle fits in another one, by taking each point on the triangle and checking if it is in the other triangle.

[@flameofthephoenix8395]

@@SheepUndefined So, how does that relate to what I said?

[@The-cyber-imbiber]

Madness

[@The-cyber-imbiber]

Thanks for the video, very great stuff!

[@Eltaurus]

What is the name of the vector graphics editor in the video?

[@Fine_Mouche]

and what was the real time to code this ?

[@oamioxmocliox8082]

;)

[@D-K-C]

Ъ