Cellular Noise原理与GLSL实现：从Worley算法到WebGL实战

1. 网格噪声核心原理：从Worley算法说起

1.1 什么是Cellular Noise

做图形学的人应该都有这种感觉：Perlin噪声用久了，画面总带着一种"云雾感"，做地形、做水面还行，但一旦想表达"细胞""裂纹""石壁""鳞片"这类带有明显边界感的东西，就明显不够用了。后来我在一个项目里需要做生物组织的程序化贴图，才正儿八经去研究Cellular Noise（网格噪声）。这个噪声算法最早由Steven Worley在1996年提出，所以也常被称为Worley Noise。它的核心思想非常直观：在空间中撒一堆"特征点"，然后对任意一个查询位置，计算它到最近特征点的距离，用这个距离值来驱动颜色、亮度或透明度。距离小的地方像一个"细胞核"附近，距离大的地方像细胞边界，整体呈现一种天然的镶嵌结构。

相比Perlin或Simplex这类基于渐变向量的连续噪声，Cellular Noise的特点是"边界清晰、区域感强"，特别适合做蜂窝、龟裂土地、大理石裂纹、水面涟漪这类效果。在OpenGL和WebGL里，它通常以着色器片段程序的形式运行，也就是说每个像素都独立计算一次噪声值，完全并行，非常契合GPU的架构。这篇文章我会从原理讲到GLSL实现，再讲OpenGL和WebGL两个平台的具体落地，最后把我在实际项目中踩过的坑和优化经验一并整理出来。

1.2 F1与F2：距离场才是灵魂

Cellular Noise的输出并不只有一种。标准做法是计算每个查询点到周围所有特征点的距离，然后从中取第一小和第二小的两个值，图形学里习惯叫F1和F2。

用数学语言描述就是：

code复制F1 = min(dist(p, point_i))
F2 = second_min(dist(p, point_i))

取F1时，画面表现为"离最近特征点越近越亮"的细胞状团块；取F2减F1时，得到的是两个最近特征点之间的等距线，也就是细胞壁的轮廓。这两种输出的差别，决定了你最终得到的是"细胞实体"还是"细胞骨架"。我一开始没想清楚这层关系，直接用F1去模拟裂纹，结果做出来像一团圆形斑块，换了F2-F1之后才真正出现连续的线条感。

另外，距离本身也可以用不同方式定义。欧氏距离最自然，但曼哈顿距离（各轴绝对值之和）和切比雪夫距离（各轴绝对值取最大）会带来完全不同的几何形态。比如切比雪夫距离会产生方块状细胞，曼哈顿距离会产生菱形纹理。在做风格化效果时，可以试着改一下距离度量，经常会有惊喜。

1.3 为什么必须是网格法：GPU并行与复杂度权衡

理论上最朴素的实现方式是暴力搜索：把所有特征点存进数组，然后对每个像素遍历全部特征点，取最小距离。这种方式在特征点数量少的时候没问题，但一旦特征点数量上到几百上千，GPU的每个像素都要做同样数量的距离计算，性能直接崩掉。

Cellular Noise的标准做法是"网格法"。思路是：把空间划分为边长为1的规则网格，每个网格单元内部随机放置一个特征点。查询某一点时，它的最近特征点只可能落在自身所在网格以及周围一圈共9个网格内，所以只需要检查3x3共9个候选点，计算量完全可控。这个结论的直观解释是：任意一个特征点只会在它自己的网格内随机出现，它最远也不可能跑到别的网格里，而查询点到其他网格的距离本身已经限制了候选范围。

网格法的优势在GPU上尤其明显：每个像素处理的数据量固定，没有动态数组，没有无法预测的分支，循环次数在编译期就是常量。后面我会看到GLSL实现里那个双层for循环，次数写死为9次，这正是为GPU并行量身定制的。

2. OpenGL环境下的完整实现

2.1 准备工作：最小OpenGL渲染框架

在动手写Cellular Noise之前，先把渲染框架搭好。我的方案是渲染一个覆盖整个视口的全屏四边形，把噪声逻辑全部放在片段着色器里，这样做最直接，也方便后续把噪声结果输出到纹理。

