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)
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?
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...
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.
None of the demos worked for me on mobile but he has a pinned tweet that demonstrates it
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
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
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.
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.
this looks great but is there no demo link? maybe Im blind and missed it?
This sounds similar to radiance cascades:
[dead]
[dead]
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