Unity风格化场景之：The Illustrated Nature (一)

Unity风格化场景之：The Illustrated Nature (一)

---

资源地址：The Illustrated Nature

Unity编辑器下截图：

PineForest.png

Forest2.png

Forest3.png

The Illustrated Nature是非常风格化的一个场景，并且作者提供了轻量管线的版本，我十分喜欢。

这个场景主要吸引我的是植物部分。而草是非常有代表性的植物，下面我们来看看如此风格化的场景具体是如何制作草的。

---

关于刷草

作者使用了Unity的地形(Terrain)系统，但是并没有使用Terrain自带的草，而是自定义了草的shader，并使用Unity商店的一款叫Prefab Painter 2的插件进行刷草。

每一株草，作者都做了LOD，场景草的层级结构如下：

Grass4.png

你可能会担心，这样做drawcall会不会很高？作者有支持Instancing么？

我也有此疑问，仔细一看，作者的做法是 静态合批。

静态合批虽然有效的缓解了drawcall压力，但是会带来额外的内存问题。另外，作者也开了遮挡剔除，不过在很多角度下效果有限。

示例场景对于移动设备可能并不合适，但是这并不妨碍它成为一个非常出色的风格化场景示例。

---

关于草的材质

让我们看一下草的shader：

Grass3.png

如果仔细去看代码，草的shader还是非常简单的，草的贴图是纯白色的，作者提供了一个Tint Color给你调色。

Grass2.png

草的光照部分就是最基本的Lambert光照，无高光计算。

Grass1.png

比较有意思的部分是作者提供了一个自定义的风，以及基于noise的随风摆动算法。

GrassGif.gif

摆动包括了顶点摆动以及UV摆动。顶点摆动比较传统，作者用顶点色去控制摆动的幅度。

UV摆动作者放在了Fragment Shader计算，UV摆动其实主要是UV沿着(0.5, 0)做旋转，当然noise是必须的，核心代码如下：

float cos745 = cos( ( simplePerlin2D797 * GrassWiggleFloat * _WiggleStrenght ) );
float sin745 = sin( ( simplePerlin2D797 * GrassWiggleFloat * _WiggleStrenght ) );
float2 rotator745 = mul( uv0746 - float2( 0.5,0 ) , float2x2( cos745 , -sin745 , sin745 , cos745 )) + float2( 0.5,0 );
#ifdef _WIGGLE_ON
  float2 staticSwitch1033 = rotator745;
#else
  float2 staticSwitch1033 = uv0746;
#endif
float4 tex2DNode97 = tex2D( _MainTex, staticSwitch1033 );

关于noise部分，可以参考shadertoy，我就不贴代码了。

---

好了，草的shader大约就是如此工作的。树叶和树干工作方式类似。另外作者还提供了风格化的水，粒子，云等，大家有兴趣可以买这个插件一览究竟。

当然，风格化还有一个非常重要的元素：Color Grading。Color Grading就像乔碧萝殿下的美颜，留待下文介绍。

下一篇