BlueRose 1f4c5df993 vault backup: 2025-04-17 23:55:12

2025-04-17 23:55:12 +08:00

19 KiB

Raw Permalink Blame History

title, date, excerpt, tags, rating

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

卡通渲染相关资料里面的有原神、碧蓝幻想、罪恶装备、赛马娘、黑丝指的参考。
- 做完基础功能之后，再逐个寻找新的功能点与方向。
知乎FlashYiYi的卡通渲染分享里面有许多Fake技巧
参考对象分析
- 星穹铁道
- 原神
  - https://zhuanlan.zhihu.com/p/316138540
    - 软阴影边界
    - 反射探针，获取BaseColor、Normal等，最后Relight来获得复合场景的反射CubeMap。
- 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
- 明日方舟终末地
- CEDEC
  - 学园偶像大师
    - https://zhuanlan.zhihu.com/p/716241556
    - CEDEC2024-细微之处见神明《学院偶像大师》中精致的3D角色与背景制作(一)
  - BanG梦想！女子乐队派对
  - 异度神剑
- 碧蓝幻想
  - https://zhuanlan.zhihu.com/p/14858282081
  - https://zhuanlan.zhihu.com/p/27407759719
  - 【Cygames技术大会 2024】碧蓝幻想Relink - 角色模型制作事例 - Ale Feng的文章 - 知乎 https://zhuanlan.zhihu.com/p/16218213290
- 归龙潮
其他人的作品
- 蛋白胨 https://zhuanlan.zhihu.com/p/663968812
- 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
  - 【Unity/虚幻5/Blender】3种引擎绝区零风格卡通渲染星见雅完整流程
动漫制作
- 2024年4月新番 Girls Band cry【日本最顶级的3D动画制作过程【GBC官方动捕制作片段】】 https://www.bilibili.com/video/BV1uM4m1U7CL/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e

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

最近开发计划

添加ShaderModel
1. https://zhuanlan.zhihu.com/p/658700282
2. https://zhuanlan.zhihu.com/p/597568404
给材质添加一些属性
1. 移植ToonDataAsset。
  1. MaterialInstance Override 完成
2. 添加BackFace Outline基础代码。
添加材质自定义Output节点。
给GBuffer结构体添加子ToonBuffer结构体。
ShaderModel：ToonStandard
1. 实现初版ToonStandard。
ToonOutline(后处理)
1. ID、Depth、Normal Outline
  1. 深度描边初版
  2. 法线描边初版
  3. FOV宽度适配
  4. ScreenPercentage、DPI宽度适配（包括Editor Overrider）
  5. 后处理描边的内外描边问题。深度描边会描内部与外部。导致一些比较近的地方深度描边比较细。
    1. 内外描边通过是否是卡通材质来判断。所以分为外内与内内2种情况。
    2. 外描边之后考虑使用BackFace来实现。
  6. ToonOutlineDataAsset 添加深度&法线描边开关选项。
  7. ToonOutlineDataAsset ID描边实现。
  8. ToonOutlineID Overrider实现。可以使用OutlineID贴图来实现单材质描边的功能。
  9. Fix SkyAtmosphere 与ExponentialHeightFog会干掉Outline的问题。目前将ToonOutline移到SkyAtmosphere、ExponentialHeightFog Pass之后 另一个思路就是使用BackfaceOutline
  10. Outine PostProcess Overrider设置。 ToonOutline.cpp 42行。
  11. TODO: TSR Outline写入速度信息。
    1. ue4.26 体积云重投影 https://zhuanlan.zhihu.com/p/718922764
  12. Nanite支持Nanite学习笔记
2. OutlineMask& SDF Outline
  1. 8通道存储SDFOutlineMask8位精度不够，在Materal中计算依然有锯齿
    1. https://zhuanlan.zhihu.com/p/410710318
    2. https://zhuanlan.zhihu.com/p/113190695
  2. 剩下8通道
    1. 3通道分别控制ID、Depth、Normal Outline Mask。
    2. Offset、Feather？
  3. PS绘画出不同压感的颜色。
    1. F5打开画笔设置对话框，点击“传递”页。
    2. 将“不透明度抖动”设为0，并将控制方式设置为钢笔压力。最小钢笔压力设置成50%。
    3. 如果效果不明显，将“流量抖动”设置组也一样设置。
  4. 编写Outline贴图转换工具。
    1. https://zhuanlan.zhihu.com/p/658213216 https://github.com/danbaidong1111/UnityTools/tree/main/SDFGenerateTool
    2. https://zhuanlan.zhihu.com/p/702637242
3. BackFaceOutline
  1. https://zhuanlan.zhihu.com/p/613772622
  2. https://zhuanlan.zhihu.com/p/552283835
  3. VertexShader，模型反向压平。
  4. fix 模型勾选渲染CustomDepth才能正常渲染的bug
  5. fix 开启一个模型的CustomDepth会让其他ToonStandard模型开启CustomDepth写入。（将CustomDepth写入 => Depth写入）
  6. 深度剔除bug解决
  7. 使用比较ToonMeshDrawOutline前后深度的方法来获取ToonMeshDrawOutlineMask.
  8. TODO：确认VR中的运行结果是否正确？
  9. TODO：Nanite模型支持。
  10. TODO：另一种思路定点内扩+Stencil的方式渲染内描边？
  11. TODO：顶点法线工具开发 https://tajourney.games/7689/
