Разбор.

Введение

Привет, меня зовут Александр Каменщиков. Я 3D-художник с опытом работы в игровом искусстве, VFX в реальном времени и прототипировании геймплея. Мои первые шаги в 3D-графике начались на стенах, когда я рисовал граффити в стиле 3D в начале 2000-х. Поэтому, когда у меня наконец появился доступ к 3D-программам, я полностью погрузился в них.

Оглядываясь назад, я считаю, что это было основой. Тем не менее мой профессиональный путь начался с графического дизайна в 2008 году. Время от времени я работал над задачами, связанными с 3D, и постепенно этот интерес усиливался. В 2011 году я перешёл в индустрию мобильных игр, где работал в разных жанрах, включая симуляторы городов и социальные игры казино.

Многие из этих проектов изначально полагались на визуальные элементы на основе спрайтов, но позже превратились в полноценные 3D-среды по мере масштабирования производства. В этот период я глубоко погрузился в Unity и работал с ним в течение многих лет. На разных этапах в мои обязанности входило проектирование игровых сцен, создание и внедрение различных типов игровых ассетов непосредственно в движке, настройка пользовательского интерфейса, решение задач, связанных с пользовательским опытом, и разработка прототипов геймплея.

Я некоторое время следил за Unreal Engine, но начал активно использовать его после выхода версии 5. Сегодня я сосредоточен на своих личных проектах и хотел бы показать вам процесс создания материала витража для моего кинематографического проекта Unreal Stained Glass, вдохновлённого Unreal Engine.

Концепция

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

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

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

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

Основа: Unreal Rose Window

Ключевой особенностью, которую я хотел создать для материала витража, была анимация пламени. Поэтому первым шагом стало проектирование Unreal Rose Window в качестве основы для анимации. Идея заключалась в том, что Unreal Rose Window будет состоять из отдельных элементов. Каждый из них будет символизировать основные системы и инструменты Unreal Engine.

Объединившись в единое целое, они начнут создавать что-то почти магическое. Поскольку Unreal Engine основан на языке программирования C++, я решил дать каждому элементу символическое имя, стилизованное под древнюю команду программирования, выгравированную вдоль контуров окна.

Этот воображаемый код последовательно активирует системы движка:

&& fRadiance::Ignite();

&& fAudioAmbience::Oscillate();

&& fInfinityGeometry::Virtualize();

&& fMaterials::Refine();

&& fEclipseManifest::CastShadows();

&& fChaosWeaver::Fracture();

&& fFlows::Simulate();

&& fProceduralForge::CreateWorld();

&& fRealmPartition::Optimize();

&& fEntityOrigin::Generate();

&& fMultiUserSpace::Unite();

Давайте кратко рассмотрим простые шаги по созданию 3D-модели Unreal Rose Window. Сначала я создал базовую геометрию окна в 3ds Max и разделил его элементы с помощью Live Boolean в ZBrush. Затем я применил Dynamesh, Smooth и Decimate к модели. После этого я сделал ретопологию и UV-развёртку в 3ds Max.

Для материала я создал карты Base Color, Roughness и Scattering в Substance 3D Designer. После этого я перешёл в Substance 3D Painter, где запекал карты Mesh и настраивал остальные текстуры. Я также использовал процедурные материалы из библиотеки Substance 3D: Stone Slate и Rock Face. Они были смешаны с несколькими слоями шума различной интенсивности, чтобы создать основу для карты нормалей.

Маски для гравировки были созданы в Adobe Illustrator, а затем применены к 3D-модели с использованием различных техник проецирования в Substance 3D Painter.

Чтобы создать трещины, я разработал процедурную кисть в Substance 3D Designer и нарисовал её на каждом объекте с помощью инструмента Paint Along Path.

Обзор ассета Unreal Rose Window:

Процесс создания материала Unreal Stained Glass

Мечты в Procreate: анимация пламени

Поскольку основа 3D-модели уже была подготовлена, я мог полностью сосредоточиться на создании материала Unreal Stained Glass. Как упоминалось ранее, ключевым элементом была анимация пламени. Для этой анимации я не стремился к сверхгладкому движению. Вместо этого я хотел чётко видимую анимацию перелистывания страниц книги. Поэтому первым шагом было определиться с FPS и количеством кадров в цикле.

В традиционной 2D-анимации довольно распространена работа в диапазоне 8–12 FPS. Я решил создать 9-кадровую петлю и подогнал воспроизведение под 9 FPS. Такое компактное количество кадров позволяет быстро рисовать, при этом анимация всё ещё имеет хорошее ощущение вариативности.

