移动端卡通渲染优化：利用ShaderGraph自定义函数节点实现高性能卡通着色

1. 项目概述：为什么要在移动端做卡通渲染？

做移动端渲染，尤其是风格化渲染，最头疼的就是性能。你精心设计了一个超酷的卡通着色器，在编辑器里跑得丝滑流畅，结果一打包到手机上，帧率直接掉到30以下，发热耗电还卡顿。这几乎是每个移动端图形开发者都会遇到的“灵魂拷问”。而卡通渲染（Cel Shading/Toon Shading）作为一种非真实感渲染（NPR）风格，虽然视觉上看起来“简单”，但其实现往往涉及边缘光（Rim Light）、色调分离（Color Ramp）、描边（Outline）等多个步骤，计算量并不小。

传统的做法是直接在Shader里写HLSL/CG代码，虽然灵活高效，但对美术和TA（技术美术）同学来说门槛较高，调试和迭代也不够直观。Unity的ShaderGraph完美解决了可视化编程的问题，让我们能像搭积木一样构建着色器。但问题来了：ShaderGraph的节点是封装好的通用功能，当我们需要一些特定、高效的算法，或者想对某个环节进行极致的移动端优化时，标准节点就显得力不从心了。

这时，Custom Function Node（自定义函数节点）就成了我们的“瑞士军刀”。它允许我们在ShaderGraph中直接注入手写的HLSL代码块，将ShaderGraph的可视化便利性与手写Shader的高效、精准控制结合起来。本次实战的目标，就是围绕“移动端优化”这个核心，利用Custom Function Node，打造一个既保持优秀卡通质感，又能在中低端移动设备上流畅运行的卡通渲染方案。我们会重点解决性能瓶颈，比如用更高效的算法计算边缘光，优化描边生成方式，并确保所有计算都充分考虑移动平台的精度（如使用half精度）和带宽限制。

2. 核心思路与方案设计：移动端卡通渲染的优化路径

一个完整的卡通渲染效果，通常包含几个核心部分：基于光照模型的色调分离、边缘光（内描边）、以及外描边。我们的优化也将围绕这三部分展开。

2.1 色调分离：从PBR简化到自定义光照模型

标准的卡通着色通常使用兰伯特（Lambert）或半兰伯特（Half Lambert）模型，然后通过一个一维纹理（Color Ramp）或阶跃函数对漫反射结果进行量化，形成色块。在ShaderGraph中，我们可以用Dot Product节点计算光方向与法线的点积，然后通过Sample Gradient节点（模拟Color Ramp）来实现。

优化点：移动端计算Dot Product和采样纹理都是基本操作，性能尚可。但我们可以通过Custom Function Node，将整个漫反射计算（包括可能的NDotL Clamp和Color Ramp采样）封装成一个函数。这样做的好处是：

1. 减少节点连线复杂度：使主图更清晰。
2. 便于复用和统一修改：比如在不同项目中快速替换整个光照模型。
3. 潜在的性能微调：在函数内部，我们可以针对移动端GLES3或Vulkan后端，使用特定的内置函数或优化技巧。

方案选择：我们将创建一个名为CelShading_float的Custom Function，输入法线、光方向，输出量化后的漫反射强度。Color Ramp纹理作为Texture2D类型参数传入。

2.2 边缘光（Rim Light）：性能消耗大户的优化

边缘光是卡通渲染的灵魂，能突出模型轮廓。常见算法是基于视角方向与法线方向的点积dot(N, V)。值越小（视角与法线越垂直），边缘光越强。

传统ShaderGraph实现：需要Normal Vector、View Direction、Dot Product、Power（控制衰减）、Saturate等一串节点。这会产生多个中间变量和计算步骤。

Custom Function优化方案： 我们可以用一个Custom Function节点RimLight_float来替代整个网络。其核心优化思路是：

1. 计算精简：直接在HLSL中计算1 - saturate(dot(N, V))，然后进行幂运算。避免多个节点的开销。
2. 支持多种模式：在函数内部，我们可以用#ifdef预编译指令，实现不同精度的计算（如half精度），或者提供“菲涅尔边缘光”、“基于深度的边缘光”等不同算法变体，通过一个Mode参数来切换。
3. 避免冗余计算：视角方向V可能在着色器中其他地方也需要。我们可以选择在函数外部计算好V再传入，或者在函数内部计算并返回，供其他部分复用，这需要在设计时权衡。

