Perlin Noise(柏林噪声流场)
简介

Perlin Noise 场景将数学中的梯度噪声理论与粒子系统相结合,创造出令人着迷的有机流动视觉效果——从丝绸般的柔波、星云般的漩涡到电路般的几何纹理,每一种参数组合都蕴含着噪声函数与流场动力学的数学之美。
基于 Ken Perlin 于 1983 年发明的梯度噪声算法,本场景通过 2D 噪声场驱动大量粒子运动,利用拖尾渲染和累积缓冲技术,生成丰富的流场可视化图像。同时提供 GPU 着色器渲染模式,通过光线步进(Ray Marching)算法在屏幕空间实时生成噪声纹理,支持多种纹理风格和渲染风格。
核心能力:
- 双渲染引擎:CPU 粒子系统与 GPU 着色器双模式,CPU 模式支持实时交互和参数调试,GPU 模式支持高质量视频导出
- 三种流场模式:角度场(ANGLE_FIELD)、向量场(VECTOR_FIELD)、漩涡场(SWIRL_FIELD),覆盖从自然流动到旋转结构的广泛效果
- 累积缓冲技术:替代传统拖尾渲染,将粒子绘制到持续存在的纹理上并缓慢消退,实现丝滑流体效果
- GPU 纹理风格:6 种内置纹理风格(纤维、条纹、丝绸、水波、火焰、迷雾)和 2 种渲染风格(纤维、水流)
- 调色板系统:支持手动、余弦和曲线三种渐变模式,配合渐变动画实现丰富的色彩表达
- 完整动画支持:集成流场动画、渐变动画和相机动画系统
数学背景
什么是 Perlin 噪声?
Perlin 噪声(Perlin Noise)是由美国计算机科学家 Ken Perlin 于 1983 年发明的一种梯度噪声算法。当时 Perlin 正在参与电影《Tron》(电子世界争霸战)的特效制作,对当时计算机生成的纹理过于"机器感"感到不满,于是创造了这种能产生自然、有机外观的噪声函数。凭借这一发明及其对计算机图形学的深远贡献,Perlin 于 1997 年获得了奥斯卡技术成就奖。
为什么 Perlin 噪声看起来"自然"?
与简单的随机噪声(白噪声)不同,Perlin 噪声的关键特征是空间连续性——相邻位置的噪声值是平滑过渡的,而非随机跳变。这种特性使它能够模拟自然界中常见的连续变化现象,如云层、地形、水流等。
Perlin 噪声的数学原理
Perlin 噪声是一种梯度噪声(Gradient Noise),其核心思想是在整数坐标网格点上生成随机梯度向量,然后在网格内部通过插值计算平滑的噪声值。数学上,对于位置 ,噪声函数 的值由周围四个网格点的梯度插值得到:
其中 是网格点 处的随机梯度向量, 是平滑插值权重(使用缓和曲线 计算)。
通过调整噪声的缩放比例(Noise Scale)和时间参数(Time Scale),可以控制噪声场的空间频率和时变特性。
流场的数学原理
流场(Flow Field)是一种将空间中每个位置映射到一个方向向量的函数。在 Perlin 噪声流场中,我们利用噪声值来决定粒子的运动方向:
- 角度场模式:噪声值 直接映射为角度 ,粒子沿该角度方向运动
- 向量场模式:计算噪声场的梯度 ,粒子沿等值线(垂直于梯度)方向运动
- 漩涡场模式:在噪声角度的基础上叠加围绕中心的旋转力
历史背景
Ken Perlin 发明 Perlin 噪声的初衷是为计算机图形学提供一种能产生自然纹理的工具。在此之前,计算机生成的图像往往使用简单的随机数生成纹理,结果看起来像电视雪花一样杂乱无章。Perlin 的洞察在于:自然的纹理不是完全随机的,而是具有空间相关性的——相邻区域的属性倾向于相似。这一思想不仅催生了 Perlin 噪声,也深刻影响了后续的程序化纹理生成领域,包括 Simplex 噪声(Perlin 本人在 2001 年的改进版本)、分形布朗运动(fBm)等重要技术。
界面概览
所有控制项位于右侧的属性面板中,分为四个主要部分:
- Geometry(几何):调整场景的空间缩放
- Settings(设置):核心模拟参数(渲染模式、粒子、噪声、流场、GPU 参数)
- Appearance(外观):视觉风格(背景色、粒子样式、拖尾、累积缓冲、调色板)
- Camera(相机):控制观察视角
配置指南
1. Geometry(几何设置)

