顶点程序经典案例——树木生长

树木生长Shader

一、介绍

大家好，我是阿赵。这次来做一个树木生长的Shader。
顶点程序作为整个渲染管线里面和片段程序并列的两大可控过程之一，一直存在感都比较低。我们平时制作的效果，很多都是在片段程序里面实现的计算，顶点程序一般只是用来计算一下坐标系转换。
这次介绍的树木生长shader，我个人感觉是顶点程序的一个比较经典的应用，通过控制模型的顶点，做出一棵树的生长动画，还是比较有意思的。
另外一个知识点，就是黑白遮罩的运用。在深入学习各种效果的Shader编写之后，会发现很多效果的计算基础，都是模型不同部位的黑白颜色分布的计算。比如说透明度的计算，黑透白不透，比如边缘光的计算，边缘计算出白色，内部计算出黑色，等。
这个例子里面，黑白色控制了顶点是否显示，控制了树木生长的边缘，控制了刚长出来的部分的颜色，诸如此类。如果明白了黑白关系，在编写Shader的道路上，可以说是跨进了一大步。
其实我知道我在一开始写这么多废话，一般也不会有人看的。所以还是快点说制作过程吧。完整Shader在最后面。

二、制作过程说明

1、准备工作：

看到上面的视频，可能有些朋友会说，是不是直接在3DsMax里面做一段动画，然后直接在Unity里面播放呢？
其实不是的。我这里只在3DsMax里面准备了一棵树的模型，它包括了树干和树叶2个部分。

把模型导出fbx然后导入Unity后，把贴图附上，会看到这个模型的效果如下，并没有任何的动画。

地面是为了好看我随便找了一张贴图赋予了一个地面，这个不重要，我们只要关系树干和树叶就行了。

2、展UV

先说一下，为什么树木能实现生长的效果。
为了让树木能从根部到顶部，再到树叶逐渐的出现，我必须找到一个信息，是从树木根部一直到叶子渐变的。为了看得比较清晰，我先把叶子隐藏了，单纯用树干来做说明。

这种信息可以有很多，举个例子：
1.顶点颜色
2.UV坐标
3.贴图颜色
4.顶点坐标
等
通过这些手段，理论上都能实现到这种渐变的效果。但顶点坐标只能是从上到下，或者从左到右之类线性的控制，这里的树枝有可能是横向纵向甚至是拐弯的，所以并不适合用顶点坐标来做。所以我们可以在顶点颜色、UV坐标、贴图颜色这些数据里面选择一种比较容易实现的来做，都无所谓。
我这里选择的是UV坐标。

由于模型已经有了UV1信息用于漫反射贴图的UV坐标计算了。所以我要展一个UV2。

展完之后的UV2大概是这个样子的，我使用了uv的u坐标，从左往右在0-1的区间渐变。
把展好UV后的模型导入到Unity，然后单独显示一下我们需要的坐标看看。

3、检查UV信息显示

这里插一个知识点，介绍一下怎么单独去看模型的某个数据。
比如我现在要看UV2的信息，我可以在顶点程序里面先读取了uv2信息传入到片段程序，然后在最后的输出时

return half4(i.uv2.xxx,1);

这样，就可以单独把我们需要的信息当做颜色显示出来。
我这里的UV2的u坐标信息，显示完是这样的：

可以看到，现在树干从根部到树枝，是有一个由黑到白的渐变。
如果我想把颜色反过来，根部是白色，树枝是黑色，可以这样：

float val = 1- i.uv2.x
return half4(val.xxx,1);

这样，就能得到了之前显示的那个渐变效果了：

4、控制黑白渐变的过程

上面的黑白渐变图，发现有一个问题，就是黑白渐变的区域太大了，我们想做树木生长，一般是需要有一个比较明显的黑白分割线过渡的。
为了实现过渡范围的控制，可以使用smoothstep方法来控制：

