BlueRoseNote/03-UnrealEngine/卡通渲染相关资料/卡通渲染开发总览.md

title, date, excerpt, tags, rating

title	date	excerpt	tags	rating
卡通渲染开发总览	2023-12-08 09:59:57			⭐

目录

• 卡通渲染相关资料里面的有原神、碧蓝幻想、罪恶装备、赛马娘、黑丝指的参考。
  • 做完基础功能之后，再逐个寻找新的功能点与方向。
• 知乎FlashYiYi的卡通渲染分享里面有许多Fake技巧
• 参考对象分析
  • 星穹铁道
  • UnityChan
  • 破晓传说
  • 蓝色协议
  • 蓝色反射
  • 非人学园2
  • 少女前线2 追放
    • https://www.bilibili.com/video/BV1pt421H7EH/?buvid=38ddfe416af6e23f1aada0674f307e3e&from_spmid=tm.recommend.0.0&is_story_h5=false&mid=a0AUwJxrG%2FcYg0AorRjOGA%3D%3D&p=1&plat_id=116&share_from=ugc&share_medium=iphone&share_plat=ios&share_session_id=CD0CF499-8DF5-48F5-A03A-7A3AE61FFF3A&share_source=COPY&share_tag=s_i&spmid=united.player-video-detail.0.0&timestamp=1706754945&unique_k=44q6hra&up_id=140517136&vd_source=d47c0bb42f9c72fd7d74562185cee290
  • 明日方舟终末地
• 其他人的作品
  • muro_cg
  • Nevrwind
    • 【【UE5动画】你会来的对吗？】 https://www.bilibili.com/video/BV1kw4m1e7qZ/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
    • 【【UE5卡渲】椿 - K表情练习】 https://www.bilibili.com/video/BV1ay411b7Cm/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
    • 卡通渲染晕染效果【【UE5】一些最近做的好玩的卡渲后效】 https://www.bilibili.com/video/BV1gi421v7HA/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
• 动漫制作
  • 【日本最顶级的3D动画制作过程【GBC官方动捕制作片段】】 https://www.bilibili.com/video/BV1uM4m1U7CL/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e

PS. 先实现一波Cel，之后再实现Thickly - Coated。

最近开发计划

1. 添加ShaderModel
   1. https://zhuanlan.zhihu.com/p/658700282
   2. https://zhuanlan.zhihu.com/p/597568404
2. 给材质添加一些属性
   1. 移植ToonDataAsset。
      1. MaterialInstance Override 完成
   2. 添加BackFace Outline基础代码。
3. 添加材质自定义Output节点。
4. 给GBuffer结构体添加子ToonBuffer结构体。
5. ShaderModel：ToonStandard
   1. 实现初版ToonStandard。
6. ToonOutline(后处理)
   1. ID、Depth、Normal Outline
      1. FOV宽度适配
      2. ScreenPercentage宽度适配
      3. 分辨率宽度适配
   2. SDF Outline
      1. https://www.shadertoy.com/view/4lfyR2
   3. BackFaceOutline
   4. ScreenPercentage（TSR Editor）宽度适配
7. ToonPostProcess
   1. ToonBloom
   2. 实现一波Anti-Lut
8. ToonRimLighting
   1. 后处理边缘光
   2. Matcap
   3. ASoul边缘光
9. Reflection控制
10. GI
11. 阴影控制
    1. CustomDepth制作头发阴影偏移效果哦 https://zhuanlan.zhihu.com/p/689578355
12. ToonTranslucent
13. 添加Debug View https://zhuanlan.zhihu.com/p/668782106
14. UE5 Shader Print系统
15. GBufferView实现。
16. Toon Debug模式，可以让美术在材质进行进行简单的光照计算。
17. ToonShadow
    1. !
18. 考虑往GBuffer中添加更多数据（考虑Velocity以及SingleLayerWater）
    1. ShaderMaterialDerivedHelpers.cpp（Shader宏）、GBufferInfo.cpp（GBuffer格式）BasePassRendering.cpp（950行，SingleLayerWater写入GBuffer格式相关）
    2. 确定一下SingleLayerWater中VSMFiter与DistanceFieldShadow对渲染结果的影响，之后在文档中说明。
19. 修复SIngleLayerWater的缩略图渲染渲染错误（双击会有一瞬间的错误产生）
20. ToonLumen、GI以及晕染效果实现。!卡通渲染晕染效果.mp4

TODO:

• ShadingModels.ush 完善Hair高光、自定义高光
• 实现对应后处理效果的ComputeShader版本。
  • ToonOutline
  • RimLighting？

修改标记方便后续删除备注//BlueRose Modify //BlueRose Modify End // Copyright BlueRose, Inc. All Rights Reserved.

渲染功能兼容的游戏

• 罪恶装备
• 原神
• 星穹铁道
• 绝区零
• 蓝色协议

卡通渲染引擎功能总览（按照渲染顺序进行排序）

• GBuffer For ToonShaderModel
  • GBuffer&Material&BasePass
