logoalt Hacker News

Ray Marching Soft Shadows in 2D (2020)

160 pointsby memaligntoday at 7:31 AM28 commentsview on HN

Comments

daharttoday at 7:36 PM

Great looking demo. Someone could use this for a show’s title sequence. There’s something about the combination of soft shadows and r-squared light falloff that always tickles me.

Fun fact - you can use very similar logic to do a single-sample depth of field and/or antialiasing. The core idea, that maybe this blog post doesn’t quite explain, is that you’re tracing a thin cone, and not just a ray. You can track the distance to anything the ray grazes, assume it’s an edge that partially covers your cone (think of dividing a circle into two parts with an arbitrary straight line and keeping whichever part contains the center), and that gives you a way to compute both soft shadows and partial pixel or circle-of-confusion coverage. You can do a lot of really cool effects with such a simple trick!

I searched briefly and found another nice blog post and demo about this: https://blog.42yeah.is/rendering/2023/02/25/dof.html

opminiontoday at 9:58 AM

Note that the first image is an interactive demo. Click or touch it. (It's not obvious from the text at the time of writing)

show 2 replies
IsTomtoday at 11:55 AM

I wonder if it would help if you looked at gradient of the SDF as well – maybe you could walk further safely if you're not moving in the same direction as the gradient?

show 1 reply
flobosgtoday at 9:39 AM

Probably not that related, but the article reminded me of a shadow casting implementation on the PICO-8: https://medium.com/hackernoon/lighting-by-hand-4-into-the-sh...

ravetcofxtoday at 9:34 AM

It's always impressive to see a live demo in a technical blog post like this, especially one that runs so fast and slick on mobile. Kudos.

show 2 replies
jasonjmcgheetoday at 5:22 PM

None of the demos worked for me on mobile but he has a pinned tweet that demonstrates it

https://x.com/ryanjkaplan/status/1308818844048330757?s=46

rncodetoday at 1:41 PM

the fact that this runs butter-smooth on webgl while my company's 'enterprise dashboard' struggles to render 50 divs says everything about how much performance we leave on the table with bad abstractions

IvanK_nettoday at 4:53 PM

It reminded me this demo that I made in 2012 (computed in real time by Javascript on the CPU) https://polyk.ivank.net/?p=demos&d=raycast

aktueltoday at 1:48 PM

This is really cool! If I were to work on it, I would make the light source a bouncing ball or something similar (maybe even a fish or a bird) via some 2D physics next.

noduermetoday at 10:52 AM

This is truly a very clever series of calculations, a really cool effect, and a great explanation of what went into it. I'll admit that I skimmed over some of the technical details because I want to try it myself from scratch... but the distance map is a great clue.

ionwaketoday at 12:35 PM

this looks great but is there no demo link? maybe Im blind and missed it?

show 1 reply
cubefoxtoday at 9:35 AM

This sounds similar to radiance cascades:

https://mini.gmshaders.com/p/radiance-cascades

https://youtube.com/watch?v=3so7xdZHKxw

show 1 reply
tony-john12today at 1:06 PM

[dead]

black_13today at 8:27 AM

[dead]