对于移动端，我们优先选择计算最简单的菲涅尔近似公式。

2.3 外描边：从屏幕后处理到几何着色器之外的优化选择

外描边主要有几种实现方式：基于法线膨胀的顶点着色器方法、基于轮廓边检测的几何着色器方法、以及基于深度/法线信息的屏幕后处理。

• 顶点法线膨胀：在顶点着色器中，沿顶点法线方向将顶点向外挤出（在模型空间或视图空间）。这是移动端最常用、性能最好的方法，但描边粗细不均匀，在硬边处会断开。
• 几何着色器：能生成质量很好的描边，但在移动端支持度有限（OpenGL ES 3.2及以上才普遍支持），且性能开销大，不推荐。
• 屏幕后处理：通过对比相邻像素的深度或法线值来检测边缘。效果很好，但需要额外的全屏Pass，对移动端带宽和填充率压力较大，通常用于PC或主机。

我们的移动端优化选择：基于顶点法线膨胀的正面剔除（Front Face Culling）双Pass法。这是移动端的黄金标准。

1. 第一个Pass（描边）：开启正面剔除（Cull Front），只渲染背面。将顶点沿法线方向挤出，并输出一个固定的描边颜色（如黑色）。
2. 第二个Pass（主体）：开启背面剔除（Cull Back），正常渲染模型正面，应用我们优化的卡通着色。

Custom Function的用武之地：顶点挤出操作本身很简单，在ShaderGraph中用Position节点的Vertex Normal偏移即可。但Custom Function可以帮助我们实现更高级的优化，例如：

• 基于距离的描边粗细：让描边在近处细，远处粗，增强立体感。这需要在顶点函数中获取顶点到相机的距离，并据此调整挤出力度。
• 基于顶点颜色的描边控制：用顶点颜色通道（如R）来控制某些部位不产生描边或改变描边强度。

我们将创建一个OutlineOffset_float函数，输入顶点位置、法线、描边宽度，以及可选的相机距离衰减系数，输出偏移后的顶点位置。

2.4 移动端专项优化策略集成

所有Custom Function的设计都必须贯穿移动端优化思想：

• 精度控制：在函数声明中使用_half后缀，或使用$precision宏，让Unity自动选择half或float精度。对于颜色、纹理坐标等数据，优先使用half或half2/3/4。
• 避免复杂分支：移动端GPU（特别是Mali、Adreno的早期架构）对if-else分支处理效率较低。尽量使用step()、lerp()或saturate()等函数来替代条件判断。
• 纹理采样优化：确保所有采样使用的纹理是合理的尺寸（如1024x1024以下），并启用Mipmap。在Custom Function中采样时，使用正确的采样器状态。
• 值域压缩：在保证视觉效果的前提下，将一些计算从高精度（如世界空间）转换到低精度空间（如视图空间）进行。

3. 实战构建：Custom Function Node核心函数实现

接下来，我们进入实战环节，一步步创建并实现上述核心的Custom Function。

3.1 创建与配置Custom Function Node

在ShaderGraph中右键，选择Create Node > Utility > Custom Function。 在生成的节点上，点击节点属性面板中的Node Settings（齿轮图标）。 这里有两种模式：

• String：直接将HLSL代码写在Graph内部。适合代码量小、不常复用的函数。
• File：引用外部的.hlsl文件。这是推荐的方式，便于代码管理、版本控制和跨Shader复用。

我们选择File模式。你需要先在Unity项目中创建一个.hlsl文件（例如CelShading.hlsl）。在Source字段中，指向这个文件。Name字段填写你要调用的函数名，注意不要带精度后缀（如MyFunction，而不是MyFunction_float）。

3.2 实现色调分离函数（CelShading.hlsl）

我们在CelShading.hlsl中定义第一个函数。一个文件可以包含多个函数。

