Dissolve, Fade

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

float Dissolve(float value, float progress, float width) {
    float lower = mix(-width, 1.0, progress);
    float upper = mix(0.0, 1.0 + width, progress);
    
    return smoothstep(lower, upper, value);
}

[{"code":{"demo":"vec3(0.74, 0.1, 0.1);","finalInject":"color = mix(BACKGROUND_COLOR, shaded, hit.cover * vec3(Dissolve(noise, u_progress, u_width)));","preDemoInject":"float noise = noise(hit.position * 5.0) * 0.5 + 0.5;"},"label":"Perlin","params":[{"name":"u_shapeRotation","value":[0.01,0.1,0]},{"name":"u_shape","type":"int","value":0}],"template":"#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\n\n\nmat3 rotationEuler(vec3 euler) {\n    float cx = cos(euler.x), sx = sin(euler.x);\n    float cy = cos(euler.y), sy = sin(euler.y);\n    float cz = cos(euler.z), sz = sin(euler.z);\n\n    return mat3(\n        cy * cz, cy * sz, -sy,\n        sx * sy * cz - cx * sz, sx * sy * sz + cx * cz, sx * cy,\n        cx * sy * cz + sx * sz, cx * sy * sz - sx * cz, cx * cy\n    );\n}\n\n\n\nstruct Shape {\n    vec3 position;\n    vec3 normal;\n    vec2 uv;\n    float cover; // 0 = miss, (0,1) = AA fringe, 1 = solid hit\n};\n\nconst float SHAPE_PI = 3.14159265359;\n\nvec2 sphereUv(vec3 n) {\n    return vec2(\n        atan(n.z, n.x) * (0.5 / SHAPE_PI) + 0.5,\n        asin(clamp(n.y, -1.0, 1.0)) * (1.0 / SHAPE_PI) + 0.5\n    );\n}\n\nvec2 cubeUv(vec3 p, vec3 n, float halfExtent) {\n    vec3 lp = p / halfExtent;\n    vec2 uv;\n    if (abs(n.x) \u003e 0.5) {\n        uv = vec2(-sign(n.x) * lp.z, lp.y);\n    } else if (abs(n.y) \u003e 0.5) {\n        uv = vec2(lp.x, -sign(n.y) * lp.z);\n    } else {\n        uv = vec2(sign(n.z) * lp.x, lp.y);\n    }\n    return uv * 0.5 + 0.5;\n}\n\nvec2 capsuleUv(vec3 p, float halfHeight, float radius) {\n    float totalHalf = halfHeight + radius;\n    return vec2(\n        atan(p.z, p.x) * (0.5 / SHAPE_PI) + 0.5,\n        p.y / (2.0 * totalHalf) + 0.5\n    );\n}\n\nShape sphere(vec3 ro, vec3 rd, float radius) {\n    float b = dot(ro, rd);\n    float c = dot(ro, ro) - radius * radius;\n    float disc = b * b - c;\n\n    float aa = fwidth(disc);\n    float cover = smoothstep(-aa, aa, disc);\n\n    Shape hit;\n    hit.cover = cover;\n    if (cover \u003c= 0.0) {\n        hit.position = vec3(0.0);\n        hit.normal = vec3(0.0);\n        hit.uv = vec2(0.0);\n        return hit;\n    }\n\n    float t = -b - sqrt(max(disc, 0.0));\n    hit.position = ro + rd * t;\n    hit.normal = normalize(hit.position);\n    hit.uv = sphereUv(hit.normal);\n\n    return hit;\n}\n\n// Axis-aligned cube centered at the origin. halfExtent is distance from center to face.\nShape cube(vec3 ro, vec3 rd, float halfExtent) {\n    vec3 halfSize = vec3(halfExtent);\n\n    // Avoid 1/0 singularities that sweep a line across the screen as the cube rotates.\n    vec3 sgn = mix(vec3(1.0), sign(rd), step(vec3(1e-8), abs(rd)));\n    vec3 invRd = sgn / max(abs(rd), vec3(1e-8));\n\n    vec3 t0 = (-halfSize - ro) * invRd;\n    vec3 t1 = (halfSize - ro) * invRd;\n    vec3 tSmall = min(t0, t1);\n    vec3 tLarge = max(t0, t1);\n\n    float tN = max(max(tSmall.x, tSmall.y), tSmall.z);\n    float tF = min(min(tLarge.x, tLarge.y), tLarge.z);\n\n    Shape hit;\n    if (tN \u003e tF || tF \u003c 0.0) {\n        hit.position = vec3(0.0);\n        hit.normal = vec3(0.0);\n        hit.uv = vec2(0.0);\n        hit.cover = 0.0;\n        return hit;\n    }\n\n    float t = tN \u003c 0.0 ? tF : tN;\n    hit.position = ro + rd * t;\n    hit.cover = 1.0;\n\n    // Face normal from dominant axis of the hit point (stable at edges vs slab step()).\n    vec3 p = hit.position / halfExtent;\n    vec3 ap = abs(p);\n    hit.normal = vec3(0.0);\n    if (ap.x \u003e= ap.y \u0026\u0026 ap.x \u003e= ap.z) {\n        hit.normal.x = sign(p.x);\n    } else if (ap.y \u003e= ap.z) {\n        hit.normal.y = sign(p.y);\n    } else {\n        hit.normal.z = sign(p.z);\n    }\n    hit.uv = cubeUv(hit.position, hit.normal, halfExtent);\n\n    return hit;\n}\n\n// Capsule along Y, sphere centers at (0, ±halfHeight, 0). Total length = 2*halfHeight + 2*radius.\nShape capsule(vec3 ro, vec3 rd, float halfHeight, float radius) {\n    vec3 pa = vec3(0.0, -halfHeight, 0.0);\n    vec3 pb = vec3(0.0, halfHeight, 0.0);\n    vec3 ba = pb - pa;\n    vec3 oa = ro - pa;\n\n    float baba = dot(ba, ba);\n    float bard = dot(ba, rd);\n    float baoa = dot(ba, oa);\n    float rdoa = dot(rd, oa);\n    float oaoa = dot(oa, oa);\n\n    // Soft silhouette: radius² − distance²(ray, segment). Bounded field → safe fwidth AA.\n    float aLine = max(baba - bard * bard, 1e-8);\n    float tNear = max((bard * baoa - baba * rdoa) / aLine, 0.0);\n    float sNear = clamp((baoa + tNear * bard) / baba, 0.0, 1.0);\n    tNear = max(dot(pa + ba * sNear - ro, rd), 0.0);\n    vec3 closestSeg = pa + ba * sNear;\n    vec3 closestRay = ro + rd * tNear;\n    float score = radius * radius - dot(closestRay - closestSeg, closestRay - closestSeg);\n    float aa = fwidth(score);\n    float cover = smoothstep(-aa, aa, score);\n\n    Shape hit;\n    hit.position = vec3(0.0);\n    hit.normal = vec3(0.0);\n    hit.uv = vec2(0.0);\n    hit.cover = cover;\n\n    if (cover \u003c= 0.0) {\n        return hit;\n    }\n\n    float a = baba - bard * bard;\n    float b = baba * rdoa - baoa * bard;\n    float c = baba * oaoa - baoa * baoa - radius * radius * baba;\n    float h = b * b - a * c;\n\n    if (h \u003e= 0.0) {\n        float t = (-b - sqrt(h)) / max(a, 1e-8);\n        float y = baoa + t * bard;\n\n        // Cylinder body between the end-cap centers.\n        if (y \u003e 0.0 \u0026\u0026 y \u003c baba \u0026\u0026 t \u003e= 0.0) {\n            hit.position = ro + rd * t;\n            hit.normal = (oa + rd * t - ba * y / baba) / radius;\n            hit.uv = capsuleUv(hit.position, halfHeight, radius);\n            return hit;\n        }\n\n        // End caps (spheres at pa / pb).\n        vec3 oc = (y \u003c= 0.0) ? oa : ro - pb;\n        b = dot(rd, oc);\n        c = dot(oc, oc) - radius * radius;\n        h = b * b - c;\n        if (h \u003e 0.0) {\n            t = -b - sqrt(h);\n            if (t \u003e= 0.0) {\n                hit.position = ro + rd * t;\n                hit.normal = (oc + rd * t) / radius;\n                hit.uv = capsuleUv(hit.position, halfHeight, radius);\n                return hit;\n            }\n        }\n    }\n\n    // AA fringe outside a hard hit: shade from the closest approach.\n    hit.position = closestRay;\n    hit.normal = normalize(closestRay - closestSeg);\n    hit.uv = capsuleUv(hit.position, halfHeight, radius);\n    return hit;\n}\n\n\n\n// Unit-length gradient from lattice point (8 directions).\nvec2 grad2(vec2 p) {\n    float h = fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n    float a = floor(h * 8.0) * 0.7853981633974483; // k * π/4\n    return vec2(cos(a), sin(a));\n}\n\n// Unit-length gradient from lattice point.\nvec3 grad3(vec3 p) {\n    p = vec3(dot(p, vec3(127.1, 311.7, 74.7)),\n             dot(p, vec3(269.5, 183.3, 246.1)),\n             dot(p, vec3(113.5, 271.9, 124.6)));\n    vec3 g = -1.0 + 2.0 * fract(sin(p) * 43758.5453123);\n    return g * inversesqrt(max(dot(g, g), 1e-6));\n}\n\nfloat noise2(vec2 p) {\n    vec2 i = floor(p);\n    vec2 f = fract(p);\n\n    // Quintic fade (Perlin's improved interpolation)\n    vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n\n    float n00 = dot(grad2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0));\n    float n10 = dot(grad2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));\n    float n01 = dot(grad2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));\n    float n11 = dot(grad2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));\n\n    float n = mix(mix(n00, n10, u.x),\n                  mix(n01, n11, u.x), u.y);\n\n    // Unit gradients ⇒ |n| ≤ √2/2. Scale to [-1, 1]; clamp covers FP error only.\n    return clamp(n * 1.41421356237, -1.0, 1.0);\n}\n\nfloat noise(vec3 p) {\n    vec3 i = floor(p);\n    vec3 f = fract(p);\n\n    // Quintic fade (Perlin's improved interpolation)\n    vec3 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n\n    float n000 = dot(grad3(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0));\n    float n100 = dot(grad3(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0));\n    float n010 = dot(grad3(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0));\n    float n110 = dot(grad3(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0));\n    float n001 = dot(grad3(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0));\n    float n101 = dot(grad3(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0));\n    float n011 = dot(grad3(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0));\n    float n111 = dot(grad3(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0));\n\n    float n = mix(\n        mix(mix(n000, n100, u.x), mix(n010, n110, u.x), u.y),\n        mix(mix(n001, n101, u.x), mix(n011, n111, u.x), u.y),\n        u.z);\n\n    // Unit gradients ⇒ |n| ≤ √3/2. Scale to [-1, 1]; clamp covers FP error only.\n    return clamp(n * 1.15470053838, -1.0, 1.0);\n}\n\n\n\nout vec4 outColor;\n\nuniform vec3 u_shapeRotation;\nuniform vec3 u_lightDirection;\nuniform vec3 u_lightRotation;\nuniform int u_shape;\n\n@uniforms\n\n@snippet\n\nconst float SPHERE_RADIUS = 1.0;\nconst float CUBE_HALF_SIZE = 0.65;\nconst float CAPSULE_HALF_HEIGHT = 0.5;\nconst float CAPSULE_RADIUS = 0.5;\n\nconst vec3 BACKGROUND_COLOR = vec3(0.067);\nconst float CAMERA_Z = 2.75;\nconst float FOCAL_LENGTH = 1.6;\n\nvoid main() {\n    vec2 st = (2.0 * gl_FragCoord.xy - u_resolution.xy) / u_resolution.y;\n\n    mat3 rotationMatrix = rotationEuler(u_shapeRotation * u_time);\n    mat3 invertedMatrix = transpose(rotationMatrix);\n\n    vec3 worldOrigin = vec3(0.0, 0.0, CAMERA_Z);\n    vec3 worldDirection = normalize(vec3(st, -FOCAL_LENGTH));\n\n    vec3 rayOrigin = invertedMatrix * worldOrigin;\n    vec3 rayDirection = invertedMatrix * worldDirection;\n\n    Shape hit;\n    if(u_shape == 0)\n        hit = sphere(rayOrigin, rayDirection, SPHERE_RADIUS);\n    if(u_shape == 1)\n        hit = cube(rayOrigin, rayDirection, CUBE_HALF_SIZE);\n    if(u_shape == 2)\n        hit = capsule(rayOrigin, rayDirection, CAPSULE_HALF_HEIGHT, CAPSULE_RADIUS);\n\n    vec3 position = rotationMatrix * hit.position;\n    vec3 normal = rotationMatrix * hit.normal;\n    vec3 viewDirection = normalize(worldOrigin - position);\n\n    vec3 lightDirection = rotationEuler(u_lightRotation * u_time) * u_lightDirection;\n\n    float ndotl = dot(normal, lightDirection) * 0.5 + 0.5;\n\n    @preDemoInject\n    vec3 shaded = @demo;\n\n    vec3 color = mix(BACKGROUND_COLOR, shaded, hit.cover);\n    \n    @finalInject\n\n    outColor = vec4(color, 1.0);\n}\n"},{"code":{"finalInject":"color.rgb = mix(vec3(0.11), vec3(0.74, 0.1, 0.1), vec3(Dissolve(color.r, u_progress, u_width)));"},"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":{"demo":"vec3(0.74, 0.1, 0.1);","finalInject":"color = mix(BACKGROUND_COLOR, shaded, hit.cover * vec3(Dissolve(noise, u_progress, u_width)));","preDemoInject":"float noise = noise(hit.position * 5.0) * 0.5 + 0.5;"},"label":"Perlin","params":[{"name":"u_shapeRotation","value":[0.01,0.1,0]},{"name":"u_shape","type":"int","value":0}],"template":"shaders/templates/sphere.frag"},{"code":{"finalInject":"color.rgb = mix(vec3(0.11), vec3(0.74, 0.1, 0.1), vec3(Dissolve(color.r, u_progress, u_width)));"},"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, Trim

Dissolve, Fade

Parameters:

Use cases:

Related