Дизайн шейдера Вороного

Поле Вороного на весь холст

Дизайн шейдера Вороного — официальный графический пример OpenDesign, построенный вокруг одного анимированного WebGL-холста. Авторский заголовок гласит «VORONOI CELLS», а поясняющая строка описывает «drifting feature points, palette-keyed cells, glowing boundaries». Вместе эти подписи задают визуальную идею ещё до взаимодействия.

Композиция использует холст как поверхность страницы, а не помещает работу в рамку. Крупные неправильные ячейки выходят за границы viewport, поэтому поле выглядит непрерывным у краёв. Компромисс в том, что работа даёт атмосферу и масштаб, но оставляет мало места для второстепенного контента и привычной навигации.

01

Видимая структура

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

02

Порядок чтения

Верхние подписи обозначают предпросмотр, огромный заголовок внизу слева называет тему, а подсказка внизу справа вводит взаимодействие.

Где уместен этот дизайн

Дизайн подходит там, где визуальное открытие важнее плотной информации: первый экран экспериментального лендинга, этюд генеративного искусства или демонстрация WebGL. Фраза «WEBGL PREVIEW» обозначает работу как визуальный предпросмотр, а «REAL-TIME · GPU» подаёт в интерфейсе технику рендеринга.

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

Типографика поверх движущейся геометрии

Типографика намеренно крупная и закреплена внизу слева. «VORONOI» занимает доминирующую строку, «CELLS» идёт под ней, а пояснение расположено ниже более мелким шрифтом. Такой масштаб делает тему читаемой на пёстром поле, но требует, чтобы за буквами сохранялся достаточный контраст.

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

01

Масштаб заголовка

Огромный двухстрочный заголовок сохраняет узнаваемость темы, даже когда геометрия ячеек за ним меняется.

02

Подписи по краям

Небольшие подписи прописными буквами задают контекст предпросмотра и идею рендеринга, не споря с главным заголовком.

Размещение оверлея

Подпись «OPENDESIGN · WEBGL PREVIEW» вверху слева и «REAL-TIME · GPU» вверху справа создают широкую рамку вокруг холста. Подсказка «MOVE THE CURSOR ↗» внизу справа уравновешивает крупный заголовок внизу слева и указывает на взаимодействие без привычного сценария с кнопкой.

Видимое движение и границы возможностей

Три кадра показывают одну полноэкранную композицию в разные моменты, а не отдельные экраны. В исходнике реализованы непрерывный дрейф опорных точек и локальное искажение от указателя. Обе нормализованные координаты указателя приближаются к целевым за каждый кадр на оставшуюся разницу, умноженную на 0,06, прежде чем влиять на шейдер. Значок курсора внизу справа — статичная подсказка, а не кнопка; клик, перетаскивание или панель настроек не нужны.

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

1. Отделяйте наблюдение от поведения

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

2. Сохраните компромисс

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