Perlin Noise 场景的 Geometry 面板仅包含空间缩放控制:
- Scale X:X 轴方向的缩放比例,精度 3 位小数
- Scale Y:Y 轴方向的缩放比例,精度 3 位小数
- Scale Z:Z 轴方向的缩放比例,精度 3 位小数
提示:Perlin Noise 始终为 2D 渲染,Z 轴的缩放通常不需要调整。调整 Scale X/Y 可以拉伸或压缩流场图案。
2. Settings(设置)
Settings 面板是 Perlin Noise 场景的核心控制区域,参数根据渲染模式(CPU/GPU)有所不同。
渲染后端(Render Backend)
选择渲染模式:CPU 或 GPU。两种模式的参数配置完全不同,切换后面板会自动更新。
CPU 模式参数
粒子(Particles)
Particle Count(粒子数):系统中的粒子总数。粒子越多,流场越致密,但 CPU 负载越高。
- 建议范围:5,000 - 20,000
- 超过 20,000 可能导致界面卡顿
Preset(预设):快速应用常见效果的参数组合:
- Soft Flow(柔和流动):8,000 粒子,步长 0.40,噪声缩放 0.008,角度场 + 柔和幂映射,流场动画 0.20,拖尾生命周期 120 秒,淡出开启
- Vector Drift(向量漂移):9,000 粒子,步长 0.35,噪声缩放 0.012,向量场 + 线性映射,流场动画 0.12,拖尾生命周期 90 秒,淡出开启
- Swirl Vortex(漩涡):6,500 粒子,步长 0.45,噪声缩放 0.010,漩涡场 + 线性映射,流场动画 0.18,拖尾生命周期 110 秒,淡出开启
选择预设后,系统会自动设置粒子数、步长、噪声缩放、流场模式、角度映射、时间缩放、拖尾生命周期和淡出开关。如果手动修改了任何参数,预设会自动显示为"自定义"。
噪声与流场(Noise & Flow)
Noise Step Size(噪声步长):粒子每帧移动的空间距离。
- 较大的值(如 0.3-0.5):产生快速、跳跃的运动
- 较小的值(如 0.1-0.2):产生缓慢、平滑的流动
Noise Scale(噪声缩放):噪声场的空间频率(缩放比例)。
- 较小的值(如 0.005-0.01):产生巨大、平滑的曲线,宏观流动感强
- 较大的值(如 0.02-0.05):产生细碎、混沌的纹理,细节丰富
Flow Mode(流场模式):定义噪声如何控制粒子运动:
- ANGLE_FIELD(角度场):噪声值直接决定运动角度(0° 到 360°)。这是最经典的 Perlin 噪声流场,产生平滑、自然的流动效果
- VECTOR_FIELD(向量场):通过计算噪声场的梯度,使粒子沿着等值线运动。产生更复杂、非均匀的运动轨迹,粒子倾向于沿着"河流"或"通道"流动
- SWIRL_FIELD(漩涡场):在噪声基础上叠加围绕中心的旋转力。产生类似星系、漩涡或龙卷风的结构
Angle Map(角度映射):将噪声值转换为角度的方式:
- LINEAR(线性):直接的 1:1 映射。平滑且标准,适合大多数场景
- SOFT_POWER(柔和幂):对分布曲线进行非线性变换(),使粒子倾向于沿着特定的"通道"或"河流"流动,产生更有方向性的流场
动画(Animation)
- Noise Seed(噪声种子):随机种子值。更改种子可获得完全不同的噪声场变体。点击右侧刷新按钮可随机生成新种子。
GPU 模式参数
渲染风格(Render Style)
- Filament(纤维):细腻的纤维状纹理,适合丝绸、织物效果
- Water(水流):流动的水波纹理,适合液体、海洋效果
步进参数(Marching Parameters)
March Steps(步进步数):光线步进的迭代次数。
- 较大的值(如 32-64):产生更精确、细腻的纹理,但会增加 GPU 负载
- 较小的值(如 8-16):渲染更快,但纹理可能不够精细
- 建议范围:16 - 64
Step Size(步长):每次步进的距离。
- 较小的值:产生更精细的细节,但需要更多的步进次数
- 最小值:0.0001
噪声参数(Noise Parameters)
Noise Frequency(噪声频率):噪声场的空间频率。较大的值产生更细密的纹理。最小值:0.01。
Warp Amplitude(扭曲幅度):噪声扭曲的强度。用于产生有机、流动的变形效果。最小值:0。
Warp Frequency(扭曲频率):扭曲的空间频率。最小值:0。
Direction Offset(方向偏移):流动方向的偏移角度。用于调整整体流动方向。
时间与亮度(Time & Brightness)
Time Speed(时间速度):噪声场随时间变化的速度。控制动画的流动感。
Brightness(亮度):整体亮度系数。调整画面的明暗程度。最小值:0。
Vignette Power(暗角强度):画面边缘暗角的强度。用于聚焦视觉中心。最小值:0.001。
纹理风格(Texture Style)
系统提供 6 种内置纹理风格,每种风格通过不同的噪声叠加和变换算法生成:
| 风格 | 名称 | 特征描述 |
|---|---|---|
| 0 | Fiber(纤维) | 细腻的纤维状纹理,多层噪声叠加产生丝线效果 |
| 1 | Streak(条纹) | 横向条纹纹理,强调方向性 |
| 2 | Silk(丝绸) | 光滑的丝绸纹理,带有柔和的光泽感 |
| 3 | Water(水波) | 涟漪状水波纹理,从中心向外扩散 |
| 4 | Flame(火焰) | 上升的火焰纹理,带有湍流扰动 |
| 5 | Mist(迷雾) | 柔和的迷雾纹理,多层噪声混合 |
- Fiber Strength(纤维强度):纤维纹理的明显程度。范围:0.0 - 1.0。
3. Appearance(外观设置)

