企业官网建设流程全解析

做日系扁平风格角色渲染的团队，基本都跟边缘光摔过跤。默认加一层pow(1 - dot(N,V))，角色确实亮了，但也确实“贴纸化”：一条等宽亮边死死焊在轮廓上，镜头一转、光源一换就露馅。更麻烦的是，玩家看到的边缘光往往是“死”的——不跟随时间变化、不回应角色状态、不区分材质部位，最后只能沦为刻板印象里“二次元油腻感”的头号责任人。我这边实际碰到的需求很具体：边缘光要能呼吸、能跟镜头和光源说话、能随技能节奏爆发，还得和描边、赛璐璐色块互不打架。

这篇文章就是把我沉淀下来的一套动态边缘光管线完整拆开讲一遍。不吹概念，只讲怎么落地：从最基本的光照公式哪里出了问题说起，到管线怎么分层、资产怎么做、Shader怎么写、参数怎么调，再到移动端性能控到多少、常见渲染故障怎么排查。适合正在做二次元角色渲染的技术美术、图形程序员，也适合被“边缘光太假”整到失眠的TA实习生。看完之后你至少能搭出一条可复现、可扩展的动态边缘光流程，而不是继续跟那层pow死磕。

1. 先搞清楚：日系扁平渲染里的边缘光到底在解决什么

1.1 日系扁平不是不做光，而是做“归纳光”

很多人一提到日系扁平，就以为角色身上只有赛璐璐色块，不能有光照细节。这是个误解。日式卡通渲染的核心不是“没光”，而是把光信息归纳成少数几个色阶，让画面像手绘一样“读起来很快”。在这个前提下，边缘光并不是物理光照的必然结果，更多是轮廓叙事的一部分。

手绘原画里，角色头发、肩膀、裙摆边缘经常会被画师加一条环境光或者反光带，用来把主体从背景里“撕”出来。边缘光在渲染里的角色也是一样：它不完全负责“照明”，负责的是剪影可读性。我做过的一个判断标准是：把边缘光关掉，角色放进复杂场景里，如果剪影边缘糊进背景，那这条管线的价值就体现出来了。

这条线的影响范围远不止角色本身。武器、召唤物、宠物、场景里的关键道具，甚至UI里的人物立绘，都会复用同一套边缘光规则。管线设计的核心原则必须是“一套参数体系，多端共用”，而不是每个材质各写各的。

1.2 默认菲涅尔为什么总是翻车

普遍到几乎人人第一版都会写的是这个：

float rim = pow(1.0 - saturate(dot(N, V)), _RimPower);

看着没毛病，但放到日系角色身上，问题立刻暴露：

• N·V在接近轮廓的区域变化非常平缓，导致边缘光很容易糊成一整条宽均匀亮带，而不是“沿着剪影有节奏感地亮”。
• 法线贴图里的噪声会被pow放大，尤其指数调大以后，边缘光出现碎块状脏亮。
• 模型UV接缝、低模法线硬边，会在边缘光里产生断续感。
• 没有任何遮罩的情况下，头发、脸、衣服、皮肤一起亮，画面立刻像“塑料手办”。
• 纯静态公式，角色待机呼吸、镜头推近、光源绕转，全都不响应。

提示：控制边缘光形态最优先做的不是加大功率，而是加一张轮廓遮罩。先在“哪些区域允许亮”上做收敛，再谈亮度和颜色。

我见过不少团队在这个阶段犯同一个错误：觉得边缘光假是“亮度不够”或者“颜色不对”，于是拼命调_RimPower和颜色，实际每次都是越调越脏。根源是形状归属没做好——该亮的位置全亮，不该亮的位置也亮，自然就“假”。所以我一直坚持，动态边缘光管线第一步不是写算法，而是把“形状控制资产”先做起来。

2. 动态边缘光管线的设计拆分

2.1 三层结构：形状、动态、颜色

把边缘光看成单一效果，管线一定会做死。我现在习惯把它拆成三层，每层独立控制、独立调参、独立复用：

为什么必须拆开而不是写在一个大函数里？因为落地时这三层的更新频率完全不同。形状层是静态资产，加载后基本不变；动态层每帧都在变，但幅度有限；颜色层则要能跟技能特效、场景天色做实时联动。混在一起的话，改颜色会动形状、调形状会影响动态幅度，排查问题的时候根本分不清是哪一层出的岔子。

2.2 动态边缘光要“动”什么：六类动态源