4. TODO：RayTacing描边方法。
ToonLighting
1. Cel
2. 【UE5】卡通渲染着色篇3：多光源 https://zhuanlan.zhihu.com/p/717533663
3. UE5 浅谈光源更新多线程优化 https://zhuanlan.zhihu.com/p/27574076122?utm_psn=1879905019928764942
ToonPostProcess
1. ToonBloom
2. ToonDiffusion：对场景亮部进行降采样，之后将亮度信息叠加到Toon物体的暗部上。
3. 晕染效果，Background透过光功能。
4. 实现一波Anti-Lut
5. 考虑其他风格的ToneMapper（可能还是使用LUT更好调整） https://zhuanlan.zhihu.com/p/716759929?utm_psn=1812047639874760707
  1. CCA Tonemapping
  2. GT Tonemapping https://github.com/yaoling1997/GT-ToneMapping
  3. AGX Tonemapping https://github.com/EaryChow/AgX
  4. 其他Tonemapping: Local Tonemapping方案总结 https://zhuanlan.zhihu.com/p/519457212
  5. Fix 运行的时候出现的渲染错误。
ToonRimLighting
1. 材质边缘光（位于引擎插件/ToonUtility/MaterialFunction/MF_RimLighting）
2. 后处理边缘光
3. Matcap
4. ASoul边缘光
Reflection控制
1. ReflectionAlpha实现。
2. Matcap Reflection实现。
3. 对Reflection Texture进行Kuawahara处理，之后根据亮度抽象成第二高光（提取亮度之后，乘以高光颜色）
  1. 【[UFSH2024]用虚幻引擎5为《幻塔》定制高品质动画流程风格化渲染管线 | 晨风 Neverwind 完美世界游戏】【精准空降到 14:24】 https://www.bilibili.com/video/BV1rW2LYvEox/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e&t=864
Toon GI（Lumen / Other)
1. DiffuseIndirect Alpha / DiffuseIndirect Saturation / AOAlpha
  1. Lumen
  2. Other GI Method
2. 向下采样
3. 平滑法线 => 平滑饱和度
  1. 使用哪个https://zhuanlan.zhihu.com/p/25839790454
  2. 尝试使用高斯模糊Lumen法线。
  3. 尝试使用ViewVector来平滑法线。
    1. 用相机方向的话，随着相机绕角色旋转，角色身上亮度变化会比较明显，所以视频里用的是把平滑度乘在Lumen的1-2阶球谐上
  4. 尝试平滑二阶、三阶球谐，来使得Lumen效果低频化
    1. 伪代码 OutSH = SH0 + (SH1 + SH2) * Smoothness;
  5. Cel适配，需要实现Toon多光源参考
阴影控制
1. 控制深度偏移
  1. 在材质中使用ShadowPassSwitch再对ViewSpace的Z轴方向（使用DirectionalLightVector比较可以只对方向光进行偏移）进行WPO偏移实现。
2. ContactShadow接触阴影实现衣服细节的DetailShadow
3. 半程阴影（DirectionOffsetToViewShadow）半分阴影
4. 给图元添加禁用自阴影功能——发现启用RecivedViewOffsetShadow就可以起到这个功能。
ToonHair 1. 【UE5】通过深度偏移计算刘海投影 2. UE5 NPR-Shadow-Character Shadow（2）
ToonTranslucent
1. 通过模仿SingleLayerWater实现折射效果 https://zhuanlan.zhihu.com/p/657928532
2. 眉眼细节
  1. 【【Unity/虚幻5/Blender】3种引擎崩坏: 星穹铁道风格卡通渲染从球谐光照到眉毛透过刘海完整流程】【精准空降到 1:24:29】 https://www.bilibili.com/video/BV1CN411C7qx/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e&t=5069
3. 【UE5】逐材质stencil、半透明排序、OverlayMaterial
TSR
1. UE TAAU详细解析
2. UE TSR详细解析
3. GDC2025 : Generalized Stylized Post Processing Outline
Toon多光源参考
【虚幻5】UE_动画变形工具(晶格变形)
月下幻影的掰法线思路：N = _Scale * NoL * L + N尝试找到使用场景。资产路径/Game/ToonContentExample/MaterialUtility/NormalOffsetToDirectionalLight/M_NormalOffsetToDirectionalLight
RGS 光线追踪与路径追踪支持。
1. 【UE5】通过Raytracing自定义卡通渲染投影 https://zhuanlan.zhihu.com/p/688722298
给EditorView添加卡通渲染用场景，默认场景的渲染效果对不上。
实现前向混合管线？思路有2：1. Material直接计算光照结果。2. 自定义ToonBasePass到LightingPass后，复制阴影贴图与Lumen渲染结果进行Composition。
1. 原神早期的方案：
  1. 渲染地形（远景
  3. CubeMap环境光照，（和时间与地区有关）
  4. 渲染屏幕空间深度图
  5. 渲染角色以及近景模型（卡通材质相关渲染Pass）
    1. 有计算直接光照与阴影。使用屏幕空间深度图来计算阴影。
  6. 渲染深度与法线Buffer。
  7. 渲染级联阴影。
  8. 合成，阴影与环境光照（AO、环境探针）。
