UnityShader学习教程之＜使用unity3d shder实现精灵涂鸦效果＞

最终效果：

原图素材：

实现原理

教程完整代码在本文附赠链接：

完整shader代码

使用伪随机函数和round循环函数扰动unityshader中的vertex（顶点）

模块一： Properties模块

界面的展示模块：

    Properties
    {
        //定义了主贴图
        _MainTex ("Texture", 2D) = "white" {}
        //定义了扰动幅度
		_NoiseScale("NoiseScale",float) = 1
		//扰动速度
		_NoiseSnap("NoiseSnap",float) = 1
    }

模块二： Tags模块

这里主要定义了我们渲染支持的类型！

         Tags {
            //不希望任何投影类型材质或者贴图，影响我们的物体或者着色器
            "IgnoreProjector"="True"
            //渲染队列为支持透明度渲染
            "Queue"="Transparent"
            "RenderType"="Transparent"
            //支持精灵图片
            "CanUseSpriteAtlas"="True"
            //指示material inspector预览应如何显示材质
            "PreviewType"="Plane"
        }

模块三： Pass模块

		    Tags {
		        //这里是只前置灯光
                "LightMode"="ForwardBase"
            }
            //这里是指颜色的混合模式
            Blend One OneMinusSrcAlpha
            //裁剪模式
            Cull Off
            //开启深度写入
            ZWrite Off

模块四：CG模块

这里主要处理了渲染逻辑代码，主要包括了四个函数，分别是:rand()–>伪随机函数,snap循环时间控制函数，vert()—>顶点入口函数，frag()---->片段入口函数

rand()伪随机函数

----这个函数是固定的记住就可以了，主要是shder里面没有random函数

定义：伪随机数是用确定性的算法计算出来自[0,1]均匀分布的随机数序列。并不真正的随机，但具有类似于随机数的统计特征，如均匀性、独立性等。在计算伪随机数时，若使用的初值（种子）不变，那么伪随机数的数序也不变。伪随机数可以用计算机大量生成，在模拟研究中为了提高模拟效率，一般采用伪随机数代替真正的随机数。模拟中使用的一般是循环周期极长并能通过随机数检验的伪随机数，以保证计算结果的随机性。

实现：

            //co是指顶点
 			float rand(float2 co)
             {
                    return frac(sin(dot(co.xy ,float2(12.9898,78.233))) * 43758.5453);
             }

snap()循环函数

这里x主要是指_Time.y,snap是指缩放系数_NoiseSnap

			  float snap (float x, float snap)
              {
                 return snap * round(x / snap);
              }

vert()顶点入口函数

其实主要是在顶点入口函数里面，对顶点的x和y做有规律的循环随机偏移，随机–>随机函数，循环—>循环函数round()!

v2f vert (appdata v)
            {
                v2f o;
                //这里则是循环系数
				float2 time = snap(_Time.y, _NoiseSnap);
				//这里就是求出偏移系数
                float noise = rand(v.vertex.xy + time) * _NoiseScale;
                //这里输出最终的顶点坐标
                v.vertex.xy +=float2( noise,noise);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

frag()片段入口函数

这里没有任何变化，常规的就行

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }

运行性能

从drawcall来看还是可以的！手机上运行很流畅！