OpenGL这边我用的版本是3.3 Core Profile，顶点着色器只需要传递UV坐标，片段着色器里做所有计算。如果你用的是Qt或者GLFW这类窗口库，流程都一样：创建窗口和OpenGL上下文，编译顶点和片段着色器，链接成程序，创建VAO/VBO，循环渲染。

一个值得注意的细节是：全屏四边形最好用三角形strip绘制，只用4个顶点，避免重复顶点带来的冗余带宽。顶点坐标我设为(-1,-1)到(1,1)，UV从(0,0)到(1,1)，顶点着色器里直接把顶点坐标复制到gl_Position，再把UV传给片段着色器。

2.2 GLSL实现基础Cellular Noise

核心代码在片段着色器里。先用一个hash函数在网格内生成伪随机特征点，再用双层循环遍历3x3邻居网格，计算出F1和F2。

glsl复制#version 330 core
out vec4 FragColor;
in vec2 vUv;

uniform float uScale;
uniform float uSeed;

vec2 hash(vec2 p) {
    p = vec2(dot(p, vec2(127.1, 311.7)),
             dot(p, vec2(269.5, 183.3)));
    return fract(sin(p) * 43758.5453);
}

vec2 cellular(vec2 p) {
    vec2 cell = floor(p);
    vec2 f = fract(p);

    float f1 = 8.0;
    float f2 = 8.0;

    for (int j = -1; j <= 1; j++) {
        for (int i = -1; i <= 1; i++) {
            vec2 neighbor = vec2(float(i), float(j));
            vec2 point = cell + neighbor + hash(cell + neighbor + uSeed);
            float d = length(point - p);
            if (d < f1) {
                f2 = f1;
                f1 = d;
            } else if (d < f2) {
                f2 = d;
            }
        }
    }

    return vec2(f1, f2);
}

void main() {
    vec2 p = vUv * uScale;
    vec2 c = cellular(p);
    float n = c.y - c.x;
    FragColor = vec4(vec3(n), 1.0);
}

这段代码里最关键的是循环中的更新逻辑：当找到比f1更小的距离时，把旧f1赋值给f2，再更新f1；否则如果距离比f2小，就只更新f2。这样一轮循环结束后，f1和f2分别保存了最小和次小距离。

注意：f1和f2的初始值不能用1.0。因为网格边长为1，理论上最大距离不会超过sqrt(2)，但加上hash偏移后某些方向上的距离可能超过1，初始值设太小会导致f2从未被正确更新。我习惯设成8.0，确保循环内一定能被替换。

2.3 通过Uniform控制画面细节

调试的时候建议把几个参数都暴露成uniform，省得每次改代码重新编译着色器。

• uScale控制网格密度，值越大细胞越小。经验上做岩石纹理时用5到10，做水面涟漪时用15到30。
• uSeed控制随机种子，在做动画或需要多套纹理时很有用。
• 此外还可以加uColorA、uColorB做颜色渐变，或者uTime做动画。

我习惯把输出值映射到0到1之间再显示，因为f2-f1的范围通常不会超过1.5，直接输出到颜色缓冲也能看到大致形态，但对比度偏低。建议用smoothstep或者pow做对比度增强。比如：

glsl复制float edge = smoothstep(0.0, 0.15, n);
FragColor = vec4(vec3(edge), 1.0);

2.4 从噪点到贴图：渲染到纹理

如果只是屏幕上看看，直接渲染到默认帧缓冲就够了。但实际项目中往往需要把噪声结果保存成纹理，供后续阴影、法线、粗糙度贴图使用。做法是创建一个FBO（帧缓冲对象），绑定一张纹理作为颜色附件，把全屏四边形渲染到这张纹理上，之后在材质里采样。

渲染到纹理时有一个容易忽略的点：清屏色默认是(0,0,0,1)，如果FBO没有先绑定纹理再调用glClear，可能会出现第一次渲染结果是黑色或旧数据。另外，纹理如果需要跨越多个像素采样，记得设置合适的过滤方式。噪声贴图我一般用GL_LINEAR，法线贴图则用GL_LINEAR_MIPMAP_LINEAR并生成mipmap，避免远处闪烁。