背景颜色
- Background Color:设置渲染背景颜色。Perlin Noise 通常使用黑色或深色背景以突出流场的细节。
粒子样式(Points & Trails)
注意:以下参数仅在 CPU 模式下可用。GPU 模式使用着色器渲染,不涉及粒子概念。
Line Weight(线条粗细):拖尾线条的粗细。
Trail Lifetime(拖尾生命周期):拖尾保留的时间(秒)。
- 警告:大于 15 秒的值会消耗大量内存,可能导致性能下降
Show Trails(显示拖尾):开关拖尾渲染。
Fade Trails(淡出拖尾):开启后,拖尾在尾部会逐渐变透明,产生更自然的视觉效果。
累积缓冲(Accumulation Buffer)
注意:累积缓冲仅在 CPU 模式下可用。
累积缓冲是一种替代渲染技术。不保存拖尾几何体,而是将粒子绘制到一个持续存在的纹理上,并使其缓慢消退。适合创建丝滑、流体般的效果。
Use Accumulation Buffer(使用累积缓冲):开启后,粒子不再使用传统拖尾,而是绘制到累积纹理上。开启时会自动启用 Show Trails。
Accumulation Fade(累积淡出):控制旧帧消退的速度(0-255)。数值越低,拖尾越长;数值越高,拖尾越短。
启用累积缓冲后,以下参数将被激活:
Flow Animation(流场动画):噪声场本身随时间变形的速度。设为 0 即为静态向量场。这是创造动态流场效果的关键参数——当值大于 0 时,噪声场会持续变形,产生流动、涌动的效果。
Respawn Rate(重生率):粒子重置到随机位置的概率。
- 重要性:防止粒子卡在"汇聚点(Sinks)"或死循环中至关重要
- 建议值:0.01 - 0.1
- 过低的值会导致粒子逐渐聚集在某些区域
- 过高的值会使流场看起来断断续续
渐变调色板
Perlin Noise 使用调色板为粒子上色,颜色通常根据粒子索引分配,形成彩虹般的渐变效果。支持三种渐变模式:
Manual(手动模式):
- 手动添加、删除和调整颜色节点
- 支持拖拽重排颜色顺序
- 可选择随机策略(单色、类似色、互补色、分裂互补色)
Cosine(余弦模式):
- 使用 IQ 余弦调色板公式:color(t) = a + b · cos(2π(c·t + d))
- 分别控制 R/G/B 三个通道的偏移、振幅、频率和相位
- 支持一键随机化和应用
Curve(曲线模式):
- 通过可编辑的贝塞尔曲线分别控制 R/G/B 三个通道
- 提供最灵活的颜色控制
- 支持一键随机化和应用
4. Camera(相机控制)
虽然 Perlin Noise 通常是 2D 的,但它存在于 3D 空间中。相机参数用于设置初始视角。
相机角度
Phi(俯仰角):相机的垂直角度
- 范围:0 到 π(0 到 180 度)
- 默认值:π/2(90 度,水平观察)
Theta(偏航角):相机的水平角度
- 范围:0 到 2π(0 到 360 度)
- 默认值:0
Gamma(滚转角):相机的旋转角度
- 范围:0 到 2π(0 到 360 度)
- 默认值:0
使用技巧
- Perlin Noise 始终为 2D 渲染:通常使用正上方俯视(Phi = 0 或 π)或水平观察(Phi = π/2)
- 旋转观察:调整 Theta 可以旋转观察角度
动画和时间线
流场动画(Flow Animation)
通过 time_scale 参数控制噪声场随时间变化的速度。当值大于 0 时,噪声场会持续变形,产生流动、涌动的效果。
注意:流场动画仅在 CPU 模式 + 累积缓冲模式下可用。
渐变动画(Gradient Animation)
支持调色板的动态变化,包括:
- HUE_ROTATE(色相旋转):颜色沿色相环旋转
- OFFSET_CYCLE(偏移循环):颜色渐变沿粒子索引循环偏移
- CROSS_FADE(交叉淡入):在两个调色板之间平滑过渡
渐变动画支持多种颜色插值模式:RGB、Linear RGB、OKLab、OKLCH。
渐变动画可通过 Timeline 配置,支持自定义缓动函数和持续时间。
相机动画
支持相机的平滑移动和旋转,包括:
- rotateTheta:旋转方位角
- rotatePhi:旋转俯仰角
- zoom:缩放视图
- rotateTo:旋转到指定角度
配置方法
通过 JSON 配置文件中的 timeline 数组定义动画序列:
{
"timeline": [
{
"type": "animate",
"duration": 15.0,
"easing": "SINE_IN_OUT",
"actions": [
{"method": "rotateTheta", "args": [6.283]}
]
},
{
"type": "animate",
"duration": 10.0,
"easing": "SINE_IN_OUT",
"actions": [
{"method": "gradientStart", "args": [{"mode": "HUE_ROTATE", "speed": 0.5}]}
]
},
{
"type": "hold",
"duration": 2.0
}
]
}性能与最佳实践
推荐配置
| 目标 | 渲染模式 | 粒子数 | 步长 | 噪声缩放 | 流场模式 | 累积缓冲 |
|---|---|---|---|---|---|---|
| 丝滑流体 | CPU | 10,000-15,000 | 0.35-0.45 | 0.008-0.012 | ANGLE_FIELD | 开启 |
| 星系漩涡 | CPU | 6,000-8,000 | 0.40-0.50 | 0.008-0.012 | SWIRL_FIELD | 开启 |
| 几何纹理 | CPU | 8,000-12,000 | 0.10-0.20 | 0.020-0.040 | ANGLE_FIELD | 关闭 |
| 高质量视频 | GPU | - | - | - | - | - |
GPU 模式推荐配置
| 目标 | 步进步数 | 步长 | 噪声频率 | 纹理风格 |
|---|---|---|---|---|
| 丝绸效果 | 32-48 | 0.006-0.010 | 1.0-2.0 | Silk |
| 水波效果 | 32-48 | 0.006-0.010 | 1.5-2.5 | Water |
| 火焰效果 | 24-40 | 0.008-0.012 | 1.0-2.0 | Flame |
性能优化技巧
CPU 模式粒子数调整:
- 降低粒子数是最直接的性能优化手段
- 15,000 粒子以上在大多数设备上会感到明显卡顿
拖尾生命周期:
- 超过 15 秒的拖尾生命周期会消耗大量内存
- 使用累积缓冲替代长拖尾可以获得更好的性能
GPU 模式步进优化:
- March Steps 是 GPU 模式最影响性能的参数
- 实时交互时建议设为 16-24,导出时提高到 32-48
累积缓冲淡出值:
- 较低的 Accumulation Fade 值(如 5-15)产生更长的拖尾,但视觉上更流畅
- 较高的值(如 50-100)拖尾更短,适合快速变化的流场
常见问题
粒子卡在圆圈里
问题:粒子似乎陷入循环,在同一个位置反复打转。
原因:粒子陷入噪声场的"汇聚点"或死循环。
解决方案:
- 增加
Respawn Rate(重生率)至 0.02 - 0.1 - 更改
Flow Mode为 VECTOR_FIELD - 调整
Noise Scale改变流场结构
界面卡顿
问题:操作界面响应缓慢。
原因:粒子数过多或拖尾生命周期过长。
解决方案:
- 减少
Particle Count至 20,000 以下 - 减少
Trail Lifetime至 10 秒以内 - 关闭累积缓冲,使用标准拖尾模式
没有拖尾显示
问题:粒子在移动但看不到拖尾。
原因:拖尾渲染方式配置不正确。
解决方案:
- 确保
Show Trails已开启 - 如果开启了累积缓冲,检查
Accumulation Fade值是否过高 - 检查
Trail Lifetime是否为 0
GPU 模式下参数不可用
问题:部分参数在 GPU 模式下显示为灰色/不可用。
原因:GPU 模式使用着色器渲染,部分 CPU 模式参数不适用。
解决方案:GPU 模式下,请使用 GPU 专用参数(如 March Steps、Noise Frequency、Texture Style 等)。
导出视频质量不佳
问题:导出的视频模糊或纹理不够精细。
解决方案:
- 使用 GPU 模式进行导出
- 提高
March Steps至 32 以上 - 选择合适的
Texture Style和Render Style - 确保导出分辨率足够高
流场看起来太均匀
问题:流场看起来缺乏变化,所有粒子似乎沿相同方向运动。
原因:噪声缩放过大或角度映射过于线性。
解决方案:
- 减小
Noise Scale(如从 0.02 降到 0.008) - 切换
Angle Map为 SOFT_POWER - 尝试
VECTOR_FIELD模式
经典效果示例
柔和流动(Soft Flow)
渲染模式:CPU
粒子数:8000
噪声步长:0.40
噪声缩放:0.008
流场模式:ANGLE_FIELD
角度映射:SOFT_POWER
累积缓冲:开启
累积淡出:15
流场动画:0.20
重生率:0.03星系漩涡(Galaxy Vortex)
渲染模式:CPU
粒子数:6500
噪声步长:0.45
噪声缩放:0.010
流场模式:SWIRL_FIELD
角度映射:LINEAR
累积缓冲:开启
累积淡出:12
流场动画:0.18
重生率:0.02GPU 丝绸纹理
渲染模式:GPU
渲染风格:Filament
步进步数:40
步长:0.008
噪声频率:1.5
扭曲幅度:0.1
扭曲频率:2.0
纹理风格:Silk
纤维强度:0.7
亮度:1.7
暗角强度:0.1更多效果展示


