webgl shader 噪声函数

WebGL Shader中的噪声函数是一种数学函数，通常用于模拟随机性或纹理效果，常用于创建逼真的自然纹理、动态的效果或者游戏中的环境贴图。在OpenGL ES（WebGL基于此）中，我们可以通过着色器语言如GLSL编写自定义噪声算法。

一种常用的噪声函数是Perlin噪声，它是由Ken Perlin开发的一种连续空间的伪随机函数，可以产生平滑的变化，非常适合用来做纹理生成。Perlin噪声由几个关键步骤组成：

1. **基础格子**：首先创建一个网格，每个顶点对应一个噪声值。
2. **梯度计算**：为每个网格单元计算一个方向相关的梯度。
3. **采样**：对于给定点，根据其位置在基础格子中的插值结果，结合梯度信息进行噪声值的混合。
4. **分层结构**：使用不同层级的基础格子和权重，可以增加噪声的复杂性和细节。

在WebGL shader中，你可以这样做：

// 示例：简单的一维Perlin噪声
float noise(float x) {
    const float p[128] = ...; // 生成一组离散的噪声系数
    int n = (int)(x * 128.0);
    return mix(p[n], p[n + 1], fract(x));
}

// 如果需要三维噪声，可以扩展到三个维度
vec3 perlinNoise(vec3 coord) {
    vec3 fade = fadeLerp(coord, vec3(1.0), 16.0);
    vec3 grad = textureGrad(pnoise, coord, fade); // 使用纹理坐标和权重
    return mix(mix(grad.xz, grad.yz, fade.y), grad.x, fade.x);
}