В качестве дополнительного преимущества, 9 кадров идеально вписываются в атлас 3×3, что может быть полезно для оптимизации. Однако это не было основной целью, поскольку проект требовал больших текстур. После настройки сцены в Procreate Dreams я рисовал анимационные кадры по кадрам, организуя этапы на отдельных слоях.

Substance 3D Designer: базовая настройка

В Substance 3D Designer первым делом я создал параметр под названием «Анимационная временная шкала» с помощью узла Multiswitch Grayscale. Этот параметр позволил мне быстро просматривать разные кадры и помог настроить экспорт полных последовательностей текстур одним щелчком мыши. Затем я импортировал кадры пламени, силуэт розы и логотип, а затем подготовил минимальный набор базовых масок для плавного продвижения вперёд.

Substance 3D Designer: карта высот

Чтобы построить основной контур ведущего (металлические прутья), я преобразовал маску пламени и маску окна розы в сплайны с помощью узлов Mask to Paths и Path to Spline. Затем я определил толщину линии и профиль поперечного сечения с помощью узлов Spline Sample Thickness и Scatter on Spline Grayscale, и, наконец, объединил результат с помощью узла Blend.

Затем я решил создать свою собственную графику для более тонкого узора ведущего внутри основного контура, как для области пламени, так и для фона. Для пламени я создал небольшой стилизованный фрагмент пламени с помощью цепочки узлов Spline (Poly Quadratic). Я установил толщину и профиль поперечного сечения так же, как для основного контура, затем внёс небольшие искажения с помощью узла Warp. Плитка была сгенерирована с помощью Splatter Color.

Цепочка узлов Spline также использовалась для фонового узора. Этот процесс оказался довольно расслабляющим. После объединения основного контура с узорами пламени и фона окончательная структура ведущего была завершена и затем использована как часть создания карты высот и масок.

Чтобы упростить управление стеклянной поверхностью, я подготовил сплошную стеклянную маску из структуры ведущего с помощью узлов Histogram Scan и Invert Grayscale. Затем я сгенерировал маску Flood Fill, которая обеспечивала локальный контроль над отдельными стеклянными элементами.

Для базовой поверхности стекла я хотел, чтобы у пламени и фона были свои собственные детали поверхности в дополнение к простому шуму. Для этого я построил простой узор с помощью узлов Spline и Tile Generator Grayscale. Затем я управлял размещением и вращением текстуры для каждого стеклянного элемента с помощью Flood Fill Mapper Grayscale.

Я также применил дополнительные искажения поверхности к стеклу. Чтобы создать небольшой общий выпуклость на стеклянном элементе, я использовал Flood Fill Mapper Grayscale в сочетании с узлом Shape, настроенным на Hemisphere. Для небольшого изгиба по краям стекла я использовал узел Bevel. Чтобы слегка наклонить небольшие кусочки относительно друг друга, я использовал Flood Fill to Gradient. Наконец, для тонкого слоя несовершенств я объединил узел Grunge Leaky Paint с Flood Fill Mapper Grayscale.

После объединения слоёв поверхности ведущего и стекла карта высот была завершена. Карты нормалей и ambient occlusion были легко сгенерированы из карты высот с помощью соответствующих узлов. С уже готовой коллекцией масок создание текстур для Base Color, Roughness и других каналов стало плавным и эффективным процессом.

Substance 3D Designer: раскрытие материала (Initial Mask)

Ещё одной важной особенностью материала была анимация раскрытия витража. Чтобы управлять ею с помощью одного параметра, я создал дополнительную маску под названием Initial Mask. Чтобы задать направление раскрытия ведущего, я сгенерировал градиенты с помощью узла Bevel для каждого типа ведущего, включая основной контур, а также области пламени и фона.

Для градиентов раскрытия стекла я объединил Voronoi и Triangle Grid Grayscale со слегка наклонённым вариационным слоем, который был создан ранее для стеклянных элементов на карте высот.

Анимация раскрытия витража была разделена на пять этапов, начиная с верхнего слоя:

1. Раскрытие основного контура.
2. Раскрытие области пламени.
3. Раскрытие стекла в области пламени.
4. Раскрытие области фона.
5. Раскрытие стекла в области фона.

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

Затем я тестировал начальную маску с узлом Histogram Scan:

Экспорт текстуры был настроен как пакетный для каждого кадра по всей последовательности, управляемый параметром Animation Timeline, созданным в самом начале.

График материала витража в Substance 3D Designer:

Финальный материал в Substance 3D Painter:

