Шейдер галактики из частиц

Три спиральные ветви, один вызов отрисовки точек

Particle Galaxy — официальный пример OpenDesign: тёмный, почти пустой холст и большое поле слабых частиц. Авторский заголовок «Fifty thousand points, one draw call.» делает техническую идею частью визуальной идентичности, а не прячет её за элементами интерфейса.

Поле частиц и фиксированный заголовок внизу слева находятся в одном экране; заголовок не вынесен в отдельный раздел ниже первого экрана. Слабые зелёные, синие и бледные точки оставляют широкие тёмные промежутки между тремя ветвями. Компромисс очевиден: сдержанное поле выглядит тихо рядом с яркой типографикой, но из-за низкого контраста изображение стоит рассматривать в полном размере.

Где подходит этот дизайн

Дизайн подходит для сцены креативного кодинга, интерактивной технологической витрины или арт-направленного исследования WebGL. Он особенно хорош, когда сама визуализация — главный предмет, а сопроводительный текст остаётся коротким.

Отсутствие статичных элементов управления удерживает внимание на меняющемся поле частиц. Эта сдержанность ограничивает и обнаруживаемость: в предоставленной разметке нет авторских элементов управления, поэтому дизайн говорит через движение, типографику и компактный блок статистики, а не через явные интерактивные подсказки.

Как устроена композиция

В правом верхнем блоке показаны 50,000 POINTS, 1 DRAW CALL и меняющаяся оценка FPS. Вершинный шейдер получает позиции точек из gl_VertexID, распределяет их по трём ветвям и меняет угловую скорость так, что внутренние точки вращаются быстрее. Фиксированный наклон и медленно меняющееся общее вращение задают перспективу диска. Мягкие спрайты точек и аддитивное смешивание дают свечение зелёным, голубым и бледным частицам.

В статистике используются крупные белые цифры и мелкие разреженные подписи, а в графике — гораздо менее контрастные зелёные, синие и бледные частицы. Такое разделение делает метаданные легко читаемыми и не конкурирующими с галактикой. Но есть и перцептивный компромисс: блок производительности читается сразу, а ветвям из частиц нужно больше времени и подходящий контраст дисплея.

На снимках показаны разные значения FPS при тех же подписях числа точек и вызовов отрисовки. Из-за этого поле FPS читается как меняющееся локальное состояние отображения, а не стабильное утверждение о производительности на разных устройствах.

Граница возможностей

Исходный код WebGL2 задаёт N = 50000 и вызывает gl.drawArrays с POINTS один раз за каждый отрисованный кадр. Позиции частиц вычисляются в вершинном шейдере, а не обновляются через буфер позиций на CPU. Основной поток по-прежнему занимается настройкой, uniform-значениями времени, изменением размера и отрисовкой. Элементов управления указателем, клавиатурой, камерой или параметрами нет. Это процедурный образ, похожий на галактику, а не научная гравитационная симуляция.

Комментарии в исходном коде заявляют 60fps, но отдельные статичные снимки и локальный счётчик FPS не доказывают гарантированную производительность. Они также не доказывают промышленное развёртывание, подключённые сервисы или исторический процесс генерации. Числа точек и вызовов отрисовки — факты кода; значение частоты кадров — наблюдение, зависящее от окружения.

Что описывают счётчики

Число точек берётся из заданного значения N, а подпись draw call соответствует единственному вызову POINTS в цикле отрисовки. Значение FPS оценивает частоту requestAnimationFrame примерно по полусекундным окнам. Разделение этих смыслов сохраняет полезный технический контекст и не превращает работу в необоснованный бенчмарк.