“动态”不是一个模糊形容词，落到代码里就是具体的输入变量。我这边整理过一张动态源清单，核心六类：

1. 主光源方向变化：日光角度偏移、街灯扫过角色，边缘光的方位和强度都要跟着走。
2. 镜头机位与视角：正面特写时边缘光适当退让，侧面近景时增强，强化镜头语言。
3. 角色姿态与动作：待机呼吸让边缘光微幅明暗起伏，转身时边缘光跟随躯干转动。
4. 技能与受击节奏：充能时边缘光像潮汐一样流动，受击瞬间高频爆闪。
5. 环境色彩流转：角色进入不同场景区块，边缘光颜色从暖色域滑向冷色域。
6. 材质自身扰动：披风布料、头发的细碎高光，用噪声做局部扰动，破除“塑料感”。

有些动态源是连续的（时间、视角），有些是离散的（技能状态、受击事件）。管线里必须把这两类分开处理，连续源用曲线和函数，离散源用状态切换再接缓动过渡，不然会出现“技能切过去边缘光瞬间跳变”这种很廉价的观感。

2.3 管线的本质是一套“表现状态机”

当动态源超过两个以后，继续在材质编辑器里拼节点会非常痛苦。我的做法是把边缘光参数打包成一个个表现状态块：Idle、Combat、SkillCharge、HitReact、Dialogue。每个状态块里存同一种结构的数据——形状强度、宽度、动态速度、颜色Ramp偏移量。

运行时由表现层（动画蓝图、战斗系统、对话系统）通过接口发送状态ID，渲染侧根据当前状态和目标状态做插值混洗，而不是让每个特效系统直接去改材质参数。好处非常明显：任何系统想触发“武器充能边缘光潮汐”，不需要知道内部有几个纹理在采样、_RimFlowSpeed是什么范围，只需要调一个状态接口。

这个设计也救了跨部门协作。特效同事不会写Shader，但他们会调动画曲线；有了状态块，他们只需要把“充能曲线”做好，渲染侧自然知道怎么映射到边缘光的动态强度上。管线从“另一个TA的工具”变成了“整个项目的表现协议”。

3. 资产、算法与Shader落地细节

3.1 三张核心图：形状层的根基

动态做得再花，形状不对全白搭。我管这三张资产叫“边缘光的地基”。

第一张是AO/曲率遮罩。不需要标准烘焙的那张灰阶AO，而是要一张手修过的“允许边缘光区域图”。头发的发梢、肩膀的弧面、裙摆的褶皱边缘、武器刃口是高权重区域；脸的正脸、大腿内侧、布料大面积平地是低权重区域。这张图不追求物理正确，完全为表现服务。制作上我建议用16位灰度图，避免8位图在暗部压缩出明显色阶断层。

第二张是轮廓距离场或者等价信息。做法可以是烘焙到纹理里的“到轮廓边界的距离”，也可以是在材质里用屏幕空间深度边缘检测计算。用途是给边缘光一个“吸附”能力，让它真正扒在剪影线上，而不是弥散在表面内部。没有这张图的边缘光很容易“飘”进角色内部，看上去像是发光面膜，不像轮廓光。

第三张是顶点色通道。这是所有方式里性价比最高的：建模时在需要加强边缘光的区域涂红通道，需要抑制的区域涂蓝通道。顶点色最大的优势是直接挂在顶点数据上，不占贴图采样，移动端尤其友好。但我必须提醒一下：顶点色依赖模型密度，低模上涂出来的边缘比较硬，需要配合法线插值做软化。

3.2 动态算法核心：一组可快速落地的Shader参考

下面这套是Shader代码级可用的参考，HLSL风格，Unity/UE里微调就能接。核心思路是：基础菲涅尔项提供“哪里是边缘”的底，遮罩做形状收敛，方向光调制做明暗态度，时间项做动态，最后颜色Ramp做氛围。