// CelShading.hlsl #ifndef CEL_SHADING_INCLUDED #define CEL_SHADING_INCLUDED // 包含Unity的通用光照和空间转换函数 #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl" // 优化后的卡通漫反射函数 void CelShading_half(half3 normalWS, half3 lightDirWS, Texture2D rampTex, SamplerState samplerState, out half3 diffuseOut) { // 计算兰伯特系数，使用saturate确保非负 half NdotL = saturate(dot(normalWS, lightDirWS)); // 采样Color Ramp纹理。通常Ramp是一维纹理，所以用half2(NdotL, 0.5)采样中间行。 // 移动端优化：使用线性采样器，并确保rampTex是Clamp包裹模式。 diffuseOut = rampTex.Sample(samplerState, half2(NdotL, 0.5)).rgb; } // 可选：一个更简单的、不使用纹理的阶跃函数版本，性能更高 void CelShadingStep_half(half NdotL, half3 shadowColor, half3 midColor, half3 highlightColor, half shadowThreshold, half highlightThreshold, out half3 diffuseOut) { // 使用step函数进行硬切分，避免if判断 half inShadow = step(NdotL, shadowThreshold); // NdotL <= threshold 则为1 half inMid = step(shadowThreshold, NdotL) * step(NdotL, highlightThreshold); half inHighlight = step(highlightThreshold, NdotL); diffuseOut = inShadow * shadowColor + inMid * midColor + inHighlight * highlightColor; } #endif

注意事项与实操心得：

1. 函数签名：注意函数名后缀是_half。这意味着当ShaderGraph中该节点精度设置为Half时，会调用这个函数。你也可以同时定义_float版本，让Unity根据上下文选择。
2. 参数类型：Texture2D和SamplerState是必须的。在ShaderGraph中连接纹理到Custom Function节点时，它会自动传递这两个参数。在函数体内必须使用rampTex.Sample(samplerState, uv)的方式进行采样。
3. #include路径：确保路径正确。URP（Universal Render Pipeline）的常用函数库在Packages/com.unity.render-pipelines.universal/下。如果你用的是内置管线或HDRP，路径会不同。
4. 精度：我们大量使用half类型。对于颜色和0-1范围内的强度值，half精度在移动端完全足够，且能提升性能。

在ShaderGraph中配置该节点：Name填CelShading，Source指向CelShading.hlsl文件。然后使用Custom Port Menu添加输入端口：normalWS(Vector3),lightDirWS(Vector3),rampTex(Texture2D)；输出端口：diffuseOut(Vector3)。

3.3 实现边缘光函数（RimLight.hlsl）

创建RimLight.hlsl文件。

// RimLight.hlsl #ifndef RIM_LIGHT_INCLUDED #define RIM_LIGHT_INCLUDED #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" // 基础菲涅尔边缘光 void RimLight_half(half3 normalWS, half3 viewDirWS, half power, half intensity, out half rim) { // 计算基础菲涅尔因子 half fresnel = 1.0 - saturate(dot(normalize(normalWS), normalize(viewDirWS))); // 幂运算控制边缘衰减的硬度 rim = pow(fresnel, power) * intensity; } // 增强版：基于屏幕空间深度差的边缘光（模拟SSRim），效果更好但稍耗性能 void RimLightSS_half(half3 normalWS, half3 viewDirWS, half4 screenPos, half power, half intensity, half depthSensitivity, out half rim) { // 基础菲涅尔 half fresnel = 1.0 - saturate(dot(normalize(normalWS), normalize(viewDirWS))); half baseRim = pow(fresnel, power); // 获取当前像素的线性深度（简化示例，实际需从深度纹理或CameraDepthTexture获取） // 这里假设有一个全局变量 _CameraDepthTexture 和对应的采样器 // 为了示例，我们注释掉深度采样部分，专注于结构 // float rawDepth = SAMPLE_TEXTURE2D(_CameraDepthTexture, sampler_CameraDepthTexture, screenPos.xy / screenPos.w).r; // float linearDepth = LinearEyeDepth(rawDepth, _ZBufferParams); // 模拟深度边缘：这里用一个假定的计算代替。实际项目中，你需要采样周围像素深度进行对比。 // half depthEdge = ... 计算深度差 ... // 结合菲涅尔和深度边缘 rim = baseRim * intensity; // * saturate(depthEdge * depthSensitivity); } #endif

配置与使用： 在ShaderGraph中，RimLight节点需要输入：normalWS,viewDirWS,power(Float),intensity(Float)。输出一个rim(Float)强度值。这个值可以后续与主颜色相乘或相加。

重要提示：RimLightSS函数涉及屏幕空间深度纹理采样，这会增加带宽开销。在移动端，除非是高端设备或对效果有极高要求，否则慎用。通常基础菲涅尔边缘光已经能提供不错的效果。

