Stylized Rendering Insights from Japan
Stylized Rendering Insights from Japan
风格化渲染在日本的广泛应用
游戏领域
- 《龙珠Z：卡卡罗特》（Dragon Ball Z: Kakarot） ：使用 UE4 制作，实现了超高质量的 实时动漫风格画面（Anime-like Graphics），相关技术细节可在 Unreal Engine 官方博客查阅。
动画与影视领域
- 《No Guns Life》 ：该动画的 所有背景 均使用 Unreal Engine 创建。
- 《光之美少女》（PreCure） ：日本最受欢迎的动画之一，其 片尾动画（Ending Movie） 包括所有角色均使用引擎制作。
漫画领域
- 漫画家 浅野一二O（Ino Asano） 使用 Unreal Engine 渲染背景图像，随后进行 手工编辑和修改 ，最终用作漫画的实际背景。
- 这代表了一种 引擎渲染 → 后期手绘修饰 的混合工作流。
Epic Games Japan 的支持经验
- 日本开发者最常问的问题：
- "我想做这种独特的画面风格，需要 修改引擎 吗？"
- " GPU 性能 太低了怎么办？"（性能与优化问题）
演讲范围界定
涵盖内容
- 风格化渲染的基础知识 及在实际项目中的应用方式
- 日本专业渲染用户在使用风格化渲染时 关注的核心问题
- 使用 UE5 特性（如 Nanite 和 Lumen ）时对风格化场景的影响和注意事项
不涵盖内容
- 特定平台（PlayStation / Nintendo Switch / Xbox）的相关内容
- 各项目的美术设计细节
- 离线用例 （视频、漫画等场景中引擎仅作为导出缓冲区/图像的工具）
- 重点聚焦于 引擎内完成的实时风格化渲染
风格化渲染的三大基本要素
以 《蓝色协议》（Blue Protocol） 为例，风格化渲染可拆解为三大核心元素：
- 描边（Outline）
- 着色/光影（Shading）
- 风格化后处理（Stylized Post-Processing）
描边技术（Outline）详解
方法一：反转法线描边（Inverted Hull / Back-Face Method）
基本原理
这是一种 历史悠久 的经典技术，步骤如下：
- 准备一个额外的描边网格（Outline Mesh） ，叠加在原始网格上
- 将描边网格的 顶点沿法线方向向外挤出（Extrude） ，控制描边宽度/粗细
- 删除描边网格的正面（Front Face） ，只保留背面
- 最终在原始网格边缘产生可见的描边效果
核心优势
- 可以 逐物体（Per-Object）/ 逐网格（Per-Mesh） 精确调整边缘
- 通过在 顶点颜色（Vertex Color） 中存储描边粗细数据或遮罩，可以根据 不同角色、不同情境 绘制特殊的边缘效果
- 非常适合 漫画风 / 动漫风 游戏，尤其是角色渲染
补充技巧
- 仅靠 Inverted Hull 无法绘制所有描边 ，部分细节描边需要 直接绘制在贴图上 ，与 Inverted Hull 配合使用
UE 中的材质实现（简化版）
- 使用 World Position Offset 节点 将顶点沿法线方向挤出
- 使用 Two Sided Sign 节点 连接到 Opacity Mask ，避免绘制正面
- 实现非常 简单直接
UE4 vs UE5 的工作流差异
UE4 时代（较繁琐）：
- 对于 骨骼网格体（Skeletal Mesh） ，需要：
- 额外添加一个 Skeletal Mesh Component 作为描边
- 创建 Animation Blueprint 来同步描边网格与原始网格的动画
- 工作量较大
UE5.1 起（大幅简化）：
- 引入了 Overlay Material（覆盖材质） 功能
- 只需将描边材质赋给 Mesh Component 的 Overlay Material 槽位
- 引擎会 自动用该材质再次绘制网格 ，无需：
- ❌ 自定义蓝图
- ❌ 额外的骨骼网格组件
- ❌ 动画蓝图同步
- 极其方便
Overlay Material 的注意事项
- 虽然在 5.1 的 Release Note 中描述为 Translucent ，但实际上也支持 Masked 和 Opaque 材质
- 但使用 非半透明材质（如 Opaque） 时，由于绘制的是完全相同的网格，会产生 Z-Fighting（深度冲突） ，必须使用 World Position Offset 来偏移避免
性能注意事项
- Two Sided Sign 节点 的剔除计算是 逐像素（Per-Pixel） 进行的
- 即使你只需要物体边缘的描边，表面上大量像素也会被计算 ，造成不必要的 GPU 开销
- 单个物体时开销不明显，但当 角色数量多 或 目标平台性能受限 时，可能成为瓶颈
两种性能优化方案
| 方案 | 思路 |
|---|---|
| 方案 A | 准备 带反转法线的额外资产 （预处理法线方向，减少运行时计算） |
| 方案 B | 添加 自定义设置来剔除正面（Cull Front Face） ，从引擎层面直接避免正面渲染 |
演讲者提到这两种方案的详细解释较长，建议查阅原始资料。
方法二：后处理描边（Post-Process Based Outline）
基本特点
- 只需 一个后处理材质（Post-Process Material） 即可实现
- 可以 轻松添加到任何场景 中
- UE Marketplace 上有 大量现成的描边材质 可供试用
边缘检测算法原理
核心步骤：
- 在源图像中 检查目标像素周围的像素
- 计算它们之间的差异
- 如果差异 足够大 ，则判定该像素位于 边缘上
常用滤波器（Filter）
| 滤波器 | 说明 |
|---|---|
| Sobel | 最常用的一阶梯度算子 |
| Laplacian | 二阶微分算子，对噪声更敏感 |
| Roberts Cross | 简单的对角线梯度检测 |
- 存在更复杂的边缘检测方法，但在 游戏中不常用
- 原因不在于实现难度，而是 GPU 开销 和 调整难度 过高
边缘检测的源图像选择
- 演讲者引用了 《巴鲁奇 · 伊利姆》（Valkyrie Elysium） 的案例
- 由 Square Enix 发行，Soleil Game Studio 开发
- 在日本的 Unreal Fest 上做过详细的风格化渲染实现分享
- 具体使用了哪些缓冲区（如深度、法线、ID 等）作为边缘检测的输入源，将在后续案例中展开
关键要点总结
| 维度 | Inverted Hull 描边 | Post-Process 描边 |
|---|---|---|
| 精度 | 高，可逐物体/逐顶点控制 | 全局性，难以针对单个物体精细调节 |
| 灵活性 | 可通过顶点数据定制粗细和样式 | 统一应用，添加简便 |
| 性能 | 需注意逐像素计算开销，多角色时需优化 | 取决于滤波器复杂度和采样次数 |
| UE5 工作流 | Overlay Material 大幅简化流程 | 一个后处理材质即可 |
| 适用场景 | 角色描边、需要精确控制的场景 | 场景整体描边、快速原型 |
基于后处理的描边提取（Post-Process Outline）
案例：《蓝色协议》的后处理描边
- 使用 后处理（Post-Process） 提取角色轮廓，源图像包括：
- 法线缓冲区（Normal Buffer）
- 深度缓冲区（Depth Buffer）
- 材质 ID（Material ID）
- 为了将 Material ID 写入 GBuffer 并使用它们，他们 修改了引擎
背景与前景的不同边缘检测策略
- 背景边缘 ：仅使用 深度（Depth） 绘制，但描边 粗细随深度变化 （远处更细，近处更粗）
- 前景边缘 ：使用 Shading Model 信息来检测边缘
⚠️ 性能警告
- 判断某个像素是否在边缘上，需要从 多张源纹理中读取大量像素
- 然后进行 大量条件计算 以满足画面需求
- 换句话说：描边看起来很简单，但 GPU 开销可能非常大
风格化着色（Stylized Shading）
核心概念
- 风格化着色的基本思路是 自定义材质对光照的反应方式 ，而非使用 物理正确的光照（PBR Lighting）
- 查找表（Lookup Table / LUT） 是一种常见的覆盖着色方法
三种实现方式对比
方式一：在材质中实现（Material-Based）
| 优点 | 缺点 |
|---|---|
| 可以实现 任意着色算法 ，直接连接到 Emissive 节点 输出 | 完全绕过了引擎的光照系统 |
| 美术可以 无需修改引擎 即可创建自己的着色系统 | 如果需要光照信息，必须通过 Material Parameter Collection 或 Blueprint 手动传入 |
| 丢弃了引擎对 多种光源、阴影、着色模型 的支持 |
方式二：在后处理中实现（Post-Process-Based）
| 优点 | 缺点 |
|---|---|
| 可以利用 GBuffer 中的各种信息 | 难以针对单个物体或角色 进行精细调整 |
| 可以 轻松改变整个画面 的风格 | 难以处理 特定物体与特定光源 的交互 |
方式三：自定义渲染路径（Custom Rendering Path）— 业界主流
- 经过对多家日本游戏公司的调研发现：几乎所有公司都选择自定义着色路径
- 材质 + 光照 + 后处理 三者组合使用，实现最终画面效果
- ⚠️ 注意：这不意味着 不修改引擎就无法实现风格化着色 ，但对于较大型项目追求自有着色系统时，自定义渲染路径是常见选择
风格化着色案例研究
案例 1：《偶像大师 星耀季节》（Idolmaster Starlit Season）
- 开发商：万代南梦宫（Bandai Namco）
- 游戏中偶像在 现场舞台 上跳舞，着色系统需要在 多种光照环境 下正常工作
- 技术方案：
- 修改了 GBuffer 和 Shading Model
- 添加了自定义渲染路径，称为 Deferred Toon
- 这使他们既能 利用 UE 的光照系统 ，又能实现 独特的卡通着色
案例 2：《Hi-Fi Rush》
- 在 Xbox Series X 上实现了 原生 4K / 60fps 的高水准风格化表现
- 大量定制了引擎 ，细节在 Unreal Fest Tokyo 上有分享
日本开发者的风格化着色技巧
技巧 1：阴影遮罩（Shadow Mask） — 《真·女神转生 5》
- 开发商：ATLUS
- 画面目标：角色既不是动漫也不是漫画也不是写实，而是 插画风格（Illustration Style）
- 阴影遮罩 是基于纹理的功能，用于在 不希望出现阴影的区域遮蔽阴影
- 示例：当眼睑闭合时，使用遮罩纹理 移除眼睛上的阴影 ，避免面部出现不美观的阴影
技巧 2：伪各向异性高光 / 天使环（Angel Rings）
- 在头发材质中实现 伪各向异性反射（Pseudo Anisotropic Reflection）
- 日本动漫和插画中非常常见，俗称 "天使环"（Angel Rings）
- 不依赖光源方向或参数 ，完全在材质中实现
- 保证头发上始终有 一致且美观的高光
技巧 3：法线转写（Normal Transfer）
- 当实际多边形 过于紧凑或过于平坦 导致着色效果不佳时
- 从 DCC 工具（如 Maya 等）中创建的法线导入，作为 法线贴图 使用
- 示例：通过法线转写使 鼻子的轮廓更加突出
技巧 4：眉毛前置渲染 — 《蓝色协议》
- 角色眉毛需要 显示在头发前面 （动漫风格常见需求）
- 解决方案：
- 方案 A：添加 专门的眉毛渲染路径
- 方案 B：使用 Pixel Depth Offset 将眉毛 推到屏幕前方
技巧 5：场景感知边缘光（Scene-Aware Rim Lighting）— 《英雄不再 3》
- 边缘光（Rim Lighting） ：在物体背面（相对于摄像机）放置光源，强调物体边界的照明技术
- UE 中可使用 Fresnel 节点 实现基础边缘光
- 《英雄不再 3》 的改进：边缘光颜色随场景光照变化
- 受 主光源（Key Light） 影响的一侧 → 边缘光为 白色
- 受 补光（Fill Light） 影响的一侧 → 边缘光为 蓝色
- 使边缘光更 自然地融入场景
风格化后处理效果（Stylized Post-Processing）
常见后处理效果
- Kuwahara 滤波器 ：一种模糊算法，可产生 油画风格的色调分离效果（Painterly Posterization）
- 线影效果（Hatching Effect） ：在阴影区域添加类似手绘的线条纹理
⚠️ 全屏后处理滤镜的困境
大多数受访游戏公司 最终产品中没有使用 会大幅改变整体画面主题的后处理滤镜：
- 虽然在 开发早期尝试了许多滤镜 ，但最终都没有保留
- 核心原因：没有"一刀切"的方案（No One-Fits-All Solution）
- 游戏中存在 移动的摄像机、移动的光源、移动的物体、大型特效、3D 场景中的 UI 等各种情况
- 难以创建在所有场景下都表现良好的后处理效果
局部使用后处理的成功案例
《火影忍者：究极忍者风暴》系列
- 开发商：CyberConnect2 / 发行商：万代南梦宫
- 线影效果仅用于角色阴影部分 ，不是全屏应用
- 效果：增强了 手绘感（Hand-drawn Feel） 和 接地感（Sense of Grounding）
《Hi-Fi Rush》
- 在 环境光遮蔽（Ambient Occlusion）路径 中添加了线影效果
- 作为 局部风格化效果 而非全屏滤镜
案例：《蓝色协议》的暗部色彩变化
- 美术总监的要求：
- 为了描绘 荒废的世界 ，整体色调应 偏沉稳
- 但同时画面应 色彩丰富 ，尤其是 场景的暗部区域
- 技术实现：
- 创建 暗部区域的遮罩
- 使用 3D 噪声 RGB 纹理 为暗部着色
- 获得了出色的效果
UE 默认后处理与风格化渲染的兼容性
- UE 默认后处理完全可以与风格化渲染配合使用
- 案例：《鬼灭之刃：火神血风谭》（Demon Slayer: Hinokami Chronicles）
- 开发商：CyberConnect2 / 发行商：SEGA
- 2021 年 TGA 最佳格斗游戏 提名
- 他们使用了 UE4 标准的景深（DOF）和泛光（Bloom）效果
- 建议：先了解标准后处理能为项目做什么 ，未必需要创建自定义 DOF 或 Bloom
社区优秀案例：单材质全屏风格化后处理
- 一位日本专业游戏开发者创建了 仅用一个后处理材质 实现全部风格化效果的示例项目
- 包含强烈的 线影效果、独特描边、色调分离效果
- 无需 Material Parameter Collection 或 Blueprint 控制
- 画面依然美观且稳定
- 项目 免费下载
风格化渲染的核心总结
设计理念
- 简单方法的组合优于复杂的高技术算法 — 偏好 美术驱动（Artist-Driven） 、逐步构建的方式
- 2% 的视觉错误比 98% 的稳定画面更引人注目 — 消除那 2% 可能需要 大量的工作
引擎定制现状
- 大量日本开发者 自定义了引擎的渲染代码 以满足画面需求
- 这是从 大量访谈中得出的事实
性能意识
- 风格化渲染 看起来简单，但可能消耗大量 GPU 资源
- 大量材质和后处理以美术驱动方式创建
- 必须从开发早期就定期进行性能分析（Profiling）
- 理想情况下，安排图形工程师定期检查场景
⚠️ 最重要的建议
先分析（Profile），再优化（Optimize）
- 世界上有大量优化信息（面数、纹理分辨率、Shader 复杂度等），但 未必适用于你的项目
- 如果不进行分析就盲目应用优化技巧：可能花费大量时间仅仅降低了画面质量，而性能并未提升
- 必须在目标平台上定期分析游戏性能
- 在开发周期末尾才做分析和优化是 不可取的
UE5 新特性与风格化渲染的兼容性
Nanite 与风格化渲染
基本兼容性
- 可以使用 Nanite — 像素着色器（Pixel Shader）无论是否启用 Nanite 都会正常执行
当前限制（需注意）
| 限制项 | 说明 |
|---|---|
| Translucency | Nanite 不支持半透明材质 |
| Overlay Material | 前面提到的描边用 Overlay Material 尚不支持 Nanite |
| 顶点颜色（Vertex Color） | Nanite 不支持顶点颜色 ，无法在每个顶点中存储特殊数据，也无法存储 逐实例数据（Per-Instance Data） |
常见问题解答
- Q ："我们的画面是高度风格化的，不需要高面数模型，还需要 Nanite 吗？"
- A ：如果你使用 Nanite 友好的功能 （如 Lumen 或 Virtual Shadow Map ），应尽可能让物体使用 Nanite
- 原因：Lumen 和 Virtual Shadow Map 处理 非 Nanite 物体的开销远大于 Nanite 物体
Lumen 与风格化渲染
基本兼容性
- 与 简单材质 配合良好
- 与 基于后处理的风格化效果 配合尤其好（因为后处理不关心结果来自直接光照还是 Lumen）
关键限制
Lumen Scene 的简化
- Lumen Scene 是 Lumen 用于计算 全局光照（GI）和反射 的特殊数据结构
- 为实现实时性能，Lumen Scene 进行了 大量简化
- 材质求值（Material Evaluation）和光照在 Lumen Scene 中非常有限 — 即使使用 硬件光线追踪 或 光追中的材质求值 也是如此
- 为风格化渲染设置的材质 可能在 Lumen Scene 中无法正确工作
- 建议：创建各种测试场景进行验证
Emissive Only 照明的问题
- 仅使用 Emissive 作为直接光源非常困难 — 在摄像机切换时会出现 强烈的延迟（Delay / Lag）
- 风格化渲染同样存在此问题
- 建议：避免将 Emissive 作为直接照明使用 ，改用 伪点光源（Pseudo Point Lights） 等替代方案
TSR（Temporal Super Resolution）与风格化渲染
基本问题
- TSR 通过 合成前几帧的信息 来获得 抗锯齿的高分辨率图像
- 这可能 抵消风格化效果 ，使其看起来像是 模糊（Blur） ，尤其在 摄像机移动 时
解决方案 1：控制台变量
- 在 UE 5.1 及更高版本 中，尝试设置：
r.TSR.ShadingRejection.Flickering 0
- 可能在一定程度上改善 TSR 导致的 鬼影（Ghosting）或模糊
问题 2：不透明材质上的纹理动画
- 在 写实渲染 中，水和烟雾等通常是 透明（Translucent） 材质
- 在 风格化渲染 中，这些效果通常渲染为 不透明（Opaque）或遮罩（Masked） 材质
- 不透明物体上的纹理动画（如滚动噪声纹理）会导致 严重的 TSR 鬼影
解决方案 2
- 将材质设为 半透明（Translucency） ，透明度设为 零
- 这样 TSR 会以不同方式处理该物体，避免鬼影问题
最终总结
- 经典的老技术仍然是风格化渲染的基础 ，但可以通过 扩展和组合 来满足游戏需求
- 日本有大量关于风格化渲染的信息和资源 ，值得关注和学习
- 理解 UE5 新特性的优缺点 ，合理利用它们来表达独特的视觉风格