The LabLIGHT & RENDER LAB SURFACES

WHY SURFACES LOOK DIFFERENT

Light hits a surface. It bounces or bends.

Shiny, see-through and matte all start the same way: a ray hits a boundary and splits. Change the ray and the material, and watch.

START WITH A QUESTIONPick one · predict · then look
BOUNCES BACK4.0 %Reflected share
GOES THROUGH96.0 %Refracted share
BENT TO28.1°From 45°
CRITICAL ANGLE41.8°
HEAD-ON SHINE4.0 %Reflected at 0°
RENDER ESTIMATE—

01 / THE BOUNDARY, EDGE-ON

Follow one ray.

02 / WHAT A RENDERER MAKES OF IT

See the material.

Glass · n 1.50

Drag to orbit · scroll or pinch to zoom

Every pixel of the pool uses the model’s reflected-share formula and bends its ray with Snell’s law, so the straw and the floor lines really are seen through bent light. The ball is three.js’s own material with the same shine and roughness.

FRESNEL CURVE · reflected share at every angle

Ray angles are exact. Ray thickness shows each ray’s share of the light. The faint fan shows how roughness scatters the reflection.

03 / WHY RENDERS START GRAINY

Average random samples.

64 PIXELS, SAME SCENE—Each square is a separate run with its own seed. When they agree, the grain is gone.
64

How many random light paths are averaged. More samples, less grain, longer render.

7

The same seed always gives the same random numbers, so a run can be repeated exactly.

A stand-in for one pixel: each sample is a random brightness between 0.2 and 1 (true average 0.6), like one random light path. It does not depend on the angle or material above.

WHAT’S HAPPENING

Read the ray.

TRY THIS

Three things to find.

    How the model works

    Reflection. The reflected ray leaves at the same angle it arrived, mirrored across the normal.

    Refraction. Snell’s law: n₁ · sin θ₁ = n₂ · sin θ₂. Going into a material with a higher n, the ray bends towards the normal. Going out, it bends away.

    Total internal reflection. Going out of a material, Snell’s law sometimes asks for sin θ₂ above 1. No angle has that, so no ray gets out and all the light reflects. This starts at the critical angle θc = asin(n_low / n_high): 41.8° for glass, 48.8° for water, 24.6° for n = 2.4.

    How much reflects. The model uses Schlick’s approximation: R = F0 + (1 − F0)(1 − cos θ)⁵, with head-on reflectance F0 = ((n₁ − n₂)/(n₁ + n₂))², 4% for glass. Whatever does not reflect goes through: T = 1 − R. The dashed line on the Fresnel curve is the exact Fresnel result for unpolarised light, for comparison.

    Roughness. The model scatters 32 illustrative reflected directions over about ±0.9 × roughness radians (±52° at roughness 1). It is drawn as the faint fan.

    The 3D render. Each pixel of the pool works out its own viewing angle, applies the same R formula and bends its ray with Snell’s law (refract() on the graphics card). The bent ray is traced to the pool floor, the walls and the straw. Reflections come from a mirror image of the scene. Roughness randomly tilts the surface at each pixel, matched to the model’s fan, and averages six tilts.

    Render noise. A renderer estimates a pixel by averaging random samples. The model draws uniform samples between 0.2 and 1, 80 per second of animation, up to your budget. Standard error is s / √N: four times the samples halves the error.

    Honest limits
    • Schlick’s formula is an approximation. Inside a denser material it underestimates reflection just below the critical angle, then jumps to 100%. The exact curve rises smoothly. Compare the two lines on the Fresnel curve.
    • One flat boundary, one colour of light. There is no dispersion (the rainbow “fire” in diamonds), absorption or polarisation. Diamond’s real index, 2.42, is capped at the slider’s 2.4.
    • The roughness fan is an illustration of scattered directions, not a full microfacet model. The 3D blur follows the same spread but is an approximation, and its six samples per pixel look slightly grainy at high roughness.
    • The 3D view always looks in from the air. The pool’s blue-green tint is decorative and is not part of the model. The ball uses three.js’s own physical material, which caps head-on shine at 16%.
    • The sampling chart is a separate experiment with made-up uniform samples. It shows how averaging behaves, not the noise of this particular scene.
    • The 3D render needs WebGL. Without it, the cross-section and curve still show every number.
    Sources & further reading

      The model notes are in RESEARCH.md. Related labs: Inside a Camera and Wave Studio.