3. WebGL移植实战：平台差异与兼容性

3.1 WebGL 1.0与2.0的GLSL差异

从OpenGL移植到WebGL时，最大的成本不在算法本身，而在GLSL方言差异。WebGL 1.0使用的是GLSL ES 1.0，语法上有几个明显的不同点：

• 属性变量用attribute声明，顶点着色器到片段着色器的数据用varying传递，片段着色器输出只能用内置的gl_FragColor。
• 不支持自定义输出变量，也没有#version指令（默认就是100）。
• for循环的边界必须是常量表达式，不能用uniform控制循环次数，否则直接编译失败。
• 没有双精度float，所有浮点运算都是float，部分老设备连highp支持都有限。

WebGL 2.0使用的GLSL ES 3.0则向OpenGL ES 3.0看齐，attribute改成了in，varying改成了in/out，输出变成自定义的out变量，还支持了纹理查找函数texture()替代texture2D()。下面是两个版本的片段着色器核心代码对比。

WebGL 1.0版本（GLSL ES 1.0）：

glsl复制precision mediump float;
varying vec2 vUv;
uniform float uScale;
uniform float uSeed;

vec2 hash(vec2 p) {
    p = vec2(dot(p, vec2(127.1, 311.7)),
             dot(p, vec2(269.5, 183.3)));
    return fract(sin(p) * 43758.5453);
}

vec2 cellular(vec2 p) {
    vec2 cell = floor(p);
    vec2 f = fract(p);
    float f1 = 8.0;
    float f2 = 8.0;
    for (int j = -1; j <= 1; j++) {
        for (int i = -1; i <= 1; i++) {
            vec2 neighbor = vec2(float(i), float(j));
            vec2 point = cell + neighbor + hash(cell + neighbor + uSeed);
            float d = length(point - p);
            if (d < f1) {
                f2 = f1;
                f1 = d;
            } else if (d < f2) {
                f2 = d;
            }
        }
    }
    return vec2(f1, f2);
}

void main() {
    vec2 p = vUv * uScale;
    vec2 c = cellular(p);
    float n = c.y - c.x;
    gl_FragColor = vec4(vec3(n), 1.0);
}

WebGL 2.0版本（GLSL ES 3.0）：

glsl复制#version 300 es
precision mediump float;
in vec2 vUv;
out vec4 fragColor;
uniform float uScale;
uniform float uSeed;

vec2 hash(vec2 p) {
    p = vec2(dot(p, vec2(127.1, 311.7)),
             dot(p, vec2(269.5, 183.3)));
    return fract(sin(p) * 43758.5453);
}

vec2 cellular(vec2 p) {
    vec2 cell = floor(p);
    vec2 f = fract(p);
    float f1 = 8.0;
    float f2 = 8.0;
    for (int j = -1; j <= 1; j++) {
        for (int i = -1; i <= 1; i++) {
            vec2 neighbor = vec2(float(i), float(j));
            vec2 point = cell + neighbor + hash(cell + neighbor + uSeed);
            float d = length(point - p);
            if (d < f1) {
                f2 = f1;
                f1 = d;
            } else if (d < f2) {
                f2 = d;
            }
        }
    }
    return vec2(f1, f2);
}

void main() {
    vec2 p = vUv * uScale;
    vec2 c = cellular(p);
    float n = c.y - c.x;
    fragColor = vec4(vec3(n), 1.0);
}

如果你在WebGL环境中遇到shader编译报错，优先检查是不是混用了两套语法。这类问题在项目里太常见了，尤其是团队里有人从原生OpenGL切到WebGL时经常顺手写上out/attribute，导致编译失败。

3.2 浏览器端代码实战

拿到着色器之后，浏览器侧的JavaScript需要做的其实就是三件事：获取WebGL上下文、编译着色器、绘制全屏四边形。下面这个函数可以用来获取上下文，兼顾WebGL 2和WebGL 1的回退：

javascript复制function getGL(canvas) {
  const gl = canvas.getContext('webgl2') ||
            canvas.getContext('webgl') ||
            canvas.getContext('experimental-webgl');
  if (!gl) {
    throw new Error('浏览器不支持WebGL');
  }
  return gl;
}

