Origin
zhuanlan.zhihu.com
Tags
简悦
项目
收藏夹
创建时间
收藏类型
Cubox 深度链接
更新时间
原链接
描述
前言
今天的文章，来填填本祖之前挖的 “场景渲染方案” 的坑，本篇为场景物件 shader 篇，主要是分享下风格化树的 shader 渲染方案，下面让我们先看下不同竞品中的风格化树。
竞品中的风格化树
观察得出结论：
- 以纯色表达为主，树叶纹理中不会进行细节绘制。
- 顶部会叠加一个亮色，以表达光照落差感。
- 高光不明显，向着光源方向时候背部有 3S 效果。
- 造型设计上，基本没有 “平顶树” 的设计, 便于制作球形法线，表达模型体积感。
- 原神的树在主体颜色的基础上，还做了一个描边。
分析还原
这次我们选择分析还原一下原神树的效果，先上个自己分析实现的效果
模型法线
与我们前面观察结果一致，模型上制作了球形法线，从 max 中观察得出：
顶点色 AO
从逆向 shader 中发现，原神中的一部分 AO 信息是存在了顶点色的 A 通道
纹理贴图
原神树叶的渲染基本上就使用了_MainTex 主纹理，法线贴图是用的默认的 4X4 来占位的。
和本祖前面的推测一致，主贴图纹理不存在细节，_MainTex 的 R 通道用于控制材质中两个基础颜色的权重，B 通道用于控制 CutOff，A 通道用于保存树枝遮罩 (用于小型树木一体渲染)
模型裁剪处理
原神中对裁剪做了专门的处理，分为了两种，一种是视距裁剪，一种是插片虚化裁剪。
我们先看下视距裁剪：
根据摄像机远近，做一个插值处理，越远得到的因子越大，将得到的因子叠加到本身的裁剪通道中去，就可以得到越远裁剪值越小，看上去更像一个整体。
插片虚化裁剪：
插片虚化裁剪是指专门针对插片部位进行了更多的 Clip 处理，这样会让我们视觉上降低插片感，所以我们需要筛选出插片的区域，原神中的处理方式是利用模型的默认面法线与视角方向做点乘，如下：
观察到插片时候面法线与视角方向接近垂直，所以得到了黑色 0 值，这样我们就筛选出了插片区域，去进行更多的 Clip 处理，进而达到虚化的效果
模型 LOD 设计
经过观察，大部分树都是分为三级 LOD
以这颗树为例
LOD0: 最多面数的全模型渲染
(3159 个顶点索引，3159/3 等于 1053 个面)
LOD1: 经过减面后的模型 + 类似 billboard 处理的补偿面模型
(一共是 642+1722 = 2364 顶点索引，2364/3 等于 788 个面)
LOD2:billboard
直接就是两个面的公告板处理
Shader 着色
经过分析，原神树的着色方案如下：
albedo +diffuseLight + specLight + scattering + SH + rim + SSShadow + SSAO
- albedo 固有色中主要进行了两个树叶主色的混合，然后叠加了前面说到的顶部颜色 TopColor, 让树叶有不同的颜色倾向表现。有个细节点是还利用了球形法线的特性，将法线转到世界空间后取 Y 值，能得到一个至上而下的颜色削减，很好的模拟了光照的过渡
- diffuse 漫反射部分做的是常规的兰伯特
- specular 高光部分表现其实不明显，原神中做的是 GGX 的高光和菲涅尔，本祖分析的过程就是用了一个 NdotH 代替了这部分计算
- scattering 透射效果部分，主要是基于灯源方向和法线的半角向量，与观察方向做点乘，最后将这个结果处理为 HDR 叠加到 albedo 部分，就能模拟出我们朝向光源时候的直射感觉
- SH 部分就是常规的 unity 计算 SH 的公式，直接调用即可
- rim 边缘光部分是基于深度图去实现的，采样了两次深度图，第二次采样时候基于屏幕空间的法线法线进行了一定量采样偏移，相减后得出 rim 边缘轮廓
另外，原神使用深度差值的方案在设计上也有亮点，由于树背后的物体深度差比较小，基本看不到 rim，天空区域深度差较大，可以巧妙地表达有光线部分才有 rim
- SSAO 和 SSShadow 部分 (下次一定)
最后，发张 shading 大合照结束我们今天的分享~
▎本文由 简悦 SimpRead 转码。