svg : feDisplacementMap 滤镜

马黑黑

feDisplacementMap 是一个像素置换滤镜，该滤镜遍历目标图像的像素点，使用 in2 属性指定的图像中的像素，按转换公式计算出结果后，在 in 属性指定的目标图像中置换对应的像素，最后重新映射出新的图形。

滤镜语法：

<feDisplacementMap
	color-interpolation-filters="颜色计算模式类型"
	in2="快照标识"
	in="目标标识"
	xChannelSelector="X轴偏移颜色通道"
	yChannelSelector="Y轴偏移颜色通道"
	scale="扭曲度">
</feDisplacementMap>

这个看着很吓人，不过也别担心，我们常用到的其实仅是红色文本的几个属性。由于浏览器对 feDisplacementMap 的支持不够稳定，该滤镜通常只用来做图像的液化、形变等工作，会紧跟在 feTurbulence 滤镜之后，重要的 in2 属性可以缺省，缺省表示它指向它上文的滤镜。

我们先看一个实例代码：

<svg width="0" height="0">
	<filter id="f1">
		<feTurbulence
			baseFrequency="0.2 0.5"
			type="fractalNoise"
			numOctaves="2"
			seed="10">
		</feTurbulence>
		<feDisplacementMap
			xChannelSelector="G"
			yChannelSelector="R"
			in="SourceGraphic"
			scale="80">
		</feDisplacementMap>
	</filter>
</svg>

<p><img src="https://638183.freep.cn/638183/t23/3/lake1.jpg" alt="" style="filter: url(#f1);" /></p>

这组代码，svg 宽高均为 0，因为我们不需要显示它，我们将使用的仅是它里面的滤镜。滤镜 id 标识是 f1，内有两个滤镜：第一个滤镜是柏林噪声滤镜 feTurbulence，此前我们已经做了介绍；第二个滤镜是今天的主角，feDisplacementMap 滤镜，in2缺省，默认使用上文滤镜做置换源，in 指向目标图形即使用滤镜者的图形（in="SourceGraphic"），扭曲度为80，（像素点的）X坐标在 RGBA 通道中选择 G 通道进行位置偏移（xChannelSelector）、Y坐标则选择了 R 通道（yChannelSelector）。然后，这个滤镜，总体效果应用到 HTML 的 img 标签中，效果如下：

原图：

红影

这个滤镜要配合着用的啊。变化真大

红影

赶紧又回去看了看黑黑的久石让的那个帖子，还有个js动画不太懂，其他的都已经讲到了

红影

xChannelSelector=和yChannelSelector=的取值变化，感觉不到什么，不明白它设置的意义。
scale=变一下，感觉到变化很大

红影

还有这个baseFrequency=，感觉前面讲的时候，数字越小好像越好看，这里的倒是觉得越小变化越大呢。

红影

这两个的组合千变万化，细微处还真的要多试多看看效果呢

马黑黑

红影 发表于 2023-10-18 10:53
这个滤镜要配合着用的啊。变化真大

柏林滤镜可以独立使用，但要让纹理去影响目标图像，需要用到置换滤镜。

马黑黑

红影 发表于 2023-10-18 11:16
这两个的组合千变万化，细微处还真的要多试多看看效果呢

当然要多尝试

马黑黑

红影 发表于 2023-10-18 10:53
这个滤镜要配合着用的啊。变化真大

水波纹的变化，就是通过这两货配合，期间不断改变柏林噪声的 baseFrequency 的值。

马黑黑

红影 发表于 2023-10-18 11:14
xChannelSelector=和yChannelSelector=的取值变化，感觉不到什么，不明白它设置的意义。
scale=变一下，感 ...

具体说，针对一个像素点，xChannelSelector 去置换该点的X方向的 RGBA 通道中的一个，yChannelSelector 置换的是Y方向的相应通道。由于涉及到复杂的内置转换公式，不方便展开来讲，并且，浏览器对该滤镜的支持不够稳定（上一个版本完美支持，下一个版本又不支持），目前也不方便演示其细节。

马黑黑

红影 发表于 2023-10-18 10:59
赶紧又回去看了看黑黑的久石让的那个帖子，还有个js动画不太懂，其他的都已经讲到了

JS部分，改变的是柏林滤镜的 baseFrequency 值，这样就能动态出现水波纹的效果

红影

马黑黑 发表于 2023-10-18 12:53
柏林滤镜可以独立使用，但要让纹理去影响目标图像，需要用到置换滤镜。

这个置换滤镜让原图都变得快认不出了呢

红影

马黑黑 发表于 2023-10-18 12:54
当然要多尝试

我在pencilcode里试了半天，换各种数据，有些变得面目全非了呢

红影

马黑黑 发表于 2023-10-18 12:55
水波纹的变化，就是通过这两货配合，期间不断改变柏林噪声的 baseFrequency 的值。

原来改变baseFrequency 的xy值，就能形成水波纹啊。而且非常好看

红影

马黑黑 发表于 2023-10-18 12:59
具体说，针对一个像素点，xChannelSelector 去置换该点的X方向的 RGBA 通道中的一个，yChannelSelector  ...

哦，那就不去管它了，到时候只要赋值给它就行了吧？

红影

马黑黑 发表于 2023-10-18 13:01
JS部分，改变的是柏林滤镜的 baseFrequency 值，这样就能动态出现水波纹的效果

那个值还挺特别，看到有正玄余玄计算呢，还不是简单的累加呢。

马黑黑

红影 发表于 2023-10-18 14:43
这个置换滤镜让原图都变得快认不出了呢

一切是合作而来的。柏林滤镜可以改改参数

马黑黑

红影 发表于 2023-10-18 14:46
我在pencilcode里试了半天，换各种数据，有些变得面目全非了呢

那是的

马黑黑

红影 发表于 2023-10-18 14:50
原来改变baseFrequency 的xy值，就能形成水波纹啊。而且非常好看

这些效果，除了仰赖技术，还得依靠想象力

马黑黑

红影 发表于 2023-10-18 14:54
哦，那就不去管它了，到时候只要赋值给它就行了吧？

是的。根据源图形与目标图形，可以考虑使用 RGBA 中的什么值