unity中背景渐变shader对贝塞尔曲线的应用

这里我更新了一篇使用Texture2D实现的文章:http://blog.csdn.net/zgjllf1011/article/details/79261491

以下为原文：

最近玩了一个游戏叫Polyforge,游戏里是这样的：

游戏中的背景会随机的变化，并且周围有一圈渐变的黑边，看上去很舒服，所以决定照着样子实现一个。

首先做一个渐变，很简单，2个颜色做插值：

return  lerp(_Color1 ,_Color2,o.uv.y);

因为uv的y坐标的范围是0-1，所以最后一个参数直接使用y坐标即可。

看下效果：

渐变的效果是有了，但是效果不是很理想，所以我们再来对渐变的速率进行一些调整，这时我们之前文章中讲到的贝塞尔曲线就派上了用场。我们先来把公式放到我们的shader中:

fixed GetBezierat(fixed a, fixed b, fixed c, fixed d, fixed t)
		    {
		        return (pow(1 - t, 3) * a +
		                3 * t * (pow(1 - t, 2)) * b +
		                3 * pow(t, 2) * (1 - t) * c +
		                pow(t, 3) * d);
		    }

与之前一样，公式没有变，只更改了一下调用的api。

有了公式我们就可以让渐变的过程按照我们想要的方式来进行，首先调整出一个我们喜欢的曲线，看下代码：

return  lerp(_Color1 ,_Color2,GetBezierat(0,-1,2,1,o.uv.y));

效果:

 
原游戏中，背景中还有一圈渐变的黑边，我们可以根据像素点到中心的距离来判断，然后距离越远，亮度越低，修改一下fragment中的代码：

            	fixed4 c = lerp(_Color1 ,_Color2,GetBezierat(0,-1,2,1,o.uv.y));

            	fixed dis = distance(fixed2(0.5,0.5),o.uv.xy);
            	
                return  (1-dis) * c;

其中fixed2(0.5,0.5)为中心点的坐标，因为我们想要的效果是距离中心越远亮度越低，所以这里需要用1-dis来乘上颜色,看下效果:

同样的，也得调整渐变范围，还是用贝塞尔曲线，对距离进行一下处理:

dis = GetBezierat(0,0,1,2,dis)*0.5;

这里乘以0.5是为了避免出现纯黑得情况，看下最终效果:

这里只是对原游戏的效果进行模仿，想要实际应用还要做更细致的调整，如果谁有更好的方式欢迎留言，。

其实这里使用程序生成一张Texture2D的贴图来做效率上应该会更好一些，但是最近对shader方面比较关注，所有在这里就顺便使用shader来实现了。

最后上完整shader代码:

Shader "Custom/GradualColor" {
	Properties {
		_Color1 ("Color1", Color) = (0,0,0,1)
		_Color2 ("Color2", Color) = (1,1,1,1)
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200
		

		Pass{  
            CGPROGRAM  
  
            #include "UnityCG.cginc"  
            #pragma vertex vert_img  
            #pragma fragment frag  

			fixed4 _Color1;
			fixed4 _Color2; 

			fixed GetBezierat(fixed a, fixed b, fixed c, fixed d, fixed t)
		    {
		        return (pow(1 - t, 3) * a +
		                3 * t * (pow(1 - t, 2)) * b +
		                3 * pow(t, 2) * (1 - t) * c +
		                pow(t, 3) * d);
		    }

            float4 frag( v2f_img o ) : COLOR  
            {  
            	fixed4 c = lerp(_Color1 ,_Color2,GetBezierat(0,-1,2,1,o.uv.y));

            	fixed dis = distance(fixed2(0.5,0.5),o.uv.xy);
            	dis = GetBezierat(0,0,1,2,dis)*0.5;
                return  (1-dis) * c;
                //return  lerp(_Color1 ,_Color2,o.uv.y);
            } 
            ENDCG  
		}
	}
	FallBack "Diffuse"
}