第 8 课：Gradient Noise Animation

实现

uniform vec2 iResolution;
uniform float iTime;

vec3 random3(vec3 st) {
  float d1 = dot(st, vec3(12.3, 32.1, 21.3));
  float d2 = dot(st, vec3(45.6, 65.4, 54.6));
  float d3 = dot(st, vec3(78.9, 98.7, 87.9));

  st = vec3(d1, d2, d3);
  return fract(sin(st) * 14.7) * 2.0 - 1.0;
}

float noise(vec3 st) {
  vec3 i = floor(st);
  vec3 f = fract(st);

  vec3 u = smoothstep(0.0, 1.0, f);

  float d1 = dot(random3(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0));
  float d2 = dot(random3(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0));
  float d3 = dot(random3(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0));
  float d4 = dot(random3(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0));

  float d5 = dot(random3(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0));
  float d6 = dot(random3(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0));
  float d7 = dot(random3(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0));
  float d8 = dot(random3(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0));

  float m1 = mix(mix(d1, d2, u.x), mix(d3, d4, u.x), u.y);
  float m2 = mix(mix(d5, d6, u.x), mix(d7, d8, u.x), u.y);

  float result = mix(m1, m2, u.z);

  return result;
}


void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  vec2 ratio = vec2(iResolution.x / iResolution.y, 1.0);

  float noiseValue = noise(vec3(uv * ratio * 4.0, iTime * 0.5)) * 0.5 + 0.5;

  gl_FragColor = vec4(vec3(noiseValue), 1.0);
}