11｜GLSL 数学函数

float result = step(0.5, x);
/** x < 0.5 → result = 0.0
 *  x >= 0.5 → result = 1.0 */

float result = smoothstep(0.3, 0.7, x);
/** x < 0.3 → result = 0.0
 *  x > 0.7 → result = 1.0
 *  0.3 < x < 0.7 → 平滑过渡（Hermite 插值） */

/* Hermite 插值公式 */
float t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
float result = t * t * (3.0 - 2.0 * t);

/**
 * 圆形 SDF（有符号距离场）
 *
 * smoothstep(radius, radius - softness, d)：
 * - d > radius → 0.0（圆外）
 * - d < radius - softness → 1.0（圆内）
 * - 中间区域 → 平滑过渡
 */
float circle(vec2 uv, vec2 center, float radius, float softness) {
  float d = distance(uv, center);
  return smoothstep(radius, radius - softness, d);
}

vec2 uv = vUv - 0.5;
/* sin(uTime) 返回 [-1, 1]，乘 0.1 后变为 [-0.1, 0.1]，加到基础半径 0.3 上 */
float pulseRadius = 0.3 + sin(uTime) * 0.1;
float c = circle(uv, vec2(0.0), pulseRadius, 0.02);

float rectangle(vec2 uv, vec2 center, vec2 size) {
  vec2 d = abs(uv - center);
  return step(d.x, size.x * 0.5) * step(d.y, size.y * 0.5);
}

float hexagon(vec2 uv, vec2 center, float radius) {
  vec2 d = abs(uv - center);
  float result = max(dot(d, normalize(vec2(1.0, 1.73))), d.x);
  return smoothstep(radius, radius - 0.01, result);
}

vec3 color = vec3(0.0);
color = max(color, vec3(1.0, 0.4, 0.4) * c);  /* 红色：圆形 */
color = max(color, vec3(0.4, 1.0, 0.4) * r);  /* 绿色：矩形 */
color = max(color, vec3(0.4, 0.4, 1.0) * h);  /* 蓝色：六边形 */

uniform float uTime;
varying vec2 vUv;

void main() {
  vec2 uv = vUv;

  /** 四种渐变随时间循环切换
   *  selector = mod(uTime * 0.2, 4.0)：每 5 秒一个周期 */
  float gradient = 0.0;
  float selector = mod(uTime * 0.2, 4.0);

  if (selector < 1.0) {
    /* 水平渐变 */
    gradient = mix(0.0, 1.0, uv.x);
  } else if (selector < 2.0) {
    /* 垂直渐变 */
    gradient = mix(0.0, 1.0, uv.y);
  } else if (selector < 3.0) {
    /* 对角渐变：x 和 y 的平均值 */
    gradient = mix(0.0, 1.0, (uv.x + uv.y) * 0.5);
  } else {
    /* 径向渐变：到中心的距离 */
    vec2 centeredUV = uv - 0.5;
    gradient = length(centeredUV) * 2.0;
  }

  /* smoothstep 让渐变更柔和 */
  gradient = smoothstep(0.0, 1.0, gradient);

  /* 用 mix 混合两种颜色：gradient=0 → 蓝色，gradient=1 → 橙色 */
  vec3 colorA = vec3(0.2, 0.4, 0.8);
  vec3 colorB = vec3(0.9, 0.5, 0.2);
  vec3 color = mix(colorA, colorB, gradient);

  gl_FragColor = vec4(color, 1.0);
}

uniform float uTime;
uniform float uFrequency;   /* 波浪频率，由滑块控制，默认 10.0 */
uniform float uAmplitude;   /* 波浪振幅，由滑块控制，默认 0.3 */
varying vec2 vUv;

