【Unity3D杂谈】记查相机渲染保存的图片与场景中不一致的问题的经历

一、问题描述

        最近在做2D手游的时候遇到一个需求：给2D图片识别边缘并且加上一圈描边，再在此基础上再加一圈柔和的外发光。

        效果实现本身没有什么特别之处，普通的描边shader参考，稍微改改即可以实现能接受的效果。

        类似的效果可以参考其他大佬的实现方案：

        [Unity Shader]2D边缘发光效果(学习笔记) - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/633616509Unity Shader 极简实践4——图片外发光 - 简书 (jianshu.com)https://www.jianshu.com/p/333917633789

       shader的问题在于：一方面、2D图片边缘的识别本身就需要取周围像素点通过透明度判断出边缘来，即需要在片元着色器for循环去多重采样；另一方面、对描边和外发光的效果有柔边要求，因此需要实现类似于高斯模糊的边缘效果，本身高斯模糊也需要for循环多重采样。因此本身性能上讲是不高的。而根据需求， 场景内可能会有数量较多的图片需要使用这个shader。

        实际上其实美术在出图的时候就加上描边也是可以的，但这样美术童鞋就需要大量处理。本着能用代码就不用人力的原则，最后得出一个折衷的方案：

        实现一个Editor工具，使用相机拍摄使用了对应材质球的图片，相机背景色设置为Color.clear，然后拍摄出的图片自动存储到目录下。

        方案上本身没有问题，但是这个工具造出来之后，却发现，拍摄下来的图片，透明度变浅，颜色也变得有点奇怪。

二、问题分析

        测试过程中发现，相机的填充色改为其他颜色，但是透明度为0，拍摄出来的图片竟然也跟着变化。

        此时开始怀疑是混合模式的问题。

        查看shader，实现的方式是普通的透明度混合，即

        Blend SrcAlpha OneMinusSrcAlpha

        回忆起基础知识可知

        FinalColor = SrcColor * SrcAlpha + DstColor * (1 - SrcAlpha)

        

        让我们起一个更加直观的变量名字，假定渲染图片之前的渲染Buffer的Color和Alpha分别为BufferColor，BufferAlpha，图片的Color和Alpha分别为ImgColor和ImgAlpha，最终屏幕颜色为ResultColor和ResultAlpha，则有：

        ResultColor = ImgColor * ImgAlpha + BufferColor * (1 - ImgAlpha)

        ResultAlpha = ImgAlpha * ImgAlpha + BufferAlpha * (1 - ImgAlpha)

        由此可见，实际上输出的图片的Color和Alpha不是（ImgColor, ImgAlpha），Alpha是一个乘方关系，而Color也被乘上了Alpha系数。保存的图片效果不是想象中的效果的原因就是因为保存的结果是（rgb = ImgColor * ImgAlpha,  a = ImgAlpha * ImgAlpha）。

        但是为什么Scene里边看到的效果又是对的呢，这是因为，Scene界面下即便我们选了相机的颜色为Color.clear，场景依旧是按天空盒等形式展示的，因此看到的效果不是和Color.clear叠加的结果。

三、解决方式

       由于此处我们只是想导出正确的图片，最取巧的方式是，修改BlendMode为

        BlendMode One One

        则对应的

        ResultColor = ImgColor * 1 + BufferColor * (1 - 1)

        ResultAlpha = ImgAlpha * 1 + BufferAlpha * (1 - 1)

        正好是对应图片的值。这样拍摄出来的效果就是想要的效果了。