Dissolve, Trim

Fresnel is the effect describing how a surface’s reflectivity changes with the viewing angle. A surface reflects more light at grazing angles than it does when viewed head-on. In a graphics context, this is approximated from the angle between the surface normal and the view direction

struct DissolveMask {
    float Visibility;
    float Band;
};

vec4 Dissolve(float noise, float progress, float width, vec3 color) {
    float lower = mix(-width, 1.0, progress);
    float upper = mix(0.0, 1.0 + width, progress);

    float mask = smoothstep(lower, upper, noise);
    float band = mask * (1.0 - mask) * 4.0;

    return vec4(mask);
    //return vec4(band * color, mask);
}

[{"code":{"finalInject":"color = Dissolve(color.r, u_progress, u_width, vec3(0.74, 0.1, 0.1));"},"label":"Voronoi","params":[{"name":"u_texture","type":"texture","url":"/textures/noise/voronoi.png","value":"textures/noise/voronoi.png"}],"template":"#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform sampler2D u_texture;\n\nout vec4 outColor;\n\n@uniforms\n\n@snippet\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n    uv.x *= u_resolution.x / u_resolution.y;\n\n    @uv\n\n    vec4 color = texture(u_texture, uv);\n\n    @finalInject\n\n    outColor = color;\n}\n"}]

{"params":[{"label":"Progress","max":1,"min":0,"uniform":"u_progress","value":0.5},{"label":"Width","max":1,"min":0,"uniform":"u_width","value":0.1}],"previews":[{"code":{"finalInject":"color = Dissolve(color.r, u_progress, u_width, vec3(0.74, 0.1, 0.1));"},"label":"Voronoi","params":[{"name":"u_texture","type":"texture","value":"textures/noise/voronoi.png"}],"template":"shaders/templates/texture.frag"}]}

Parameters:

value is the input driving the dissolve, usually a noise texture.
progress is the progress of the dissolve where 0 is fully visible and 1 is fully transparent.
width is the width or softness of the fade.

Use cases:

Camera: Dissolve is often used to remove (parts of) objects blocking the camera, especially if the object is blocking a player character.
Fading: Instead of simply despawning or fading out redundant objects (like debris after an explosion), it is common to dissolve it.
Effects: Dissolve is used in my effects, especially magical or summoning effects.
UI: Many UI elements, especially hero assets, have a dissolve effect instead of a simple fade.

Lerp

Inverse Lerp

Dissolve, Fade Fresnel

Dissolve, Trim

Parameters:

Use cases:

Related