void main() {
  vec2 uv = vUv - 0.5;

  /* 基础正弦波：频率 × uv.x + 时间驱动相位，振幅控制高度 */
  float wave1 = sin(uv.x * uFrequency + uTime) * uAmplitude * 0.5 + 0.5;

  /* 叠加多个频率（傅里叶级数思想）：频率翻倍，振幅减半，速度不同 */
  float wave2 = sin(uv.x * uFrequency * 2.0 + uTime * 1.3) * uAmplitude * 0.25;
  float wave3 = sin(uv.x * uFrequency * 4.0 + uTime * 0.7) * uAmplitude * 0.125;

  /* 径向波浪：length(uv) 是到中心的距离，- uTime * 3.0 让波向外扩散 */
  float radialWave = sin(length(uv) * 20.0 - uTime * 3.0) * 0.3 + 0.5;

  /* 上半部分显示水平波，下半部分显示径向波 */
  float wave = 0.0;
  if (uv.y > 0.0) {
    wave = wave1 + wave2 + wave3;
  } else {
    wave = radialWave;
  }

  /* 灰度基底 + sin/cos 叠加不同相位生成彩色 */
  vec3 color = vec3(wave);
  color.r += sin(wave * 3.14 + uTime) * 0.3;
  color.g += sin(wave * 3.14 + uTime + 2.094) * 0.3;
  color.b += sin(wave * 3.14 + uTime + 4.188) * 0.3;

  gl_FragColor = vec4(color, 1.0);
}

vec2 repeatedUV = fract(uv * 5.0);  /* 5x5 的网格重复 */

float cycle = fract(time * 0.5);  /* 每 2 秒循环一次 */

float random(vec2 st) {
  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
}

uniform float uTime;
uniform float uGridSize;    /* 网格密度，由滑块控制，默认 5.0 */
varying vec2 vUv;

/* 伪随机数生成器：相同输入 = 相同输出（确定性） */
float random(vec2 st) {
  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = vUv;

  /* fract(uv * gridSize)：放大坐标后取小数部分，每个整数区间映射回 [0, 1] */
  vec2 gridUV = fract(uv * uGridSize);

  /* 在每个格子内画一个圆形 */
  float d = distance(gridUV, vec2(0.5));
  float circle = smoothstep(0.3, 0.28, d);

  /* 用伪随机数给每个格子不同的颜色（floor 取格子索引） */
  vec2 gridIndex = floor(uv * uGridSize);
  float rand = random(gridIndex);

  /* 动态颜色映射：sin(uTime + rand * 6.28) 让颜色随时间变化，每格相位不同 */
  vec3 color = vec3(0.0);
  color.r = sin(uTime + rand * 6.28) * 0.5 + 0.5;
  color.g = sin(uTime + rand * 6.28 + 2.094) * 0.5 + 0.5;
  color.b = sin(uTime + rand * 6.28 + 4.188) * 0.5 + 0.5;

  /* 圆形遮罩：只在圆内显示颜色 */
  color *= circle;

  /* 添加网格线：step(0.98, ·) 在格子边缘显示灰色线 */
  float gridLine = step(0.98, gridUV.x) + step(0.98, gridUV.y);
  color = max(color, vec3(0.3) * gridLine);

  gl_FragColor = vec4(color, 1.0);
}

/* 将原点移到中心 */
vec2 centeredUV = uv - 0.5;  /* 范围 [-0.5, 0.5] */

/* 或者用 -1 到 1 的范围 */
vec2 normalizedUV = uv * 2.0 - 1.0;  /* 范围 [-1, 1] */

vec2 centeredUV = uv - 0.5;
float r = length(centeredUV);
float theta = atan(centeredUV.y, centeredUV.x);

/* 用极坐标做径向图案：8 个花瓣 */
float pattern = sin(theta * 8.0) * 0.5 + 0.5;

/** 极坐标 → sin 取瓣 → pow 锐化 → step 裁剪
 *  atan 算角度 → sin(angle * N) 产生 N 段正负瓣
 *  → max(0, ·) 只留正值 → pow 压尖边界 → step 裁剪范围 */
float rays = max(0.0, sin(theta * 8.0));
rays = pow(rays, 24.0);    /* 压尖光束边界 */
float sun = step(r, 0.45); /* 裁剪圆形范围 */
float final = max(sun, rays);