three.js SimplexNoise 深度解析2D/3D/4D 分形噪声的实现原理与实战应用【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsSimplexNoise 是 three.js 官方提供的一个数学工具类addon基于 Stefan Gustavson 2005 年论文《Simplex noise demystified》的经典算法实现支持 2D、3D、4D 三个维度的 Simplex单纯形噪声采样返回值均归一化到 [-1, 1] 区间。本篇以官方 API 文档 docs/pages/SimplexNoise.html.md 为骨架结合 examples/jsm/math/SimplexNoise.js 的完整源码系统讲解其构造方式、API 用法、内部算法细节扭曲/反转、渐变表、角点贡献以及它在仓库后处理通道SSAO/GTAO 噪声纹理与 GPGPU 水面示例中的真实落地场景。导入与构造SimplexNoise 不是 three.js 核心库的一部分而是一个 addon必须显式导入import { SimplexNoise } from three/addons/math/SimplexNoise.js;构造函数的完整签名为new SimplexNoise( r )rObject可选任何持有random()方法的数学工具类。传入自定义随机数生成器即可让噪声输出变为确定性可复现序列默认值Math即默认使用Math.random()此时每次实例化得到的噪声场都不同。这一参数设计可以从源码 examples/jsm/math/SimplexNoise.js#L17-L47 得到印证构造函数用r.random()逐位填充 256 长度的随机数组p再将其复制翻倍为 512 长度的置换表permconstructor( r Math ) { // ... grad3 / grad4 渐变表初始化 ... this.p []; for ( let i 0; i 256; i ) { this.p[ i ] Math.floor( r.random() * 256 ); } // 将置换表长度翻倍避免索引取模回绕 this.perm []; for ( let i 0; i 512; i ) { this.perm[ i ] this.p[ i 255 ]; } // ... }源码注释明确指出「To remove the need for index wrapping, double the permutation table length」——把置换表翻倍后后续算法中可以直接用ii i 255掩码访问无需对越界索引做取模这是一个典型的热路径微优化。构造函数还初始化了三张关键查找表它们贯穿三种噪声方法成员定义位置作用this.grad312 个三维向量SimplexNoise.js#L19-L212D/3D 噪声使用的渐变向量表取值为各坐标分量 ±1/0 的组合this.grad432 个四维向量SimplexNoise.js#L23-L304D 噪声使用的渐变向量表共 32 个分量取 ±1/0 的向量this.simplex64 项、每项 4 个 0~3 数字SimplexNoise.js#L51-L594D 专用查找表根据坐标分量大小排序结果决定当前点落在 24 个单纯形中的哪一个其中perm表是噪声伪随机性的来源任意空间坐标都会经过它被映射为渐变表索引因此同一实例在不同位置采样得到的值是平滑但不可预测的。三个采样方法noise / noise3d / noise4d官方文档定义了三个对外方法构成该类的全部公共 API.noise( xin, yin )—— 2D 单纯形噪声xinx 坐标yiny 坐标Returns噪声值number[-1, 1] 区间。.noise3d( xin, yin, zin )—— 3D 单纯形噪声xin / yin / zinx、y、z 坐标Returns噪声值number[-1, 1] 区间。.noise4d( x, y, z, w )—— 4D 单纯形噪声x / y / z / w四个坐标分量w 常用作时间维可做 3D 时空噪声动画Returns噪声值number[-1, 1] 区间。三个方法的返回值都经过缩放因子保证just inside [-1,1]见源码注释可直接用于高度、密度、纹理扰动等场景无需再次归一化。源码级原理一次 2D 采样发生了什么以 2D 方法 SimplexNoise.js#L70-L149 为主线拆解2D/3D/4D 的实现结构完全同构。1. 空间扭曲确定所在的单纯形单元const F2 0.5 * ( Math.sqrt( 3.0 ) - 1.0 ); // 2D 扭曲因子 const s ( xin yin ) * F2; const i Math.floor( xin s ); const j Math.floor( yin s ); const G2 ( 3.0 - Math.sqrt( 3.0 ) ) / 6.0; // 反转扭曲因子 const t ( i j ) * G2; const X0 i - t; // 反扭曲回 (x,y) 空间 const x0 xin - X0; // 到单元原点的距离2D 情况下单纯形是等边三角形。先用F2把输入空间整体斜切向下取整得到格子坐标(i, j)再用G2把单元原点反扭曲回原空间得到采样点相对原点的局部坐标(x0, y0)。源码 L92-L102 通过比较x0 y0决定落在哪个三角形下三角按 XY 顺序遍历(0,0)→(1,0)→(1,1)上三角按 YX 顺序遍历。2. 哈希渐变 角点贡献每个角点坐标用置换表哈希出渐变表下标2D 取模 12即gi this.perm[ii this.perm[jj]] % 12随后计算贡献let t0 0.5 - x0 * x0 - y0 * y0; if ( t0 0 ) n0 0.0; else { t0 * t0; n0 t0 * t0 * this._dot( this.grad3[ gi0 ], x0, y0 ); } // ... n1、n2 同理 ... return 70.0 * ( n0 n1 n2 );距离平方超过0.5的角点贡献直接为 0这就是噪声越远衰减越快、图元无可见格线的原因t^4衰减保证一阶连续_dot()L450-L454计算渐变向量与偏移的点积2D 实现只用grad3的前两个分量最终缩放因子70.0将三项贡献之和归一到 [-1, 1]。3. 3D 版本noise3d实现位于 SimplexNoise.js#L159-L293与 2D 的差异在于扭曲因子取整数值F3 1/3反转因子G3 1/6源码注释称其为 Very nice and simple3D 单纯形是四面体一个格子单元内含 6 个四面体源码 L189-L229 通过比较x0/y0/z0的大小组合出 X Y Z、X Z Y、Z X Y、Z Y X、Y Z X、Y X Z 六种遍历顺序每个角点距离阈值放宽到0.6四个角贡献之和乘以32.0缩放L291。4. 4D 版本noise4d实现位于 SimplexNoise.js#L304-L446复杂度显著上升扭曲因子F4 (√5 - 1)/4、反转因子G4 (5 - √5)/20均是无理数表达式L312-L3134D 单元被划分为24 个单纯形。源码采用位编码定位对x0,y0,z0,w0做 6 两两比较把结果累加成 0~63 的整数索引cL343-L349再查this.simplex[c]表得到坐标的降序排列。许多c值在逻辑上不可能出现如 xyzw 时 xz 不成立对应表项填充为全 05 个角点按simplex[c]中数字 3、2、1 的位置分别求出偏移向量第五个角点偏移恒为(1,1,1,1)无需查表渐变索引取模 32对应 32 个grad4向量最终缩放因子为27.0L444。仓库中的真实用例SimplexNoise 并非孤立工具仓库中已有三处生产级用法可直接作为集成参考。1. SSAOPass生成屏幕空间环境光遮蔽的噪声旋转纹理examples/jsm/postprocessing/SSAOPass.js 在_generateRandomKernelRotations()L459-L483中用 3D 噪声构建一张 4×4 的Float32Array数据纹理const width 4, height 4; const simplex new SimplexNoise(); const size width * height; const data new Float32Array( size ); for ( let i 0; i size; i ) { const x ( Math.random() * 2 ) - 1; const y ( Math.random() * 2 ) - 1; const z 0; data[ i ] simplex.noise3d( x, y, z ); } this.noiseTexture new DataTexture( data, width, height, RedFormat, FloatType ); this.noiseTexture.wrapS RepeatWrapping; this.noiseTexture.wrapT RepeatWrapping; this.noiseTexture.needsUpdate true;这里利用噪声相邻像素取值平滑、整体无规则的特性替代纯随机值避免 AO 模糊时出现可见的随机颗粒闪烁——是用噪声做去相关decorrelation的典型手法。GTAOPass.js#L685 采用了同样的做法const simplex new SimplexNoise();。2. GPGPU 水面多八度 FBM 噪声初始化波高场examples/webgl_gpgpu_water.html 在 L152 导入、L192 实例化后用多八度叠加fractal Brownian motion 的变体生成初始水面高度纹理L395-L430function noise( x, y ) { let multR waterMaxHeight; // 初始振幅 0.1 let mult 0.025; // 初始频率 let r 0; for ( let i 0; i 15; i ) { r multR * simplex.noise( x * mult, y * mult ); multR * 0.53 0.025 * i; // 振幅逐层衰减 mult * 1.25; // 频率逐层加密 } return r; }该循环叠加 15 层不同频率/振幅的 2D 噪声生成低频宏观浪 高频细小波纹的自然水面随后交由 GPGPU 模拟演算。这一模式对地形、云、火焰等程序化纹理同样适用是最常见的 SimplexNoise 实战套路。使用要点与注意事项可复现性默认Math随机源意味着每个实例噪声场都不同。需要在多个地方共享同一噪声场例如多个 pass 各new一个实例时务必传入同一个带random()方法的确定性 RNG 对象或复用同一实例无状态采样noise/noise3d/noise4d不依赖实例内部状态推进任意顺序、任意频率重复采样同一坐标结果一致这使它天然适合做 FBM 多层叠加与时间维w 轴动画输入尺度噪声函数对输入坐标敏感采样坐标应按期望特征尺度做频率缩放参考水面示例中的x * mult再叠加振幅系数控制整体强度维度选择静态 2D 纹理/高度场用noise体积、粒子、时空去相关用noise3d把 w 当时间轴做 3D 场动画时用noise4d性能边界该实现为纯 CPU 逐点计算noise4d单点需要 5 个角点 6 次比较 查表批量生成大分辨率纹理时应控制调用总量超大规模逐像素噪声更适合下放到着色器实现。小结three.js 的 SimplexNoise 用约 470 行代码完整实现了 Gustavson 单纯形噪声算法256 位置换表 翻倍perm提供索引随机性grad3/grad4提供方向渐变F/G扭曲因子完成单纯形网格定位t^4衰减与 70/32/27 缩放保证输出落在 [-1, 1]。对外仅暴露noise、noise3d、noise4d三个方法与一个可选的自定义随机源构造参数但凭借确定性、平滑、各向同性的特性它在仓库的 SSAO/GTAO 噪声纹理生成与 GPGPU 水面程序化纹理中承担了关键角色是 three.js 开发者做程序化内容时的标准数学组件之一。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考