风格化草渲染

hello大家好,好久不见，先祝大家新年快乐~新的一年心想事成。最近一段时间没更新一是疫情原因，二是偷偷补玩了一些早在列表上但是没时间推的游戏（比如最近刚推完了《ever17》）哈哈哈。不废话了，回归到正题：

一、草的模型

在谈论风格化草渲染之前，先讲讲几种常见的实现方式：

1. 模型
2. billboard（插片/面片）。
3. Impostor
4. GeometryShader

 其中GeometryShader如何实现在之前的文章已经讲过类似的实现方式，这里就不再赘述。我们先讲讲billboard方式，如图所示：

插片草在某些场合能有不错的效果，还可以将多个Billboard进行叠插展现更多细节，但是由于插片并非草叶真正形状，在表现细节方面扔有所欠缺，而且当渲染大面积草时就会消耗大量的时间。Billboard只适用于远处的对模型细节要求不高的情况，可以显著降低性能要求。Billboard也是在很多需要降低性能要求，绘制大规模模型的情况下（例如草原、森林）普遍应用的一种方法，是一种image based renderring的思路。此外这种简单的Billboard难以支持真正的光照阴影等效果。

采用模型草能细腻的表现草本身的一些细节：如不同部位的摆动等，但是当模型本身面数过多时也会造成剧烈的消耗。

Impostor技术是介于Billboard和mesh之间的一种模型,具体原理可见Kam佬总结的内容，这里我就不再展开讨论了。

当然还有程序化生成的方式，也不在此处细讲了。

二、草的风格化渲染

开始施法：

• 草叶本身从上到下的颜色渐变

这部分我们可以通过UV来控制渐变

• 草与草之间的混合

为了减少草的重复感，我们可以通过一张noise不同通道来控制Terrain中不同区域草颜色等差异。

为了让这一步看起来更明显，我这里故意设置的颜色差异比较大。这一点可以根据游戏风格来自行控制。

• 光照对草的影响

这里就比较有意思了，光照的不同处理方式是需要根据整体风格来确定，如果整个场景比较扁平风（Ghibli风格），那就朝着色阶化的方式去做，可以不添加高光。如果是平常的卡通风，也可以按照整体场景、人物等的卡通渲染方式如漫反射用half lambert再加上高光保持风格上的统一。如果偏写实，也可以按照PBR的思路来做草地光照，添加透射、IBL等特性。

漫反射：用half lambert模拟草地的SSS效果

diffuse = (N*L*0.5+0.5)*lightAttenuation*lightColor*baseColor;

高光：高光这里我们用一个trick，就是只算草尖的高光来模拟草的AO效果

Specular = lerp(0,pow(saturate(dot(N,H)),SpecularPowParam),uv.y);

直接光效果：

间接光直接用IBL的思路用SH来采样：采用间接光之后可以产生非常平滑的阴影（这里指地形产生的阴影，草本身的阴影我们要直接禁用）

IndirectLight=SampleSH(0)*BaseColor;

添加对点光源的支持：

• 风场

制作风场有很多种，比如比较简单的用noise贴图或者程序化控制等方式，还有GDC上类似战神那样更复杂的可交互物理风场。

我的风场是程序化控制主要参考这个视频制作的，稍加修改和参考其他的教程。

一些细节：

1.有风时草是歪的，所以我们可以给草添加一个初始的偏移位移。

2.原神中随着风浪吹过时，风线上草的颜色会发生改变。我们也可以尝试添加风线色。

最后添加后处理等效果：

引用&参考（以下排名不分先后）

1.Why Zelda BOTW grass system is the greatest

2.Interactive Wind and Vegetation in 'God of War'

3.Between Tech and Art: The Vegetation of Horizon Zero Dawn

4.ColinLeung-NiloCat/UnityURP-MobileDrawMeshInstancedIndirectExample

5.UE4 Breakdown - How I create grass for my indie game Lucen