wordpress 自动汉化版,长春网站推广优化,如何用wordpress创建主页,青岛网站建设工作室织梦模板树木生长Shader一、介绍
大家好#xff0c;我是阿赵。这次来做一个树木生长的Shader。 顶点程序作为整个渲染管线里面和片段程序并列的两大可控过程之一#xff0c;一直存在感都比较低。我们平时制作的效果#xff0c;很多都是在片段程序里面实现的计算#xff0c;顶点程序…
树木生长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 { RenderTypeOpaque }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include UnityCG.cgincstruct 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}}
}
