跳到主要内容
← Signed Distance Field

Signed Distance Field

SDF Translate

shader-learning 自学第 2 课:SDF Translate

实时渲染 · 2D 片段 GLSL

第 2 课:SDF Translate

实现

uniform vec2 iResolution;
uniform float iTime;

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(center, pos) - r;
}

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

  float radius = iResolution.y * 0.4;
  float speed = radius * 2.0;
  float start = -radius;
  float deltaX = mod(speed * iTime, iResolution.x + radius*2.0);

  vec2 center = vec2(start + deltaX, 0.5 * iResolution.y);

  float t = sdfCircle(center, radius, uv);
  t = clamp(t, 0.0, 1.0);

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