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.
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?
I’ve seen a paper about this, I’ll see if I can dig up a link. I believe you’re right and the answer is yes it can help, but it can be complicated to prove what’s safe or not. The gradient tells you about the orientation of the nearest surface, but doesn’t tell you how fast the orientation is changing, so for nonlinear shapes you need to look at higher order derivatives too. Super interesting stuff, but somewhat gets in the way of the pure elegant simplicity of basic ray marching.
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
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.
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!
Awesome demo page!
SDFs are super fun, and usually pretty useful (in addition to being pretty)
I recall a paper published by Valve that showed their approach to using SDFs to pack glyphs into low res textures while still rendering them at high resolution:
Here is a 2023 presentation on the implementation of screenspace contact shadows for Days Gone by Bend Studios, it uses a clever variation on this basic technique. I'm not sure it scales as well to many lightsources though.
18 comments
[ 0.30 ms ] story [ 68.4 ms ] threadhttps://mini.gmshaders.com/p/radiance-cascades
https://youtube.com/watch?v=3so7xdZHKxw
edit: here’s one. I’m not sure this is the one I was thinking of, but I think it does validate your hypothesis that you can reduce the number of steps needed by looking at gradients. https://hal.science/hal-02507361/file/lipschitz-author-versi...
https://x.com/ryanjkaplan/status/1308818844048330757?s=46
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
I recall a paper published by Valve that showed their approach to using SDFs to pack glyphs into low res textures while still rendering them at high resolution:
https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007...
https://jsfiddle.net/i_e_b/9kLro7ns/
https://youtube.com/watch?v=btWy-BAERoY&t=1929s&pp=2AGJD5ACA...