Implementing a Dissolve Effect with Shaders and Particles in Three.js

Dissolve Effect by Jatin Chopra

Tutorial: https://tympanus.net/codrops/2025/02/17/implementing-a-dissolve-effect-with-shaders-and-particles-in-three-js/
Demo: https://tympanus.net/Tutorials/EmissiveDissolveEffect/
GitHub: https://github.com/JatinChopra/emissive-dissolve-effect

float noise = cnoise(vPos * uFreq) * uAmp; // calculate cnoise in fragment shader for smooth dissolve edges
    
if(noise < uProgress) discard; // discard any fragment where noise is lower than progress
    
float edgeWidth = uProgress + uEdge;
if(noise > uProgress && noise < edgeWidth){
    gl_FragColor = vec4(vec3(uEdgeColor),noise); // colors the edge
}
    
gl_FragColor = vec4(gl_FragColor.xyz,1.0);