nice! but why don't you just calculate soft shadows the way they occur physically by sampling an area light source instead of a point light source? You can basically run the same algorithm again and again with light source points in a circle from the center of the light source, then alpha-fuse them together? Am I missing something?
Ray Marching Soft Shadows in 2D
21–30 of 37 posts
Re: Ray Marching Soft Shadows in 2D
#22nice! but why don't you just calculate soft shadows the way they occur physically by sampling an area light source instead of a point light source? You can basically run the same algorithm again and again with light source points in a circle from the center of the light source, then alpha-fuse them together? Am I missing something?
There are definitely more physically accurate ways to render soft shadows, but AFAIK they all involve some kind of bounce lighting where light bounces off of objects in the scene and indirectly lights other parts of it.
This looks great when combined with area light sources, like you suggest, but in my experience it's too slow for interactive demos.
I'd love to be proven wrong on this :)
Re: Ray Marching Soft Shadows in 2D
#23nice! but why don't you just calculate soft shadows the way they occur physically by sampling an area light source instead of a point light source? You can basically run the same algorithm again and again with light source points in a circle from the center of the light source, then alpha-fuse them together? Am I missing something?
The advantage of this approach is that it achieves an approximate result in a single sample.
You might require dozens of samples to get a similar result using a multisampling technique like you describe.
Re: Ray Marching Soft Shadows in 2D
#24nice! but why don't you just calculate soft shadows the way they occur physically by sampling an area light source instead of a point light source? You can basically run the same algorithm again and again with light source points in a circle from the center of the light source, then alpha-fuse them together? Am I missing something?
There are definitely more physically accurate ways to render soft shadows, but AFAIK they all involve some kind of bounce lighting where light bounces off of objects in the scene and indirectly lights other parts of it. This looks great when combined with area light sources, like you suggest, but in my experience it's too slow for interactive demos. I'd love to be proven wrong on this :)
The parent is saying that you can simply do the hard shadow algorithm but n times, starting from n random points uniformly sampled from a disk around the original point light source, then averaging the result. The bigger the disk the softer the shadow. This is how soft shadows are often achieved in ray tracing.
Re: Ray Marching Soft Shadows in 2D
#25There’s a simple trick you can use if you want to generate the distance field for text or simple shapes in the browser. The way you do it is by repeatedly drawing the text with strokeText, varying the stroke width and the stroke color. For example, you fill the background with 100% white, and then draw a 10px stroke at 90% gray, 9px at 80%, 8px at 70%, etc. This is, most importantly, an extremely fast way to generate…
Author here. That's a neat trick! > I mention this because the mystery of the getDistance() function is often one of the tricky parts of demos like these. I agree! In the demos I use a library I wrote to generate 2D distance fields: https://github.com/ryankaplan/gpu-distance-field It's also pretty fast :)
Computing distance fields with a jump flooding approach in O(n log n) is neat, but there is a O(n) algorithm, which might be faster https://prideout.net/blog/distance_fields/
Re: Ray Marching Soft Shadows in 2D
#26Earlier quoted context omitted.
There are definitely more physically accurate ways to render soft shadows, but AFAIK they all involve some kind of bounce lighting where light bounces off of objects in the scene and indirectly lights other parts of it. This looks great when combined with area light sources, like you suggest, but in my experience it's too slow for interactive demos. I'd love to be proven wrong on this :)
The parent is saying that you can simply do the hard shadow algorithm but n times, starting from n random points uniformly sampled from a disk around the original point light source, then averaging the result. The bigger the disk the softer the shadow. This is how soft shadows are often achieved in ray tracing.
Ah, thanks for clarifying! I think someone already called this out above, but the benefit of the approach I describe is that you only need one sample per pixel. Four samples per pixel starts to feel pretty slow on my machine, and I suspect you'd need more than that to make the averaging approach look good.
Re: Ray Marching Soft Shadows in 2D
#27Earlier quoted context omitted.
Author here. That's a neat trick! > I mention this because the mystery of the getDistance() function is often one of the tricky parts of demos like these. I agree! In the demos I use a library I wrote to generate 2D distance fields: https://github.com/ryankaplan/gpu-distance-field It's also pretty fast :)
Computing distance fields with a jump flooding approach in O(n log n) is neat, but there is a O(n) algorithm, which might be faster https://prideout.net/blog/distance_fields/
Neat! In my experience jump flooding on the GPU is faster than any CPU side approach for images bigger than a few hundred pixels. It's O(n ^ 2 log n) which sounds really expensive, but it requires just O(log n) draw calls.
The link you provided also describes a GPU amenable approach, but it says that jump flooding on the GPU is faster.
> For a more efficient GPU-amenable method, see also jump flooding by Rong and Tan. Their method generates a closest point coordinate field from which a distance field can be derived.
Re: Ray Marching Soft Shadows in 2D
#28Not to keep flogging my own work, but something kinda similar is my blurred rounded rectangle shader[1]. That is super-fast and produces very nice smooth shadows, but is limited in the shapes it can blur because it uses tricks that make a lot of assumptions about them. I also prototyped light sources other than gaussian, specifically disk, and I think that generalizes pretty well.
Given that the original article is blurring glyphs, one thing that might be worth exploring is decomposing the glyph into primitive shapes. For example "b" can be a rect for the stem, an ellipsoid for the main bowl, and another ellipsoid (with negative sign) for the inner countour of the bowl. It doesn't have to be perfect because you're only rendering the blurred shapes. And no doubt you could have some kind of automated process that refines the decomposition when it can use more primitive shapes.
Though our techniques are different, it's interesting (and not terribly surprising) that they both use some of the same techniques under the hood, specifically distance fields, and that we cite some of the same people.
I should mention that of course shadows and blurs are not the same thing, but sometimes you can use one for the other in a pinch :)
[1] https://raphlinus.github.io/graphics/2020/04/21/blurred-roun...
Re: Ray Marching Soft Shadows in 2D
#29nice! but why don't you just calculate soft shadows the way they occur physically by sampling an area light source instead of a point light source? You can basically run the same algorithm again and again with light source points in a circle from the center of the light source, then alpha-fuse them together? Am I missing something?
If you want to run this in real time on a phone, ray tracing is expensive.
Re: Ray Marching Soft Shadows in 2D
#30reminded me of this other tutorial:
https://www.redblobgames.com/articles/visibility/
it's been around for a while now, 2012 I guess