编译着色器时，建议自己封装一个helper函数，把日志输出到控制台。因为WebGL的shader编译错误信息只包含行号和错误描述，不定位到具体代码文件，所以日志里最好附上shader源码，方便排查。

javascript复制function compileShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader));
    console.error(source);
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

还有一个老生常谈的坑：canvas的像素尺寸和CSS尺寸如果不一致，会导致画面模糊或高DPI下锯齿严重。建议在渲染前显式设置：

javascript复制canvas.width = canvas.clientWidth * (window.devicePixelRatio || 1);
canvas.height = canvas.clientHeight * (window.devicePixelRatio || 1);
gl.viewport(0, 0, canvas.width, canvas.height);

3.3 兼容性排查：浏览器突然不支持WebGL怎么办

在平时工作中，时不时会遇到用户反馈"浏览器上WebGL用不了"的情况，其中相当一部分是"之前能用，突然不行了"。我总结过大致的排查思路，按顺序来效率最高：

• 在地址栏打开浏览器的GPU状态页面（Chrome是chrome://gpu，Edge是edge://gpu），看WebGL项是"硬件加速已启用"还是"软件渲染已启用"，如果显示被禁用，多半是驱动崩溃导致GPU进程挂掉。
• 检查浏览器设置里的硬件加速开关，关掉再打开，重启浏览器。很多macOS上Chrome或Edge突然不支持WebGL的情况，其实是系统更新或显卡驱动更新后GPU进程崩溃，重启加切硬件加速能恢复。
• 看GPU状态页里有没有标记为"Blocklisted"的项。浏览器会对已知有问题的显卡驱动做黑名单处理，强制走软件渲染。这种情况下升级显卡驱动是正解。
• 如果以上都不行，尝试清除浏览器缓存或重置浏览器设置，排除扩展干扰。部分浏览器插件会修改WebGL的上下文创建行为，比如一些"加速"类扩展反而会弄巧成拙。

在程序里，代码层面也要做好降级。比如用户浏览器明确报错"your browser does not support graphics api webgl 2"，那就应当回退到webgl 1上下文，再不行就提示用户改用支持的浏览器。不要一上来就假设所有用户都有WebGL2。

3.4 ANGLE后端与GPU加速问题

Windows平台上的Chrome和Edge默认通过ANGLE层把OpenGL ES调用转成D3D或Metal等后端。之所以有这层转换，是因为Windows上的OpenGL驱动质量参差不齐，而D3D驱动更稳定。有些用户在排查问题时发现ANGLE设置里没有"OpenGL"选项，就以为WebGL坏了，其实这只是表明当前浏览器没有把OpenGL作为后端候选，通常用D3D11后端也能正常运行，性能甚至更好。

真正需要注意的是一类特殊情况：如果用户的显卡驱动强制开启了某些兼容模式，或者远程桌面连接时GPU被禁用，ANGLE会自动降级到WARP（软件渲染）。软件渲染跑简单的噪声效果还能接受，但一旦场景复杂度上来，帧率会惨不忍睹。所以做WebGL项目时，除了功能判断，最好还要检测一下渲染方式：

javascript复制const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
if (debugInfo) {
  const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
  console.log('GPU渲染器:', renderer);
}

这样可以在用户反馈性能问题时，快速判断是不是走了软件渲染。

4. 效果变体与场景应用

4.1 从F1到F2-F1：细胞壁、裂纹和水波

拿到F1和F2之后，你能玩出的花样比想象中多。我在项目里实际用过的组合有这些：

尤其值得说的是F2-F1这个组合，它天然具有"沿着最近两个特征点的分界线形成亮线"的特性。做水面波纹时，我用了这样一个表达式：

glsl复制float n = 1.0 - smoothstep(0.0, 0.08, c.y - c.x);
float wave = sin(n * 30.0 + uTime * 2.0) * 0.5 + 0.5;

这样能做出类似雨滴落在水面上激起一圈圈涟漪的效果。如果把特征点距离加上时间扰动，还能模拟涟漪扩散的动画，非常适合做河流、池塘、雨幕的交互场景。

4.2 Domain Warping：噪声扭曲出更自然形态

