跳到主要内容
← Signed Distance Field

Signed Distance Field

SDF Circle

shader-learning 自学第 1 课:SDF Circle

实时渲染 · 2D 片段 GLSL

第 1 课:SDF Circle

实现

uniform vec2 iResolution;

const vec3 shapeColor      = vec3(1.0, 0.3, 0.3);
const vec3 backgroundColor = vec3(0.12);

float sdfCircle(vec2 center, float r, vec2 pos) {
  return distance(pos,center)>r? 1.0:0.0;
}

void main() {
  vec2 uv = gl_FragCoord.xy;

  float t = sdfCircle(iResolution * 0.5, iResolution.y * 0.4, uv);
  t = clamp(t, 0.0, 1.0);

  gl_FragColor = vec4(mix(shapeColor, backgroundColor, t), 1.0);
}