TexGen.js 分形噪声生成技术详解-优快云博客

TexGen.js 分形噪声生成技术详解

texgen.js JavaScript Texture Generator 项目地址: https://gitcode.com/gh_mirrors/te/texgen.js

前言

TexGen.js 是一个强大的纹理生成库，它提供了丰富的API来创建各种程序化纹理。本文将重点解析其中的分形噪声(Fractal Noise)生成技术，这是计算机图形学中常用的纹理生成方法。

分形噪声基础概念

分形噪声是通过叠加多个不同频率和振幅的噪声层来创建的复杂纹理。它具有自相似性，即在不同的尺度下观察都能看到相似的结构特征。

核心参数解析

基础频率(baseFrequency): 控制噪声的基本波动频率
倍频数(octaves): 决定叠加的噪声层数
振幅(amplitude): 控制每层噪声的强度
持续性(persistence): 决定振幅随倍频变化的衰减率
插值方式(interpolation): 影响噪声的平滑程度

代码实例解析

基础分形噪声生成

new TG.Texture(200, 200)
  .set(new TG.FractalNoise().seed(seed).baseFrequency(20).octaves(1).amplitude(0.5))
  .addToPage("Base Frequency");

这段代码展示了最基本的单层噪声生成。通过调整baseFrequency可以改变噪声的"粗糙度"。

多倍频叠加

new TG.Texture(200, 200)
  .set(new TG.FractalNoise().seed(seed*2).baseFrequency(10).octaves(1).amplitude(0.25))
  .addToPage("+ Octave");

添加第二层倍频，频率减半(10)，振幅也减半(0.25)，这是典型的分形噪声构造方式。

完整分形噪声

new TG.Texture(200, 200)
  .set(new TG.FractalNoise().seed(seed).baseFrequency(20).octaves(3).step(2).amplitude(0.5).persistence(0.5))
  .addToPage("= Fractal Noise");

这里展示了完整的三层分形噪声，使用了step参数控制频率变化步长，persistence控制振幅衰减率。

插值技术对比

TexGen.js 提供了三种插值方式：

无插值(0): 产生块状明显的噪声
线性插值(1): 平滑过渡但仍有明显棱角
样条插值(2): 最平滑的过渡效果

// 无插值示例
.set(new TG.FractalNoise().interpolation(0))

// 线性插值示例
.set(new TG.FractalNoise().interpolation(1))

// 样条插值示例
.set(new TG.FractalNoise().interpolation(2))

高级应用示例

纹理尺寸独立性

new TG.Texture(200, 200)
  .set(new TG.FractalNoise().seed(seed).baseFrequency(200).octaves(8).step(2))
  .add(new TG.Rect().size(0, 100).position(100, 0).tint(10, -10, -10))
  .add(new TG.Rect().size(100, 0).position(0, 100).tint(10, -10, -10))
  .addToPage("200px <br/> (width and height independent)");

这段代码展示了如何生成尺寸独立的纹理，通过添加参考线显示纹理在不同区域的一致性。

复合纹理效果

new TG.Texture(size, size)
  .set(new TG.FractalNoise().baseFrequency(20).persistence(0.75).amplitude(0.4).interpolation(2).tint(0.75, 0.95, 1))
  .add(new TG.FractalNoise().baseFrequency(4).octaves(3).interpolation(1).tint(0.25, 0.35, 0.85))
  .sub(new TG.Twirl().radius(size*3).strength(1.5).position(size/2, size/2))
  .mul(new TG.Circle().radius(size*1.1).position(size/2, size/2).delta(size))
  .addToPage("Example 1");

这个复杂示例展示了如何组合多种噪声和效果：