Caustics and Wave Focusing

1. Geometric vs Wave Optics

Optics deals with the propagation of electromagnetic radiation. Depending on the scale of the phenomenon, two frameworks are used:

For water caustics, geometric optics describes the bright spots well — wave effects provide fine corrections at the edges. We start with the geometric approach.

2. Snell's Law and the Refractive Index

When a ray crosses the boundary between media with refractive indices n₁ and n₂, the refraction angle θ₂ is given by Snell's Law:

Vector Form of Snell's Law

For 3D ray tracing, a vector form is convenient. Let d̂ be the unit incident ray vector, n̂ the outward surface normal, η = n₁/n₂:

If the term under the square root is negative — total internal reflection: the ray cannot exit the medium. Critical angle: sin θ_c = n₂/n₁.

3. Thin Lens and the Lens Formula

An ideal thin lens focuses a parallel beam to a point. Its optical power P = 1/f (dioptres), where f is the focal length. The object and image distances are related by the thin lens formula:

Sign Conventions

Aberrations Prevent a Perfect Focus

A real lens suffers from aberrations: spherical (marginal rays focus closer to the lens), chromatic (different focal length for each λ), distortion. Spherical aberration is responsible for one of the most common caustic shapes — a concentrated brightness "tail" along the axis.

4. Caustics: the Focusing Surface

A caustic (from Greek καυστικός — burning) is the envelope of a family of refracted or reflected rays. Rays do not converge to a single point due to surface imperfections — they form a caustic surface in space, and its intersection with a screen produces a bright pattern.

Mathematics: Envelope of a Family of Lines

A family of lines Φ(x, y, t) = 0, where t is a parameter (e.g., the coordinate of the incident point on the surface). The envelope is given by the system:

Caustic Brightness

Intensity I at a point on the screen is proportional to photon flux density. If d_ω is the solid angle of the beam and dA the spot area on the screen, then I ~ dΩ/dA. At the caustic dA → 0 (rays "compress"), so I → ∞ in geometric optics. Wave optics gives a finite peak — an Airy pattern with characteristic scale Δx ~ (λ·R)^(2/3).

Classification by Catastrophe Theory

5. Fresnel Coefficients: Reflection and Transmission

At an interface, part of the energy is reflected and part transmitted. For a monochromatic EM wave, Maxwell's equations give the exact result — the Fresnel formulae for s- and p-polarisations:

Schlick Approximation

Rendering often uses the cheap Schlick (1994) approximation for spectral reflectance at normal incidence F₀ = ((n₁−n₂)/(n₁+n₂))²:

Water at normal incidence reflects only 2% of light. As θ → 90° (grazing incidence) F → 1 — mirror-like water at the horizon.

6. Water Caustics: a Wavy Surface

The pool surface is described by height h(x, y, t). A sunray points vertically downward; the surface normal is tilted by an angle depending on the gradient of h. The refracted ray hits a different point on the bottom — forming the caustic pattern.

Hit-Point Displacement

For small slopes (∂h/∂x ≪ 1) we can linearise. Let the surface have slope ∂h/∂x in the x direction. Normal: n̂ ≈ (−∂h/∂x, −∂h/∂y, 1). Deflection of the refracted vertical ray:

If ∂Δx/∂x + ∂Δy/∂y < 0, rays converge — a bright spot forms. If > 0 — they diverge, the spot is dark. Thus, intensity on the bottom is proportional to the inverse of the Jacobian of the mapping from surface to bottom:

The Laplacian of height ∇²h determines the surface curvature. A caustic forms where the wave crest has sufficiently large negative curvature at convex sections.

7. Rendering Caustics: env-map + refraction map

There are two approaches to rendering caustics in WebGL in real time.

Method 1: Forward Photon Mapping

We fire N photons from the source (sun), refract through the surface, and store hit points on the bottom in an accumulator texture. A Gaussian blur gives a realistic result. O(N) operations per frame.

Method 2: Screen-Space Refraction Map (recommended)

// Vertex shader — caustic UV generation
precision highp float;
uniform sampler2D uHeightMap;   // surface height
uniform float uDepth;            // pool depth
uniform float uEta;              // n_air / n_water = 0.750
attribute vec2 aTexCoord;

varying vec2 vCausticUV;

vec3 refractRay(vec3 d, vec3 n, float eta) {
  float cosi = dot(-d, n);
  float sin2t = eta * eta * (1.0 - cosi * cosi);
  if (sin2t > 1.0) return reflect(d, n); // TIR
  return eta * d + (eta * cosi - sqrt(1.0 - sin2t)) * n;
}

void main() {
  vec2 uv = aTexCoord;
  float h = texture2D(uHeightMap, uv).r;

  // Normal approximation via neighbouring pixels (texel size = 1/512)
  float ts = 1.0 / 512.0;
  float hx = texture2D(uHeightMap, uv + vec2(ts, 0.)).r;
  float hy = texture2D(uHeightMap, uv + vec2(0., ts)).r;
  vec3 norm = normalize(vec3(h - hx, h - hy, ts * 20.0));

  vec3 sunDir = vec3(0.0, 0.0, -1.0); // vertical sun
  vec3 refracted = refractRay(sunDir, norm, uEta); // 0.750 = 1/1.333

  // Project onto the bottom (along refracted direction)
  float t = (h - uDepth) / refracted.z;  // bottom at z = -depth
  vec2 hit = uv + refracted.xy * t;
  vCausticUV = hit;
  gl_Position = vec4(aTexCoord * 2.0 - 1.0, 0.0, 1.0);
}

// Fragment shader — photon spot accumulation
precision highp float;
varying vec2 vCausticUV;

void main() {
  // Each texel (photon) writes to its target pixel
  // Uses additive blending (ONE, ONE)
  gl_FragColor = vec4(1.0, 0.95, 0.85, 0.015); // warm tint
}

JS Code: Caustics Manager

class CausticsRenderer {
  constructor(gl, resolution = 512) {
    this.gl = gl;
    this.res = resolution;
    this.causticsTexture = this.createFramebuffer(resolution);
    this.prog = this.compileProgram(CAUSTIC_VERT, CAUSTIC_FRAG);
    this.buildQuadMesh(resolution); // 512×512 = 262144 quad vertices
  }

  render(heightTexture, depth, eta = 0.75) {
    const gl = this.gl;
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.causticsTexture.fbo);
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Additive blending — photons accumulate
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE);

    gl.useProgram(this.prog);
    gl.uniform1f(this.loc('uDepth'), depth);
    gl.uniform1f(this.loc('uEta'), eta);
    gl.bindTexture(gl.TEXTURE_2D, heightTexture);

    // Each quad = one "photon", drawn to target UV
    gl.drawArrays(gl.TRIANGLES, 0, this.res * this.res * 6);
    gl.disable(gl.BLEND);
  }

  getTexture() { return this.causticsTexture.texture; }
}

Compositing with the Bottom Material

We add the caustics texture to the base bottom texture in the final fragment shader. We add Fresnel blending between the reflected sky and refraction:

8. Long-focal Caustics and Physical Optics

The purely geometric approach has limits: infinite brightness at the caustic. Wave optics replaces it with the Airy function:

Iridescent Clouds and Corona

Raindrops act as microlenses — explaining the rainbow (λ-dependent refraction) and the corona (diffraction rings around the sun). In a pool, the analogue is colour fringes at caustic edges under monochromatic illumination.

Connection to Simulations

Caustic rendering is typically coupled with fluid surface simulation (Gerstner Waves or SPH). See related articles below.