Vertex and fragment shader 13 - 2D過場淡入淡出(Fade in/out) - 螺旋型(Spiral)

  最近剛好看到關於螺旋的文章,覺得是個滿有趣的效果,就試著來修改成為一個螺旋的過場吧。關於螺旋的計算是參考這篇(http://stackoverflow.com/questions/4638317/how-to-implement-this-rotating-spiral-in-webgl)。

修改後呈現的效果大概是這樣

另外一種方式

當然原本的旋轉也有



  計算的部分就不多說了,可以參考連結裡面的說明,基本上就是使用半徑取對數(log),因為使用半徑的對數,所以距離圓心越遠(radius越大),所得的值會越大,再乘上角度就可以造成離圓心越遠偏移的角度越大,就可以形成螺旋的效果。
float amod = (angle*_Density*0.25+30.0*_Rotate-(360*alp)*log(radius)) - 30*floor((angle*_Density*0.25+30.0*_Rotate-(360*alp)*log(radius))/30);
if(amod-_Cut+(_Cut*_Amount) < 0) {
   color = lerp (_Color2, _Color, clamp(_Amount,0.0,1.0));
}


完整Shader Code
Shader "Custom/Fading" 
{
   Properties
   {
      _MainTex ("Base (RGB)", 2D) = "white" {}
      _Color ("Color", Color) = (1,1,1,1)
      _Color2 ("Color2", Color) = (1,1,1,1)
      _Density ("Density", Float) = 5
      _Amount ("Amount", Range (0,1)) = 0
      _Curve ("Curve", Range (0,1)) = 0
      _Rotate ("Rotate", Range (0,1)) = 0
      _Cut ("Cut", Range (0,30)) = 10
   }

   SubShader {
      Pass {
         Cull Off
         Lighting Off
         ZWrite Off
         Blend SrcAlpha OneMinusSrcAlpha

         CGPROGRAM

         #pragma vertex vert
         #pragma fragment frag

         uniform sampler2D _MainTex;
         uniform float4 _Color;
         uniform float4 _Color2;
         uniform float _Density;
         uniform float _Amount;
         uniform float _Curve;
         uniform float _Rotate;
         uniform float _Cut;

         struct vertexInput {
            float4 vertex : POSITION;
            float4 texcoord : TEXCOORD0;
         };
         struct vertexOutput {
            float4 pos : SV_POSITION;
            float2 uv : TEXCOORD0;
            float4 screenPos : TEXCOORD5;
         };

         vertexOutput vert(vertexInput input)
         {
            vertexOutput output;

            output.uv = input.texcoord;
            output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
            output.screenPos = output.pos * 0.5 + 0.5;
            return output;
         }

         half4 frag(vertexOutput input) : COLOR
         {
            float2 position = input.screenPos*2-1;
            float angle = 0.0;
            float radius = length(position);
            if (position.x != 0.0 && position.y != 0.0){
               angle = degrees(atan(position.y/position.x)) ;
            }
            float alp = 1-_Curve*2;
            float4 color = tex2D(_MainTex, input.uv); 
            if(radius > _Amount*2) {
               float amod = (angle*_Density*0.25+30.0*_Rotate-(360*alp)*log(radius)) - 30*floor((angle*_Density*0.25+30.0*_Rotate-(360*alp)*log(radius))/30);
               if(amod-_Cut+(_Cut*_Amount) < 0) {
                  color = lerp (_Color2, _Color, clamp(_Amount,0.0,1.0));
               }
            }
            return color;
         }
         ENDCG
      }
   }
   Fallback "Diffuse"
} 

如果有任何想法歡迎提出。

No comments:

Post a Comment