[Unity3D] [Shader] implements NDC-based Sprite gradient Shader

Source: Internet
Author: User

0. What is the effect I want to achieve?
:













The text above can be scrolled up or down, and will gradually hide when it is scrolled to a certain position. The Alpha value of an object is based on its position on the screen.

The Shader used for these texts is implemented in this article.


1. Prepare
Unity3D official built-in Shader: Sprites-Default.shader
Http://download.unity3d.com/download_unity/builtin_shaders-4.3.4.zip

Function Camera. WorldToViewportPoint
Http://docs.unity3d.com/Documentation/ScriptReference/Camera.WorldToViewportPoint.html
This function is used to convert the world coordinates to the viewport coordinates.

The conversion formula from the Unity3D viewport coordinates to the NDC coordinates

p' = p * 2 - 1

P' is the NDC coordinate, and p is the Unity3D viewport coordinate.

2. Add variables corresponding to Properties
Add

_FadeEnd ("Fade End", Float) = 0.8_FadeOrigin ("Fade Origin", Float) = 0.0_FadeStart ("Fade Start", Float) = 0.3

The effect to be achieved is:
In the vertical coordinates of the screen are _ FadeStart to _ FadeEnd and-_ FadeStart to-_ FadeEnd, the two pixels are mixed with the source color with the Alpha value 1 and the end is 0, linear interpolation is used in the middle, and _ FadeStart and _ FadeEnd are relative to _ FadeOrigin.

Modify CGPROGRAM code segment

Add an output for the vertex shader
Float2 screenUV;
The Code is as follows:

Struct v2f {float4 vertex: SV_POSITION; fixed4 color: COLOR; half2 texcoord: TEXCOORD0; float2 screenUV; // added output };

3. Calculate NDC coordinates in vertex coloring Machine
Transition from clip coordinates to NDC
OUT. screenUV = OUT. vertex. xy/OUT. vertex. w;
The Code is as follows:

v2f vert(appdata_t IN){v2f OUT;OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);OUT.texcoord = IN.texcoord;OUT.color = IN.color * _Color;OUT.screenUV = OUT.vertex.xy / OUT.vertex.w; // #ifdef PIXELSNAP_ONOUT.vertex = UnityPixelSnap (OUT.vertex);#endifreturn OUT;}

4. Calculate the Alpha value in the part coloring tool.
float4 output_color;float r = _FadeEnd - _FadeStart;a = clamp((abs(IN.screenUV.y - _FadeOrigin) - _FadeStart), 0, r) / r;
This is all based on the actual needs of some changes, so that it meets the effect described above

5. Application Alpha Value
output_color = (tex2D(_MainTex, IN.texcoord) * IN.color);output_color.a = output_color.a - a;
IN. color is the optional color IN Sprite Renderer. it is mixed with the color IN _ MainTex and then subtracted from the calculated Alpha value.

6. Use a script to set the Shader parameters during running.

float s = camera.WorldToViewportPoint(FadeStart.transform.position).y * 2 - 1;float e = camera.WorldToViewportPoint(FadeEnd.transform.position).y * 2 - 1;float o = camera.WorldToViewportPoint(FadeOrigin.transform.position).y * 2 - 1;GetComponent<Renderer>().material.SetFloat("_FadeStart", s - o);GetComponent<Renderer>().material.SetFloat("_FadeEnd", e - o);GetComponent<Renderer>().material.SetFloat("_FadeOrigin", o);

Camera is the FadeStart and FadeEnd of the camera Whose tag is MainCamera. FadeOrigin is the EmptyObject in the scenario, which is used to mark the start of encryption, the conversion formula from the end point to the origin point from the viewport coordinate to the NDC coordinate is p '= p * 2-1

7. All code

Shader "Sprites/FadeOut"{Properties{[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}_Color ("Tint", Color) = (1,1,1,1)_FadeEnd ("Fade End", Float) = 0.8_FadeOrigin ("Fade Origin", Float) = 0.0_FadeStart ("Fade Start", Float) = 0.3[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0}SubShader{Tags{ "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane""CanUseSpriteAtlas"="True"}Cull OffLighting OffZWrite OffFog { Mode Off }Blend SrcAlpha OneMinusSrcAlphaPass{CGPROGRAM// Upgrade NOTE: excluded shader from DX11 and Xbox360; has structs without semantics (struct v2f members screenUV)#pragma exclude_renderers d3d11 xbox360#pragma vertex vert#pragma fragment frag#pragma multi_compile DUMMY PIXELSNAP_ON#include "UnityCG.cginc"struct appdata_t{float4 vertex   : POSITION;float4 color    : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex   : SV_POSITION;fixed4 color    : COLOR;half2 texcoord  : TEXCOORD0;float2 screenUV;};fixed4 _Color;float _FadeStart;float _FadeEnd;float _FadeOrigin;v2f vert(appdata_t IN){v2f OUT;OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);OUT.texcoord = IN.texcoord;OUT.color = IN.color * _Color;OUT.screenUV = OUT.vertex.xy / OUT.vertex.w;#ifdef PIXELSNAP_ONOUT.vertex = UnityPixelSnap (OUT.vertex);#endifreturn OUT;}sampler2D _MainTex;fixed4 frag(v2f IN) : COLOR{    float a;    float4 output_color;    float r = _FadeEnd - _FadeStart;    a = clamp((abs(IN.screenUV.y - _FadeOrigin) - _FadeStart), 0, r) / r;output_color = (tex2D(_MainTex, IN.texcoord) * IN.color);output_color.a = output_color.a - a;return output_color;}ENDCG}}}


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.