Вступление:

Привет, Хабр! Я всегда любил физику и ретро-эстетику. Однажды мне захотелось сделать научно-популярный проект, который не просто показывает текст с формулами, а позволяет «покрутить» физику руками. Так появился ЦУП-7 — интерактивный пульт с рендерингом черной дыры на WebGL и пятью квантовыми экспериментами. В этой статье я расскажу, как устроен проект под капотом, с какими проблемами я столкнулся и почему решил отказаться от фреймворков.

1. Черная дыра: WebGL и Метрика Шварцшильда

Главный экран — это не видео и не картинка, а настоящий шейдер. Чтобы свет огибал горизонт событий, я использовал интегрирование геодезических линий методом Рунге-Кутты 4-го порядка (RK4). В коде рассчитывается гравитационное линзирование, эффект Доплера для аккреционного диска и даже фотонное кольцо.

Скрытый текст

* Как работает математика черной дыры (Геодезические)

Чтобы свет огибал черную дыру так, как это предсказывает Общая теория относительности (ОТО), мы не можем использовать обычную евклидову геометрию (где свет летит по прямой). Нам нужно решить уравнение геодезической линии в метрике Шварцшильда.

Вместо того чтобы отслеживать декартовы координаты луча (x,y,z)(x,y,z) шаг за шагом, мы используем трюк из теоретической физики. Мы знаем, что орбита фотона лежит в одной плоскости. Поэтому мы переходим к полярным координатам и используем величину u=1/ru=1/r (обратный радиус).

Уравнение траектории фотона в метрике Шварцшильда выглядит так:

d2udϕ2+u=3Mu2dϕ2d2u​+u=3Mu2

(или u′′=−u+3Mu2u′′=−u+3Mu2)

Где:

  • uu — обратный радиус (1 / расстояние до центра).

  • ϕϕ — угол поворота луча вокруг черной дыры.

  • MM — масса черной дыры (в нашем коде M=1M=1).

  • Слагаемое 3Mu23Mu2 — это и есть эффект ОТО. Если его убрать, получится уравнение прямой линии (классическая оптика).

Как это решается в шейдере?
Аналитического решения у этого уравнения нет, поэтому мы решаем его численно. В коде используется метод Рунге-Кутты 4-го порядка (RK4) — золотой стандарт для физических симуляций. Мы делаем маленькие шаги hh по углу ϕϕ и на каждом шаге вычисляем, как меняется uu и её производная.

glsl

// Упрощенный кусок кода из шейдера
float u = 1.0 / length(ro); // Начальный обратный радиус
float du = -u * vr / vphi;  // Производная
float phi = 0.0;

for (int i = 0; i < MAXSTEP; i++) {
    // Вычисляем шаг методом RK4
    float k1w = -u + 3.0 * M * u * u;
    // ... (промежуточные вычисления k2, k3, k4) ...
    u += h * (k1u + 2.0 * k2u + 2.0 * k3u + k4u) / 6.0;
    du += h * (k1w + 2.0 * k2w + 2.0 * k3w + k4w) / 6.0;
    phi += h;
}

Как только uu становится слишком большим (луч пересек горизонт событий, r≤2Mr≤2M), мы останавливаем цикл. Если луч улетел бесконечно далеко, мы берем его финальный вектор направления и рисуем на его месте звезды.


* Аккреционный диск: Доплер, красное смещение и турбулентность

Аккреционный диск — это раскаленное вещество, вращающееся вокруг дыры. Рендеринг диска — самая зрелищная часть шейдера, но она требует учета нескольких релятивистских эффектов.

* Пересечение плоскости
Пока луч летит, мы проверяем, не пересек ли он экваториальную плоскость (y=0y=0). Если пересек, мы берем радиус rr в этой точке и сэмплируем диск.

* Вращение и эффект Доплера
Диск вращается по кеплеровской орбите (быстрее у центра, медленнее на окраинах). Из-за этого часть диска летит на нас, а часть — от нас.
Скорость движения вещества: β=M/rβ=M/r​.
Эффект Доплера: свет от приближающейся стороны становится ярче и «синее», от удаляющейся — тусклее и «краснее».
В коде это считается через фактор δ=1/(γ(1−β⃗⋅n⃗))δ=1/(γ(1−β​⋅n)), где γγ — Лоренц-фактор.

* Гравитационное красное смещение
Фотону нужно потратить энергию, чтобы выбраться из гравитационного колодца. Поэтому свет с окраин диска кажется краснее, чем с внутренних краев.
Фактор замедления: z=1−2M/rz=1−2M/r​.

* Температура и цвет
Мы не задаем цвет диска вручную. Мы считаем его температуру по закону Стефана-Больцмана. Температура падает с радиусом: T∝r−3/4T∝r−3/4. В коде есть функция blackbody(T), которая по температуре (с учетом сдвигов Доплера и гравитации) вычисляет реальный RGB-цвет.

* Турбулентность (Шум)
Чтобы диск не выглядел как плоский блин, мы накладываем на него 3D-шум (FBM — фрактальный броуновский шум). Луч проходит сквозь разные слои «газа» на разных радиусах и углах, накапливая яркость (альфа-блендинг). Именно поэтому у диска есть объем и закрученные вихри.


* Итог: Почему это работает быстро?

Секрет в том, что мы вообще не используем полигоны (треугольники) для черной дыры. Каждый пиксель на экране — это независимый математический расчет (Raymarching). Видеокарта просто запускает этот шейдер параллельно для миллионов пикселей, выдавая 60 кадров в секунду даже на встроенной графике.

