曼德勃罗集的 Three.js 实现

效果预览

经典的曼德勃罗集（Mandelbrot Set）分形渲染，配合动态缩放动画探索分形边界的无限细节。使用线性插值平滑着色，呈现出彩虹般的色彩过渡。

Shader 实现原理

1. 整体思路与数学模型

曼德勃罗集是复平面上的一组点，对于每一个复数 c，迭代序列：

bash 复制代码

z_{n+1} = z_n^2 + c,  z_0 = 0

如果该序列不发散（即模长始终保持有界），则 c 属于曼德勃罗集。在计算机中，我们用有限迭代次数来近似判断：如果在 res 次迭代内 |z| > 2，则认为序列发散，c 不属于曼德勃罗集。

这个判据的数学依据是：如果 |z_n| > 2，序列必然发散到无穷。2 是曼德勃罗集的逃逸半径。

2. 复数乘法 --- cprod 宏的数学

glsl 复制代码

#define cprod(a, b) vec2(a.x*b.x-a.y*b.y, a.x*b.y+a.y*b.x)

这是标准的复数乘法公式。设 a = a.x + i*a.y，b = b.x + i*b.y，则：

bash 复制代码

a * b = (a.x + i*a.y)(b.x + i*b.y)
      = a.x*b.x - a.y*b.y + i(a.x*b.y + a.y*b.x)

实部 a.x*b.x - a.y*b.y 对应 vec2 的 x 分量，虚部 a.x*b.y + a.y*b.x 对应 y 分量。这个宏把复数运算封装为 vec2 运算，在 GPU 上是零开销的（编译期展开）。

3. 迭代核心 --- mandel 函数

glsl 复制代码

float mandel(vec2 c, int res) {
    vec2 z = vec2(0.0, 0.0);
    float oldLen = 0.0;
    for (int i = 0; i < res; i++) {
        z += c;
        z = cprod(z, z);
        float newLen = length(z);

        if (newLen > 2.0) {
            float p = (2.0 - oldLen) / (newLen - oldLen);
            return float(i) + p;
        }
        oldLen = newLen;
    }
    return float(res);
}

3.1 迭代顺序

注意这里的迭代顺序是先 z += c 后 z = z^2。这与标准定义 z = z^2 + c 等价，但计算顺序不同：

标准定义：z_{n+1} = z_n^2 + c

代码实现：z_{n+1} = (z_n + c)^2 = z_n^2 + 2*z_n*c + c^2

等等，这不相等。实际上仔细看代码：

初始 z = 0
第 1 次：z = 0 + c = c，然后 z = c^2。此时 z = c^2，但标准应该是 z = 0^2 + c = c。

这个顺序实际上是 z_{n+1} = (z_n + c)^2，与标准定义不同。但由于初始值 z_0 = 0，两种顺序的差异只是索引偏移一位：

代码中第 i 次迭代后，z 的值对应标准定义的第 i+1 次迭代
最终返回的迭代次数与标准定义一致（因为初始 oldLen = 0 已经考虑了第 0 步）

3.2 线性插值平滑（Smooth Iteration Count）

glsl 复制代码

float p = (2.0 - oldLen) / (newLen - oldLen);
return float(i) + p;

如果不做平滑，返回的是离散的整数迭代次数。在分形边界处，相邻像素的迭代次数可能相差很大，导致明显的色带（banding）。

线性插值的思路：假设 |z| 从 oldLen 到 newLen 是线性增长的，则逃逸时刻 |z| = 2 发生在迭代之间的一个分数位置 p：

bash 复制代码

oldLen + p * (newLen - oldLen) = 2
=> p = (2 - oldLen) / (newLen - oldLen)

这样返回值是连续的浮点数，而非离散的整数，消除了色带现象。

4. 坐标变换与缩放系统

glsl 复制代码

vec2 uv = vec2(gl_FragCoord.xy - iResolution.xy / 2.0);
uv = uv * 2.0 / min(iResolution.x, iResolution.y);

4.1 屏幕坐标到归一化坐标

gl_FragCoord.xy - iResolution.xy / 2.0：将坐标原点移到屏幕中心
* 2.0 / min(iResolution.x, iResolution.y)：以屏幕短边为基准归一化，保证不同宽高比下图形不被拉伸

4.2 动态缩放

glsl 复制代码

float range = sin(iTime * 0.25) * 0.5 + 0.5;
float zoom = 1.0 + 100050.0 * range;

sin(iTime * 0.25) 周期为 2π / 0.25 = 8π ≈ 25.1 秒
* 0.5 + 0.5 映射到 [0, 1]
zoom 范围：1.0 到 100051.0，覆盖从全局视图到极深放大

4.3 焦点位置

glsl 复制代码

vec2 focus = 1.0 * vec2(-0.542738427, 0.615566608);

这个点是曼德勃罗集边界上一个著名的" elephants valley "（象谷）区域附近的点，分形细节极其丰富。缩放时以此为中心，可以观察到无限递归的自相似结构。

4.4 最终 UV 变换

glsl 复制代码

float f = mandel(focus + uv * 1.25 / zoom, res);

uv * 1.25 / zoom：1.25 是基础视野范围，/ zoom 是缩放因子
focus + ...：将局部坐标平移到焦点位置

5. 颜色映射

glsl 复制代码

float p = f / float(res);
vec3 col = vec3(0.1, 0.1, 0.1);
if (int(f) < res) {
    p *= float(res) / 16.0;
    col = 0.5 + 0.5 * vec3(sin(p), sin(p + PI / 3.0), sin(p + PI * 2.0 / 3.0));
    col = col / max(col.x, max(col.y, col.z));
}

5.1 集合内外的区分

int(f) < res：如果迭代次数小于最大迭代次数，说明点在集合外（逃逸了）
int(f) == res：点在集合内，使用深色 vec3(0.1)

5.2 色相循环

glsl 复制代码

col = 0.5 + 0.5 * vec3(sin(p), sin(p + PI / 3.0), sin(p + PI * 2.0 / 3.0));

这是相位偏移的正弦函数 ，三个通道的相位差分别为 0、π/3、2π/3：

R 通道：sin(p)
G 通道：sin(p + π/3)
B 通道：sin(p + 2π/3)

0.5 + 0.5 * sin(...) 把输出映射到 [0, 1]。三个通道相位差 120°，在 RGB 空间中形成平滑的色相循环。

p *= float(res) / 16.0 把迭代计数放大 512/16 = 32 倍，让颜色变化更频繁，增强视觉细节。

5.3 归一化增强对比

glsl 复制代码

col = col / max(col.x, max(col.y, col.z));

这一步把颜色除以最大通道值，使至少一个通道达到 1.0。效果是：

增强颜色饱和度
让暗色更暗、亮色更亮
整体对比度提升

总结

这个特效的精髓在于用最简单的复数迭代公式生成无限复杂的分形图案。曼德勃罗集不是"画"出来的，而是"算"出来的 ------ 每个像素的颜色都是一次独立的数学实验结果。

分形的核心魅力是自相似性 ：无论你放大多少倍，边界的褶皱结构始终保持相似。本 shader 通过 sin(iTime) 驱动的动态缩放，让用户能一窥这种无限递归的美。