论坛 › 马黑黑教程专版 › svg : feDisplacementMap 滤镜

马黑黑 发表于 2023-10-18 08:12

svg : feDisplacementMap 滤镜

<style>
.ma p { margin: 8px 0; }
.rred { color: red; }
.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; }
.mypic { filter: url(#f1); }
</style>

<div class="ma">
        <p>feDisplacementMap 是一个像素置换滤镜，该滤镜遍历目标图像的像素点，使用 in2 属性指定的图像中的像素，按转换公式计算出结果后，在 in 属性指定的目标图像中置换对应的像素，最后重新映射出新的图形。</p>
        <p>滤镜语法：</p>
        <pre>&lt;feDisplacementMap
        color-interpolation-filters="颜色计算模式类型"
        in2="快照标识"
        <span class="rred">in="目标标识"
        xChannelSelector="X轴偏移颜色通道"
        yChannelSelector="Y轴偏移颜色通道"
        scale="扭曲度"</span>&gt;
&lt;/feDisplacementMap&gt;</pre>
        <p>这个看着很吓人，不过也别担心，我们常用到的其实仅是红色文本的几个属性。由于浏览器对 feDisplacementMap 的支持不够稳定，该滤镜通常只用来做图像的液化、形变等工作，会紧跟在 feTurbulence 滤镜之后，重要的 in2 属性可以缺省，缺省表示它指向它上文的滤镜。</p>
        <p>我们先看一个实例代码：</p>
        <pre>&lt;svg width="0" height="0"&gt;
        &lt;filter id="f1"&gt;
                &lt;feTurbulence
                        baseFrequency="0.2 0.5"
                        type="fractalNoise"
                        numOctaves="2"
                        seed="10"&gt;
                &lt;/feTurbulence&gt;
                &lt;feDisplacementMap
                        xChannelSelector="G"
                        yChannelSelector="R"
                        in="SourceGraphic"
                        scale="80"&gt;
                &lt;/feDisplacementMap&gt;
        &lt;/filter&gt;
&lt;/svg&gt;

&lt;p&gt;&lt;img src="https://638183.freep.cn/638183/t23/3/lake1.jpg" alt="" style="filter: url(#f1);" /&gt;&lt;/p&gt;</pre>
        <p>这组代码，svg 宽高均为 0，因为我们不需要显示它，我们将使用的仅是它里面的滤镜。滤镜 id 标识是 f1，内有两个滤镜：第一个滤镜是柏林噪声滤镜 feTurbulence，此前我们已经做了介绍；第二个滤镜是今天的主角，feDisplacementMap 滤镜，in2缺省，默认使用上文滤镜做置换源，in 指向目标图形即使用滤镜者的图形（in="SourceGraphic"），扭曲度为80，（像素点的）X坐标在 RGBA 通道中选择 G 通道进行位置偏移（xChannelSelector）、Y坐标则选择了 R 通道（yChannelSelector）。然后，这个滤镜，总体效果应用到 HTML 的 img 标签中，效果如下：</p>
        <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>
<p>原图：</p>
<p><img src="https://638183.freep.cn/638183/t23/3/lake1.jpg" alt="" /></p>

</div>

红影 发表于 2023-10-18 10:53

这个滤镜要配合着用的啊。变化真大{:4_204:}

红影 发表于 2023-10-18 10:59

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

红影 发表于 2023-10-18 11:14

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

红影 发表于 2023-10-18 11:15

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

红影 发表于 2023-10-18 11:16

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

马黑黑 发表于 2023-10-18 12:53

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

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

马黑黑 发表于 2023-10-18 12:54

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

当然要多尝试

马黑黑 发表于 2023-10-18 12:55

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

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

马黑黑 发表于 2023-10-18 12:59

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

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

马黑黑 发表于 2023-10-18 13:01

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

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

红影 发表于 2023-10-18 14:43

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

这个置换滤镜让原图都变得快认不出了呢{:4_173:}

红影 发表于 2023-10-18 14:46

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

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

红影 发表于 2023-10-18 14:50

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

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

红影 发表于 2023-10-18 14:54

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

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

红影 发表于 2023-10-18 14:57

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

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

马黑黑 发表于 2023-10-18 19:16

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

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

马黑黑 发表于 2023-10-18 19:16

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

那是的

马黑黑 发表于 2023-10-18 19:17

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

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

马黑黑 发表于 2023-10-18 19:18

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

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

查看完整版本: svg : feDisplacementMap 滤镜