单一的Cellular Noise有时还是显得"太规矩"，尤其当网格密度较低时，细胞形状会带有明显的网格倾向。解决这个问题的一个常用技巧是Domain Warping，即先用噪声去扭曲采样坐标，再计算Cellular Noise。原理跟图片处理里的"置换贴图"类似，相当于给空间加了变形场。

glsl复制vec2 q = vec2(cellular(p).x, cellular(p + vec2(5.2, 1.3)).x);
vec2 r = vec2(cellular(p + q).x, cellular(p + q + vec2(1.7, 9.2)).x);
float n = cellular(p + r).y - cellular(p + r).x;

这个技巧会让原本规则的细胞边界变成类似自然岩石断层、皮质褶皱的形态。代价是计算量翻了三到四倍，因为每次cellular调用都要做9次距离计算。如果目标平台是移动端，建议只在关键区域使用，或者降采样后在后期模糊处理。

4.3 无缝平铺技巧

做地表贴图时有个刚需是"无缝平铺"，也就是纹理左右上下重复后看不出接缝。Cellular Noise要做到无缝平铺，核心思路是让特征点按周期重复。做法是对网格坐标取模，让边缘的特征点可以被周期性地映射到对侧边缘。

glsl复制vec2 hashTile(vec2 p, float tile) {
    p = mod(p, vec2(tile));
    p = vec2(dot(p, vec2(127.1, 311.7)),
             dot(p, vec2(269.5, 183.3)));
    return fract(sin(p) * 43758.5453);
}

float cellularTile(vec2 p, float tile) {
    vec2 cell = floor(p);
    float f1 = 8.0;
    float f2 = 8.0;
    for (int j = -1; j <= 1; j++) {
        for (int i = -1; i <= 1; i++) {
            vec2 nb = mod(cell + vec2(float(i), float(j)), vec2(tile));
            vec2 point = nb + hashTile(nb, tile);
            float d = length(point - p);
            if (d < f1) { f2 = f1; f1 = d; }
            else if (d < f2) { f2 = d; }
        }
    }
    return f2 - f1;
}

注意这里的tile必须是一个整数，且等于你在世界坐标中重复的网格数量。如果取模后得到的点在边界处跳到了对侧，视觉上虽然会看到细胞翻折，但由于特征点是周期性重复的，最终纹理是完全无缝的。我在地形项目里用这个方案做了一套128x128的平铺岩石贴图，效果很干净。

4.4 实际项目中的参数调整经验

Cellular Noise调参听起来简单，实际做起来会发现它对参数非常敏感。我总结了几条经验：

• 密度和尺度不是一回事。uScale控制的是特征点密度，但如果直接用屏幕上的像素比例去理解，容易搞混。经验上，做拇指大小的皮肤纹理时uScale在40以上，做半米见方的岩石时uScale在8到15之间，做远处的山脉地形时uScale甚至可以小于1。
• 颜色映射要配合伽马校正。很多程序化纹理直接输出线性颜色看起来灰蒙蒙，加上pow(color, vec3(1.0 / 2.2))后会通透很多。
• 动画时间步长要固定。如果你用uTime驱动噪声位移，建议在CPU端用固定时间步长累加，而不是直接用Date.now()的毫秒数，否则动画速度会受帧率影响。
• 多层Cellular叠加不一定更好。叠加两层以上时，高频细节容易糊成一片白噪声，我通常只用一层主噪声加一层缩放差异在8到12倍之间的细节噪声。

5. 常见问题与性能优化

5.1 方格感与伪影问题

网格法Cellular Noise最常被吐槽的问题就是"方格感"，尤其当特征点恰好落在网格中心附近时，细胞形状会呈现出明显的正方形倾向。这个问题的根源在于hash函数的分布质量。早期很多教程用fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453)这类函数，虽然写起来简洁，但在部分GPU上对大数取正弦的精度不够，导致特征点位置偏向某些区域，画面出现规律的块状条纹。

我的建议是优先使用基于点积和fract的hash，避免sin函数。比如：

glsl复制vec2 hash(vec2 p) {
    p = vec2(p.x * 127.1 + p.y * 311.7,
             p.x * 269.5 + p.y * 183.3);
    return fract(p);
}