3.4 实现描边偏移函数（Outline.hlsl）

创建Outline.hlsl文件。这个函数通常用于顶点着色器阶段。

// Outline.hlsl #ifndef OUTLINE_INCLUDED #define OUTLINE_INCLUDED #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" // 顶点挤出函数 - 在裁剪空间（Clip Space）进行挤出，确保均匀性 void OutlineOffset_float(float3 positionOS, float3 normalOS, float outlineWidth, float distanceScale, out float3 offsetPositionOS) { // 将法线从物体空间转换到视图空间（View Space） // 在视图空间进行挤出，可以保证在透视相机下描边粗细更均匀 float3 normalVS = TransformWorldToViewDir(TransformObjectToWorldNormal(normalOS)); // 计算挤出向量。这里简化处理，直接使用物体空间法线。 // 更高级的做法是使用平滑法线（Smooth Normal）或顶点色来控制挤出方向，避免硬边断开。 float3 outlineOffset = normalOS * outlineWidth * 0.01; // outlineWidth作为一个缩放系数 // 可选：基于顶点到相机距离的缩放 // float3 positionWS = TransformObjectToWorld(positionOS); // float distance = length(GetCameraPositionWS() - positionWS); // outlineOffset *= (1.0 + distance * distanceScale); // 距离越远，挤出越多 offsetPositionOS = positionOS + outlineOffset; } // 用于获取平滑法线的函数（需在模型导入设置中启用“平滑法线”或使用法线贴图） // 平滑法线可以存储在顶点颜色、UV通道或额外的顶点流中。 void GetSmoothedNormal_float(float4 vertexColor, out float3 smoothedNormalOS) { // 假设平滑法线编码在顶点颜色的RGB通道中（范围[-1,1]需要解码） // 从[0,1]映射到[-1,1] smoothedNormalOS = vertexColor.rgb * 2.0 - 1.0; smoothedNormalOS = normalize(smoothedNormalOS); } #endif

在ShaderGraph中的应用：

1. 创建一个用于描边的SubGraph或单独一个Unlit Master节点图。
2. 在Vertex阶段，使用Custom Function节点调用OutlineOffset函数。将Position节点的Object Space输出和Normal节点的Object Space输出作为输入。
3. 将函数输出的offsetPositionOS连接到Position节点的Vertex Position输入。
4. 这个SubGraph或图将作为第一个Pass（Cull Front），输出固定颜色。

实操心得：描边质量的提升关键

• 平滑法线：使用顶点法线挤出，在模型硬边（如立方体边缘）处，法线方向不连续，会导致描边在棱角处“断开”。解决方法是使用平滑法线。你可以：
  • 在建模软件中导出平滑法线信息，并存储在顶点颜色或第二套UV中。
  • 在Shader中，通过GetSmoothedNormal_float函数读取并解码这些信息，用平滑法线代替顶点法线进行挤出。这能获得连续、包裹整个模型的描边。
• 挤出空间选择：在视图空间（View Space）进行挤出，比在物体空间或世界空间更能保证屏幕空间描边粗细的相对均匀。上面的示例给出了转换到视图空间法线的代码TransformWorldToViewDir(...)，实际挤出时可以使用这个normalVS。

4. 在ShaderGraph中组装与优化

有了核心函数，我们现在在ShaderGraph主图中进行组装。

4.1 主体着色器图结构

1. 光照信息：使用Lighting节点组（URP）或手动计算主光源方向。
2. 色调分离：使用CelShading自定义节点，输入世界空间法线和光方向，连接一个Color Ramp纹理，输出漫反射颜色。
3. 边缘光：使用RimLight自定义节点，输入世界空间法线和视角方向，输出边缘光强度。将其与主颜色相加（Add节点）。
4. 高光与反射：卡通渲染的高光通常是硬边的高光片。可以用一个简单的Specular计算（Dot ProductofHalf VectorandNormal），然后通过Step或Smoothstep节点进行阈值化，得到一个0或1的高光遮罩，再与高光颜色相乘。
5. 最终混合：将量化后的漫反射、边缘光、高光相加，作为最终的基础颜色输出到Master Stack的Base Color。
6. 描边Pass：如前所述，创建一个独立的SubGraph用于描边Pass，在其中使用OutlineOffset节点。在主Shader的Graph Inspector中，添加第二个Pass，并选择这个描边SubGraph作为其Shader。

