From Shader to Metaball | Hacker News Reader

From Shader to Metaball

shud.in

31 pointshunvreus11 comments

Open articleView on HN

Anyone else confused by the end where it mentions SDFs, says

> if you write JavaScript, I think you are already familiar with the idea:

then shows sorting an array with pairs of elements a and b in javascript and says

> And we are calling it “signed distance from b to a”.

what do SDFs have to do with sorting an array?

Yeah, I've done a lot with SDF, and I don't know what they mean. I guess SDFs and ordering are tengentially related..

I think what the author's getting at is that the function you pass to JavaScript .sort() just returns a number — not special sentinel values — which represents the relative order of two items in the array. By calling that function strategically from a loop, .sort() can sort the array.

Similarly, an SDF returns a number that represents how far a point in 3D space is from an object's surface. And, by calling that function strategically from a loop, you can draw a 3D scene using only that function.

The difference is that .sort() only uses the sign of the return value and ignores the magnitude. Ultimately, all the sort algorithm needs is the boundary condition, e.g. a comparator. The SDF equivalent needs both the sign (is this point inside or outside of this implicit surface), alongside the magnitude, to determine the closest hit.

I don't see how they're that interlinked other than saying that signed distance functions are a subset of comparators.

Nice, I did a generative art project last year exploring similar ideas: https://www.artblocks.io/project/62

Any recommendations for doing generative art with shaders on the web?

I've been doing some 2D stuff in Processing, but it's very slow, as the CPU doesn't have the same parallelism as the GPU.

Matt has some good courses:

* https://frontendmasters.com/courses/canvas-webgl/

* https://frontendmasters.com/courses/webgl-shaders/

These look really cool

The go-to place for this:

https://www.shadertoy.com/

Some really good creations there - all with source code.

it's a shame the article ended just as it was getting really interesting!

The result looks very pleasing to the eye.

Reply on news.ycombinator.com