float v2Val = 1 - v.uv2.x;
float heightVal = saturate(v2Val + _height);
float growVal = smoothstep(_min, _max, heightVal);

还是那个规则，黑的地方不显示，白的地方显示，所以就可以得到下面这个效果，可以看看黑白范围和最后显示效果的对比：

5、根据法线方向做树枝大小缩放

树木的生长并不是圆柱形生长出来，而是生长出来的地方是尖的，长出一段距离之后才慢慢变粗。
这个效果实现起来不难，还是刚才的黑白图过渡部分，我们可以使用黑白关系，然后加上模型顶点法线的方向，来做一个顶点沿着法线方向的缩放。
由于模型显示的过渡范围和变尖的过渡范围可能不一致，所以虽然都是用smoothstep来控制范围，但min和max的值可以不一样。

float v2Val = 1 - v.uv2.x;
float heightVal = saturate(v2Val + _height);
float growVal = smoothstep(_min, _max, heightVal);
heightVal = smoothstep(_endMin, _endMax, heightVal);

6、生长颜色的变化

最后，我还想实现一种效果，在树木刚长出来的时候，颜色是比较浅的，然后到了生长完成的时候，颜色会变深：

为了实现这种效果，我继续利用了刚才的黑白渐变过渡的信息，给他叠加一个颜色：

half3 diffuseCol = (1 - i.growVal)*_growCol + col.rgb;

这样在过渡的部分，就会乘以一个growCol，在生长完成之后，就纯是漫反射贴图的颜色。

7、树叶部分

其实刚才我们已经把整个shader做完了。树叶的部分，实际上不需要额外写shader去实现，因为展UV的时候，树叶也是根据出现的先后顺序，展UV在树枝的后面的。

这里我比较的偷懒，把相同形状的树叶的UV展在了一起了，所以实际出现的效果，就是同样形状的树叶会一起长出来。如果想效果更真实有点，可以根据整棵树的树枝生长先后顺序，来排列这些树叶的UV2.

三、完整shader

Shader "azhao/TreeGrow"
{Properties{_MainTex("Texture", 2D) = "white" {}_AlphaMap("AlphaMap", 2D) = "white" {}_height("height", Range(-1 , 1)) = 0_min("min", Range(0 , 1)) = 0_max("max", Range(0 , 1)) = 1_endMin("endMin", Range(0 , 1)) = 0_endMax("endMax", Range(0 , 1)) = 1_growCol("growCol", Color) = (0,1,0,0)	}SubShader{cull offTags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float2 uv2 : TEXCOORD1;float3 normal:NORMAL;};struct v2f{float4 vertex : SV_POSITION;float2 uv : TEXCOORD0;float2 uv2 : TEXCOORD1;float growVal : TEXCOORD2;};uniform float _min;uniform float _max;uniform float _height;uniform float _endMin;uniform float _endMax;uniform sampler2D _MainTex;uniform float4 _MainTex_ST;uniform float4 _growCol;uniform sampler2D _AlphaMap;v2f vert (appdata v){v2f o;                o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.uv2 = v.uv2;float v2Val = 1 - v.uv2.x;float heightVal = saturate(v2Val + _height);float growVal = smoothstep(_min, _max, heightVal);heightVal = smoothstep(_endMin, _endMax, heightVal);heightVal = max(heightVal, growVal);float3 offsetVal = v.normal*heightVal - v.normal;o.vertex = UnityObjectToClipPos(v.vertex+ float4(offsetVal,1));o.growVal = growVal;return o;}half4 frag (v2f i) : SV_Target{half4 col = tex2D(_MainTex, i.uv);half3 diffuseCol = (1 - i.growVal)*_growCol + col.rgb;half4 alphaCol = tex2D(_AlphaMap, i.uv);float alpha = alphaCol.r*i.growVal;clip(alpha - 0.5);return half4(diffuseCol,alpha);}ENDCG}}
}