• ToonShaderModel
  • ToonStandard
  • Thickly - Coated
• 描边
  • 描边
  • !描边#实现功能

• 阴影

• 边缘光
• 其他特性
  • Toon眼睛渲染
  • Toon眉毛渲染

待实现功能

知乎提到的渲染功能：

• 发尖勾线 https://zhuanlan.zhihu.com/p/405518306
• SDF 描边
  • https://zhuanlan.zhihu.com/p/113190695
  • https://zhuanlan.zhihu.com/p/360229590
• 屏幕空间深度边缘光 Screen Space Depth Rimlight
  • https://zhuanlan.zhihu.com/p/139290492
• 原神实现
  • https://zhuanlan.zhihu.com/p/435005339
• 遮挡时的模糊网点效果
  • https://zhuanlan.zhihu.com/p/370140711

按照需求优先级进行排列：

• Anit-Lut功能

  • Anit-ToneMapping
  • 完整的Anit-Lut功能（虚拟拍摄也会用到）

• 描边改进

  • 后处理部分，使用蓝色协议的方案
  • MultiDraw BackFace部分
  • 绘制轮廓方法落地：本村线、SDF
  • 使用添加MeshDrawPass的方式实现比较完美的BackFace

• ToonData与ToonWorldSettings改进

  • 增加多个SSS 预积分贴图功能
  • 将材质以外的参数都集中到ToonWorldSettings类中，以方便调节

• 面部光影方案改进

  • 在GBuffer中添加额外面部自定义法线
  • SDF面光方案

• 角色面部Anit-Perspective 与 手指放大效果

  • 模仿VRM4U的参数
  • 参考AnimMaker
    • https://www.patreon.com/posts/56089741

• 后处理

  • 原神 辉光效果
  • TAA抗锯齿 => Responsive AA，解决Outline模糊问题
  • 影视级Bloom实现

• 眉毛效果

  • 可以考虑使用TranslucencySortPriority来解决
  • 通过MeshDrawPass实现眉毛最前显示效果
  • 实现眉毛描边效果

• 额发效果

  • 额发阴影效果（衣服阴影效果）
  • 实现半透明额发

• 天光与间接光处理

  • 为了防止环境光把角色照出立体感，所以计算环境光时，会把法线全部看作世界空间上方向来处理。同时增加了一些参数可以进行一些定制化调整。

• 使用顶点色与第二套UV来修改一些可以实时修改的效果

• 实现PBR <=> Cel 卡通渲染效果的参数切换

• 使用Kawaii插件实现柔体效果

• 后处理边缘光落地

• SSGI 卡通渲染适配？实现AnimMaker 中的一个效果

• 丝袜 https://zhuanlan.zhihu.com/p/636157482

厚涂风格研究与开发笔记

• ShaderModel
  • 分阶着色
    • 二阶化：
    • 多阶化：
    • 自定义次表面（暗部）颜色
    • 颜色过渡（羽化）：
    • lut：待讨论
  • 高光
    • 高光贴图
    • 高光颜色
    • 参数化高光形状
    • 多层高光
  • Shader内编辑法线
    • N=_scale * L + N
• 描边
  • 外描边：后处理描边 、 Mesh挤出 2种方式，原神采用了Mesh挤出。
  • 内描边：后处理、SDF描边、本村线 3种方式
  • 使用Mesh基础、后处理、模型绘制。（后处理传递Id贴图）
• 阴影
  • 自定义阴影颜色
  • 自定义阴影范围
  • 自定义阴影形状
  • 阴影过渡（sdf阴影）
• 边缘光
  • 边缘光是否受到光照影响
  • 多层边缘光
  • 边缘光衰减（入射角度更明显 or 背光角度更明显）
• 多光源支持
• 根据相机角度调整模型（非必要）
• 眼睛
  • 反射 环境反射或者matcap支持
  • 内阴影 AO实现或者画死的内阴影
  • 瞳孔 瞳孔缩放
  • 视差和效果 凹凸效果
  • 高光 自定义高光形状&位置
  • 高光流动效果
• 头发
  • 各项异性头发
    • 高光扰动
    • 高光贴图
    • 自定义高光属性
    • 高光天使环
  • 无各项异性头发
    • 自定义高光参数
    • 高光贴图
    • 高光天使环
• 特殊效果
  • 眉毛/睫毛不受遮挡
  • 自发光
  • 阴影内素描效果
• 后处理效果
  • 后处理 辉光效果
  • 之后提到了SunFlare，应该是那个屏幕后处理效果。卡通渲染很依赖体积光，所以自然会有好的效果，假也没关系，假才是对的。谷歌搜SNN Filter https://www.shadertoy.com/view/MlyfWd
  • 旁边的Kuwahara应该是个类似的算法，64采样。

动画技法

• 三维动画里的仿二维动画抽帧技法教程:https://www.bilibili.com/video/BV1154y1j7tD/?spm_id_from=333.788.recommend_more_video.8&vd_source=d47c0bb42f9c72fd7d74562185cee290