GLSL 效果示例

随机数

GLSL 没有 random() 函数。这里是大家都在用的那行哈希函数,以及怎样用它做出随机的格子。

在线示例

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

工作原理

shader 会在同一时刻对每个像素执行同一段代码,所以没有一个共享的随机数生成器可以调用。shader 用的是哈希:一个把输入打乱得非常彻底的函数,输出看起来是随机的,但同样的输入永远得到同样的输出。

random(st) 分三步完成:

  1. dot(st, vec2(12.9898, 78.233)) 把二维输入压成一个数。
  2. sin(...) * 43758.5453 把它变成波形,再乘成一个很大的数,让输入的微小变化引起输出的巨大变化。
  3. fract(...) 只保留小数部分,也就是最混乱的那部分,得到 0% 到 100% 之间的值。

传入 floor(uv * 16.0) 而不是原始的 uv,同一个格子里所有像素的输入都一样,于是得到的是随机的方块,而不是电视雪花。

试着改一改

修改效果
random(cell + ...) 改成 random(uv)每个像素都不同的雪花噪点
16.0 改成 4.0大块的随机方格
floor(u_time * 2.0) 改成 0.0图案定住不动
vec3(r) 改成 vec3(step(0.5, r))纯黑白格子,大约各占一半

注意:这个哈希使用 highp 精度。在一些移动端 GPU 上用 mediump 时,大数乘法会丢失精度,出现明显的规律纹路。

用到的内置函数

一步步学会这个效果