1. 从一张“神奇”的贴图开始：理解卡通云的构成
很多朋友在Unity里做卡通风格天空盒时，都会遇到一个难题：云怎么才能动起来，并且能像《原神》里那样，随着太阳光照射，边缘有一种缓缓“融化”或“消散”的感觉？不是简单的飘动，而是那种光照和云体本身产生化学反应般的美妙互动。我最初也尝试过用多层噪声贴图叠加模拟，效果总是差强人意，要么太“实”，像棉花糖硬块，要么消散起来毫无规律，直到我静下心来研究了一下这类渲染背后的“标配”资产——一张看起来平平无奇，实则暗藏玄机的云贴图。
这张贴图通常是一张RGBA四通道的图片。如果你用普通的图片查看器打开，它可能就是一坨灰色的云状图案，没什么特别。但当我们把它导入Unity，并分别在Shader中采样它的R、G、B、A四个通道时，魔法就开始了。根据一些公开的技术分享和实际逆向分析（比如参考《崩坏3》的渲染技术），这张贴图的每个通道都承载着不同的渲染信息：
- R通道（红色）：通常存储的是基础阴影信息。你可以把它理解为云层最暗的部分，决定了云的体积感和基础形态。
- G通道（绿色）：存储的是边缘光（Rim Light）信息。这是卡通渲染的灵魂之一，它定义了云在逆光或侧光时，边缘那一圈“亮边”的范围和强度。
- B通道（蓝色）：这是最关键的一环，它存储的是SDF（Signed Distance Field，有向距离场）数据。简单来说，它用灰度值记录了每一个像素点到云朵形状“边界”的距离。白色代表在云朵内部深处，黑色代表在远离云朵的外部空间，而灰色地带就是云的“表皮”。这个通道是实现动态消散效果的核心。
- A通道（Alpha）：有时会用来存储额外的细节遮罩或用于混合，但在基础实现中，我们可能主要关注前三个通道。
我第一次在Shader里把这四个通道分开显示时，有种恍然大悟的感觉。原来我们眼中一朵柔软的、有体积的卡通云，在渲染层面是被这样“拆解”和“重组”的。这就像做一道复杂的菜，主厨提前备好了处理好的半成品（各个通道），最后在炒制（Shader计算）时按顺序和比例下锅，最终呈现出完美的菜品。理解这张贴图，是我们实现一切效果的第一步。接下来，我们就得深入聊聊这个充当了“烹饪火候控制器”的SDF。
2. SDF：不只是距离，更是云消散的“遥控器”
SDF，全称有向距离场，听起来很学术。我刚开始接触时也是一头雾水，但用一个生活中的例子就很容易理解：想象你站在一个不规则形状的游泳池边。SDF就像是一张标注了地面上每一点到游泳池边缘距离的地图。站在池水里的点，距离是负值（比如-1米，-2米），颜色偏白；站在岸上的点，距离是正值（1米，2米），颜色偏黑；而正好站在池边的那条线，距离就是0。
对应到我们的云贴图B通道，这张灰度图就是这么一张“地图”。纯白色（值接近1）的区域表示该像素点在云的“肚子”里，离边界很远；纯黑色（值接近0）表示在云的外部空间；而介于中间的灰色，则精确地代表了该像素处于云的“表皮”层，灰色越浅，离边界越远但仍属于内部，灰色越深，则刚刚跨出边界。这个“距离”信息是连续的、平滑的，这正是SDF的强大之处。
为什么连续的SDF数据如此重要？因为我们要做的“消散”效果，本质上是一个阈值化的过程。如果我们只有一张二值化的云遮罩（非黑即白，1代表云，0代表空），那么让云消散就只能像用橡皮擦擦除，边缘会非常生硬。但有了SDF，我们可以设定一个动态的“水位线”（阈值）。比如，我们让Shader中的某个变量_DissolveThreshold从0向1变化。在渲染时，对于每一个像素，我们采样它的SDF值（假设是0.3），然后和当前的“水位线”（比如0.5）比较。因为0.3 < 0.5，所以这个像素被判定为“低于水位线”，即需要被“溶解”掉。关键在于，SDF值0.3和阈值0.5相差0.2，而SDF值0.4的像素和阈值0.5相差0.1，我们可以利用这个差值来做一个平滑的过渡！比如，让差值小的区域（0.4）半透明，差值大的区域（0.3）更透明，差值大于0的区域（SDF值>0.5）则完全不显示（完全透明）。
这样一来，云的消散就不再是“咔嚓”一下消失，而是从边缘开始，由外向内，有一个从半透明到完全透明的渐变过程，视觉上就是云在慢慢“化开”。而这个“水位线”阈值，我们就可以把它和光照方向、太阳高度等动态因素关联起来。例如，让面向太阳的云边缘的阈值更高，消散得更快，背对太阳的部分阈值更低，消散得慢甚至不消散，这样就能模拟出阳光“驱散”云朵的动态视觉效果了。所以，SDF图就是我们手里那个可以精准控制云朵形态变化、实现平滑消散的“万能遥控器”。
3. 动手第一步：准备你的“云朵工坊”
理论懂了，手就开始痒了，对吧？别急，我们一步步来搭建实现这个效果的环境。首先，你需要在Unity中创建一个用于测试的场景。我建议新建一个空场景，删掉默认的天空盒材质，创建一个简单的Sphere或Quad作为地面，再放一个方向光（Directional Light）模拟太阳。摄像机角度调整到能看见大部分天空。
接下来是核心资产准备。如果你手头有类似《原神》风格的那种四通道云贴图（RGBA分别存储阴影、边缘光、SDF和Alpha），那最好不过。如果没有，也别慌，我们可以用变通的方法来获取SDF图。一种方法是，如果你有一张普通的云形状黑白遮罩图（比如在Photoshop里用画笔画的），你可以通过一些工具或算法来生成它的SDF图。网上有一些在线的SDF生成工具，或者你也可以在Unity里用Compute Shader自己实现一个经典的8SSEDT算法来生成。不过作为起步，我强烈建议先找一张现成的、带SDF通道的贴图来学习，理解效果后再去研究生成过程。
我这里假设你已经有了那张“四通道神图”。在Unity Project窗口中导入它，务必在导入设置中勾选“sRGB (Color Texture)”选项，并确保“Alpha Source”设置正确。更重要的是，因为我们的SDF数据是存储在颜色通道中的，需要被当作数据而非颜色来解读，所以对于这张贴图，我们通常选择“Default”的纹理类型，或者根据需求选择“Single Channel”的R/G/B格式，但为了同时使用多个通道，保持“Default”并确保非压缩格式（如RGBA32）以获得更精确的数据采样是个好习惯。
然后，我们需要创建一个Unlit Shader Graph（如果你习惯用Shader代码，也可以用URP的Unlit Shader模板修改）。在Shader Graph中，我们先搭建一个最基础的框架：通过Sample Texture 2D节点采样我们的云贴图，然后使用Split节点将RGBA四个通道的值分离出来，分别连接到不同的处理逻辑上。我们可以先创建一个简单的输出，比如将R通道（阴影）直接输出为颜色，看看云的基础形状是否正确显示。这一步的目的是验证资产和基础管线是否畅通无阻。
4. 编写Shader：将理论转化为视觉魔法
现在进入最激动人心的部分——编写Shader逻辑。我们将使用Shader Graph来可视化地构建，这样更直观。当然，我会同时解释其背后的代码逻辑，方便习惯写代码的朋友理解。
4.1 基础形状与阴影合成
首先，我们用SDF（B通道）来重建云的基础形状。我们添加一个Float属性，命名为_CloudThreshold，用来控制云的“密度”或显示范围。创建一个Subtract节点，用采样到的SDF值减去_CloudThreshold。然后通过一个Saturate节点将结果钳制在0到1之间。这个结果（我们称为shape）就是一个0到1的渐变遮罩，1代表坚实的云内部，0代表完全透明的外部，中间值就是半透明的边缘。将这个shape作为透明度输出，基础云的形状就出来了。调整_CloudThreshold，你可以看到云在“膨胀”或“收缩”。
接着，融入阴影。将R通道（基础阴影）的值与shape相乘。这样，阴影信息只会在云形状存在的区域显示。你可以再添加一个颜色属性_ShadowColor（比如深蓝色或灰色）来染色这个阴影层，然后将其输出到片元着色器的颜色上。此时，你应该能看到一个带有基础明暗变化的静态云朵了。
4.2 注入灵魂：动态边缘光
卡通渲染的精髓之一就是边缘光。我们使用G通道（边缘光信息）。通常，边缘光需要在逆光视角下最明显。所以我们需要计算视角方向和光照方向的点积。在Shader Graph中，使用View Direction和Light Direction节点，经过一个Dot Product节点，得到点积值。这个值在面向光源（顺光）时接近1，背向光源（逆光）时接近-1。
我们希望逆光时边缘光更强。所以可以用1 - dotResult或者(1 - dotResult) * 0.5 + 0.5之类的计算进行重映射，得到一个在逆光区域亮、顺光区域暗的遮罩，我们称之为rimMask。然后，将G通道的值与这个rimMask相乘，再与之前计算好的shape相乘（确保只在云体上显示）。最后，你可以用一个_RimColor（比如暖黄色）来乘上这个结果，得到边缘光颜色。将这个边缘光颜色与之前的阴影颜色相加（Add），云的立体感和光照反应立刻就鲜活起来了。
4.3 核心魔法：基于光照的SDF消散
这是实现“阳光驱散云朵”效果的关键。原理是：让之前提到的“水位线”（消散阈值）不再是固定的_CloudThreshold，而是根据像素点相对于太阳的方向动态变化。
我们引入一个新的Float属性_DissolveIntensity，用于控制整体消散的强度。然后，我们需要一个动态的阈值偏移量。计算每个片元的世界位置到光源方向（太阳方向）的点积。同样，这个点积值在面向太阳时大，背对太阳时小。我们利用这个值来动态调整消散的阈值。
具体的Shader Graph操作可以这样：将dot(lightDir, worldNormal)的结果（注意，这里可能需要使用世界法线，对于天空盒球体或者面片，我们可以用摄像机到顶点的方向近似作为法线）进行重映射和加工。例如，使用公式：dynamicThreshold = _CloudThreshold + (1 - lightDot) * _DissolveIntensity。这里(1 - lightDot)使得面向太阳（lightDot接近1）的部分，dynamicThreshold增加得少，而背对太阳的部分增加得多。但为了达到“面向太阳的边缘消散”的效果，我们可能需要反过来思考：让面向太阳的部分更容易被溶解。所以一个更常用的技巧是，直接用lightDot来影响SDF的比较。
更直接的做法是：我们计算dissolveFactor = saturate(SDF值 - _CloudThreshold)，这是基础的形状因子。然后，我们计算sunEffect = saturate(lightDot * _DissolveIntensity)。最后，云的最终显示因子finalShape = dissolveFactor * (1 - sunEffect)。这样，sunEffect在面向太阳时变大，导致(1 - sunEffect)变小，从而削弱甚至完全消除dissolveFactor，使得该区域的云变透明。而背对太阳时，sunEffect为0或很小，finalShape几乎等于dissolveFactor，云保持原状。通过调整_DissolveIntensity，你可以控制阳光“融化”云朵的力度。将这个finalShape重新作为透明度输出，并同样去影响阴影和边缘光的计算，一个随着太阳方向动态消散的云效果就初具雏形了。
5. 让天空盒“活”起来：动态交互与优化
实现了基础效果后，我们可以让它更精致、更互动。一个生动的天空盒，云不应该只是被动地受光消散，它的形态、密度也可以有些许变化，以模拟风的流动。
我们可以对采样SDF贴图所用的UV坐标进行一些简单的动画。例如，添加一个_WindSpeed和_WindDirection属性。在Shader中，用_Time.y（游戏运行时间）乘以_WindSpeed和_WindDirection（一个二维向量），得到一个偏移量，将其加到云贴图的UV坐标上。这样，云就会沿着风向缓慢移动。注意，移动速度要非常慢，才能模拟出高空云层那种舒缓的流动感，太快就变成暴风雨前的乌云了。
更进一步，我们可以让消散的边缘更加“破碎”和自然。单纯依靠SDF的平滑过渡，边缘有时会显得过于“完美”。我们可以引入一张低频率的噪声图（Noise Texture），采样后将其值乘以一个很小的系数（比如0.1），加到动态阈值_CloudThreshold上，或者与SDF值进行混合。这样，云的消散边缘就会产生细微的、不均匀的凹凸感，更像真实云气在散开时的絮状效果。
性能方面也需要考虑。我们的云渲染通常是放在天空盒球体的内部，或者使用一个面片（Quad/Plane）。如果使用面片，记得在脚本中让这个面片始终面向摄像机（Billboarding）。在Shader中，确保复杂的计算（如点积、噪声采样）只在必要时进行，并利用Shader Graph的节点优化（比如将不变的计算放在Subgraph中）。对于移动平台，要密切关注贴图采样次数和算术指令数，如果压力大，可以考虑简化边缘光计算，或者使用更低精度的纹理格式。
最后，别忘了将你的太阳光方向与场景中的主方向光（Directional Light）绑定。在脚本中，你可以实时获取RenderSettings.sun.transform.forward（如果设置了Sun Source）或者Light.main.transform.forward，并将其作为一个Vector4类型的Shader全局属性（Shader.SetGlobalVector）传递给你的天空盒Shader。这样，当你在场景中旋转太阳方向光时，云朵的消散方向也会实时地、正确地跟着改变，实现真正的动态交互。看着自己创造的云朵在虚拟的阳光下缓缓流动、消散，那种成就感，正是图形学编程最迷人的地方之一。
