svg : feTurbulence 柏林噪声滤镜

马黑黑 · 发表于 2023-10-17 08:07

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-10-17 08:08 编辑

自然纹理，比如大理石、木板等物体表面所呈现的样子，整体的秩序是由随机杂乱的图案组成。计算机想要模拟此类纹理，需要一个算法。上世纪80年代，Ken Perlin成功创建了该算法，首先应用于电影行业，他因此获得了奥斯卡技术成就奖。这个算法以他的姓命名，叫柏林算法，被广泛应用于图像合成领域，在 svg 中也被封装成了滤镜，feTurbulence。

该滤镜拥有 5 个属性，每一个属性都有自己的默认值：

	baseFrequency : 基本频率，默认值 0，最大值 1
	numOctaves : 八音度数量，默认值 1，一般不建议超过 3（肉眼可辨别的变化程度）
	seed : 随机种子数，默认值 0
	stitchTiles: 衔接平铺，默认值：noStitch
	type : 类型，默认值 turbulence

各属性都有默认值，这意味着，我们不需要设置的属性就不用让它出现。试看以下例子，我们在 feTurbulence 滤镜中只设置了 baseFrequency 基本频率属性：

<svg>
	<filter id="Turb1">
		<feTurbulence baseFrequency="0.05"></feTurbulence>
	</filter>
	<rect x="0" y="0" width="100%" height="100%" fill="none" filter="url(#Turb1)"></rect>
</svg>

效果如下：

上述效果，矩形占满整个 svg 画布，填充色为无，纹理效果是滤镜填充的。feTurbulence 滤镜仅设置了 baseFrequency 属性就有了非常奇妙的效果。事实上，baseFrequency 属性可以接收两个两个值，分别代表 xy 方向的基本频率，比如 baseFrequency="0.002 0.5"，效果如下所示：

接下来，我们在第一个例子的基础上加入 type 类型设置，它除了默认值 turbulence，还有一个 fractalNoise，加入了白噪音，能产生高斯模糊。看代码和效果：

<svg>
	<filter id="Turb3">
		<feTurbulence baseFrequency="0.05" type="fractalNoise"></feTurbulence>
	</filter>
	<rect x="0" y="0" width="100%" height="100%" fill="none" filter="url(#Turb3)"></rect>
</svg>

种子 seed 属性的作用在于让纹理的随机性更富有变化。我们仍然以第一个实例为基础，加入 seed 属性：

<filter id="Turb4">
		<feTurbulence baseFrequency="0.05" seed="30"></feTurbulence>
	</filter>
	<rect x="0" y="0" width="100%" height="100%" fill="none" filter="url(#Turb4)"></rect>
 </svg>

八音度 numOctaves 属性比较抽象，它借用音乐的音阶（CDEFGAB）原理，令不同“帧频”的图像叠加，从而产生更为细腻的、丰富的细节效果，好比两个音阶共同弹奏一段曲子，呈现出来的声音细节更为优美一样（因此Perlin效果又称为柏林噪音）。仍然以第一个实例做基础，加入 numOctaves 属性，请查看代码与效果：

<svg>
	<filter id="Turb5">
		<feTurbulence baseFrequency="0.05" numOctaves="3"></feTurbulence>
	</filter>
	<rect x="0" y="0" width="100%" height="100%" fill="none" filter="url(#Turb5)"></rect>
</svg>

第五个属性 stitchTiles 是两个图形衔接相关，处理多图案组合时的边界图案连续问题，默认值是 noStitch，另一个值是stitch。这里就不举例说明了。