洛克王国精灵渲染复刻（UE5）
洛克王国精灵渲染复刻（UE5）
项目
简介
本作品使用 Unreal Engine 5 对《洛克王国》的精灵角色进行渲染复刻。不同于直接照着成品临摹效果，逆向实践：通过 RenderDoc 对游戏进行截帧，从抓取到的帧数据与 HLSL 代码反推原版的渲染管线，再在 UE 中一步步还原精灵的材质与后处理。
- 引擎：Unreal Engine 5（材质 + 后处理）
- 方向：截帧逆向 / 卡通渲染复刻
- 成果：精灵身体、眼睛嘴巴、后处理、展示场景四套系统
复刻思路
整个复刻不是「看着效果调参数」，而是先搞清楚原版「为什么这么渲染」。先用 RenderDoc 截取游戏画面并提取材质信息，再把分析出的 HLSL 逻辑逐段翻译成 UE 材质节点，最后用后处理把整张画面的氛围与风格补齐。
一、前置准备：从截帧开始
- 美术资产：原计划用 FModel 解包 PC 版，因 AES 密钥问题改从「模之屋」获取精灵美术资源；
- 调试工具：把 RenderDoc 的 MCP 接入 Codex，用于读取游戏截帧并分析渲染数据；
- 游戏截帧：PC 端会被反检测，MuMu 模拟器被强制退出，雷电 14 又缺少相关函数支持，最终换用雷电 9 才成功截帧。
二、精灵身体渲染（核心）
身体是整个复刻的重点，通过截帧还原了一套完整的未光照卡通渲染管线，各个环节层层叠加：
- 部位分区：法线贴图的 A 通道用不同数值（band）区分裙底、围巾/发箍、头发/眼睛/嘴巴、面部/衣服等区域，让不同部位走不同的明暗与高光参数；
- 卡通明暗：改造 Lambert，与法线贴图 B 通道的提亮因子求平均，提高背光面亮度、避免死黑；再通过硬过渡带把明暗边界收窄，得到更有卡通感的阴影；
- 基础色与 HDR：固有色经过一条「反色曲线」映射到 HDR，让美术能通过贴图控制「哪里发光」——亮部可突破 1.0，风格化渲染的动态范围由贴图而非灯光决定；
- LUT 明暗：用明暗因子作为 U 坐标、部位分区作为 V 坐标查找 LUT，再配合压暗、高光带、灰兜底三步调整，得到最终的卡通明暗色；
- 高光：用 GGX 风格的窄分布计算高光，按部位参数（band）控制宽度、强度与软阈值，并叠加高光遮罩与受光带，形成头发与天使环上的闪光点；
- 边缘光：基于 Fresnel 的「越侧越亮」，再加上相机高度因子与侧视增强，让轮廓光在侧面和俯仰视角更明显；同时裁掉正对相机的部分，只在遮罩区域浮现一层淡淡的轮廓光；
- 合成：把基础色、LUT 明暗、高光、边缘光按光照能量守恒（
1/π）正确混合，得到最终精灵效果。
三、眼睛与嘴巴
眼睛和嘴巴走的是另一套更轻量化的方案：
- 表情图集：
2×4共 8 块表情图集，用顶点色 Z 选块，让所有表情网格共享同一材质——这是移动端「把昂贵计算前移到离线烘焙、运行时只做显隐判断」的典型做法； - 反色曲线：图集在 LDR 里绘制，shader 里解回 HDR；眼睛没有法线贴图，用一个固定常量模拟朝前程度，保持永远半亮的卡通明暗；
- 双色 LUT：不查 LUT 贴图，直接用「暗灰 + 亮白」两个常量色作为明暗渐变，合成方式与身体一致。
四、后处理
后处理负责给整张画面做统一的风格化与氛围塑造：
- 大气雾：指数高度雾，让背景染成淡淡的蓝灰，拉开前景精灵与背景的层次；
- 色调曲线：只对暗部做轻微 gamma 调整，压平暗部、保持亮部；
- 深度描边：用深度差分提取轮廓、混入深色勾勒描边，同时重写边缘深度，让后续的阴影与光斑也能识别这条轮廓；
- 阴影 / 光斑：用多个全屏四边形模拟精灵身后与场景中的柔和阴影与光斑；
- Bloom：对亮部（眼神光、受光带）做多级降采样后叠加，泛出一圈柔光；
- 色彩编码：最终按 sRGB 编码上屏（由 UE 引擎自动完成）。
其中最有意思的一个坑是描边抖动：TAA / TSR 这类时间型抗锯齿会因为每帧的 jitter 让采样点移动，导致单像素深度差分的描边闪烁；改用空间型的 SMAA / FXAA，或把描边移到 TAA 之后渲染，就能得到稳定的描边。
五、展示场景
为了让精灵有一个合适的展示环境，还搭建了一个简单的展示场景：
- 背景墙：一块平面，用世界坐标 Z 做「下深上亮」渐变，再叠加动态贴图图案（
7×7tiling）与渐变混合，并控制透明度； - 地面：用默认光照模型，把渐变放自发光、基础色调阴影。虽然不完美，但这是当前阶段下的权衡方案。
总结与收获
这次复刻是一次从「看效果」到「读懂管线」的进阶：
- 学会了用 RenderDoc 截帧并分析 HLSL，反推别人家风格的渲染思路；
- 理解了卡通渲染里「明暗、LUT、高光、边缘光」各环节是如何配合的，以及为什么风格化渲染要把动态范围的控制权交给贴图；
- 掌握了「算出来的光照能量守恒（
1/π）」与「美术手绘明暗（LUT）」这两类贡献并存的混合方式； - 踩坑并解决了描边抖动、模拟器截帧限制等实际问题。
后续我会继续微调参数、补齐精灵展示页的更多细节，并把场景做得更接近原版，同时把「截帧逆向」这套方法沿 PBR、RenderDoc、DCC 的学习路线继续深化。