GLSL 效果示例

Voronoi(细胞噪声)

GLSL 动态 Voronoi 细胞:每个网格放一个随机点,按像素到最近点的距离上色。

在线示例

修改右侧代码,左侧预览会实时更新。

工作原理

Voronoi 噪声把屏幕分成一个个细胞,像肥皂泡、干裂的泥地或长颈鹿的花纹。它分三步:

  1. 把空间分成网格,给每个格子在内部随机位置放一个特征点(random2(cell))。
  2. 对每个像素,找到离它最近的特征点。
  3. 用这个距离当颜色:正好在点上最暗,越远越亮。

离一个像素最近的点可能属于相邻的格子,所以双重循环会检查当前格子和周围 8 个邻居。点永远不会离开自己的格子,所以不需要检查更远的。

0.5 + 0.5 * sin(u_time + 6.2831 * point) 让每个点在自己的格子里移动。每个点的随机相位都不同,所以它们各自漂移,细胞的边界一直在变形。

试着改一改

修改效果
* 5.0 改成 * 12.0很多小细胞
sin(u_time + ...) 改成 sin(6.2831 * point)细胞静止不动
删掉 color += 那一行特征点上不再有白点
mix(...) 里的 minDist 改成 step(0.3, minDist)每个点周围是一块纯色斑

用到的内置函数

一步步学会这个效果