introduction to Signed Distance Fields

Visualizing and explaining SDFs using Bevy, Rust, and Shaders.
Full post and visualizations here: www.rustadvent...
Examples can be found here: github.com/rus...
---
Inigo Quilez is a significant contributor to the field of SDF research.
"Greek Temple" is accessible at: www.shadertoy....
more 2d signed distance functions are available at: iquilezles.org...

[@lemmerelassal2795]

I vaguely saw SDF pop up on my front page thinking “ah this is probably the file format for molecules, irrelevant” until just now your video taught me it means signed distance field and how relevant it is to the advancement of my project, so thank you for the explanations, Chris.

[@ZackFair713]

The circle is really hypnotizing. Moving even when video is paused

[@toonspex]

You said the ray to the nearest point is a specific equation for each shape, but I think you can generalize it. You can use the partial derivative at a point of the SDF to get the slope, which should point straight towards (or away from) the nearest edge. Given that slope vector and the already known distance, you've got a ray no matter the shape.
Sampling the SDF at the mouse P, as well as a small distance away in the X and Y directions, you can calculate the dX and dY of the SDF value over those distances, which combined is your slope vector.
i.e. `dX := (SDF(P+X) - SDF(P)) / length(X)` should give the change in SDF value along the X direction. Then `normalize([dX, dY]) * SDF(P)` (may need to flip the sign) to get the ray vector from P.

[@jamesgayfer14]

This was excellent. Thank you!

[@klirmio21]

dam you really visualized it man! thanks

[@clonkex]

Idk why I watched this video, I already have a lot of experience with SDFs

[@iogamesplayer]

just dumping my question here:
do you have an exact function for terrain using fbm? one that doesn't over/undershoot?

[@Mempler]

thats a cool looking S

[@houstonbova3136]

It’s a 2. It’s backwards

[@homelikebrick42]

@@houstonbova3136 it is an S

[@morgomi]

this is a very very cool video! ❤🦀🙂

[@sudovoxel607]

Amazing video!

[@picpic4703]

I noticed that the research by Inigo Quiles was used as a reference in your video, but he was not credited. Given the depth and importance of his work, it would be greatly appreciated if you could acknowledge his contributions.

[@chrisbiscardi]

I link to his work with the license in it both on the site and I show the license in the video.
The license is shown onscreen at this timestamp, along with showing Inigo's name as the author of the relevant image: ua-cam.com/video/02xuOcu_8tk/v-deo.html
They are also linked to in the description of the video.

[@anafabula]

The examples are really cool.
Unfortunately on Firefox the canvas always seems to have a height of 168px (even in fullscreen) despite the having a height of 500px. On Chromium it looks good

[@chrisbiscardi]

Thanks for letting me know. I'm still working out some kinks in the visualization scaffolding setup.

[@alexfrozen]

It's copyright violation here. You didn't mention Inigo Quiles in whole video. If you didn't read his terms and conditions, it means nothing.

[@chrisbiscardi]

The license is shown onscreen at this timestamp if you care to read it, along with showing Inigo's name as the author of the relevant image: ua-cam.com/video/02xuOcu_8tk/v-deo.html
which includes the ability to link directly to the work with an unmodified screenshot in educational material, which is what I'm doing.