Distance Functions

Your Answer

Correct Answer

Waiting...

Drawing out shapes with booleans is all well and good, but it's not very flexible. There's another technique which allows us a whole bunch of flexibility, and it's the trick behind most of the demos you'll see on Shadertoy.

Signed Distance Functions

Yep, those words probably make a lot less sense when they're put together like that.

To start: a distance function takes a point as input and returns the distance from a surface as output. In GLSL, you'd mark up a 2D Distance Function like so:

float distanceFn(vec2 position);

A signed distance function (SDF) is very similar, but it returns a negative value when it's inside the surface. You can now very quickly draw out that shape in 2D by checking if the SDF's value is less than zero.

Here's an SDF for a point at (0, 0):

length(position);

You can subtract values from the SDF to make it grow outwards. This way you can make a circle at (0, 0):

length(position) - 1.0;

Try it out with different values in the exercise!

{"bannedTokens":[],"prefix":"vec3 draw_line(float d);\nfloat draw_solid(float d);\nvec3 draw_distance(float d, vec2 p);\n","suffix":"vec3 draw_line(float d) {\n  const float aa = 3.0;\n  const float thickness = 0.0025;\n  return vec3(smoothstep(0.0, aa / iResolution.y, max(0.0, abs(d) - thickness)));\n}\n\nfloat draw_solid(float d) {\n  return smoothstep(0.0, 3.0 / iResolution.y, max(0.0, d));\n}\n\nvec3 draw_distance(float d, vec2 p) {\n  float t = clamp(d * 0.85, 0.0, 1.0);\n  vec3 grad = mix(vec3(1, 0.8, 0.5), vec3(0.3, 0.8, 1), t);\n\n  float d0 = abs(1.0 - draw_line(mod(d + 0.1, 0.2) - 0.1).x);\n  float d1 = abs(1.0 - draw_line(mod(d + 0.025, 0.05) - 0.025).x);\n  float d2 = abs(1.0 - draw_line(d).x);\n  vec3 rim = vec3(max(d2 * 0.85, max(d0 * 0.25, d1 * 0.06125)));\n\n  grad -= rim;\n  grad -= mix(vec3(0.05, 0.35, 0.35), vec3(0.0), draw_solid(d));\n\n  return grad;\n}\n","question":"uniform vec2 iResolution;\nuniform float iGlobalTime;\n\n//\n// Let's make a distance function!\n//\n// We'll start with a circle. Its center should be at\n// `point` == (0, 0), and its `radius` should match the value\n// passed into `distanceFromCircle`.\n//\nfloat distanceFromCircle(vec2 point, float radius) {\n  return 0.0;\n}\n\nvoid main() {\n  vec2 uv = 2.0 * gl_FragCoord.xy / iResolution.xy - 1.0;\n  float radius = (sin(iGlobalTime * 0.25) * 0.5 + 0.5) * 0.5 + 0.3;\n  float dist = distanceFromCircle(uv, radius);\n\n  // draw_distance is a little utility we're using from\n  // https://www.shadertoy.com/view/XsyGRW\n  //\n  // It'll draw out your distance function for you, showing\n  // negative distances in a dark orange and positive distances\n  // in yellow -> blue.\n  gl_FragColor = vec4(draw_distance(dist, uv), 1);\n}\n","solution":"uniform vec2 iResolution;\nuniform float iGlobalTime;\n\nfloat distanceFromCircle(vec2 point, float radius) {\n  return length(point) - radius;\n}\n\nvoid main() {\n  vec2 uv = 2.0 * gl_FragCoord.xy / iResolution.xy - 1.0;\n  float radius = (sin(iGlobalTime * 0.25) * 0.5 + 0.5) * 0.5 + 0.3;\n  float dist = distanceFromCircle(uv, radius);\n\n  gl_FragColor = vec4(draw_distance(dist, uv), 1);\n}\n","name":"07-distance-fields"}