简介
glsl-fractal-brownian-noise 是一个基于 WebGL 的渲染库，可以用于生成实时的几何噪音效果。其使用 GLSL 语言描述噪音算法，通过 GLSL 编写的着色器，可以对图片、动画等进行高效渲染。
glsl-fractal-brownian-noise 包含多种噪音算法，其中以 Fractal Brownian Motion（分形布朗运动）最为常用，通过组合不同频率的 Perlin 噪声，可以生成自然景观中常见的地形细节和随机图案。
本教程将介绍如何使用 glsl-fractal-brownian-noise npm 包，包括安装、使用和优化技巧等方面。
安装
使用 npm 可以轻松安装 glsl-fractal-brownian-noise，只需要在终端中运行以下命令：
npm install glsl-fractal-brownian-noise
基本使用
在使用 glsl-fractal-brownian-noise 时，需要创建 WebGL 上下文、着色器程序、绑定缓冲区等操作，这些细节比较复杂。本教程使用 WebGL Boilerplate 框架简化这些操作，读者可以根据需要选择其他框架或手动实现。
1. 导入库
import { glslFractalBrownianNoise } from 'glsl-fractal-brownian-noise';2. 初始化
在 html 文件中添加一个 canvas 元素，并创建 WebGL 上下文：
<canvas id="canvas"></canvas>
import { WebGL } from 'webgl-boilerplate';
const canvas = document.getElementById('canvas');
const gl = WebGL.getContext(canvas);3. 创建着色器程序
-- -------------------- ---- -------
----- ------------ - -
---- ---- -- -
----------- - --------- ---- ---- -----
-
--
----- -------------- - -
--------- ----- ------
------- ----- -----
------- ---- -----------
---------------------------
---- ---- -- -
---- -- - --------------- - --------------
---- -- ------------ - -------------
----- ---------- - ----------- - ---- -------
------------ - ---------------------- -----
-
--
----- ------- - ----------------------- ------------- ----------------4. 绑定缓冲区
const positionBuffer = WebGL.createBuffer(gl, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])); const positionAttribute = WebGL.createAttribute(gl, program, 'position', 2, gl.FLOAT); WebGL.bindAttribute(gl, positionAttribute, positionBuffer);
5. 渲染循环
在 requestAnimationFrame 中循环渲染，每一帧需要更新 uniform 变量：
-- -------------------- ---- -------
-------- ------ ------ -
---- -- ----- -- -
----------------
-------------------- ---------
----- ----------------- - -------------------- -------- --------------
----- ----------- - -------------------- -------- --------
------------------------------- ------------- ---------------
------------------------- ------
-------------- ---
------------------------------
-
---------至此，一个简单的 Fractal Brownian Motion 模拟就完成了。
进阶使用
1. 参数调节
glsl-fractal-brownian-noise 提供了多个可调参数，可以用来调节噪音效果。其中包括：
- lacunarity：Lacunarity 参数，控制 Octave 频率倍增系数，默认值为 2.0。
- gain：Gain 参数，控制 Octave 振幅系数，默认值为 0.5。
- octaves：Octave 数量，控制噪音细节等级，默认值为 4。
- offset：Offset 向量，控制噪音偏移量，默认值为 vec3(0)。
- scale：Scale 参数，控制噪音缩放比例，默认值为 1.0。
为了使用这些参数，需要在 fragmentShader 中定义 uniform 变量以及使用 fbm 函数时传入参数：
-- -------------------- ---- -------
----- -------------- - -
--------- ----- ------
------- ----- -----
------- ---- -----------
------- ----- -----------
------- ----- -----
------- --- --------
------- ---- -------
------- ----- ------
---------------------------
---- ---- -- -
---- -- - --------------- - --------------
---- -- ------------ - -------------
----- ---------- - ----------- - ----- - ------- ------ ----------- ----- ---------
------------ - ---------------------- -----
-
--2. 优化技巧
- 将 uniform 变量定义为 const 常量，避免每一帧都重新传值。
- 将噪音算法封装成函数，避免重复代码，方便修改。
- 尽量使用 float 类型，避免转换。
示例代码
下面是一个完整的 glsl-fractal-brownian-noise 使用示例：
-- -------------------- ---- -------
------ - ------------------------ - ---- ------------------------------
------ - ----- - ---- --------------------
----- ------ - ----------------------------------
----- -- - -------------------------
----- ------------ - -
---- ---- -- -
----------- - --------- ---- ---- -----
-
--
----- -------------- - -
--------- ----- ------
------- ----- -----
------- ---- -----------
------- ----- -----------
------- ----- -----
------- --- --------
------- ---- -------
------- ----- ------
---------------------------
---- ---- -- -
---- -- - --------------- - --------------
---- -- ------------ - -------------
----- ---------- - ----------- - ----- - ------- ------ ----------- ----- ---------
------------ - ---------------------- -----
-
--
----- ------- - ----------------------- ------------- ----------------
----- -------------- - ---------------------- --- ----------------- --- -- --- --- -- -- -----
----- ----------------- - ------------------------- -------- ----------- -- ----------
----------------------- ------------------ ----------------
----- ----------------- - -------------------- -------- --------------
----- ----------- - -------------------- -------- --------
----- -------------- - -------------------- -------- -----------
----- ------------- - -------------------- -------- ----------
----- ------------ - -------------------- -------- ---------
------------------------------- -----
------------------------- -----
---------------------------- ---
---------------------------- --- -- ----
-------------------------- -----
-------- ------ ------ -
---- -- ----- -- -
----------------
-------------------- ---------
--------------------------------- -------- -------------- ------------- ---------------
--------------------------------- -------- -------- ------
-------------- ---
------------------------------
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057ad681e8991b448eb62d