技术细节
CPU 渲染管线
CPU 模式使用传统粒子系统渲染,核心流程如下:
- 粒子初始化:在画布范围内随机分布粒子,每个粒子分配随机初始方向
- 噪声采样:根据粒子位置和噪声缩放参数采样 Perlin 噪声值
- 方向计算:根据流场模式(角度场/向量场/漩涡场)计算粒子运动方向
- 位置更新:沿计算方向移动粒子,步长由 Noise Step Size 和帧时间决定
- 边界处理:粒子超出画布范围时自动环绕到对侧
- 拖尾渲染:记录粒子轨迹,根据 Fade Trails 设置决定是否渐变透明
向量场模式的梯度计算
向量场模式通过有限差分法计算噪声场的梯度:
粒子沿等值线方向(垂直于梯度)运动,并引入平滑混合因子避免方向突变。
GPU 渲染管线
GPU 模式使用 OpenGL 着色器进行实时渲染:
- 纹理生成:根据种子值预生成 6 种纹理风格的流场纹理(512x512 到 2048x2048)
- 调色板纹理:将当前调色板转换为 256 像素宽的 1D 查找表纹理
- 光线步进:片段着色器通过 Ray Marching 算法在屏幕空间采样噪声纹理
- 扭曲与变形:应用 Warp Amplitude 和 Warp Frequency 参数进行域扭曲(Domain Warping)
- 后处理:应用亮度、暗角和纤维强度等后处理效果
纹理风格的生成算法
每种纹理风格使用不同的噪声叠加策略:
- Fiber:4 层噪声叠加(低频基础 + 中频细节 + 纤维结构 + 颗粒),权重分别为 0.42、0.28、0.22、0.08
- Streak:3 层噪声叠加(方向性基础 + 中频 + 条纹),条纹通过 的非线性变换生成
- Silk:2 层噪声叠加,第一层带有正弦调制的横向流动,第二层产生光泽变化
- Water:径向正弦环 + 涟漪噪声,从中心向外扩散
- Flame:3 层噪声叠加(烟柱 + 湍流 + 火焰),火焰层通过 生成上升效果
- Mist:3 层噪声叠加(低频 + 中频 + 高频),权重分别为 0.55、0.30、0.15
创作技巧
参数探索
- 从预设开始:选择一个感兴趣的预设(如柔和流动),作为起点
- 调整噪声缩放:这是影响视觉效果最显著的参数,尝试从 0.005 到 0.04 的范围
- 切换流场模式:同一种噪声缩放在不同流场模式下会产生截然不同的效果
- 利用种子变化:同一组参数配合不同的种子可以产生无限变化的流场
视觉调优
拖尾效果:
- 使用累积缓冲 + 低淡出值(5-15)获得丝滑的长拖尾
- 使用传统拖尾 + Fade Trails 获得渐变透明的效果
着色方案:
- 使用余弦调色板模式快速生成和谐的色彩方案
- 深色背景配合高饱和度色彩通常效果最佳
- 尝试单色或类似色策略创造统一的视觉风格
GPU 纹理:
- Fiber 风格配合 Filament 渲染适合织物效果
- Water 风格配合 Water 渲染适合液体效果
- 调整 Fiber Strength 控制纹理的粗细程度
动画设计
流场动画:
- Flow Animation 值 0.1-0.3 产生缓慢的流场变形
- 配合重生率 0.02-0.05 确保粒子不会聚集
渐变动画:
- HUE_ROTATE 模式适合创造梦幻的色彩变化
- OFFSET_CYCLE 模式适合创造脉冲般的色彩流动
相机运动:
- 缓慢的 Theta 旋转可以展现流场的方向性
- 配合流场动画创造沉浸式的视觉体验
参考资源
数学理论
- Ken Perlin - An Image Synthesizer (1985) - Perlin 噪声的原始论文
- Ken Perlin - Noise, a paper from Siggraph 2001 - Simplex 噪声的改进版本
- Daniel Shiffman - The Nature of Code - 流场和粒子系统的入门教程
在线资源
- Perlin Noise 的发明故事
- Flow Fields: A Practical Guide
- Ken Perlin 的主页 - Perlin 噪声的原创研究者
软件文档
- OpenGL 着色器编程指南
- GLSL 语言规范
