Book of Shaders 04 - 网格噪声：Worley Noise

0x00 思路

假设要生成 4 个网格，可以先在空间中指定 4 个特征点。对于每个像素点，计算它到最近特征点的距离，将这个距离当作结果值输出。

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    // 先指定 4 个特征点
    vec2 point[4];
    point[0] = vec2(0.83, 0.75);
    point[1] = vec2(0.60, 0.07);
    point[2] = vec2(0.28, 0.64);
    point[3] =  vec2(0.31, 0.26);

    // 计算像素点到 4 个特征点的最小距离
    float m_dist = 1.0;
    for (int i = 0; i < 4; i++) {
        float dist = distance(st, point[i]);
        m_dist = min(m_dist, dist);
    }

    // 输出结果
    vec3 color = vec3(0.0);
    color += m_dist;
    gl_FragColor = vec4(color, 1.0);
}

效果展示：

0x01 优化

循环对着色器很不友好，遍历次数过多的循环会显著降低着色器的性能。在 Steven Worley 发表的一篇论文《A Cellular Texture Basis Function》中描述了优化的方法。我们可以将空间分割成网格，每个网格对应一个特征点，每个像素点只计算到相邻网格中的特征点的距离。这样，每个像素点就只需要计算到九个特征点的距离，它自身所在的网格的特征点和相邻的八个网格的特征点。

另外，还可以改用每个网格的整数坐标来构造随机的特征点。省去了手动指定特征点的麻烦，同时也带来了更多的随机性。

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

vec2 random2(vec2 pos) {
    float x = dot(pos, vec2(127.1, 311.7));
    float y = dot(pos, vec2(269.5, 183.3));
    return fract(sin(vec2(x, y)) * 43758.5453);
}

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    st *= 9.0;

    vec2 i = floor(st);
    vec2 f = fract(st);

    float m_dist = 1.0;
    for (int y = -1; y <= 1; y++) {
        for (int x = -1; x <= 1; x++) {
            // 相邻格子
            vec2 neighbor = vec2(float(x), float(y));
            // 生成随机特征点
            vec2 point = random2(i + neighbor);
            // 计算距离
            float dist = length(neighbor + point - f);
            // 更新最短距离
            m_dist = min(m_dist, dist);
        }
    }

    vec3 color = vec3(0.0);
    color += m_dist;
    gl_FragColor = vec4(color, 1.0);
}

效果展示：

0x02 扩展

Inigo Quilez 写了一篇文章，提出了他称之为 Voro Noise 的噪声，可以将常规噪声和网格噪声组合在一起。

在 Voro Noise 中，额外使用两个参数，不妨称之为 u 和 v。其中，u 用来决定最终的噪声更像常规噪声还是网格噪声，简单来说：当 u 接近 0 时，生成的噪声更接近常规噪声；当 u 接近 1 时，生成的噪声更接近网格噪声。v 提供类似常规噪声中的线性插值和网格噪声中最短距离值的功能（ps：最短距离的算法是非连续的，在 iq 的另一篇文章 Smooth Voronoi 中提供了解决这一问题的办法）。

// 初版插值方法。其中，64 是一个连续性比较好的值，详见 Smooth Voronoi 一文。
// float ww = pow( 1.0 - smoothstep(0.0, 1.414, sqrt(d)), 64.0 - 63.0 * v);

// 在初版基础上提高函数的阶数以获得更平滑的表现。
// 64.0 - 63.0 * v => 1.0 + 63.0 * pow(1.0 - v, 4.0)
float ww = pow( 1.0 - smoothstep(0.0, 1.414, sqrt(d)), 1.0 + 63.0 * pow(1.0 - v, 4.0));

完整代码：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;

vec3 random3( vec2 p ) {
    float x = dot(p, vec2(127.1, 311.7));
    float y = dot(p, vec2(269.5, 183.3));
    float z = dot(p, vec2(419.2, 371.9));
    return fract(sin(vec3(x, y, z)) * 43758.5453);
}

float voroNoise(in vec2 x, float u, float v ) {
    vec2 i = floor(x);
    vec2 f = fract(x);

    float k = 1.0 + 63.0 * pow(1.0 - v, 4.0);

    // 下面两个参数用于计算加权平均值，wa 统计总值，wt 统计总单位数
    float wa = 0.0;
    float wt = 0.0;

    // 扩大搜索范围，进一步提高连续性
    for (int y = -2; y <= 2; y++) {
        for (int x = -2; x <= 2; x++) {
            // 相邻格子
            vec2 neighbor = vec2(float(x), float(y));
            // 随机生成 point，其中 point.xy 表示特征点，point.z 表示该点的灰度值
            vec3 point = random3(i + neighbor) * vec3(u, u, 1.0);
            // 根据距离计算贡献值
            float dist = length(neighbor - f + point.xy);
            float ww = pow(1.0 - smoothstep(0.0, 1.414, dist), k);
            wa += point.z * ww;
            wt += ww;
        }
    }

    return wa/wt;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st *= 10.0;

    // 用鼠标位置控制 voroNoise 中的 u 和 v
    float n = voroNoise(st, u_mouse.x/u_resolution.x, u_mouse.y/u_resolution.y);
    gl_FragColor = vec4(vec3(n), 1.0);
}

效果展示：

u 从 0 到 1

v 从 0 到 1

uv 一起变化

参考资料:

• [1] The Book of Shaders
• [2] Worley noise - Wikipedia
• [3] Voro noise - iq
• [4] Smooth voronoi - iq