2. Квантовые эксперименты

Внутри — 5 симуляций (Квантовый ластик, Бомба Элицура-Вайдмана, Две щели, Отложенный выбор и Парадокс близнецов).Самое сложное было визуализировать квантовую запутанность в «Квантовом ластике» на Canvas 2D. Пришлось генерировать события так, чтобы при фильтрации по идлерам (D1/D2) на экране D0 собиралась интерференционная картина.

Квантовый ластик с отложенным выбором
Квантовый ластик с отложенным выбором
Две щели -Френель
Две щели -Френель

3. Дизайн: ЭЛТ-монитор и ЦУП 90-х
Я хотел, чтобы сайт ощущался как старый пульт управления. За это отвечают:

  • Шрифт Courier New и фосфорно-зеленый цвет.

  • Наложение скан-линий (CSS repeating-linear-gradient).

  • Звуки. Фоновая телеметрия черной дыры и писк при наведении на кнопки.

  • Пасхалка.

4. Технический стек (или его отсутствие)
Проект написан на чистом HTML, CSS и JavaScript. Без React, без Webpack, без npm-пакетов. Всё летает благодаря нативному Canvas 2D и WebGL. Сайт полностью статический, хостится на GitHub Pages и поддерживает два языка (RU/EN) с переключением на лету.

Заключение:
Проект доступен по адресу blackh0le.ru. Он бесплатный, открытый (ссылка на GitHub) и работает даже на телефонах. Буду рад фидбеку от сообщества физиков и фронтендеров!

Комментарии (13)


  1. Tyusha
    02.11.2026 11:57

    Круть неимоверная. Удивляет компактность кода и всё в одном файле. Я представляю, как бы это ИИ сделал, сколько там было бы файлов и бесконеных листингов.

    Осталось сделать метрику Керра, раз уж всё вращается.


    1. Dawidi Автор
      02.11.2026 11:57

      Спасибо за комментарий! Очень сложно...метрика Керра. Признаюсь, без ИИ не обошлось. Без помощи математиков уже не смогу.


      1. Imaginarium
        02.11.2026 11:57

        Оо, метрика Керра) научный руководитель бывший говорил, что спрашивал Керра, как он придумал свою метрику, тот всегда ругался и говорил, что был молод и пьян, и ничего не помнит и вообще хватит его спрашивать об этом))

        Хорошо, что разобрались, это красивые вещи.


  1. Maximka200
    02.11.2026 11:57

    У меня тоже есть статья про моделирование чёрных дыр, только в четырёх различных метрика (Шварцшильд, Керр, Рейсснера-Нордстрем и Керр-Ньюман). Однако у меня получилось менее реалистично на мой взгляд.


  1. Dawidi Автор
    02.11.2026 11:57

    Прочитал Вашу статью - почерпнул несколько понятий, который не знал и которые дополнят мой Obsidian(спасибо). Но у вас упор не на динамической визуализации ЧД, поэтому зря вы сравниваете - у вас другая концепция. Мне бы интересно было узнать на счёт интерактивной визуализации мысленных экспериментов, как Вам?


    1. Maximka200
      02.11.2026 11:57

      Мне бы интересно было узнать на счёт интерактивной визуализации мысленных экспериментов.

      В последнее время я в общем-то этим и занимаюсь: я беру какие-то объекты, которые далеки от реальности (поток Риччи, чёрные дыры(уравнения ото), ядерный взрыв, 16 проблема Гильберта, расслоение Зейферта) и стараюсь их превратить в наглядные изображения с помощью кода на python. Пока все модели с физикой получаются очень приближенно и нереалистично. Впрочем, делать реалистичные и точные математические модели сложных явлений крайне сложно даже для специалистов, там очень много уравнений и деталей.


  1. Dr_Faksov
    02.11.2026 11:57

    Если правильно помню, то когда вышел Интерстеллар, там нашли только одну ошибку в отображении космоса - ближний и дальний от наблюдателя края чёрной дыры должны иметь разный цвет. А в фильме он одинаковый.


    1. Dawidi Автор
      02.11.2026 11:57

      Чуть поправлю: не ближний и дальний, а скорее левый и правый. Из-за эффекта Доплера левый(движущийся на наблюдателя) и правый край(от него) должны соответственно быть голубым и красным. Спасибо, это можно учесть и переделать!


  1. domix32
    02.11.2026 11:57

    Ещё бы горизонтальный шейдер допилить - частицы в аккреационном диске что летят в направлении наблюдателя и от наблюдателя будут давать различное красное смещение и одна сторона будет более синей, а другая более красной.


    1. Dawidi Автор
      02.11.2026 11:57

      с Dr_Faksov говорили об этом, чуть правил код. Спасибо, за обратную связь!


  1. goldexer
    02.11.2026 11:57

    У меня отображается как-то не так, наверно особенность браузера Вивальди (съедена верхняя часть, покрутить нельзя)

    Скрытый текст


  1. Dawidi Автор
    02.11.2026 11:57

    Попробую поправить, но на телефоне не совсем тот эффект, надо подумать как адаптировать.


  1. avshkol
    02.11.2026 11:57

    Отличная работа! Сможете взяться за модель для двух связанных тросом капсул для создания искусственной гравитации в космосе? Вопрос, при каких условиях она будет устойчива, а при каких - нет?

    Вот статья и дискуссии: Спросите Итана: Может ли кевларовый трос создать в космосе искусственную гравитацию?