ShadowGun 飘动的旗帜

这几天在写shader的时候，发现sublime对shader的支持特别好用

Install Packages:

Unity Shader

GL Shader Validator

OpenGL Shading Language (GLSL)

ShaderLanguages

Shader Syntax (GLSL HLSL Cg)

装好这几个包后，shader会高亮和自动跳转

--------------------- 分割线 ----------------------------

题外话：

在看了SG原文博客后，我打算按照博客中列出的点去学习。博客地址

原文：

Flags and cloths in the wind (Shader Lightmap + Wind)

Information which vertices are fluttering in the wind and which are not is defined by the vertex colors alpha in 3d modeling program (white alpha moves, black alpha dont). In shader parameters, user must define the direction and speed of flutter only.

在风中的旗帜和布料

我们在顶点的颜色中，使用alpha通道来决定哪些顶点需要飘动哪些不需要（1alpha是需要移动的，0则不需要）。具体的飘动方向和速度需要在材质中确定。

把光照的所有去掉，只看移动顶点的部分。

效果：

原理：

按照波动的效果去修改面片的顶点位置

运行时实际的顶点位置偏移

源码:

Shader "CrazyShader/FlagWind"
{Properties{_MainTex ("Texture", 2D) = "white" {}// 风的方向//_Wind ("Wind Params", Vector) = (1, 1, 1, 1)// 原文中的fultter拼写错误 应为flutter 飘动// 边缘移动的距离 也就是移动幅度//_WindEdgeFlutter("Wind Edge flutter factor", float) = 0.5////_WindEdgeFlutterFreqScale("Wind edge flutter freq scale", float) = 0.5}SubShader{Tags { "Queue"="Transparent" "RenderType"="Transparent"}LOD 100Blend SrcAlpha OneMinusSrcAlphaCull Off ZWrite OffCGINCLUDE#include "UnityCG.cginc"#include "TerrainEngine.cginc"sampler2D _MainTex;float4 _MainTex_ST;float _WindEdgeFlutter;float _WindEdgeFlutterFreqScale;struct v2f{float4 pos : SV_POSITION;float2 uv : TEXCOORD0; };// 修改顶点的函数//inline float4 AnimateVertex2(float4 pos, float3 normal, float4 animParams, float4 wind, float2 time){// animParams stored in color// animParams.x = branch phase// animParams.y = edge flutter factor// animParams.z = primary factor// animParams.w = secondary factorfloat fDetailAmp = 0.1f;float fBranchAmp = 0.3f;// Phases (object, vertex, branch)float fObjPhase = dot(unity_ObjectToWorld[3].xyz, 1);float fBranchPhase = fObjPhase + animParams.x;float fVtxPhase = dot(pos.xyz, animParams.y + fBranchPhase);// x is used for edges; y is used for branchesfloat2 vWavesIn = time  + float2(fVtxPhase, fBranchPhase );// 1.975, 0.793, 0.375, 0.193 are good frequenciesfloat4 vWaves = (frac( vWavesIn.xxyy * float4(1.975, 0.793, 0.375, 0.193) ) * 2.0 - 1.0);vWaves = SmoothTriangleWave( vWaves );float2 vWavesSum = vWaves.xz + vWaves.yw;// Edge (xz) and branch bending (y)float3 bend = animParams.y * fDetailAmp * normal.xyz;bend.y = animParams.w * fBranchAmp;pos.xyz += ((vWavesSum.xyx * bend) + (wind.xyz * vWavesSum.y * animParams.w)) * wind.w; // Primary bending// Displace positionpos.xyz += animParams.z * wind.xyz;return pos;}v2f vert(appdata_full v){v2f o;float4 tempWind;// 通过alpha通道判断顶点是否飘动//float blendingFact = v.color.a;// 风的方向//tempWind.xyz = mul((float3x3)unity_WorldToObject, _Wind.xyz);tempWind.w = _Wind.w * blendingFact;// 风的参数//float4 windParams = float4(0, _WindEdgeFlutter, blendingFact.xx);// 风移动 按照_WindEdgeFlutterFreqScale 放大缩小偏移//float windTime = _Time.y + float2(_WindEdgeFlutterFreqScale, 1);float4 mdlPos = AnimateVertex2(v.vertex, v.normal, windParams, tempWind, windTime);o.pos = UnityObjectToClipPos(mdlPos);o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);return o;}ENDCGPass{CGPROGRAM#pragma debug#pragma vertex vert#pragma fragment fragfixed4 frag(v2f i) : COLOR{fixed4 c;fixed4 tex = tex2D(_MainTex, i.uv);c.rgb = tex.rgb;c.a = tex.a;return c;}ENDCG}}
}

说明：

1.旗帜的素材是四通道，其中用来决定是否顶点移动的alpha通道是这样的

只有不透明的地方才会显示和飘动

2.飘动的波动用shader内置的_Time来表示

_Time

float4

t 是自该场景加载开始所经过的时间，4个分量分别是 (t/20, t, t*2, t*3)

这里的t是秒

3.核心程序在AnimateVertex2中，我发现是参照TerrainEngine.cginc中的AnimateVertex写的。

fVtxPhase表示旗帜编译移动的距离

fBranchPhase表示旗帜主干移动的距离