【Unity Shader】用shader控制背景的倾斜渐变

07/19更新,修复了之前的问题

07/14更新,这个效果有点不对,因为是按比例取的颜色,所以可以看到右下角明显偏亮。。。待修改。。。

需要用到一个背景图是斜着渐变的,且需要不断地变化背景颜色,所以不适合美术为每一种颜色背景切图,用shader来控制是最好的

效果图:
这里写图片描述这里写图片描述

材质Inspector:
这里写图片描述

图片效果由三个参数确定,两个颜色分别表示两边的颜色,weights用来计算插值时候的权重

Shader "Custom/Fade"
{
    Properties
    {
        [KeywordEnum(X, Y)] _FadeWith ("Fade With", Float) = 0
         _Color1 ("Color1", Color) = (1.0,1.0,1.0,1.0)
         _Color2 ("Color2", Color) = (0.0,0.0,0.0,1.0)
        [PowerSlider(1)] _Weights ("Weights", Range (0.0, 2.0)) = 1.0
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            fixed4 _Color1;
            fixed4 _Color2;
            float _Weights;

            //计算给定point点到经过linePoint的直线line的距离
            float getPointLineDist(float2 pt, float2 linePoint, float2 ln)
            {
                float dist;
                float2 point2point = pt - linePoint;
                dist = length(dot(pt, ln) * ln/length(ln) - point2point);
                return dist;
            }

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.uv;
                return o;
            }

            //注意,uv的最大值是(1, 1)
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col;
                float2 pt;                      //point
                float2 linePoint = float2(1,1);
                float2 ln = float2(-1, 1);      //line

                pt = float2(i.uv.x, i.uv.y * 1);
                float pointLineDist = getPointLineDist(pt, linePoint, ln);
                float maxLineDist = getPointLineDist(float2(0, 0), linePoint, ln);

                float lp = pointLineDist / maxLineDist * _Weights;
                col = lerp(_Color1, _Color2, lp);

                return col;
            }
            ENDCG

        }
    }
}

扩展:可以再设一个参数来对颜色进行blend,只要乘一下最后return的col就行了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值