If you've ever played Genshin Impact, you might have noticed how characters "Unequip" their weapons in this cool burst of particles. Strike a cool pose, throw your sword into the air and have it turn into dust, beautiful.
How I started
Like I'm sure many of my tech bro peers would do, I asked Claude and DeepSeek: "how does genshin do it's disappearing weapon vfx?" I got back a pretty detailed and convincing answer, involving Dissolve Shaders, Particle Systems, Trail Renderers, Animation Synchronization, etc.
It even gave me some code to go along with its answer, but to understand the concept better myself, I decided to create the shader from scratch using ShaderGraph.
At its core, the shader simply subtracts the noise value from the alpha value of the pixel output. Animated over time and combined with alpha clipping, it achieves the effect that the object's mesh is "dissolving".
Naive Implementation
Challenges
Initially, I wanted to apply the dissolve shader as a sort of post-processing or multi-pass effect, which would allow it to be modularly applied to all materials regardless of whether they were lit or unlit.
However, I soon realized that this was difficult to achieve within Unity's URP, not without significant effort using Scriptable Render Passes, etc. For now, I'll just make do with an Unlit surface shader.
Using VFX Graph
If you look closely, this effect doesn't do the exact same thing as the Genshin effect, but it does have a similar feel.
WIP:
- pcache
Dissolve Effect Controller
Here's a simple implementation of a script to control the dissolution effect (ShaderGraph).
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.VFX;
[RequireComponent(typeof(Renderer))]
public class DissolveEffectController : MonoBehaviour
{
private Renderer renderer_;
[SerializeField] Material dissolveMaterial;
[SerializeField] float dissolveDuration = 1.0f;
[SerializeField] float dissolveThreshold = 1.0f;
[SerializeField] float particleSpawnThreshold = 0.5f;
[SerializeField] AnimationCurve dissolveCurve;
[SerializeField] AnimationCurve intensityCurve;
[SerializeField] VisualEffect dissolveParticlesVFX;
private Material[] originalMaterials;
private Material dissolveMatInstance;
// Start is called before the first frame update
void Start()
{
renderer_ = GetComponent<Renderer>();
}
public void Dissolve()
{
dissolveMaterial.SetFloat("_DissolveAmount", 0);
originalMaterials = renderer_.materials;
var materials = new Material[originalMaterials.Length];
dissolveMatInstance = new Material(dissolveMaterial);
dissolveMatInstance.SetTexture("_MainTex", originalMaterials[0].GetTexture("_MainTex"));
for (int i = 0; i < originalMaterials.Length; i++)
{
materials[i]= dissolveMatInstance;
}
renderer_.materials= materials;
StartCoroutine(DissolveCoroutine(dissolveThreshold));
}
IEnumerator DissolveCoroutine(float maxDissolveAmount)
{
float timer= 0f;
bool particlesSpawned= false;
while (timer < dissolveDuration)
{
timer = Time.deltaTime;
float t= timer / dissolveDuration;
if (!particlesSpawned && t > particleSpawnThreshold)
{
if (dissolveParticlesVFX != null)
{
dissolveParticlesVFX.SendEvent("SpawnDissolveParticles");
particlesSpawned = true;
}
}
if (t > maxDissolveAmount)
break;
dissolveMatInstance.SetFloat("_DissolveAmount", dissolveCurve.Evaluate(t));
dissolveMatInstance.SetFloat("_Intensity", intensityCurve.Evaluate(t));
yield return null;
}
}
}
Simple HLSL Implementation
Shader "Custom/DissolutionShader"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_NoiseTex ("Noise", 2D) = "white" {}
_ClipThreshold ("Clip Threshold", Range(0, 1)) = 0
_DissolveAmount ("Dissolve Amount", Range(0, 1)) = 0
_Scroll ("Scroll", Vector) = (0, 0, 0, 0)
_ErodeGradient ("Erosion Gradient", Range(0, 10)) = 0
_Direction ("Direction", Vector) = (0, 1, 0, 0)
}
SubShader
{
Tags { "RenderType"="Transparent" "Queue"="Transparent" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
sampler2D _NoiseTex;
float4 _MainTex_ST;
float _ClipThreshold;
float _DissolveAmount;
float2 _Scroll;
float _ErodeGradient;
float4 _Direction;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
float2 uv = i.uv + _Scroll;
// apply fog
UNITY_APPLY_FOG(i.fogCoord, col);
float dissolveFactor = 1.0 / (_DissolveAmount + 0.001);
float dissolveAlpha = 1 - (dissolveFactor * (tex2D(_NoiseTex, uv) ));
col.a = 1 - lerp(0.0, dissolveAlpha, dot(uv, _Direction) / _ErodeGradient);
if (col.a <= _ClipThreshold)
discard;
return col;
}
ENDCG
}
}
}The equation "dissolveFactor = 1.0 / (1 - _DissolveAmount + 0.001)" allows the material to be completely "dissolved" at a value of 1.0, and fully opaque at a value of 0.0. Adding a UV offset and a vector to control the "direction" of the erosion pattern adds some depth to the shader.
A simple linear interpolation between 0 and the dissolve alpha creates a controllable gradient, adding to the "dissolving" effect.
TODO:
- Modify controller and VFX graph
Future Improvements
- Support Lit Shader
- Somehow make it a post-processing effect instead