FRESH

Hacker News

Home

Ray Marching Soft Shadows in 2D (2020)

190 points by memalign

by opminion

2 subcomments

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)

by IsTom

1 subcomments

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?

by flobosg

0 subcomment

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...

by doawoo

0 subcomment

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:
https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007...

by rncode

0 subcomment

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

by dahart

0 subcomment

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

by ravetcofx

2 subcomments

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.

by jasonjmcghee

0 subcomment

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

by IvanK_net

0 subcomment

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

by noduerme

0 subcomment

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.

by aktuel

0 subcomment

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.

by ionwake

1 subcomments

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

by cubefox

1 subcomments

This sounds similar to radiance cascades:
https://mini.gmshaders.com/p/radiance-cascades
https://youtube.com/watch?v=3so7xdZHKxw

by tony-john12

0 subcomment

[dead]

by black_13

0 subcomment

[dead]