3 ms·
From Shader to Metaball
- tehsauce 5y agoAnyone 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?
- fyrn- 5y agoYeah, I've done a lot with SDF, and I don't know what they mean. I guess SDFs and ordering are tengentially related..
- Sidnicious 5y agoI 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.
- Jasper_ 5y agoThe 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.
- jzting 5y agoNice, I did a generative art project last year exploring similar ideas: https://www.artblocks.io/project/62 https://www.artblocks.io/project/62
- Whitespace 5y agoAny 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.
- jzting 5y agoMatt has some good courses: * https://frontendmasters.com/courses/canvas-webgl/ https://frontendmasters.com/courses/canvas-webgl/ * https://frontendmasters.com/courses/webgl-shaders/ https://frontendmasters.com/courses/webgl-shaders/
- edge17 5y agoThese look really cool
- Tade0 5y agoThe go-to place for this: https://www.shadertoy.com/ https://www.shadertoy.com/ Some really good creations there - all with source code.
- aliswe 5y agoit's a shame the article ended just as it was getting really interesting!
- animal531 5y agoThe result looks very pleasing to the eye.