Fresnel

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 Fresnel(vec3 normal, vec3 viewDirection, float power)
{
    return pow(1.0 - clamp(dot(normalize(normal), normalize(viewDirection)), 0.0, 1.0), power);
}

[{"code":{"demo":"vec3(Fresnel(normal, viewDirection, power))"},"label":"Sphere","params":[{"name":"u_shapeRotation","value":[0.05,0.5,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":{"demo":"vec3(Fresnel(normal, viewDirection, power))"},"label":"Cube","params":[{"name":"u_shapeRotation","value":[0.05,0.5,0]},{"name":"u_shape","type":"int","value":1}],"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":{"demo":"vec3(Fresnel(normal, viewDirection, power))"},"label":"Capsule","params":[{"name":"u_shapeRotation","value":[0.05,0.5,0]},{"name":"u_shape","type":"int","value":2}],"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"}]

{"params":[{"label":"Power","uniform":"power","value":5}],"previews":[{"code":{"demo":"vec3(Fresnel(normal, viewDirection, power))"},"label":"Sphere","params":[{"name":"u_shapeRotation","value":[0.05,0.5,0]},{"name":"u_shape","type":"int","value":0}],"template":"shaders/templates/sphere.frag"},{"code":{"demo":"vec3(Fresnel(normal, viewDirection, power))"},"label":"Cube","params":[{"name":"u_shapeRotation","value":[0.05,0.5,0]},{"name":"u_shape","type":"int","value":1}],"template":"shaders/templates/sphere.frag"},{"code":{"demo":"vec3(Fresnel(normal, viewDirection, power))"},"label":"Capsule","params":[{"name":"u_shapeRotation","value":[0.05,0.5,0]},{"name":"u_shape","type":"int","value":2}],"template":"shaders/templates/sphere.frag"}]}

Parameters:

normal is the normal of the surface.
viewDirection is the direction the camera is looking.
power is the exponent of the power function, defining the sharpness of the fresnel.

Use cases:

Fresnel: Fresnel, like the name implies, is commonly used to influence the reflectivity of a surface, making it more reflective at an angle.
Rim Lighting: Fresnel is also commonly used to achieve cheap rim lighting, especially in stylized character shaders.
Effects: Many effects, like holograms, energy shields or similar, use fresnel for alpha or blending colors.
Iridescence: Using fresnel to drive a [ramp] is one way to achieve iridesence, useful for soapy/oily water, pearls, etc.

Lerp

Inverse Lerp

Dissolve, Trim UV Scrolling

Fresnel

Parameters:

Use cases:

Related