Unreal Engine: импорт текстур

Для материала Unreal Engine, помимо последовательностей текстур, я подготовил две пользовательские текстуры: Section Mask и Flame Mask. А также одну текстуру из библиотеки движка: Noise Mask. Section Mask использовалась для анимации раскрытия витража, а Flame Mask и Noise Mask — для создания эффекта мерцания за стеклом.

Далее я создал активы Texture 2DArray из последовательностей для каждой текстуры и добавил их в редактор материалов с помощью узлов TextureSampleParameter2DArray. Затем я организовал входные данные с помощью узлов Named Reroute Declaration для поддержания чёткого рабочего процесса.

Unreal Engine: параметр Flipbook

Чтобы управлять последовательностью, узел TextureSampleParameter2DArray должен получать индекс через вход UVs. Это не работает со стандартным TextureCoordinate, так как индекс должен быть предоставлен как третий компонент UVs.

Для достижения этого я создал простую функцию материала, которая добавляет индекс к TextureCoordinate с помощью AppendVector. Я также добавил функцию циклического переключения последовательностей. Узел Fmod позволяет последовательности зацикливаться, когда ползунок перемещается непрерывно в одном направлении (в данном случае каждые 9 кадров). Узел Floor используется для округления значения вниз, чтобы индекс кадра оставался целым.

Чтобы сделать настройку более надёжной, была реализована обратная зацикливаемость путём введения одного дополнительного узла Fmod, гарантирующего, что последовательность продолжается правильно, даже когда ползунок переходит в отрицательные значения. Далее я создал параметр с плавающей запятой под названием Flipbook Frame для управления индексом кадра в функции материала.

На этом же этапе я подключил актив Material Parameter Collection в качестве глобального контроллера параметров материала с помощью узла Lerp. MPC значительно упростил анимацию материала в Sequencer во время создания кинематографа. Тестирование параметра флипбука в экземпляре материала:

Unreal Engine: параметры раскрытия

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

Функция материала SelectID была применена к Section Mask. Затем каждая область была умножена на свой собственный параметр с плавающей запятой, и результат был смешан с начальной маской из текстуры.

Параметры Initial Mask также были выставлены через коллекцию параметров материала.

Тестирование параметров Initial Mask в экземпляре материала:

Unreal Engine: параметры мерцания света

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

Далее я объединил модульные функции UVShaker и FlickeringPulse в основную функцию материала FlameFlickering, чтобы управлять интенсивностью мерцания и дрожанием UV. Внутри основной функции есть два основных слоя: Flame и Pattern. В слое Flame одна текстура дублируется для применения двух разных настроек дрожания UV, а затем результаты перемножаются.

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

Используя функцию материала FlameFlickering, я реализовал эффекты дрожания тени и мерцания света в эмиссионном канале, а также простой эффект фальшивых каустик в подповерхностном канале.

Я также выставил параметры мерцания света через коллекцию параметров материала.

Тест параметров мерцания света в экземпляре материала:

Завершая работу над материалом, я внёс незначительные художественные усовершенствования в несколько каналов материала. Базовый цвет и Specular были слегка улучшены с помощью текстуры AO, а карта нормалей была усилена с помощью узла FlattenNormal. График материала Unreal Stained Glass в UE:

Заключение

Работа над материалом Unreal Stained Glass была для меня поистине увлекательным опытом. Было интересно увидеть, как анимация простого плоского изображения может превратиться в сложный материал со множеством деталей. В то же время я хотел сохранить ощущение, что он всё ещё выглядит как настоящее витражное стекло, даже если ведёт себя нереалистично.

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

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

С художественной точки зрения одной из самых сложных задач во всём проекте была разработка структуры Unreal Rose Window и создание ощущения гармонии с оригинальным символом. Это был личный проект, и я работал в своём темпе, иногда с длительными перерывами. Создание материала витражного стекла с нуля заняло около четырнадцати дней.

Это включало в себя рисование последовательности в Procreate Dreams, настройку текстур в Substance 3D Designer и создание функционального материала в Unreal Engine 5. На создание полного кинематографического проекта ушло около шести месяцев, включая проектирование, моделирование и создание материалов, настройку освещения, анимацию всего, включая Niagara, а также саундтрек.

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

Я искренне признателен за возможность поделиться этим путешествием, и я надеюсь, что мой проект вдохновит вас исследовать и экспериментировать со своими идеями. Не стесняйтесь связываться со мной на ArtStation, Instagram и LinkedIn.

Александр Каменщиков, художник по играм и VFX

Интервью проведено Глорией Левин