GLSL 效果示例
随机数
GLSL 没有 random() 函数。这里是大家都在用的那行哈希函数,以及怎样用它做出随机的格子。
在线示例
修改右侧代码,左侧预览会实时更新。
工作原理
shader 会在同一时刻对每个像素执行同一段代码,所以没有一个共享的随机数生成器可以调用。shader 用的是哈希:一个把输入打乱得非常彻底的函数,输出看起来是随机的,但同样的输入永远得到同样的输出。
random(st) 分三步完成:
dot(st, vec2(12.9898, 78.233))把二维输入压成一个数。sin(...) * 43758.5453把它变成波形,再乘成一个很大的数,让输入的微小变化引起输出的巨大变化。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 时,大数乘法会丢失精度,出现明显的规律纹路。