> ## Content Index > Fetch the complete content index at: https://blog.febucci.com/llms.txt > Use this file to discover other available public pages before exploring further. # Unity Dissolve Shader Tutorial: Step-by-Step - URL: https://blog.febucci.com/2018/09/dissolve-shader/ - Published: 2018-09-01T13:00:00.000Z - Updated: 2026-04-06T07:25:52.000Z - Description: Create a dissolve effect in Unity using noise-based alpha clipping. Covers the shader from scratch, including edge glow, with both Shader Graph and HLSL. - Author: Federico Bellucci - Tags: Tutorials, Unity The dissolve effect is one of those things that looks way more complex than it actually is. You sample a noise texture, compare each pixel against a threshold, and clip anything below it. Add an emission line near the threshold and you get that nice glowing edge. This tutorial covers the full shader from scratch in both Shader Graph and HLSL. If you're new to Unity shaders, start with our [HLSL shader beginner guide](https://blog.febucci.com/2019/11/how-to-write-shaders-in-unity/) first. ## How do I create a dissolve shader in Unity? A **dissolve** shader returns a cool effect and it's easy to make and understand; today we'll create our one in Unity's **Shader Graph** and also write it in **HLSL**. Here's an example of what we'll create: 0:00 /0:07 1× ## How it works To create a **dissolve shader** you have to **play with** the `AlphaClipThreshold` value in a "Shader Graph" shader or use the HLSL function called clip. Basically you tell the shader to not render that pixel, based on a texture and a value that you give. What you need to know is: the white parts dissolve sooner. The texture that we'll use is this one: ![](https://storage.ghost.io/c/38/36/383676a1-e894-4116-9a98-bb5a9336da39/content/images/2024/09/febucci-dissolve-texture-example.jpg) You can create your own too! Lines, triangles, whatever you want! Just keep in mind the "**white parts dissolve sooner**". *I created this in Photoshop, using the filter "Clouds".* If you're only interested in the Shader Graph one and don't know about HLSL I suggest to read that part too, since it's useful to understand how Unity's Shader Graph works under the hood. Creating the Shader ## HLSL In HLSL we use the function `clip(x)`. The `clip(x)` function discards any pixel with a value less than zero. So, if you call clip(-1) you're sure that your shader will never render that pixel. You can read about *clip* in the [Microsoft Documentation](https://docs.microsoft.com/en-us/windows/win32/direct3dhlsl/dx-graphics-hlsl-clip?ref=blog.febucci.com). There are 3 steps to set this up: 1. Declare the dissolve properties 2. Add the variable declarations after CGPROGRAM 3. Sample the dissolve texture and call `clip()` in your surface/fragment function ### Properties Our shader needs just 2 properties: the **Dissolve Texture** and the **Amount** (which represents our overall progress, from 0 to 1). As all properties and variables, you can call them however you want. ```hlsl Properties { //Your other properties //[...] //Your Dissolve Shader properties _DissolveTexture("Dissolve Texture", 2D) = "white" {} _Amount("Amount", Range(0,1)) = 0 } ``` Remember to add this after your SubShader's CGPROGRAM (in other words: declare the variables): ```hlsl sampler2D _DissolveTexture; half _Amount ``` Also, remember that their name must match the ones in the Properties section. Function We start our **Surface** or **Fragment** function sampling our **dissolve texture** and getting the **red value**. In this example I'm using a surface shader: ```hlsl void surf (Input IN, inout SurfaceOutputStandard o) { half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).r; //Get how much we have to dissolve based on our dissolve texture clip(dissolve_value - _Amount); //Dissolve! //Your shader body, you can set the Albedo etc. //[...] } ``` *P.s. Our texture is a *grayscale*, meaning *R*, *G* and *B* are equal and you can pick what you prefer. For instance, white is (1,1,1) and black is (0,0,0). With just 1 additional line of code in the surface function you can also add an outline glow, using a border threshold of 0.05.* That's it! You can apply this process on each shader you have and turn it into a dissolve shader ! Stay Updated Email sent! Check your inbox to complete your signup. PS. Oh hey just a heads up that if you're liking this post and would like to support us (for free!), read new ones as soon as they're ready and also unlock extra materials... please consider becoming a free member! It'll make us super happy that you're here for us, less anxious about algorithm changes, AI and whatever is coming next... We're a small team so it really means a lot; thank you so much! 🥹 Here's Unity's default Surface Shader turned into a double-sided dissolve shader: ```hlsl Shader "Custom/DissolveSurface" { Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("Albedo (RGB)", 2D) = "white" {} _Glossiness ("Smoothness", Range(0,1)) = 0.5 _Metallic ("Metallic", Range(0,1)) = 0.0 //Dissolve properties _DissolveTexture("Dissolve Texutre", 2D) = "white" {} _Amount("Amount", Range(0,1)) = 0 } SubShader { Tags { "RenderType"="Opaque" } LOD 200 Cull Off //Fast way to turn your material double-sided CGPROGRAM #pragma surface surf Standard fullforwardshadows #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; }; half _Glossiness; half _Metallic; fixed4 _Color; //Dissolve properties sampler2D _DissolveTexture; half _Amount; void surf (Input IN, inout SurfaceOutputStandard o) { //Dissolve function half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).r; clip(dissolve_value - _Amount); //Basic shader function fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = c.a; } ENDCG } FallBack "Diffuse" } ``` ## Shader Graph If we want to create this effect using Unity's **Shader Graph**, we have to play with the value **AlphaClipThreshold** (which doesn't work like HLSL's `clip(x)`). In this example I created a PBR shader. **AlphaClipThreshold** tells your shader to discard any pixel that has its **Alpha** value lower. For example, if it's **0.3f** and your alpha is **0.2f** your shader won't render that pixel. You can read about **AlphaClipThreshold**'s function in unity's documentation too: [PBR Master Node](https://docs.unity3d.com/Packages/com.unity.shadergraph@7.2/manual/PBR-Master-Node.html?ref=blog.febucci.com) and [Unlit Master Node](https://docs.unity3d.com/Packages/com.unity.shadergraph@7.2/manual/Unlit-Master-Node.html?ref=blog.febucci.com). This is the final shader: ![](https://storage.ghost.io/c/38/36/383676a1-e894-4116-9a98-bb5a9336da39/content/images/2024/09/dissolve-shader-ShaderGraph-material-febucci.jpg) We sample our **dissolve texture** and get the **red value**, then add it to our **Amount** value (which is a property I created that represents the overall progress, 1=full dissolve) and connect it to the **AlphaClipThreshold**. If you want to apply it on any other shader you already have, just **copy** the **nodes connection** on the **AlphaClipThreshold** (don't miss the required properties!). You can also make it **double-sided** and get an even better result! Stay Updated Email sent! Check your inbox to complete your signup. PPS. Super short reminder to consider joining and helping us for free in case you're liking this post! We get to write you directly with more updates and become super happy that you find these articles useful 🫶 ## Frequently asked questions ### What is a dissolve shader in Unity? A dissolve shader clips pixels based on a grayscale texture and a threshold value, making objects fade in or out with a non-uniform edge. In Unity you can do this with HLSL's `clip()` function or with the AlphaClipThreshold in Shader Graph. ### Can I use this shader without Shader Graph? Yes. The HLSL version works in any Unity surface or fragment shader and requires just 2 additional properties and one line of code in your surf function. ### Do I need a special dissolve texture? Any grayscale texture works. White areas dissolve first; black areas dissolve last. You can make one in any image editor using a Clouds filter or similar noise. ### How do I add a glow outline to the dissolve edge? After the `clip()` call, emit a color on pixels whose dissolve value is within a small threshold of the clip boundary (0.05 is a good starting point). --- ## Dissolve Shader with Outlines What if we want to give it a different feeling adding outlines? 0:00 /0:06 1× We can't work on "already dissolved pixels" because once they're discarded… they're gone forever. We can work on "almost dissolved" values instead! In **HLSL** it's really simple, we have to add a few lines of code after our **clip** calculations: ```hlsl void surf (Input IN, inout SurfaceOutputStandard o) { //[...] //After our clip calculations o.Emission = fixed3(1, 1, 1) * step( dissolve_value - _Amount, 0.05f); //emits white color with 0.05 border size //Your shader body, you can set the Albedo etc. //[...] } ``` Using **Shader Graph** the logic is a bit different, here's the final shader: ![](https://storage.ghost.io/c/38/36/383676a1-e894-4116-9a98-bb5a9336da39/content/images/2024/09/dissolve-shader-ShaderGraph-material-outline.jpg) --- Once you have dissolve working, you can combine similar noise-based techniques to create a [fire shader](https://blog.febucci.com/2019/05/fire-shader/) or animate geometry with a [vertex shader](https://blog.febucci.com/2018/10/vertex-shader/). The [world reveal shader](https://blog.febucci.com/2018/09/world-reveal-shader/) is a natural next step since it uses the same clipping concept but in world space. ## Frequently asked questions ### Can I control dissolve speed from a C# script? Yes, just set the \_Amount property on the material at runtime using `material.SetFloat("_Amount", value)` and animate that value over time with a coroutine or tween. ### Does dissolve work with URP and Shader Graph? Yes. The Shader Graph version in this tutorial works with both the built-in pipeline and URP. Use the AlphaClipThreshold output on the PBR Master node. ### What noise texture should I use? Any grayscale noise works. Perlin or simplex noise gives organic patterns, while cellular noise creates more geometric dissolve shapes. Read part two: [World Reveal Shader](https://blog.febucci.com/2018/09/world-reveal-shader/).