Залетай в браузере внутрь чёрной дыры, протяни руку сквозь червоточину,
потеряйся в туманности — и всё это без единого серверного запроса.
Хотелось сделать штуку, на которую можно просто смотреть. Не играть, не кликать — смотреть, как газ закручивается вокруг горизонта событий. Как свет преломляется на горле червоточины. Как облака туманности медленно дрейфуют.
Всё работает прямо в браузере. Один HTML-файл, пять шейдеров на реймарчинге, 65 тысяч частиц для галактики. Никакого бэкенда, никаких бандлеров — Three.js, немного ванильного JS и чистая математика на GPU.
В каталоге 7 объектов, каждый со своим шейдером, цветовыми темами и подробным досье. Три туманности — для красоты. Чёрная дыра, червоточина, сфера Дайсона — для научной экзотики. Звёздное скопление — потому что Плеяды это Плеяды.
Шейдеры — 5 штук, реймарчинг 60–130 шагов на пиксель, компилируется прямо на GPU.
Туманности — Орион M42, Конская Голова, Крабовидная. Объёмные облака, медленное движение, никаких плоских текстур.
Чёрная дыра — геодезики Шварцшильда, объёмный аккреционный диск, доплеровское смещение цвета. Это Sgr A*, 4 миллиона солнечных масс.
Червоточина — горло Морриса–Торна, при прохождении координаты инвертируются и открывается другое звёздное поле. По ту сторону — другая вселенная.
Сфера Дайсона — рой коллекторов вокруг звезды, тепловое свечение в зазорах между панелями.
Карта галактики — 65 000 частиц (диск, балдж, газовые облака), фоновые звёзды, два спиральных рукава.
Загрузка в стиле JARVIS — трёхколоночный терминал с логами, сканированием и калибровкой навигации. Чисто для атмосферы.
Кастомизация — 2 цветовые темы и 2 пресета на каждый объект, ползунки работают в реальном времени.
| # | Объект | Что это | Сектор | Почему интересно |
|---|---|---|---|---|
| 1 | Sagittarius A* | Сверхмассивная ЧД | 00-CORE | Ядро нашей галактики, 4.15×10⁶ M☉ |
| 2 | Orion Nebula M42 | Эмиссионная туманность | 03-O | Звёздная колыбель, 1 344 св. лет |
| 3 | Horsehead Nebula | Тёмная туманность B33 | 03-H | Тёмный силуэт на фоне свечения IC 434 |
| 4 | Crab Nebula M1 | Остаток сверхновой | 12-T | Взрыв 1054 года, синхротронные нити |
| 5 | Pleiades M45 | Открытое скопление | 06-S | Семь Сестёр с отражательной туманностью |
| 6 | Cygnus Wormhole | Мост Морриса–Торна | 07-F | Переход в альтернативную вселенную |
| 7 | Kepler Dyson Sphere | Мегаструктура II типа | 19-B | Рой солнечных коллекторов |
Тут не декоративные спрайты — шейдеры считают настоящую математику.
Гравитационное линзирование — лучи света изгибаются пошагово по формуле Шварцшильда:
a = −1.5 × Rs × |L|² / r⁵ × p
Угловой момент L = p × v, Rs — радиус горизонта событий.
Аккреционный диск — это трёхмерная среда, не плоский круг:
ρ(r, y) = Noise3D(r, θ) × exp(−y² / h²)
Поэтому под углом диск выглядит как настоящий газовый бублик.
Доплер — газ, летящий к тебе, ярче и голубее; от тебя — тусклее и краснее:
D = 1 / (γ × (1 − β · cos θ))
Червоточина — при r < Rs луч разворачивается и вылетает в другую систему координат:
r < Rs → p_new = −p × 1.01
git clone https://github.com/vincere-mori/stellar-cartography.git
cd stellar-cartography
# Браузер блокирует шейдеры с file://, нужен локальный сервер
python -m http.server 7821
# → http://localhost:7821pip install -r requirements.txt
python main.pyУправление (десктоп)
| Клавиша / мышь | Что делает |
|---|---|
| Перетащить | Вращение камеры |
| Скролл | Зум |
Space |
Автопилот |
1–7 |
Переключить объект |
Q / A |
Радиус Rs |
W / S |
Скорость вращения |
E / D |
Интенсивность джетов |
R / F |
Линзирование |
T |
Сменить тему |
Esc |
Закрыть |
| Рендер | Three.js r128 · WebGL2 · GLSL 3.00 ES |
| Язык | Vanilla JavaScript ES2022 |
| Десктоп | Python 3 · PyOpenGL · GLFW |
| Сборка | Без бандлера — один HTML-файл |
webgl
threejs
glsl
raymarching
black-hole
schwarzschild
accretion-disk
gravitational-lensing
wormhole
morris-thorne
nebula
dyson-sphere
galaxy
astrophysics
physics-simulation
scientific-visualization
3d
interactive
javascript
♥ · 🌐 Live Demo · 🇬🇧 English