Каустики та фокусування хвиль

1. Геометрична vs хвильова оптика

Оптика розглядає поширення електромагнітного випромінювання. Залежно від масштабу явища використовуються два апарати:

Для каустик у воді геометрична оптика чудово описує яскраві плями — хвильові ефекти дають тонкі корекції на краях. Ми почнемо з геометричного підходу.

2. Закон Снеля та показник заломлення

Коли промінь перетинає межу між середовищами з показниками заломлення n₁ і n₂, кут заломлення θ₂ визначається законом Снеля:

Векторна форма закону Снеля

Для тривимірного трасування зручно векторне формулювання. Нехай d̂ — одиничний вектор падаючого променя, n̂ — нормаль поверхні (назовні), η = n₁/n₂:

Якщо підкорінний вираз від'ємний — повне внутрішнє відбиття: промінь не виходить з середовища. Критичний кут: sin θ_c = n₂/n₁.

3. Тонка лінза та формула лінзи

Ідеальна тонка лінза фокусує паралельний пучок у точку. Її оптична сила P = 1/f (діоптрії), де f — фокусна відстань. Зв'язок між відстанями предмета та зображення задається формулою тонкої лінзи:

Знаки та конвенції

Аберації заважають ідеальному фокусу

Реальна лінза страждає від аберацій: сферичної (крайові промені фокусуються ближче до лінзи), хроматичної (різна фокусна відстань для λ), дисторсії. Саме сферична аберація породжує одну з найчастіших форм каустик — зосереджений "хвіст" яскравості вздовж осі.

4. Каустики: поверхня фокусування

Каустика (від грец. καυστικός — палюча) — це огинаюча сімейства заломлених або відбитих променів. Промені не перетинаються в одній точці через неідеальність поверхні — вони утворюють caustic surface у просторі, а перетин цієї поверхні з екраном дає яскравий візерунок.

Математика: огинаюча сімейства ліній

Сімейство ліній Φ(x, y, t) = 0, де t — параметр (наприклад, координата точки падіння на поверхню). Огинаюча задається системою:

Яскравість каустики

Інтенсивність I у точці на екрані пропорційна густині потоку фотонів. Якщо d_ω — тілесний кут пучка, а dA — площа плями на екрані, то I ~ dΩ/dA. На каустиці dA → 0 (промені "стискуються"), тому I → ∞ у геометричній оптиці. Хвильова оптика дає скінченний пік — фігуру Ері з характерним масштабом Δx ~ (λ·R)^(2/3).

Класифікація за теорією катастроф

5. Коефіцієнти Френеля: відбиття та пропускання

На межі розділу частина енергії відбивається, частина проходить далі. Для монохроматичної EM-хвилі рівняння Максвелла дають точний результат — формули Френеля для s- та p-поляризацій:

Апроксимація Шліка

У рендерингу часто використовують дешеву апроксимацію (Schlick 1994) для спектрального відбиття при нормальному падінні F₀ = ((n₁−n₂)/(n₁+n₂))²:

Вода при нормальному падінні відбиває лише 2% світла. При θ → 90° (косе падіння) F → 1 — дзеркальна вода на горизонті.

6. Каустики у воді: хвиляста поверхня

Поверхня басейну описується висотою h(x, y, t). Промінь від сонця спрямований вертикально вниз, нормаль до поверхні відхилена на кут, що залежить від градієнта h. Заломлений промінь потрапляє в іншу точку дна — це і є каустичний узор.

Зміщення точки попадання

Для малих нахилів (∂h/∂x ≪ 1) можна лінеаризувати. Нехай поверхня має нахил ∂h/∂x у напрямку x. Нормаль: n̂ ≈ (−∂h/∂x, −∂h/∂y, 1). Відхилення заломленого вертикального променя від вертикалі:

Якщо ∂Δx/∂x + ∂Δy/∂y < 0, промені сходяться — виникає яскрава пляма. Якщо > 0 — розходяться, пляма темна. Таким чином, інтенсивність на дні пропорційна оберненому значенню якобіана відображення поверхні на дно:

Лапласіан висоти ∇²h визначає кривизну поверхні. Каустика формується там, де гребінь хвилі має достатньо велику від'ємну кривизну на опуклих ділянках.

7. Рендеринг каустик: env-map + refraction map

Є два підходи до рендерингу каустик у WebGL у реальному часі.

Метод 1: Forward photon mapping

Стріляємо N фотонів від джерела (сонця), заломлюємо через поверхню, зберігаємо точки попадання на дно в текстуру-акумулятор. Розмивання через gaussian blur дає реалістичний результат. O(N) операцій за кадр.

Метод 2: Screen-space refraction map (рекомендований)

// Vertex shader — генерація caustic UV
precision highp float;
uniform sampler2D uHeightMap;   // висота поверхні
uniform float uDepth;            // глибина басейну
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;

  // Наближення нормалі через сусідні пікселі (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); // вертикальне сонце
  vec3 refracted = refractRay(sunDir, norm, uEta); // 0.750 = 1/1.333

  // Проецюємо на дно (уздовж refracted напрямку)
  float t = (h - uDepth) / refracted.z;  // дно на z = -depth
  vec2 hit = uv + refracted.xy * t;
  vCausticUV = hit;
  gl_Position = vec4(aTexCoord * 2.0 - 1.0, 0.0, 1.0);
}

// Fragment shader — нанесення фотонних плям
precision highp float;
varying vec2 vCausticUV;

void main() {
  // Кожен тексель (фотон) пише у свій цільовий пікс
  // Використовуємо адитивний blending (ONE, ONE)
  gl_FragColor = vec4(1.0, 0.95, 0.85, 0.015); // теплий відтінок
}

JS-код: менеджер каустик

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);

    // Адитивний блендінг — фотони накопичуються
    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);

    // Кожен quad = один "фотон", малюється в ціловий UV
    gl.drawArrays(gl.TRIANGLES, 0, this.res * this.res * 6);
    gl.disable(gl.BLEND);
  }

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

Підключення до матеріалу дна

Отриману текстуру каустик сумуємо з базовою текстурою дна у фінальному fragment shader. Додаємо Fresnel-blend між відбитим небом та рефракцією:

8. Довгофокусні каустики та фізична оптика

Чисто геометричний підхід має обмеження: нескінченна яскравість на каустиці. Хвильова оптика замінює її на апаратну функцію Ері:

Райдужні хмари та corona

Краплі дощу діють як мікролінзи — пояснюють веселку (λ-залежне заломлення) та corona (дифракційний кільця навколо сонця). У басейні аналогом є кольорові фринжі на краях каустики при монохроматичному підсвічуванні.

Зв'язок з симуляціями

Каустичний рендеринг зазвичай пов'язаний з симуляцією поверхні рідини (Gerstner Waves або SPH). Дивіться пов'язані статті нижче.