svg : feTurbulence 柏林噪声滤镜
本帖最后由 马黑黑 于 2023-10-17 08:08 编辑 <br /><br /><style>.ma p { margin: 8px 0; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
.ma > svg { border: 1px solid gray; }
</style>
<div class="ma">
<p>自然纹理，比如大理石、木板等物体表面所呈现的样子，整体的秩序是由随机杂乱的图案组成。计算机想要模拟此类纹理，需要一个算法。上世纪80年代，Ken Perlin成功创建了该算法，首先应用于电影行业，他因此获得了奥斯卡技术成就奖。这个算法以他的姓命名，叫柏林算法，被广泛应用于图像合成领域，在 svg 中也被封装成了滤镜，feTurbulence。</p>
<p>该滤镜拥有 5 个属性，每一个属性都有自己的默认值：</p>
<pre> baseFrequency : 基本频率，默认值 0，最大值 1
numOctaves : 八音度数量，默认值 1，一般不建议超过 3（肉眼可辨别的变化程度）
seed : 随机种子数，默认值 0
stitchTiles: 衔接平铺，默认值：noStitch
type : 类型，默认值 turbulence</pre>
<p>各属性都有默认值，这意味着，我们不需要设置的属性就不用让它出现。试看以下例子，我们在 feTurbulence 滤镜中只设置了 baseFrequency 基本频率属性：</p>
<pre><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></pre>
<p>效果如下：</p>
<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>
<p>上述效果，矩形占满整个 svg 画布，填充色为无，纹理效果是滤镜填充的。feTurbulence 滤镜仅设置了 baseFrequency 属性就有了非常奇妙的效果。事实上，baseFrequency 属性可以接收两个两个值，分别代表 xy 方向的基本频率，比如 baseFrequency="0.002 0.5"，效果如下所示：</p>
<svg>
<filter id="Turb2">
<feTurbulence baseFrequency="0.002 0.5"></feTurbulence>
</filter>
<rect x="0" y="0" width="100%" height="100%" fill="none" filter="url(#Turb2)"></rect>
</svg>
<p>接下来，我们在第一个例子的基础上加入 type 类型设置，它除了默认值 turbulence，还有一个 fractalNoise，加入了白噪音，能产生高斯模糊。看代码和效果：</p>
<pre><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></pre>
<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>
<p>种子 seed 属性的作用在于让纹理的随机性更富有变化。我们仍然以第一个实例为基础，加入 seed 属性：</p>
<pre><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></pre>
<svg>
<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>
<p>八音度 numOctaves 属性比较抽象，它借用音乐的音阶（CDEFGAB）原理，令不同“帧频”的图像叠加，从而产生更为细腻的、丰富的细节效果，好比两个音阶共同弹奏一段曲子，呈现出来的声音细节更为优美一样（因此Perlin效果又称为柏林噪音）。仍然以第一个实例做基础，加入 numOctaves 属性，请查看代码与效果：</p>
<pre><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></pre>
<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>
<p>第五个属性 stitchTiles 是两个图形衔接相关，处理多图案组合时的边界图案连续问题，默认值是 noStitch，另一个值是stitch。这里就不举例说明了。</p>
</div>
这个很奇妙，什么都不用做，只引入这个柏林滤镜，就出来这么玄妙的效果{:4_187:} 要想用这个，这五个属性的名字还有它们的取值内容和范围以及默认值都得记啊，不容易{:4_173:} 昨天黑黑的久石让的那个帖子里的水波就用了这个柏林滤镜吧，当然还有别的还没学的东东{:4_204:} 其他的大概明白点了，就那个种子没看明白，它的取值无上限么？看到黑黑取了30呢。
这个滤镜得到的图本来就看着是无序的，而种子的加入看不出来是什么作用。 红影 发表于 2023-10-17 10:19
其他的大概明白点了，就那个种子没看明白，它的取值无上限么？看到黑黑取了30呢。
这个滤镜得到的图本来就 ...
随机数种子理论上可以无限大。这里的随机数其实还是为随机数，不过它能工作，所以随便设个数值就好，一般都是一位数、两位数就行了。 红影 发表于 2023-10-17 09:59
昨天黑黑的久石让的那个帖子里的水波就用了这个柏林滤镜吧，当然还有别的还没学的东东
还有一个图形（像素）置换滤镜，feDisplacementMap，稍后我会介绍 红影 发表于 2023-10-17 09:44
这个很奇妙，什么都不用做，只引入这个柏林滤镜，就出来这么玄妙的效果
它就是制造噪声的 红影 发表于 2023-10-17 09:47
要想用这个，这五个属性的名字还有它们的取值内容和范围以及默认值都得记啊，不容易
细节越多参数也会跟着越多。svg 基于 XML 语言，XML 最初是由微软创建的，微软命名机制都是长单词（复合词），可能是为了更语义化吧。 马黑黑 发表于 2023-10-17 12:09
随机数种子理论上可以无限大。这里的随机数其实还是为随机数，不过它能工作，所以随便设个数值就好，一般 ...
嗯嗯，现在知道大致都设置什么数字了，只是仍不知道它带来的随机将是什么。 马黑黑 发表于 2023-10-17 12:11
还有一个图形（像素）置换滤镜，feDisplacementMap，稍后我会介绍
嗯嗯，等这两个都学了，就能看明白那个帖子了。 马黑黑 发表于 2023-10-17 12:11
它就是制造噪声的
是制造无需和随机的{:4_173:} 马黑黑 发表于 2023-10-17 12:13
细节越多参数也会跟着越多。svg 基于 XML 语言，XML 最初是由微软创建的，微软命名机制都是长单词（复合 ...
有可能，虽然学起来有点吃力，但它的初衷是好的。 红影 发表于 2023-10-17 20:55
有可能，虽然学起来有点吃力，但它的初衷是好的。
它就是这么设计的 红影 发表于 2023-10-17 20:54
是制造无需和随机的
众多的无序化的、随机化，才能营造出自然的纹理 红影 发表于 2023-10-17 20:47
嗯嗯，现在知道大致都设置什么数字了，只是仍不知道它带来的随机将是什么。
随机算法中有一个种子概念，不同数值的种子，随机的效果不是一样的。很多程序员不会满意默认的种子，所以要自己设置。 马黑黑 发表于 2023-10-18 13:01
它就是这么设计的
长复合单词虽然看着累，倒也不算多，就这么些，记一下应该就可以了。 马黑黑 发表于 2023-10-18 13:04
众多的无序化的、随机化，才能营造出自然的纹理
原来根源值要模拟自然纹理，能想出这个的人很聪明。 马黑黑 发表于 2023-10-18 13:06
随机算法中有一个种子概念，不同数值的种子，随机的效果不是一样的。很多程序员不会满意默认的种子，所以 ...
这个设置是为了满足不同人的不同需求的吧，程序员的要求太高{:4_173:} 红影 发表于 2023-10-18 15:00
原来根源值要模拟自然纹理，能想出这个的人很聪明。
所以得了奥斯卡技术奖