Disolve UI Shader

Unity Engine
1

Hello guys,

I’m not very familiar with Shaders and I found one Dissolve shader that works perfectly in 3d models and textures, but it doesn’t work when I attach the material with this shader in a Image component.

Can anyone help me translate this shader into an UI shader?

Shader "Custom/Dissolving" {
    Properties {
      _MainTex ("Sprite Texture", 2D) = "white" {}
      _SliceGuide ("Slice Guide (RGB)", 2D) = "white" {}
      _SliceAmount ("Slice Amount", Range(0.0, 1.0)) = 0.5


 _BurnSize ("Burn Size", Range(0.0, 1.0)) = 0.15
 _BurnRamp ("Burn Ramp (RGB)", 2D) = "white" {}
    }
    SubShader {
      Tags { "RenderType" = "Opaque" }
      Cull Off
      CGPROGRAM
      //if you're not planning on using shadows, remove "addshadow" for better performance
      #pragma surface surf Lambert //addshadow
      struct Input {
          float2 uv_MainTex;
          float2 uv_SliceGuide;
          float _SliceAmount;
      };


      sampler2D _MainTex;
      sampler2D _SliceGuide;
      float _SliceAmount;
 sampler2D _BurnRamp;
 float _BurnSize;


      void surf (Input IN, inout SurfaceOutput o) {
          clip(tex2D (_SliceGuide, IN.uv_SliceGuide).rgb - _SliceAmount);
          o.Albedo = tex2D (_MainTex, IN.uv_MainTex).rgb;

 half test = tex2D (_SliceGuide, IN.uv_MainTex).rgb - _SliceAmount;
 if(test < _BurnSize && _SliceAmount > 0 && _SliceAmount < 1){
    o.Emission = tex2D(_BurnRamp, float2(test *(1/_BurnSize), 0));
 o.Albedo *= o.Emission;
 }
      }
      ENDCG
    } 
    Fallback "Diffuse"
  }

Thank you very much!

2

Download the “builtin shaders” pack for your version of Unity, and take a look at Sprite shader it contains, it will show you the special Unity defines it uses. The primary one being a MaterialPropertyBlock that gets its texture info from the image/sprite component.

3

It is very difficult to understand shaders for me. But thanks for the answer, I will try to have a look.

4

Well, after some research online, I came across this shader that works perfectly:

2 Likes
5

That’s really cool!But I cant get into the website you linked above:(Want to know more about how you implement such an effect,please!

6

@PhilianZ Here is the code:

Shader "Custom/UI/Dissolve"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _SliceGuide ("Slice Guide (RGB)", 2D) = "white" {}
          _SliceAmount ("Slice Amount", Range(0.0, 1.0)) = 0.5
        _BurnSize ("Burn Size", Range(0.0, 1.0)) = 0.15
        _BurnRamp ("Burn Ramp (RGB)", 2D) = "white" {}
    
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }
    
        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"
        
            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float4 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
            };
        
            fixed4 _Color;
            fixed4 _TextureSampleAdd;

            bool _UseClipRect;
            float4 _ClipRect;

            bool _UseAlphaClip;

            sampler2D _SliceGuide;
           float _SliceAmount;
            sampler2D _BurnRamp;
            float _BurnSize;
            float4 uv_SliceGuide;
            float4 uv_MainTex;

            sampler2D _MainTex;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.worldPosition = IN.vertex;
                OUT.vertex = mul(UNITY_MATRIX_MVP, OUT.worldPosition);

                OUT.texcoord = IN.texcoord;
            
                #ifdef UNITY_HALF_TEXEL_OFFSET
                OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
                #endif

                if(any(tex2Dlod (_SliceGuide, uv_SliceGuide).rgb - _SliceAmount) < 0){
                    OUT.color.a = 0;
                }
               OUT.color = tex2Dlod (_MainTex, IN.texcoord);
        
                half test = tex2Dlod (_SliceGuide, IN.texcoord).rgb - _SliceAmount;
                if(test < _BurnSize && _SliceAmount > 0 && _SliceAmount < 1){
                    OUT.color *= tex2Dlod(_BurnRamp, float4(test *(1/_BurnSize), 0,0,0));
                }
            
                //OUT.color = IN.color * _Color;
                return OUT;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                if (_UseClipRect)
                    color *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
            
                if (_UseAlphaClip)
                    clip (color.a - 0.001);

                return color;
            }
        ENDCG
        }
    }
}
2 Likes