Mandelbrot集动画渲染优化及视觉效果提升技术咨询

我以趣味项目为目标，自行使用p5js实现了Mandelbrot集，但代码未做优化，现提出以下技术问题：

1. 当前渲染的集合边缘过于锐利（因逐像素运算），想了解如何实现像素融合以提升画面细节；
2. 动画渲染速度过慢，缩放时迭代次数增加导致单帧耗时极久，想知晓类似视频高效渲染的优化方法；
3. 两类Mandelbrot集视频的着色方式不同（一类色彩动态变化，一类色彩固定），想了解对应的着色方法；
4. 希望打造炫酷的Mandelbrot集动画，询问是否有其他渲染方法，以及第一类视频中3D效果的实现方式。

实现代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

JS部分 #

//noprotect
var y = 0;
var ratio;
var xstart = -2;
var xend = 2;
var ystart = -2;
var yend = 2;
var maxiter = 100;
var _xstart;
var _xend;
const colors = [
  "rgb(255, 0, 255)",
  "rgb(255, 0, 127)",
  "rgb(255, 0, 0)",
  "rgb(255, 127, 0)",
  "rgb(255, 255, 0)",
  "rgb(127, 255, 0)",
  "rgb(0, 255, 0)", 
  "rgb(0, 255, 127)", 
  "rgb(0, 255, 255)",
  "rgb(0, 127, 255)", 
  "rgb(0, 0, 255)", 
  "rgb(127, 0, 255)"
];

function setup() {
  noStroke();
  createCanvas(window.innerWidth, window.innerHeight);
  ratio = width/height;
  background(0);
  
_xstart = xstart * (width/height);
_xend = xend * (width/height);
_xstart = (xstart + xend)/2 + xstart*(width/height);
_xend = (xstart+xend)/2 + xend*(width/height);
}

function mandelbrot(rconst, iconst) {
  var iter = math.complex(0, 0);
  var current = 0;
  for(var i = 0; i < maxiter; i ++) {
    iter = iter.pow(2);
    iter = iter.add(rconst, iconst);
    current ++;
    if(sqrt(pow(iter.re, 2)+pow(iter.im, 2)) > 2) {
      break;
    }
  } 
  if(current === maxiter) {
    return(0);
  } else {
    //color array
    return(colors[(current) % colors.length]);

    //purple
    var temp = floor(map(current, 0, maxiter/3, 0, 255));
    if(temp > 255) {
      temp = 255;
    }
    // return('rgb(' + temp + ', 0, ' + temp + ')')

    //black and white
    // return(map(current, 0, 30, 0, 255))
    return('rgb(0, 0, ' + temp + ')')
  }
}

function draw() {
  if(y < height+1) {
    for(var x = 0; x < width+1; x ++) {
      fill(mandelbrot(map(x, 0, width, _xstart, _xend), map(y, 0, height, ystart, yend)))
      rect(x, y, 1, 1);
    }
    y++;
  }
  fill(0);
  rect(0, 0, 300, 15);
  fill(255);
  text("x: " + map(mouseX, 0, width, _xstart, _xend) + ", y: " + map(mouseY, 0, height, ystart, yend), 0, 10); 
}

问题解答 #

1. 实现像素融合，柔化边缘 #

当前逐像素渲染的锐利边缘可通过两种方式优化：

• 平滑迭代计数：替换整数迭代次数为精确逃逸值，公式：smooth_iter = current + 1 - log(log(abs(iter)))/log(2)，用该值做色彩映射，让边缘色彩过渡更自然。
• 超采样抗锯齿：创建高分辨率createGraphics画布，按2x2或4x4子像素计算Mandelbrot值后取平均，再缩放到窗口大小；或直接用p5js的image()缩放高分辨率画布，自动实现柔化效果。

2. 动画渲染速度优化 #

针对缩放时的卡顿问题，可从以下方向优化：

• 动态迭代次数：远离集合的点提前终止迭代，靠近集合的区域再提升maxiter；用逃逸半径的平方（iter.re*iter.re + iter.im*iter.im > 4）替代开方判断，减少计算量。
• WebGL加速：切换到WebGL模式（createCanvas(width, height, WEBGL)），将Mandelbrot计算逻辑写入GLSL片段着色器，利用GPU并行运算，速度比JS单线程提升数倍。
• 预渲染帧：制作视频时，用saveFrame()逐帧渲染保存为图片，后期用视频软件合成，避免实时渲染压力；或缓存相邻帧的重叠区域，只更新变化部分。

3. 两类着色方法实现 #

固定色彩着色

保持色彩映射规则不变，仅调整视图区域：

• 基于迭代次数映射到固定颜色数组（如你代码中的colors），或用map()将迭代值转换为线性渐变RGB值（如从蓝到红的渐变），动画过程中不修改色彩映射逻辑即可。

动态色彩变化着色

引入时间变量驱动色彩变化：

• 用frameCount生成时间因子t = frameCount * 0.01，将其加入色彩计算：colors[(current + floor(t)) % colors.length]，实现色彩循环流动。
• 用三角函数生成动态RGB值：r = sin(t + current*0.1)*127 + 128、g = cos(t + current*0.1)*127 + 128，让色彩随时间平滑变化。

4. 炫酷动画与3D效果实现 #

其他渲染方法

• 距离估计渲染：计算每个点到Mandelbrot集的距离，用距离值生成等高线或光晕效果，提升画面细节层次。
• Julia集联动动画：Mandelbrot集上的每个点对应一个Julia集，动画时移动Mandelbrot视图点，同步渲染对应Julia集，形成联动效果。
• 分形变形：在迭代公式中加入随时间变化的扰动项，让分形形态缓慢变形，增加动画趣味性。

3D效果实现

视频中的3D效果多为伪3D模拟：

• 高度映射+光影：将迭代次数或距离值作为高度，用透视投影调整像素位置，再添加漫反射、高光等光照计算，模拟3D表面的立体感。
• 分层叠加：渲染多个不同缩放比例的Mandelbrot图层，给前景图层更高清晰度、背景图层添加模糊效果，通过透明度叠加营造空间深度。
• 3D分形渲染：实现Mandelbulb（3D版Mandelbrot），用光线追踪算法计算光线与分形的交点，配合WebGL着色器加速，实现真实3D分形效果。

内容的提问来源于stack exchange，提问作者Eli Bauer