云彩生成器
1. https://www.bilibili.com/video/BV1L5kdYFEXc/?spm_id_from=333.1007.tianma.4-1-11.click&vd_source=d47c0bb42f9c72fd7d74562185cee290
2. 风格化水面资产 https://item.taobao.com/item.htm?id=865360489543&pisk=gLHsX7NMiNb1gB7njFKURXly5Dwb5q9y1iZxqmBNDReTkigKDtQA6-FLJorOMSU2sqNju2VxQRoZRGDIPtWwSCmAh-yvzUJyUcman-Lyk8kOUGq4mNUAurCKv-rjPdNAXcmgnrIFkQlKjZg5RK5YDrKQpor7k-EYW9KQcuaYHPFAJ6E8JrexkSIdJuZ5MZCTHkKQju5OBoeYvMEaVtBtk-KIvyqxnDXQDCZ-fHz1qUDkpeKgJtBxdlNpTcUKrr-4i5TjbyXvy1Zg1coTRtBxKXkPllz9ZMz0QPDbfqvlIRFjTAVoQeBsl20KBSDp8B00QuV-MD-lTPDIQvFsCU1uCX3nd5DOWhqtsqDbQx71hDMb57HTOKx0CDEYdbneq6zidAkL1AT5ZPMiDjPItNTUuboEBWgJ89g0GXkgZA8dC4IyzTz7sJ5fA7XbAz-BAsf0xzPwqJ_edaNTxlTyAH_Gi5E3AmtBAsDg6kqF6HtCWc1..&spm=a21xtw.29178619.product_shelf.74.41727d6dRCDvul
添加Debug View https://zhuanlan.zhihu.com/p/668782106
UE5 Shader Print系统
GBufferView实现。
Toon Debug模式，可以让美术在材质进行进行简单的光照计算。
ToonShadow
1. !
2. ToonSDFShadow
  1. TODO: SDF贴图工具？
LookDev场景
1. https://zhuanlan.zhihu.com/p/394608910
考虑往GBuffer中添加更多数据（考虑Velocity以及SingleLayerWater）
1. ShaderMaterialDerivedHelpers.cpp（Shader宏）、GBufferInfo.cpp（GBuffer格式）BasePassRendering.cpp（950行，SingleLayerWater写入GBuffer格式相关）
2. 确定一下SingleLayerWater中VSMFiter与DistanceFieldShadow对渲染结果的影响，之后在文档中说明。
修复SIngleLayerWater的缩略图渲染渲染错误（双击会有一瞬间的错误产生）
添加对应的Stat https://zhuanlan.zhihu.com/p/716644594
ToonLumen、GI以及晕染效果实现。!卡通渲染晕染效果.mp4
在材质中实现ToonEye相关效果
1. 【二次元人物眼睛如何变形?】 https://www.bilibili.com/video/BV14M4m1y71A/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e
  1. 原视频 https://www.youtube.com/watch?v=euIyX9v8rvw
  2. 眼睛建模 https://youtu.be/s2_7Q2IIvNY?si=fWiYjqcLFXzdeQ-B&t=126
尝试实现Forward+
1. BasePass https://zhuanlan.zhihu.com/p/618698467
DX11问题修复
1. ToonOutline SceneColorTexture为空的问题。 DX11限制，必须CopyTexture
卡通渲染针对TAA的优化思路 https://zhuanlan.zhihu.com/p/678876237
1. https://www.bilibili.com/video/BV1BK411v7FY/?spm_id_from=333.788&vd_source=ea6df38502a795b7533aa33b78bf1159
2. https://zhuanlan.zhihu.com/p/20786650
Unreal Engine 5.4 Scene Extension https://zhuanlan.zhihu.com/p/706268007
1. 通过SceneExtension改进ToonObjectID，这样可以减少对应ToonBuffer的精度来存其他数据。
2. https://www.bilibili.com/video/BV1fM4m1U7Tp/

TODO:

ShadingModels.ush 完善Hair高光、自定义高光
实现对应后处理效果的ComputeShader版本。
- ToonOutline
- RimLighting？
尝试使用新的笔记系统 https://post.smzdm.com/p/a96l0kn5/

修改标记方便后续删除备注//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
屏幕空间深度边缘光 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

19 KiB Raw Permalink Blame History Unescape Escape

目录

最近开发计划

渲染功能兼容的游戏

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

阴影

待实现功能

动画技法

19 KiB

Raw Permalink Blame History