type
status
date
slug
summary
tags
category
icon
password
本篇笔记主要介绍了在Unity引擎中实现 硬边溶解 效果的基础实现方法。
📝 正文
基本思路
这种效果与之前案例中的遮罩效果很相像，也是一张纹理被另一张纹理遮罩形成的，只不过遮罩的这张纹理还会发生动态变化，而主纹理的溶解效果实质上就是Alpha透明通道的值被调节为0的结果；
简单来说就是，我们可以用一张遮罩纹理盖住底下的主纹理图像，然后动态地改变这张遮罩纹理的透明度值，并将它的透明度作为主纹理的透明度值，这样遮罩纹理图像中只要哪里的像素透明度为0，主纹理上对应的像素点也会相应地变透明，于是就实现了“溶解”的效果。
（在开始连接节点前，最好先进行Shader的相关设置）
下图是第一种思路：
也就是遮罩纹理的基本原理，只不过将遮罩纹理进行了一些特殊的修改，即使用Step函数，使得遮罩纹理的值被映射到了0和1的二值区间上，图像中的像素点要么为1要么为0（因此叫作“硬边”），再将其与主纹理进行图像乘法，也就实现了溶解。
（ASE中关于Step Node的介绍）
但是在接下来的使用过程中我发现了一处缺陷：
如果我开启了输出图像的Alpha通道，原本背景区域就会透明，只留下人物主体（注意，在ASE编辑器中勾选了A通道只是用于调试的，最终渲染输出时不一定包含该通道，这也是我多次尝试时发现的问题）
此时再去调节Step的控制参数：
就会看到最终乘出来的图像并不会变透明。这是因为遮罩纹理即使使用了Step函数，但由于其透明度值始终为1（黑色不代表透明，它只是不透明的黑），这样乘出来的效果就是主纹理的透明度为1的像素点和遮罩纹理透明度为1的像素点相乘，A通道输出仍会保持1不变，所以在调节float属性时Step节点输出的图像只是有白有黑，但没有出现透明。
因此我们必须对输出通道中的A通道也进行修改，让被遮罩部分的透明度也降为0。
如果我们只是对主纹理的A通道进行输出，那么最终输出的是一幅全黑但不透明的图像：
这是因为图像的RGBA四个通道中，RGB三个通道都与遮罩纹理相乘后变为了0，即黑色；但A通道的值仍为1，而且我们可以在Unity Editor中查看图像的A通道信息如下：
图像中白色部分即透明度为1的像素点，黑色部分即透明度为0的像素点，那么上述出现的问题就可以解释为：主纹理(即人像)的透明度始终未发生变化，只是RGB通道在进行图像乘法后变为了0，因此最终全部溶解后仍然会显示一幅不透明的黑色图像，类似于剪影。（当然，虽然不符合溶解效果，但却可以作为剪影效果）
接下来为了真正实现溶解效果，我们必须让主纹理的A通道也同RGB一道加入到乘法运算中来。
当然方式很多，例如下面这一种：
既然Step节点输出的是非0即1的二值，并且我们也是用它来控制主纹理的颜色，那么我们也可以用Step输出的值作为渲染输出的A通道值，也就是说，Step为0的地方，像素就是透明的。
写到这里，其实发现有一部分节点是多余的，因为溶解效果就是让主纹理被遮罩的部分变得透明，那么RGB通道的值其实不需要改变。简化后：
但目前的效果是这样的：
即图像原本的A通道属性出现了问题，原本应该透明的地方却出现了背景，因为我们使用的是“Dissolve”这个遮罩纹理来控制的Alpha输出，这样就丢失了主纹理原本的透明度信息（原本透明的地方现在反而出现了棕色背景）。
所以接下来还需要继续改善。
解决方法也很简单，那就是让主纹理的A通道也加入到Alpha输出的计算中来：
让主纹理的A通道和Step输出的二值结果进行相乘
这样，就会建立在主纹理原本A通道的基础上再乘以0或1，而不会影响到其他区域的透明度值了。
于是就得到了最终的节点图：
整个Shader就分为2大部分：控制RGB输出、控制A输出
RGB输出就是使用主纹理的RGB输出（使用到了Component Mask节点来剔除原本的A通道，但在本例中可有可无，因为输出节点里恰好有一个Alpha的单独输出通道，因此该操作并无影响），然后连接到Color输出通道上；
A输出，就是使用Step节点对遮罩纹理进行采样，得到二值，再将其与主纹理的A通道相乘，然后连接到输出节点的Alpha通道；
效果如下：
🤗 总结归纳
溶解效果与遮罩纹理的实现原理并无本质上的差别，都是使用遮罩纹理来叠加到主纹理上，产生一些输出效果，只不过溶解效果是在遮罩的基础上还增加了修改透明度的操作。
📎 参考文章
有关UnityShader与图形渲染的相关问题，欢迎在底部评论区留言，一起交流~
- 作者:Damier
- 链接:https://notion-next-coral-eta.vercel.app/article/article_3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。