Гиперкуб
Creative Developer · 2025 — настоящее время
Началось как попытка собрать стеклянный куб с внутренней светящейся сеткой, а выросло в маленький движок-песочницу. Шесть платоновых тел — икосаэдр, куб, октаэдр, додекаэдр, звёздчатый и составной — рендерятся как один raymarch-фрагмент: никакой вершинной геометрии, только signed distance fields и их градиенты. Сверху — аврора-ленты на симплекс-шуме и GPGPU-частицы. Всё лежит в одном index.html без сборки, Three.js тянется с CDN. Внутри есть панель-конструктор, режим Learn с объяснением рендера и экспорт сцены в standalone-HTML или config JSON. Выложил под MIT — бери, форкай, собирай свою сцену.
Идея
Большинство красивых WebGL-демо выглядят как магия, пока не начнёшь разбирать их по слоям. Захотелось собрать такой объект самому и понять, из чего складывается ощущение глубины, объёма и света — а потом дать это покрутить любому.
За основу взял стеклянные полиэдры с внутренней светящейся сеткой. Начал с куба, дошёл до шести платоновых тел и морфинга между ними. Параллельно оброс панелью параметров, чтобы менять форму, материал и эффекты вживую, а не в коде.
Получился не один арт, а песочница: меняешь форму, IOR, иридесценцию, аврору и частицы — и сразу видишь результат.
Как устроено
Без меша. Фигуры — это не геометрия, а signed distance fields. Каждый пиксель — луч, который марширует сквозь SDF; шейдер на месте считает точку попадания, нормаль, Френеля и преломление внутрь.
Стекло. Преломление по Снеллиусу в точке попадания, скруглённая фаска из самого SDF, IBL-подсветка.
Аврора. Шесть лент TubeGeometry, вершины смещаются 3-частотным симплекс-шумом — классический fBm.
Частицы. GPGPU через GPUComputationRenderer — позиции и скорости считаются на GPU каждый кадр.
Тот самый конструктор из видео — открой и покрути сам.
Платоновы тела
Из шести форм в сцене четыре — платоновы тела: выпуклые многогранники, где все грани одинаковые правильные многоугольники, а в каждой вершине сходится поровну рёбер. Таких форм всего пять, греки знали все. В движке это не разные модели, а одна SDF-формула с разным набором секущих плоскостей.
Куб. Шесть квадратов, восемь вершин. Единственное тело с квадратными гранями; у Платона отвечал за землю — за устойчивость.
Октаэдр. Восемь треугольников, шесть вершин. Двойственен кубу: центры граней куба дают вершины октаэдра, и наоборот. Стихия воздуха.
Икосаэдр. Двадцать треугольников, двенадцать вершин. Самое близкое к сфере из пяти — поэтому им в графике и приближают шар. Стихия воды.
Додекаэдр. Двенадцать пятиугольников, двадцать вершин. Двойственен икосаэдру. Его Платон отдал не стихии, а устройству всего космоса.
Конструктор, Learn и экспорт
Мне было мало просто показать готовую картинку — хотелось, чтобы любой мог разобрать её на части и собрать свою.
В сцене есть панель-конструктор: форма, размер, фаска, IOR, цвет света, иридесценция, интерьер, блум, аврора, частицы — всё крутится вживую. Режим Learn объясняет, что за что отвечает. Экспорт собирает текущую сцену в standalone single-file HTML (все ассеты инлайнятся в data-URL) или в config JSON с комментариями к каждому параметру; config можно загрузить обратно.
По сути это не демо, а маленький редактор. Поэтому и выложил под MIT: бери, форкай, рипай куски, собирай свою сцену. Аврору и фигуры вынес отдельными пенами на CodePen, чтобы можно было пощупать по частям.
Зачем мне это
За последние годы я много управлял командами и продуктами, но мне по-прежнему важно регулярно собирать что-то руками. Такие проекты держат связь с технологической стороной дизайна и заставляют думать как продукт: мало сделать красиво — надо, чтобы другой человек смог взять и переиспользовать. Заодно понятнее, какие идеи реально довести до прода, а какие красиво выглядят только на референсах.