Дизайн шейдера со скульптурой на основе реймарчинга

Hero-экран, собранный из пикселей

Дизайн шейдера со скульптурой на основе реймарчинга показывает крупную зелёную процедурную форму на глубоком тёмно-синем поле. Заголовок «3D that lives in a fragment shader.» подаёт изображение как исследование рендеринга, а не как обычный 3D-ресурс. Благодаря этому посетитель понимает техническую идею ещё до того, как изучит поверхность скульптуры.

Фрагментный шейдер выполняет sphere tracing для гладкого объединения полей расстояний пяти сфер, центры которых со временем вращаются по орбите. Второй, более короткий трассировочный проход оценивает мягкие тени; нормали по конечным разностям поддерживают блики и контур в стиле Френеля. Медленная автоматическая орбита камеры меняет ракурс. Зелёные формы выглядят скульптурными, но ни полигональной модели скульптуры, ни текстуры-изображения, ни симуляции жидкости здесь нет.

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

Где уместна эта композиция

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

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

Как читать бейдж состояния

Бейдж в правом верхнем углу сохраняет метки GPU и Raymarch и добавляет локально рассчитанную оценку FPS. На трёх снимках в этой среде значение 2FPS, тогда как в поясняющем тексте указано 60fps. Это не равноценные свидетельства: счётчик отражает частоту перерисовки в сессии съёмки, а формулировка в источнике не гарантирует переносимую производительность.

Композиция через свет и масштаб

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

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

Редакционный слой состоит из небольшой подписи прописными «RAYMARCHED HERO», очень крупного двухстрочного заголовка и компактного поясняющего абзаца. Подпись задаёт категорию, заголовок формулирует идею, абзац называет технику. Эта трёхуровневая последовательность специфична для данного артефакта: каждый текстовый слой прямо относится к реймарчинг-скульптуре, а не описывает абстрактный hero-экран.

1. Начните с поля

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

2. Добавьте признаки объёма

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

3. Разместите пояснение

   Сохраняйте порядок: подпись категории, главный тезис, техническое предложение. Тогда визуальный эксперимент остаётся понятным и при остановленном движении.

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

Этот официальный пример OpenDesign содержит настоящую локальную реализацию на WebGL2, а не просто подпись о рендеринге. Полноэкранный треугольник выполняет sphere tracing максимум в 90 шагов на пиксель, останавливается при пороге расстояния 0.001 или при дальности свыше восьми и использует до 24 шагов для мягких теней. Это факты из исходного кода, а не доказательство готовности к продакшену или наличия подключённого сервиса.

Сцена и камера анимируются автоматически. Единственное событие ввода — изменение размера; DPR рендера ограничен значением 1.5, чтобы сократить попиксельную работу. Нет управления указателем, клавиатурой, камерой, редактирования материалов и параметров. Локальная оценка FPS обновляется примерно в полусекундных окнах; ни она, ни формулировка 60fps в источнике не служат бенчмарком для разных устройств.