float3 CalcDynamicRim( float3 normalWS, float3 viewWS, float3 lightDirWS, float2 uv, float3 vertexColor, float3 baseColor, float time, float stateBlend) { // 1. 基础菲涅尔项，控制宽度区间 float ndv = saturate(dot(normalWS, viewWS)); float rimBase = pow(1.0 - ndv, _RimPower); // 2. 形状遮罩：顶点色 + 曲率贴图 float mask = _RimMaskMap.Sample(sampler_linear_repeat, uv).r; mask *= lerp(1.0, vertexColor.r, _VertexColorStrength); mask = smoothstep(_RimMin, _RimMax, mask); // 3. 方向光调制：背光时增强，向光时收敛 float ndl = dot(normalWS, lightDirWS); float lightWeight = lerp(_BackLightBoost, _FrontLightScale, ndl * 0.5 + 0.5); // 4. 时间动态：低频呼吸 + 高频流动 float flow = sin(time * _FlowSpeed + uv.y * _FlowTiling); flow = flow * 0.5 + 0.5; float pulse = sin(time * _PulseSpeed + _PulsePhase) * 0.5 + 0.5; float dynamicWeight = lerp(1.0, flow * _FlowStrength + pulse * _PulseStrength, _DynamicBlend); // 5. 颜色层：从Ramp图按边缘强度采样，并混合主光色 + 固有色 float rampCoord = saturate(rimBase * mask * dynamicWeight); float3 rimColor = _RimRampMap.Sample(sampler_linear_clamp, float2(rampCoord, 0.0)).rgb; rimColor *= _RimTintColor; rimColor += baseColor * _BaseColorContribution; rimColor *= lightWeight; float finalIntensity = rimBase * mask * dynamicWeight * stateBlend; return rimColor * finalIntensity * _RimFinalIntensity; }

逐个关键参数解释一下，都是实测过的取值范围：

• _RimPower：控制在8~32之间。小于8边缘光就变成半张脸都亮，大于32之后宽度太窄，动态流动没有发挥空间。
• _RimMin/_RimMax：shaper smootherstep的区间，一般0.15~0.7。取值越小，允许亮的区域越广。
• _BackLightBoost：1.0~1.5。背光时边缘光需要明显一些，否则剪影直接黑成一坨。
• _FlowSpeed：0.8~2.5之间比较安全。太慢看不出动态，太快像漏电。
• _DynamicBlend：0~1，表示动态项的混入比例。我强烈建议这个值做成可动画化的，而不是固定值。待机时调0.2，动作演出时调到0.9。

3.3 高频细节：让边缘光“活”起来的最后一公里

动态算法加完之后，边缘光还是会显得“过于干净”。真实感或者手绘感都需要一点不规则的局部扰动。我在管线里加了一层高频细节项，做法是用两张噪声纹理做非平铺扰动：

float noiseA = _NoiseA.Sample(sampler_linear_repeat, uv * _NoiseATiling + time * _NoiseAScroll).r; float noiseB = _NoiseB.Sample(sampler_linear_repeat, uv * _NoiseBTiling - time * _NoiseBScroll * 0.6).r; float detailMask = saturate(noiseA * 0.65 + noiseB * 0.35); rimIntensity *= lerp(1.0, detailMask, _DetailNoiseStrength);

这一层的引入带来一个非常微妙的变化：原本等宽的整齐亮带，现在有了“断断续续、局部亮局部暗”的节奏感，很像画师手动排线的那种疏密感。但必须控住量，_DetailNoiseStrength超过0.25就容易显脏。我通常会把它跟角色高度或者UV到边缘的距离联动，靠近轮廓线时才加重细节，内部区域保持干净。

3.4 分层合成与描边分工

单独一个公式同时承担低频、中频、高频容易互相干扰，所以真正接入角色的合成是这样分层的：

float3 finalRim = lowFreqLayer * _LowFreqWeight + midFreqLayer * _MidFreqWeight + highFreqLayer * _HighFreqWeight;

每个Freq层都是带独立mask的完整小计算。低频层管“大面积轮廓是否可见”，决定剪影分离感；中频层管“光源方向的态度”，决定亮度起伏；高频层管“细节活度”，决定手绘噪声和特效节奏。

还有一个容易被忽略的分工：描边管外轮廓，边缘光管体侧面。Ink描边已经勾勒了最外围剪影，如果边缘光也去抢外围，两条线会叠成很粗很闷的双线。所以我的边缘光shapeMask里，最外圈15%的区域往往被压低，强化的是离剪影还有一点距离的“体侧面”，这样描边和边缘光就形成一收一放的层次，而不是互相打架。

4. 实战案例：一个角色的“破局”改造实录

4.1 原方案到底丑在哪

去年优化过一个二次元项目的看板娘角色。原方案就是最朴素的静态菲涅尔单层。问题从测试截图一眼可见：角色站在主城喷泉旁边，夕阳从侧后方打过来，边缘光没有任何响应，固定亮白色一条边；进入战斗待机后整条边缘光纹丝不动，像贴上去的胶带；武器充能时特效拼命闪，边缘光却毫无参与感，特效和角色像是两个图层。

我建议改造目标不要去推翻重做，而是“先定形状、再给动态、最后调色”。

4.2 三步改造到底做了什么

第一步，重新雕刻遮罩与顶点色。原模型脸上、衣服大面积亮边被压掉，只保留头发发梢、肩部弧面、武器刃口、裙摆翻折处的高权重。顶点色把头发左侧和右侧涂成不对称强度，为后续动态幅度铺底。

第二步，接入动态源。主光方向参与调制，背光场景下边缘光强度自动上浮；同时时间动态分了两层，低频待机呼吸约1.2秒一个循环，武器充能时介入高频流动曲线，边缘光从刀柄到手尖像潮汐一样退去又涌上来。

第三步，颜色混合与HDR峰值控制。从纯白色改成Ramp图采样：低强度区偏角色固有色的补色，高强度区混入主光色，充能期间叠加特效指定的橙紫色。线性空间下把输出值峰值钳在3.0~4.0，避免过曝成没有细节的死白。

具体参数之一段实测数据是这样的：

每个状态的切换都经过0.3秒缓动插值，避免瞬跳。这套参数上线后，边缘光在玩家视角里的“存在感”反而比原来更强——因为更少但更准，还跟演出联动。

4.3 调参和验收的效果原则

做完之后的经验是：动态边缘光绝不是“越亮越好”。一个可感知但不抢眼的边缘光，要用下面三条标准验收：

• 剪影分离：关掉边缘光时角色粘背景，打开后立刻清晰，但不会喧宾夺主。
• 动态可信：光源绕行时边缘光跟随准确，待机呼吸起伏自然，爆闪只在关键演出节点出现。
• 颜色融合：边缘光与角色固有色之间过渡柔和，不会出现一条颜色完全独立的“飘带”。

5. 性能优化与常见问题排查

5.1 计算量到底控制在什么量级

很多团队一听“动态管线”就担心性能。实际这套方案的关键运算非常轻：每像素几个dot、两个sin、三张贴图采样，ps_3_0级别的指令数完全hold得住。关键是别在无关的地方浪费：

• 噪声贴图用单通道，别用RGBA浪费带宽。
• 顶点色通道能解决的问题不要再用贴图采样。
• 动态参数尽量走常量缓冲，不要在材质实例里每帧遍历几十个参数。

移动端目标帧率下，完整边缘光管线的GPU开销可以控制在整帧角色的3%~5%。我一般建议fragment shader的ALU控制在70条指令内，贴图采样不超过4次，OverDraw控制在1.5以下。

5.2 移动端参数上限建议

移动端不是不能做动态边缘光，而是要克制：

• 贴图张数：形状层1张、噪声层1张、Ramp层1张，三张封顶。
• 超越函数：sin/cos能用两次就绝不用六次，时间动态可以用两个不同频率的三角波叠加，或者预先烘焙成低分辨率动画纹理查询。
• 精度：边缘光的颜色和强度在Mobile用mediump精度就能稳定，但法线方向相关运算必须highp，否则会出现边缘光抖动。
• 半透明物体：头发、披风这类双面渲染的物体要单独走队列，避免边缘光穿透产生异常发光“鬼影”。

5.3 常见渲染问题速查表

这些问题我都在实际项目中踩过，整理成速查表，按现象、原因、解决办法查就行：

6. 写在最后的几条实践心得

这套动态边缘光管线做完之后，我自己沉淀了几条很朴素的判断规则。边缘光越亮，越要收敛在真正轮廓上。亮不是问题，亮得没有理由才是问题。一张手修过的遮罩顶过十版参数微调，形状不对，后面全部白搭。

动态别贪多。曾经试过同时接时间、光源、视角、技能四个动态源，结果角色边缘光像“癫痫发作”。现在控制在一个主动态源加一个辅助源，其他都做成需要时才介入的开关，画面一下子干净了。

调参的顺序永远是先静态成图达标，再接动态，最后再调颜色。先调动态会把问题根因掩盖掉，找不到是形状错还是动态幅度错。

最后分享一个接口层面的建议：动态边缘光的参数结构一定要在项目早期统一。特效、战斗、对话、剧情几个部门都会来改，如果每个人各拉一套材质参数，最后就是一场灾难。统一的“表现状态块”接口，让所有人都通过同一个状态ID去驱动，这是这套管线真正能在团队里活下去的关键。