4.2 移动端性能调优实战技巧

1. 精度设置：在ShaderGraph的Graph Inspector中，将Precision设置为Half。这会让整个Graph以及其中大部分计算（包括Custom Function）默认使用半精度。对于某些需要高精度的计算（如世界空间位置），可以局部使用Precision节点切换回Float。
2. 纹理压缩与尺寸：用于Color Ramp的纹理尺寸可以非常小（如128x1或256x1），并设置为Clamp包裹模式，格式使用压缩格式（如ASTC）。
3. 减少纹理采样：避免在Fragment Shader中采样多张大型纹理。我们的方案中，主要采样就是一张Color Ramp纹理，负担很轻。
4. 分支优化实例：在边缘光函数中，我们使用了pow函数。虽然pow开销相对大，但比动态分支要好。如果追求极致，可以预先计算一个Ramp纹理，用NdotV去采样，用纹理查找代替幂运算，但这会引入一次纹理采样，需要权衡。
5. 变体（Shader Variants）管理：如果你的Custom Function通过#ifdef支持多种模式，要小心产生的Shader变体数量。过多的变体会增加编译时间和包体大小。对于移动端，最好固定使用一种最优化的模式。

4.3 常见问题与排查实录

问题1：Custom Function节点编译错误，提示“未定义的标识符”

• 排查：首先检查HLSL文件中的函数名和ShaderGraph节点中设置的Name是否一致（不含后缀）。其次，检查#include的文件路径是否正确。确保HLSL文件在Assets目录下，并且被正确引用。
• 解决：最简单的测试方法是，先将File模式改为String模式，把HLSL代码直接粘贴进去，看是否编译通过。如果通过，说明是文件路径或引用问题。

问题2：描边在模型某些部位（如腋下、褶皱内部）异常粗大或穿透

• 排查：这是顶点法线挤出法的固有缺陷。内部褶皱处的法线方向可能朝向相机，导致挤出后顶点位置异常。
• 解决：
  • 使用平滑法线：这是最根本的解决方法。
  • 调整挤出方向：尝试在视图空间进行挤出，或者使用一个基于视角的修正因子，让侧面的挤出多于正面的挤出。
  • Z-Bias：在描边Pass的Master Stack中，稍微增加Offset的Factor和Units，让描边多边形稍微远离相机，避免Z-Fighting，但治标不治本。

问题3：在真机上边缘光效果闪烁或不稳定

• 排查：可能是精度问题。在Fragment Shader中，viewDirWS和normalWS需要是归一化（normalized）的。但在Custom Function中，如果输入向量未归一化，且使用half精度计算点积，可能会因精度不足产生噪声。
• 解决：在Custom Function内部，对输入的关键向量（如viewDirWS,normalWS）进行normalize()操作。虽然增加了一点计算量，但保证了稳定性。或者，确保在传入Custom Function之前，这些向量已经归一化。

问题4：打包到Android/iOS后，效果全无或颜色异常

• 排查：首先检查Shader编译日志（在Player Settings中开启Shader Variant Logging）。可能是某些精度或函数在移动端GLES2/3上不支持。
• 解决：
  • 确保所有Custom Function都提供了_half版本。
  • 避免使用GLES不支持的复杂函数。对于纹理采样，始终使用SAMPLE_TEXTURE2D宏（在URP中会自动处理）。
  • 在Outline.hlsl中，TransformWorldToViewDir等函数需要确保在移动端有定义。通常URP的函数库已经做了兼容。

问题5：使用File模式的Custom Function，修改HLSL代码后ShaderGraph不更新

• 解决：这是一个常见的缓存问题。尝试以下步骤：
  1. 在Project窗口中，右键点击HLSL文件，选择Reimport。
  2. 在ShaderGraph窗口中，点击顶部菜单的Save Asset。
  3. 如果还不生效，尝试关闭再重新打开ShaderGraph文件，或者重启Unity。

通过以上步骤，我们不仅实现了一个功能完整的移动端卡通渲染Shader，更重要的是，掌握了利用Custom Function Node进行深度定制和性能优化的核心方法。这套方法论可以迁移到任何需要高性能、定制化效果的Shader开发场景中。记住，移动端优化的黄金法则永远是：测量、简化、再测量。使用Unity的Frame Debugger和Profiler（特别是GPU Profiler）持续分析你的Shader性能，才能做出最有效的优化决策。