这个版本性能更好，在大多数GPU上分布也更稳定。如果仍然觉得有规律感，可以对特征点位置再做一次二次hash偏移：

glsl复制vec2 point = cell + neighbor + 0.5 + (hash(cell + neighbor) - 0.5) * 0.8;

让特征点在网格内占满更多区域，能明显减少方格感。

5.2 动画闪烁问题

做动画时如果闪烁，绝大部分原因不是算法本身，而是特征点被"重新随机"了。有些人会把uTime直接加进hash输入，相当于每帧都换了一套特征点，画面自然闪成雪花。正确做法是：uTime只用于扰动采样坐标或者扭曲距离值，特征点的位置完全由uSeed决定，与时间无关。

另外还有一类闪烁出现在远景处。因为Cellular Noise是高频率细节，当网格密度很高且摄像机移动时，远处的像素采样间隔变大，容易产生时间上的抖动。解决办法是对噪声结果做mipmap级别的平滑，或者在采样前用屏幕空间导数估算采样间隔，超过阈值时降低噪声频率。

5.3 降低GPU占用的实用方案

Cellular Noise虽然计算量不大，但如果叠加次数多、分辨率高，GPU占用依然会上去。尤其WebGL场景里，后台还跑着三维模型和逻辑，GPU压力往往不止来自噪声本身。我实际用过的降载方案有这些：

• 降低渲染分辨率再上采样。把Cellular Noise渲染到一半分辨率的纹理上，再通过线性过滤放大到目标尺寸，视觉差异很小，GPU开销却省了大约三到四倍。
• 用距离平方替代距离。length()内部有开方运算，而比较距离大小时根本不需要开方。用dot(d, d)替代，最后输出到颜色时再补一次sqrt()即可。
• 避免在循环内做过多的向量操作。把vec2 neighbor的计算提前到循环外，或者直接手动展开9次循环，对部分老驱动也是有效的优化手段。
• 尽早裁剪无用的uniform分支。如果你有多个效果模式，优先用if包住，而不是所有分支全部计算后再混合。

有一个被很多人忽略的优化点：在WebGL里，如果canvas尺寸超过设备屏幕分辨率，fragment shader的压力会成倍增加。建议页面初始化时按设备像素比缩放canvas，并监听resize事件及时调整，避免让GPU白算那么多像素。

5.4 移动端精度问题与优化

移动端GPU的浮点精度差异很大。默认的precision mediump float在部分设备上只有半精度浮点的效果，处理大坐标时会出现明显的锯齿和闪动。在WebGL项目里我习惯在片段着色器顶部显式声明：

glsl复制#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

这样在高性能移动设备上能用完整精度，在低端机上自动降级。另外，如果噪声坐标跨度很大，建议先把uv映射到一个合适尺度再计算，避免大数值坐标直接参与sin或fract时精度崩掉。通常做法是vec2 p = fract(vUv) * uScale;，把坐标控制在有限范围内。

6. 一些实际操作中的心得

最后分享几个我在实践里觉得特别值得说的点。一是做这类程序化噪声，不要一上来就追求复杂的多层叠加，先把单层Cellular的效果调到满意，再考虑叠加细节。二是永远把参数暴露成uniform或面板可调项，我自己吃过太多次"改一行代码重编译"的亏，效率太低了。

还有一个很多人可能没注意到的小技巧：Cellular Noise的“种子”不一定非要用标量，直接用vec2甚至vec3做seed，可以让不同维度上的噪声完全无关，这在需要生成多套相互独立的纹理时特别有用。我在一个项目里用同一套Cellular框架生成了颜色贴图、法线贴图和粗糙度贴图，只在seed分量上做了偏移，三张贴图之间没有任何肉眼可见的相关性，省掉了重复写三份着色器的功夫。

如果你要在项目里大规模使用Cellular Noise，建议先把它封装成独立的GLSL函数文件，方便在多个shader里复用。官方文档和教程里关于Worley Noise的说明很多，但真正落地时你一定会遇到平台差异和性能优化的问题，我在上面列出的这些经验基本覆盖了从原理到实战的全链路，照着走一遍，应该能少踩不少坑。