{"id":3882,"date":"2016-09-16T19:20:13","date_gmt":"2016-09-16T19:20:13","guid":{"rendered":"http:\/\/www.drmop.com\/?p=3882"},"modified":"2016-09-16T19:20:13","modified_gmt":"2016-09-16T19:20:13","slug":"wavy-text-unity-shader","status":"publish","type":"post","link":"http:\/\/www.drmop.com\/index.php\/2016\/09\/16\/wavy-text-unity-shader\/","title":{"rendered":"Wavy Text Unity Shader"},"content":{"rendered":"

Just added a new wavy transparent shader to the free shaders collection<\/a>. This shade can be used to apply x and y axis waves to textures which looks nice on bitmapped based text, e.g.:<\/p>\n

\"Wavy<\/a>
Wavy Transparent Unity Shader<\/figcaption><\/figure>\n

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

[sourcecode language=”js”]
\nShader "Unlit\/WaveTransTexture"
\n{
\n\tProperties
\n\t{
\n\t\t_MainTex("Color (RGB) Alpha (A)", 2D) = "white" {}
\n\t\t_WaveSpeedX ("X Axis WaveSpeed", Range(0, 100)) = 20
\n\t\t_FrequencyX ("X Axis Frequency", Range(0, 100)) = 10
\n\t\t_AmplitudeX ("X Axis Amplitude", Range(0, 100)) = 0.02
\n\t\t_WaveSpeedY ("Y Axis WaveSpeed", Range(0, 100)) = 20
\n\t\t_FrequencyY ("Y Axis Frequency", Range(0, 100)) = 10
\n\t\t_AmplitudeY ("Y Axis Amplitude", Range(0, 100)) = 0.02
\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 _FrequencyX;
\n\t\t\tfixed _AmplitudeX;
\n\t\t\tfixed _WaveSpeedX;
\n\t\t\tfixed _FrequencyY;
\n\t\t\tfixed _AmplitudeY;
\n\t\t\tfixed _WaveSpeedY;<\/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\tuvs.x += sin(uvs.y * _FrequencyX + _Time * _WaveSpeedX) * _AmplitudeX;
\n\t\t\t\tuvs.x = (uvs.x * 0.9) + 0.05;
\n\t\t\t\tuvs.y += cos(uvs.x * _FrequencyY + _Time * _WaveSpeedY) * _AmplitudeY;
\n\t\t\t\tuvs.y = (uvs.y * 0.9) + 0.05;
\n\t\t\t\tfixed4 col = tex2D(_MainTex, uvs);
\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 code works by applying a sine wave to the y-axis source texture coordinate and pumping that into the x-axis texture coordinate, a similar thing is done with the x-axis source texture coordinate, except that a cosine wave is applied to it. Note that when using this shader you should leave a little space around the bitmap text (around 10% of the image size) to prevent borders from showing.<\/p>\n","protected":false},"excerpt":{"rendered":"

Just added a new wavy transparent shader to the free shaders collection. This shade can be used to apply x and y axis waves to textures which looks nice on bitmapped based text, e.g.: The code for the shader is shown below: [sourcecode language=”js”] Shader "Unlit\/WaveTransTexture" { Properties { _MainTex("Color (RGB) Alpha (A)", 2D) = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[630,625],"tags":[639],"class_list":["post-3882","post","type-post","status-publish","format-standard","hentry","category-shaders","category-unity3d","tag-wavy-text-effect"],"_links":{"self":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/3882","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=3882"}],"version-history":[{"count":3,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/3882\/revisions"}],"predecessor-version":[{"id":3886,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/posts\/3882\/revisions\/3886"}],"wp:attachment":[{"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/media?parent=3882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/categories?post=3882"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.drmop.com\/index.php\/wp-json\/wp\/v2\/tags?post=3882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}