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 :)
Re:Ray Marching Soft Shadows in 2D
by johndough on Wednesday September 23, 2020 @05:44PM
(#24572451)
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
by tiborsaas on Wednesday September 23, 2020 @03:28PM
(#24570928)
I don't get it how would this help you to write a function to get distance to a shape from any point on a canvas.
Edit: oh wait, you measure the pixel color :) nice
Re:Ray Marching Soft Shadows in 2D
by moron4hire on Wednesday September 23, 2020 @03:25PM
(#24570898)
That is really awesome, thank you.
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 a distance field for text from JavaScript in the browser.
I mention this because the mystery of the getDistance() function is often one of the tricky parts of demos like these.