{"id":3887,"date":"2016-09-16T21:51:18","date_gmt":"2016-09-16T21:51:18","guid":{"rendered":"http:\/\/www.drmop.com\/?p=3887"},"modified":"2016-09-16T21:51:18","modified_gmt":"2016-09-16T21:51:18","slug":"colour-cycle-effect-unity-shader","status":"publish","type":"post","link":"http:\/\/www.drmop.com\/index.php\/2016\/09\/16\/colour-cycle-effect-unity-shader\/","title":{"rendered":"Colour Cycle Effect Unity Shader"},"content":{"rendered":"

Just added a new colour cycle effect transparent Unity shader to the free shaders collection<\/a>. This shader can be used to overlay a y-axis colour cycle effect over a texture<\/p>\n

The code for the shader is shown below:<\/p>\n

[sourcecode language=”js”]
\nShader "Unlit\/ColourCycleTexture"
\n{
\n\tProperties
\n\t{
\n\t\t_MainTex("Color (RGB) Alpha (A)", 2D) = "white" {}
\n\t\t_WaveSpeed ("WaveSpeed", Range(-1000, 1000)) = 20
\n\t\t_Frequency ("Frequency", Range(0, 100)) = 10
\n\t\t_Amplitude ("Amplitude", Range(0, 3)) = 0.02
\n\t\t_RedScale("Red Scale", Range(0, 3)) = 1
\n\t\t_GreenScale("Green Scale", Range(0, 3)) = 1
\n\t\t_BlueScale("Blue Scale", Range(0, 3)) = 1
\n\t}
\n\tSubShader
\n\t{
\n\t\tTags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
\n\t\tBlend SrcAlpha OneMinusSrcAlpha
\n\t\tLOD 100<\/p>\n

\t\tPass
\n\t\t{
\n\t\t\tCGPROGRAM
\n\t\t\t#pragma vertex vert
\n\t\t\t#pragma fragment frag<\/p>\n

\t\t\t#include "UnityCG.cginc"<\/p>\n

\t\t\tstruct appdata
\n\t\t\t{
\n\t\t\t\tfloat4 vertex : POSITION;
\n\t\t\t\tfloat2 uv : TEXCOORD0;
\n\t\t\t};<\/p>\n

\t\t\tstruct v2f
\n\t\t\t{
\n\t\t\t\tfloat2 uv : TEXCOORD0;
\n\t\t\t\tfloat4 vertex : SV_POSITION;
\n\t\t\t};<\/p>\n

\t\t\tsampler2D _MainTex;
\n\t\t\tfloat4 _MainTex_ST;
\n\t\t\tfixed _Frequency;
\n\t\t\tfixed _WaveSpeed;
\n\t\t\tfixed _Amplitude;
\n\t\t\tfixed _RedScale;
\n\t\t\tfixed _GreenScale;
\n\t\t\tfixed _BlueScale;<\/p>\n

\t\t\tv2f vert (appdata v)
\n\t\t\t{
\n\t\t\t\tv2f o;
\n\t\t\t\to.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
\n\t\t\t\to.uv = TRANSFORM_TEX(v.uv, _MainTex);
\n\t\t\t\treturn o;
\n\t\t\t}<\/p>\n

\t\t\tfixed4 frag (v2f i) : SV_Target
\n\t\t\t{
\n\t\t\t\tfixed2 uvs = i.uv;
\n\t\t\t\tfixed4 col = tex2D(_MainTex, uvs);
\n\t\t\t\tfixed d = sin(uvs.y * _Frequency + _Time * _WaveSpeed) * _Amplitude;
\n\t\t\t\tcol.r += d * _RedScale;
\n\t\t\t\tcol.g += d * _GreenScale;
\n\t\t\t\tcol.b += d * _BlueScale;
\n\t\t\t\treturn col;
\n\t\t\t}
\n\t\t\tENDCG
\n\t\t}
\n\t}
\n}
\n[\/sourcecode]<\/p>\n

The shader works by adjusting the colour of the texel pulled from the texture applying a wave effect which is then scaled by red, green and blue scaling factors which can be used to change the colour of the overlaid effect. Here are a few parameters to try:<\/p>\n

Produce a nice upwards red scroll effect:
\nWave Speed – -150
\nFrequency – -20
\nAmplitude – -1
\nRed Scale – 0
\nGreen Scale – 0.4
\nBlue Scale – 0<\/p>\n

Produce a slow flash:
\nWave Speed – 150
\nFrequency – 1
\nAmplitude – 1
\nRed Scale – 0
\nGreen Scale – 0.4
\nBlue Scale – 0<\/p>\n

You may need to adjust the red, green and blue scaling factors to match the colour of your texture.<\/p>\n","protected":false},"excerpt":{"rendered":"

Just added a new colour cycle effect transparent Unity shader to the free shaders collection. This shader can be used to overlay a y-axis colour cycle effect over a texture The code for the shader is shown below: [sourcecode language=”js”] Shader "Unlit\/ColourCycleTexture" { Properties { _MainTex("Color (RGB) Alpha (A)", 2D) = "white" {} _WaveSpeed ("WaveSpeed", […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,3,630,625],"tags":[640],"class_list":["post-3887","post","type-post","status-publish","format-standard","hentry","category-game-and-app-development","category-programming","category-shaders","category-unity3d","tag-colour-cycle-shader"],"_links":{"self":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/3887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/comments?post=3887"}],"version-history":[{"count":2,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/3887\/revisions"}],"predecessor-version":[{"id":3889,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/3887\/revisions\/3889"}],"wp:attachment":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/media?parent=3887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/categories?post=3887"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/tags?post=3887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}