做卡通渲染的同学大多踩过同一个坑给模型套一层后处理描边出来的效果像是塑料模型外面糊了一圈黑胶带。线是等宽的、死板的、贴着屏幕走的跟漫画里那种有轻重、有呼吸、会在转角处断开的手绘线完全是两回事。MoebiusJean Giraud之所以被无数 CG 从业者当成临摹对象不是因为他的线多复杂恰恰是因为他的线极简——但极简的线条对节奏感要求反而更高。这一点直接决定了用 Sobel 复刻 Moebius 画风真正难的从来不是 Sobel 卷积本身那只是九次采样加两次乘加。真正难的是线从哪里来、怎么变粗变细、怎么抖动得自然、颜色怎么被压平成色块。这篇文章会沿着一条完整的工程链路走一遍先把画风拆成可编程的特征再设计数据缓冲然后在 Unity URP 里写后处理 Shader最后给出一个用 OpenCV 离线调参的脚本——因为在引擎里反复改参数试错太慢了先用静态图把阈值调准再搬进实时管线效率会高很多。读完你应该能得到一套可运行的实时 3D 风格化渲染方案以及一份哪一步最容易翻车的排查清单。1. 先泼一盆冷水Sobel 只是这套画风里最便宜的一环很多教程把卡通描边简化成一句话拿深度图跑个 Sobel超过阈值的地方涂黑。这一步确实五分钟能跑通但它产出的东西离 Moebius 很远。原因很直接Sobel 给出的是梯度幅值是一个连续量而手绘线是一种有意图的标记画师知道哪里该重、哪里该轻、哪里该留白。如果你只做梯度大于阈值就涂黑会立刻遇到三个问题。第一线和背景是硬切的二值关系没有过渡和粗细变化视觉上像贴纸。第二深度梯度对掠射角极度敏感地面向远处延伸时梯度会持续偏高结果地平线附近糊成一条粗黑带。第三法线梯度在曲面细分不足的低模上会出现锯齿状的断续线看起来像显卡坏了。所以这套方案的设计思路是Sobel / Roberts 只负责候选边缘后面还有三道工序在决定最终长什么样——线宽随深度缩放、采样坐标做手绘抖动、边缘强度做距离衰减。这三步加起来的工作量比 Sobel 本身还大但它们才是决定像不像的地方。另一个需要提前说清的判断这套管线是纯后处理不修改材质、不写 Stencil、不需要美术改模型。好处是接入成本极低任何已有场景挂上就能看效果代价是它只能画几何轮廓和深度断层画不出画师那种主动添加的装饰线、排线阴影和构图引导线。如果你的目标是漫画感够用如果你的目标是精确复刻某一格分镜那需要的不只是后处理还要动画和美术配合。这个边界最好一开始就想明白。2. Moebius 画风的四个可编程特征把一种画风拆成 GPU 能理解的东西是这类实验最关键的一步。拆得太细会陷入无限的调参拆得太粗又做不出辨识度。经过取舍我认为有四个特征值得并且能够在实时管线里近似。2.1 线条等宽描边是最容易露馅的地方Moebius 的线有明显的粗细变化靠近视觉中心、结构转折处、物体靠近镜头的地方线会加粗远景、次要结构、受光面边缘线会变细甚至消失。这种变化不是随机的它服务于哪里是重点这个叙事目的。在后处理里我们没法知道叙事重点但可以用两个物理量去逼近深度和边缘强度。深度越近线越粗这是透视的自然结果边缘强度越大线越黑因为强度大意味着结构转折剧烈。这两条规则加起来就能让线产生最基本的轻重感。另一个容易被忽略的点是线条的连续性。真实手绘线在转角处会有粗细突变在长直边上会有轻微的弯曲。如果我们的线是逐像素独立计算的就会得到一条数学上完美、视觉上僵硬的等值线。所以要引入采样坐标的扰动让边缘检测的取样窗口沿着一条缓慢变化的曲线滑动。2.2 色块把渐变压成台阶Moebius 上色极少用连续渐变大量使用平涂色块。这一点在实时渲染里反而是最容易实现的——做个色阶量化posterize就行公式就是floor(c * N 0.5) / N。但直接量化会出问题如果 N 太小暗部会彻底丢失层次变成一块死黑如果 N 太大又看不出块面感。实践中比较稳的做法是给 N 取 4 到 6 之间并且在量化前先做一次轻微的对比度拉伸。原因是大部分实时场景的直方图集中在中间调直接量化后台阶会挤在一起看起来像色带而不是色块。另外要注意量化必须放在色调映射之后否则 HDR 的高光部分会被压到一起出现难看的色阶断层。2.3 留白与纸张画面需要呼吸这是最容易被跳过、但对最终观感影响极大的一层。纯数字渲染的画面是无缝的每个像素都被填满了信息而纸媒作品天然带纸纹、油墨渗透和轻微的色彩偏移。把纸色偏暖的米白乘到量化后的颜色上再叠一层低强度的高频噪声画面的廉价感会立刻下降一个档次。要注意的是纸色不能直接用纯白。用纯白做底会让整个画面偏冷偏硬用(0.96, 0.93, 0.85)这种带一点黄的低饱和色跟墨线搭配起来更接近印刷品。这个数值不是玄学本质上是给整幅画面加了一层极淡的暖色滤镜模仿纸张对短波长的吸收。2.4 哪些能做哪些做不了诚实地划一下边界。能做几何轮廓线、折角线、深度断层线、线宽随距离变化、手绘抖动、色阶量化、纸张颗粒。做不了主动添加的装饰排线、大面积留白构图、物体内部的纹理细节、基于叙事的线条省略。如果项目要求更高下一步不是继续堆后处理参数而是引入材质侧的贡献——比如用一张手绘纹理去调制线宽或者给特定材质打标签让它在边缘检测里隐身。那已经是另一个工程量级了后处理只适合作为第一层基础。3. 数据准备为什么深度 法线缺一不可决定这套方案上限的其实是你能拿到几张缓冲。很多人一开始只用颜色图做边缘检测结果线条又糊又乱因为颜色变化不代表结构变化——贴图上的花纹也会被当成边缘。3.1 深度缓冲轮廓的骨架深度缓冲提供的是物体与相机之间的距离。在两个物体的交界处深度会发生跳变这个跳变就是轮廓线。深度边缘的最大优势是它不关心物体长什么样只要遮挡关系存在线就存在非常适合画剪影。但深度边缘有两个典型问题。一是前面提到的掠射角问题一个平面向远处延伸时相邻像素的深度差会持续增大导致梯度偏高形成假边缘。解决办法是把梯度相对于中心深度做归一化也就是用相对深度变化率而不是绝对深度差来判定。二是天空盒问题天空区域采样到的是远平面深度与几何交界处会产生一条极粗的线。3.2 法线缓冲折角处的转折线法线缓冲记录的是每个像素的表面朝向。当表面朝向发生突变时比如立方体的棱边法线之间会产生大的角度差这就是折角线。它补上了深度缓冲的短板两个紧贴在一起的共面物体深度上几乎没差别但法线可能完全不同。法线边缘的判定通常不直接用 Sobel而是用 Roberts 交叉算子采样四个对角邻居。原因是 Roberts 用的是对角差分对斜向的边缘响应更均衡而且只需要四次采样比九次采样的 Sobel 便宜一半多。对法线这种三分量数据采样成本是实打实的。3.3 颜色缓冲最终上色的底颜色缓冲这一层的作用不是检测边缘而是提供量化前的原始颜色。把量化后的颜色和边缘遮罩做一次 lerp就得到了有色块、有线条的成品。注意这里采样的是后处理链上游的结果如果管线里还有别的后处理比如 Bloom需要明确它在这套描边之前还是之后执行顺序不同效果差别很大。缓冲主要贡献典型失效场景补偿手段深度轮廓、遮挡边界掠射角假边缘、天空交界相对深度归一化、距离衰减法线折角线、硬边低模曲面锯齿、法线未开平滑法线、开启法线纹理颜色色块量化底图贴图纹理被误判为边缘不参与边缘检测只做量化4. 环境准备与工程搭建4.1 环境清单这套实现基于 Unity 的通用渲染管线URP因为它的后处理扩展点相对清晰。下面列出的是各个组件的作用具体版本请以你实际项目的版本为准本文重点演示的是通用思路不同 URP 版本在 API 签名上会有差异。组件作用备注Unity 编辑器主工程环境URP 12/14 系列写法接近URP 17 起 Pass API 有调整URP Asset提供深度与法线纹理需确认 Depth Texture 与 Opaque Texture 选项Shader边缘检测与合成全屏 PassHLSL 编写ScriptableRendererFeature把 Pass 插入渲染链负责申请临时 RT 和调度 Blit后处理材质承载 Shader 参数在 Inspector 中暴露阈值、线宽等需要特别提醒的一点必须确保 URP Asset 里开启深度纹理。如果你的场景用了自定义的 Renderer Data也要在对应位置确认。很多人第一次跑出来是纯黑或者完全没线八成就是这里没开。另外法线纹理在某些平台尤其是移动端的部分 GPU上开销不低如果目标平台性能紧张可以考虑用深度重建法线来替代代价是精度略差。4.2 场景与相机配置场景本身没有特殊要求但为了让边缘检测有东西可抓建议先用几何体搭一个测试场景几个不同朝向的立方体、一个球、一段地面。球用来验证曲面法线的连续性立方体验证硬边地面验证掠射角假边缘——这三样凑齐参数调起来才有参照。相机设置上有两个点值得注意。第一关闭 MSAA 或者确认它不会影响深度采样某些配置下多重采样会让深度边缘出现半像素偏移线条会变虚。第二确认色彩空间。线性空间下做色阶量化得到的台阶分布和伽马空间完全不同如果发现量化后的画面偏灰先检查这里。4.3 后处理材质与 Feature 挂载创建材质时Shader 选择我们下面要写的自定义 Shader然后把材质拖到 Renderer Feature 的槽位里。Feature 的插入时机建议放在AfterRenderingPostProcessing这样描边会盖在所有颜色处理之上线条颜色不会被 Bloom 之类的效果污染。如果你的项目需要在描边之后再叠一层别的特效那就调整到这个特效之前。5. 核心 ShaderSobel 与 Roberts 的混合边缘检测5.1 采样与线性化深度深度纹理里存的是非线性深度受投影矩阵影响直接拿来做差分会得到严重失真的结果——近处的深度差被放大远处的被压缩。所以第一步必须线性化。URP 提供了现成的函数配合_ZBufferParams就能把设备深度转成视空间下的线性距离。float LinearEyeDepthFromUV(float2 uv) { float raw SampleSceneDepth(uv); return LinearEyeDepth(raw, _ZBufferParams); }这里SampleSceneDepth来自DeclareDepthTexture.hlslLinearEyeDepth来自核心库两者在 URP 的 ShaderLibrary 里都是标准接口。线性化之后的深度单位是米可以直接用来做距离衰减和线宽缩放这也是后面几步能成立的前提。5.2 两个算子为什么分工Sobel 是 3×3 的加权差分中心权重高、边缘权重低对噪声有一定抑制适合处理深度这种可能带轻微噪点的数据。Roberts 是 2×2 的对角差分只采四个点对角度变化更敏感适合处理法线这种干净但需要精确角度响应的数据。所以这套方案的分工是深度走 Sobel法线走 Roberts。这样既保证了深度边缘的稳定性又控制了法线采样的开销。如果两个都用 Sobel法线那部分要多采五次在移动端是能感知到的开销如果两个都用 Roberts深度边缘会因为噪声出现断点。5.3 边缘强度归一化这是我在调试中认为最关键的一步。原始梯度幅值和场景尺度强相关——一个 1 米见方的场景和一个 100 米见方的场景同样的阈值下表现完全不同。解决办法是除以中心深度float depthEdge length(grad) / max(dCenter, 0.001); float depthMask smoothstep(_DepthThreshold, _DepthThreshold * 2.0, depthEdge);除以中心深度后得到的是相对深度变化率量纲被消掉了阈值就变成了一个和场景尺度无关的比例值。用smoothstep而不是step是为了让线边缘有半像素级的过渡避免高对比场景下的锯齿。法线那边不需要归一化因为法线本身已经是单位向量差值范围固定在[0, 2]之间阈值可以直接给绝对值。6. 从边缘检测到手绘线抖动、线宽、量化6.1 采样坐标扰动手绘感的核心在于不精确。如果边缘检测的采样窗口严格对齐像素网格得到的线就是数学意义上的等值线完美但冰冷。做法是在采样前给 UV 加一个低频偏移float2 wobble float2( sin(uv.y * _WobbleFreq _Time.y * _WobbleSpeed), cos(uv.x * _WobbleFreq * 1.3 _Time.y * _WobbleSpeed * 0.7) ) * (_WobbleAmp * texel); float2 cuv uv wobble;两个方向的频率用了不同系数1.3 和 0.7是为了避免出现明显的网格状规律。偏移量乘texel是为了让抖动的物理幅度固定在几个像素不随分辨率变化。这里有一个取舍带_Time的抖动会产生沸腾效果画面看起来像手绘动画逐帧重画很有味道但如果速度太快会让人眼疲劳。静态插画风格建议把_WobbleSpeed调到 0 或者接近 0只在 UV 上加低频噪声得到固定的手抖。6.2 世界尺度线宽固定屏幕空间的线宽在近处看起来太细、远处看起来太粗违背透视直觉。解决办法是让采样步长随深度放大float widthScale max(dCenter / max(_WidthRefDist, 0.001), 0.35); float2 stepUV texel * _LineWidth * widthScale;_WidthRefDist是线宽等于基准值的距离0.35是下限防止极近处的步长过小导致采样不到边缘。这个设计让线宽在透视上更自然同时也带来一个副作用远处的线会变粗到互相粘连所以必须配合距离衰减把远处的线淡出。6.3 Posterize 与纸张噪声色阶量化前面说过_PosterizeSteps建议从 5 开始试。纸张噪声用经典的 hash 函数生成就行不需要贴图float2 puv uv * _ScreenParams.xy; float grain frac(sin(dot(puv, float2(12.9898, 78.233))) * 43758.5453); quant * lerp(1.0, 0.92 grain * 0.16, _PaperStrength);用屏幕坐标而不是 UV 作为 hash 输入是为了让颗粒固定在世界空间中不随相机移动——如果颗粒跟着屏幕走相机一动整个画面会像有层油膜在滑动非常出戏。另外_PaperStrength建议不要超过 0.15太高会让画面显脏。7. 完整代码实现7.1 HLSL Shader 完整代码文件路径Assets/Shaders/MoebiusSobelOutline.shaderShader Moebius/SobelOutline { Properties { _LineColor (墨水颜色, Color) (0.08, 0.07, 0.06, 1) _PaperColor (纸色, Color) (0.96, 0.93, 0.85, 1) _DepthThreshold (深度边缘阈值, Range(0.001, 0.5)) 0.03 _NormalThreshold (法线边缘阈值, Range(0.01, 2.0)) 0.5 _LineWidth (线宽系数, Range(0.2, 6.0)) 1.5 _WidthRefDist (线宽参考距离, Float) 10.0 _DistFade (线条远距衰减, Float) 120.0 _WobbleAmp (抖动幅度(px), Range(0.0, 4.0)) 0.7 _WobbleFreq (抖动频率, Float) 26.0 _WobbleSpeed (抖动速度, Float) 0.8 _PosterizeSteps (色阶数, Range(2.0, 16.0)) 5.0 _PaperStrength (纸张颗粒强度, Range(0.0, 0.5)) 0.10 } SubShader { Tags { RenderType Opaque RenderPipeline UniversalPipeline } ZTest Always ZWrite Off Cull Off Pass { Name MoebiusOutline HLSLPROGRAM #pragma vertex Vert #pragma fragment Frag #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareNormalsTexture.hlsl // 后处理链上游的颜色缓冲由 Blitter.BlitCameraTexture 绑定 TEXTURE2D_X(_BlitTexture); CBUFFER_START(UnityPerMaterial) float4 _LineColor; float4 _PaperColor; float _DepthThreshold; float _NormalThreshold; float _LineWidth; float _WidthRefDist; float _DistFade; float _WobbleAmp; float _WobbleFreq; float _WobbleSpeed; float _PosterizeSteps; float _PaperStrength; CBUFFER_END static const float2 kOffsets[9] { float2(-1, -1), float2(0, -1), float2(1, -1), float2(-1, 0), float2(0, 0), float2(1, 0), float2(-1, 1), float2(0, 1), float2(1, 1) }; static const float kSobelX[9] { -1, 0, 1, -2, 0, 2, -1, 0, 1 }; static const float kSobelY[9] { -1, -2, -1, 0, 0, 0, 1, 2, 1 }; struct Attributes { float4 positionOS : POSITION; float2 uv : TEXCOORD0; }; struct Varyings { float4 positionCS : SV_POSITION; float2 uv : TEXCOORD0; }; Varyings Vert(Attributes input) { Varyings o; o.positionCS TransformObjectToHClip(input.positionOS.xyz); o.uv input.uv; return o; } float LinearEyeDepthFromUV(float2 uv) { float raw SampleSceneDepth(uv); return LinearEyeDepth(raw, _ZBufferParams); } float4 Frag(Varyings input) : SV_Target { float2 uv input.uv; float2 texel 1.0 / _ScreenParams.xy; // 1. 手绘抖动扰动采样中心 float2 wobble float2( sin(uv.y * _WobbleFreq _Time.y * _WobbleSpeed), cos(uv.x * _WobbleFreq * 1.3 _Time.y * _WobbleSpeed * 0.7) ) * (_WobbleAmp * tex
做卡通渲染的同学大多踩过同一个坑给模型套一层后处理描边出来的效果像是塑料模型外面糊了一圈黑胶带。线是等宽的、死板的、贴着屏幕走的跟漫画里那种有轻重、有呼吸、会在转角处断开的手绘线完全是两回事。MoebiusJean Giraud之所以被无数 CG 从业者当成临摹对象不是因为他的线多复杂恰恰是因为他的线极简——但极简的线条对节奏感要求反而更高。这一点直接决定了用 Sobel 复刻 Moebius 画风真正难的从来不是 Sobel 卷积本身那只是九次采样加两次乘加。真正难的是线从哪里来、怎么变粗变细、怎么抖动得自然、颜色怎么被压平成色块。这篇文章会沿着一条完整的工程链路走一遍先把画风拆成可编程的特征再设计数据缓冲然后在 Unity URP 里写后处理 Shader最后给出一个用 OpenCV 离线调参的脚本——因为在引擎里反复改参数试错太慢了先用静态图把阈值调准再搬进实时管线效率会高很多。读完你应该能得到一套可运行的实时 3D 风格化渲染方案以及一份哪一步最容易翻车的排查清单。1. 先泼一盆冷水Sobel 只是这套画风里最便宜的一环很多教程把卡通描边简化成一句话拿深度图跑个 Sobel超过阈值的地方涂黑。这一步确实五分钟能跑通但它产出的东西离 Moebius 很远。原因很直接Sobel 给出的是梯度幅值是一个连续量而手绘线是一种有意图的标记画师知道哪里该重、哪里该轻、哪里该留白。如果你只做梯度大于阈值就涂黑会立刻遇到三个问题。第一线和背景是硬切的二值关系没有过渡和粗细变化视觉上像贴纸。第二深度梯度对掠射角极度敏感地面向远处延伸时梯度会持续偏高结果地平线附近糊成一条粗黑带。第三法线梯度在曲面细分不足的低模上会出现锯齿状的断续线看起来像显卡坏了。所以这套方案的设计思路是Sobel / Roberts 只负责候选边缘后面还有三道工序在决定最终长什么样——线宽随深度缩放、采样坐标做手绘抖动、边缘强度做距离衰减。这三步加起来的工作量比 Sobel 本身还大但它们才是决定像不像的地方。另一个需要提前说清的判断这套管线是纯后处理不修改材质、不写 Stencil、不需要美术改模型。好处是接入成本极低任何已有场景挂上就能看效果代价是它只能画几何轮廓和深度断层画不出画师那种主动添加的装饰线、排线阴影和构图引导线。如果你的目标是漫画感够用如果你的目标是精确复刻某一格分镜那需要的不只是后处理还要动画和美术配合。这个边界最好一开始就想明白。2. Moebius 画风的四个可编程特征把一种画风拆成 GPU 能理解的东西是这类实验最关键的一步。拆得太细会陷入无限的调参拆得太粗又做不出辨识度。经过取舍我认为有四个特征值得并且能够在实时管线里近似。2.1 线条等宽描边是最容易露馅的地方Moebius 的线有明显的粗细变化靠近视觉中心、结构转折处、物体靠近镜头的地方线会加粗远景、次要结构、受光面边缘线会变细甚至消失。这种变化不是随机的它服务于哪里是重点这个叙事目的。在后处理里我们没法知道叙事重点但可以用两个物理量去逼近深度和边缘强度。深度越近线越粗这是透视的自然结果边缘强度越大线越黑因为强度大意味着结构转折剧烈。这两条规则加起来就能让线产生最基本的轻重感。另一个容易被忽略的点是线条的连续性。真实手绘线在转角处会有粗细突变在长直边上会有轻微的弯曲。如果我们的线是逐像素独立计算的就会得到一条数学上完美、视觉上僵硬的等值线。所以要引入采样坐标的扰动让边缘检测的取样窗口沿着一条缓慢变化的曲线滑动。2.2 色块把渐变压成台阶Moebius 上色极少用连续渐变大量使用平涂色块。这一点在实时渲染里反而是最容易实现的——做个色阶量化posterize就行公式就是floor(c * N 0.5) / N。但直接量化会出问题如果 N 太小暗部会彻底丢失层次变成一块死黑如果 N 太大又看不出块面感。实践中比较稳的做法是给 N 取 4 到 6 之间并且在量化前先做一次轻微的对比度拉伸。原因是大部分实时场景的直方图集中在中间调直接量化后台阶会挤在一起看起来像色带而不是色块。另外要注意量化必须放在色调映射之后否则 HDR 的高光部分会被压到一起出现难看的色阶断层。2.3 留白与纸张画面需要呼吸这是最容易被跳过、但对最终观感影响极大的一层。纯数字渲染的画面是无缝的每个像素都被填满了信息而纸媒作品天然带纸纹、油墨渗透和轻微的色彩偏移。把纸色偏暖的米白乘到量化后的颜色上再叠一层低强度的高频噪声画面的廉价感会立刻下降一个档次。要注意的是纸色不能直接用纯白。用纯白做底会让整个画面偏冷偏硬用(0.96, 0.93, 0.85)这种带一点黄的低饱和色跟墨线搭配起来更接近印刷品。这个数值不是玄学本质上是给整幅画面加了一层极淡的暖色滤镜模仿纸张对短波长的吸收。2.4 哪些能做哪些做不了诚实地划一下边界。能做几何轮廓线、折角线、深度断层线、线宽随距离变化、手绘抖动、色阶量化、纸张颗粒。做不了主动添加的装饰排线、大面积留白构图、物体内部的纹理细节、基于叙事的线条省略。如果项目要求更高下一步不是继续堆后处理参数而是引入材质侧的贡献——比如用一张手绘纹理去调制线宽或者给特定材质打标签让它在边缘检测里隐身。那已经是另一个工程量级了后处理只适合作为第一层基础。3. 数据准备为什么深度 法线缺一不可决定这套方案上限的其实是你能拿到几张缓冲。很多人一开始只用颜色图做边缘检测结果线条又糊又乱因为颜色变化不代表结构变化——贴图上的花纹也会被当成边缘。3.1 深度缓冲轮廓的骨架深度缓冲提供的是物体与相机之间的距离。在两个物体的交界处深度会发生跳变这个跳变就是轮廓线。深度边缘的最大优势是它不关心物体长什么样只要遮挡关系存在线就存在非常适合画剪影。但深度边缘有两个典型问题。一是前面提到的掠射角问题一个平面向远处延伸时相邻像素的深度差会持续增大导致梯度偏高形成假边缘。解决办法是把梯度相对于中心深度做归一化也就是用相对深度变化率而不是绝对深度差来判定。二是天空盒问题天空区域采样到的是远平面深度与几何交界处会产生一条极粗的线。3.2 法线缓冲折角处的转折线法线缓冲记录的是每个像素的表面朝向。当表面朝向发生突变时比如立方体的棱边法线之间会产生大的角度差这就是折角线。它补上了深度缓冲的短板两个紧贴在一起的共面物体深度上几乎没差别但法线可能完全不同。法线边缘的判定通常不直接用 Sobel而是用 Roberts 交叉算子采样四个对角邻居。原因是 Roberts 用的是对角差分对斜向的边缘响应更均衡而且只需要四次采样比九次采样的 Sobel 便宜一半多。对法线这种三分量数据采样成本是实打实的。3.3 颜色缓冲最终上色的底颜色缓冲这一层的作用不是检测边缘而是提供量化前的原始颜色。把量化后的颜色和边缘遮罩做一次 lerp就得到了有色块、有线条的成品。注意这里采样的是后处理链上游的结果如果管线里还有别的后处理比如 Bloom需要明确它在这套描边之前还是之后执行顺序不同效果差别很大。缓冲主要贡献典型失效场景补偿手段深度轮廓、遮挡边界掠射角假边缘、天空交界相对深度归一化、距离衰减法线折角线、硬边低模曲面锯齿、法线未开平滑法线、开启法线纹理颜色色块量化底图贴图纹理被误判为边缘不参与边缘检测只做量化4. 环境准备与工程搭建4.1 环境清单这套实现基于 Unity 的通用渲染管线URP因为它的后处理扩展点相对清晰。下面列出的是各个组件的作用具体版本请以你实际项目的版本为准本文重点演示的是通用思路不同 URP 版本在 API 签名上会有差异。组件作用备注Unity 编辑器主工程环境URP 12/14 系列写法接近URP 17 起 Pass API 有调整URP Asset提供深度与法线纹理需确认 Depth Texture 与 Opaque Texture 选项Shader边缘检测与合成全屏 PassHLSL 编写ScriptableRendererFeature把 Pass 插入渲染链负责申请临时 RT 和调度 Blit后处理材质承载 Shader 参数在 Inspector 中暴露阈值、线宽等需要特别提醒的一点必须确保 URP Asset 里开启深度纹理。如果你的场景用了自定义的 Renderer Data也要在对应位置确认。很多人第一次跑出来是纯黑或者完全没线八成就是这里没开。另外法线纹理在某些平台尤其是移动端的部分 GPU上开销不低如果目标平台性能紧张可以考虑用深度重建法线来替代代价是精度略差。4.2 场景与相机配置场景本身没有特殊要求但为了让边缘检测有东西可抓建议先用几何体搭一个测试场景几个不同朝向的立方体、一个球、一段地面。球用来验证曲面法线的连续性立方体验证硬边地面验证掠射角假边缘——这三样凑齐参数调起来才有参照。相机设置上有两个点值得注意。第一关闭 MSAA 或者确认它不会影响深度采样某些配置下多重采样会让深度边缘出现半像素偏移线条会变虚。第二确认色彩空间。线性空间下做色阶量化得到的台阶分布和伽马空间完全不同如果发现量化后的画面偏灰先检查这里。4.3 后处理材质与 Feature 挂载创建材质时Shader 选择我们下面要写的自定义 Shader然后把材质拖到 Renderer Feature 的槽位里。Feature 的插入时机建议放在AfterRenderingPostProcessing这样描边会盖在所有颜色处理之上线条颜色不会被 Bloom 之类的效果污染。如果你的项目需要在描边之后再叠一层别的特效那就调整到这个特效之前。5. 核心 ShaderSobel 与 Roberts 的混合边缘检测5.1 采样与线性化深度深度纹理里存的是非线性深度受投影矩阵影响直接拿来做差分会得到严重失真的结果——近处的深度差被放大远处的被压缩。所以第一步必须线性化。URP 提供了现成的函数配合_ZBufferParams就能把设备深度转成视空间下的线性距离。float LinearEyeDepthFromUV(float2 uv) { float raw SampleSceneDepth(uv); return LinearEyeDepth(raw, _ZBufferParams); }这里SampleSceneDepth来自DeclareDepthTexture.hlslLinearEyeDepth来自核心库两者在 URP 的 ShaderLibrary 里都是标准接口。线性化之后的深度单位是米可以直接用来做距离衰减和线宽缩放这也是后面几步能成立的前提。5.2 两个算子为什么分工Sobel 是 3×3 的加权差分中心权重高、边缘权重低对噪声有一定抑制适合处理深度这种可能带轻微噪点的数据。Roberts 是 2×2 的对角差分只采四个点对角度变化更敏感适合处理法线这种干净但需要精确角度响应的数据。所以这套方案的分工是深度走 Sobel法线走 Roberts。这样既保证了深度边缘的稳定性又控制了法线采样的开销。如果两个都用 Sobel法线那部分要多采五次在移动端是能感知到的开销如果两个都用 Roberts深度边缘会因为噪声出现断点。5.3 边缘强度归一化这是我在调试中认为最关键的一步。原始梯度幅值和场景尺度强相关——一个 1 米见方的场景和一个 100 米见方的场景同样的阈值下表现完全不同。解决办法是除以中心深度float depthEdge length(grad) / max(dCenter, 0.001); float depthMask smoothstep(_DepthThreshold, _DepthThreshold * 2.0, depthEdge);除以中心深度后得到的是相对深度变化率量纲被消掉了阈值就变成了一个和场景尺度无关的比例值。用smoothstep而不是step是为了让线边缘有半像素级的过渡避免高对比场景下的锯齿。法线那边不需要归一化因为法线本身已经是单位向量差值范围固定在[0, 2]之间阈值可以直接给绝对值。6. 从边缘检测到手绘线抖动、线宽、量化6.1 采样坐标扰动手绘感的核心在于不精确。如果边缘检测的采样窗口严格对齐像素网格得到的线就是数学意义上的等值线完美但冰冷。做法是在采样前给 UV 加一个低频偏移float2 wobble float2( sin(uv.y * _WobbleFreq _Time.y * _WobbleSpeed), cos(uv.x * _WobbleFreq * 1.3 _Time.y * _WobbleSpeed * 0.7) ) * (_WobbleAmp * texel); float2 cuv uv wobble;两个方向的频率用了不同系数1.3 和 0.7是为了避免出现明显的网格状规律。偏移量乘texel是为了让抖动的物理幅度固定在几个像素不随分辨率变化。这里有一个取舍带_Time的抖动会产生沸腾效果画面看起来像手绘动画逐帧重画很有味道但如果速度太快会让人眼疲劳。静态插画风格建议把_WobbleSpeed调到 0 或者接近 0只在 UV 上加低频噪声得到固定的手抖。6.2 世界尺度线宽固定屏幕空间的线宽在近处看起来太细、远处看起来太粗违背透视直觉。解决办法是让采样步长随深度放大float widthScale max(dCenter / max(_WidthRefDist, 0.001), 0.35); float2 stepUV texel * _LineWidth * widthScale;_WidthRefDist是线宽等于基准值的距离0.35是下限防止极近处的步长过小导致采样不到边缘。这个设计让线宽在透视上更自然同时也带来一个副作用远处的线会变粗到互相粘连所以必须配合距离衰减把远处的线淡出。6.3 Posterize 与纸张噪声色阶量化前面说过_PosterizeSteps建议从 5 开始试。纸张噪声用经典的 hash 函数生成就行不需要贴图float2 puv uv * _ScreenParams.xy; float grain frac(sin(dot(puv, float2(12.9898, 78.233))) * 43758.5453); quant * lerp(1.0, 0.92 grain * 0.16, _PaperStrength);用屏幕坐标而不是 UV 作为 hash 输入是为了让颗粒固定在世界空间中不随相机移动——如果颗粒跟着屏幕走相机一动整个画面会像有层油膜在滑动非常出戏。另外_PaperStrength建议不要超过 0.15太高会让画面显脏。7. 完整代码实现7.1 HLSL Shader 完整代码文件路径Assets/Shaders/MoebiusSobelOutline.shaderShader Moebius/SobelOutline { Properties { _LineColor (墨水颜色, Color) (0.08, 0.07, 0.06, 1) _PaperColor (纸色, Color) (0.96, 0.93, 0.85, 1) _DepthThreshold (深度边缘阈值, Range(0.001, 0.5)) 0.03 _NormalThreshold (法线边缘阈值, Range(0.01, 2.0)) 0.5 _LineWidth (线宽系数, Range(0.2, 6.0)) 1.5 _WidthRefDist (线宽参考距离, Float) 10.0 _DistFade (线条远距衰减, Float) 120.0 _WobbleAmp (抖动幅度(px), Range(0.0, 4.0)) 0.7 _WobbleFreq (抖动频率, Float) 26.0 _WobbleSpeed (抖动速度, Float) 0.8 _PosterizeSteps (色阶数, Range(2.0, 16.0)) 5.0 _PaperStrength (纸张颗粒强度, Range(0.0, 0.5)) 0.10 } SubShader { Tags { RenderType Opaque RenderPipeline UniversalPipeline } ZTest Always ZWrite Off Cull Off Pass { Name MoebiusOutline HLSLPROGRAM #pragma vertex Vert #pragma fragment Frag #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareNormalsTexture.hlsl // 后处理链上游的颜色缓冲由 Blitter.BlitCameraTexture 绑定 TEXTURE2D_X(_BlitTexture); CBUFFER_START(UnityPerMaterial) float4 _LineColor; float4 _PaperColor; float _DepthThreshold; float _NormalThreshold; float _LineWidth; float _WidthRefDist; float _DistFade; float _WobbleAmp; float _WobbleFreq; float _WobbleSpeed; float _PosterizeSteps; float _PaperStrength; CBUFFER_END static const float2 kOffsets[9] { float2(-1, -1), float2(0, -1), float2(1, -1), float2(-1, 0), float2(0, 0), float2(1, 0), float2(-1, 1), float2(0, 1), float2(1, 1) }; static const float kSobelX[9] { -1, 0, 1, -2, 0, 2, -1, 0, 1 }; static const float kSobelY[9] { -1, -2, -1, 0, 0, 0, 1, 2, 1 }; struct Attributes { float4 positionOS : POSITION; float2 uv : TEXCOORD0; }; struct Varyings { float4 positionCS : SV_POSITION; float2 uv : TEXCOORD0; }; Varyings Vert(Attributes input) { Varyings o; o.positionCS TransformObjectToHClip(input.positionOS.xyz); o.uv input.uv; return o; } float LinearEyeDepthFromUV(float2 uv) { float raw SampleSceneDepth(uv); return LinearEyeDepth(raw, _ZBufferParams); } float4 Frag(Varyings input) : SV_Target { float2 uv input.uv; float2 texel 1.0 / _ScreenParams.xy; // 1. 手绘抖动扰动采样中心 float2 wobble float2( sin(uv.y * _WobbleFreq _Time.y * _WobbleSpeed), cos(uv.x * _WobbleFreq * 1.3 _Time.y * _WobbleSpeed * 0.7) ) * (_WobbleAmp * tex
