Введение в UI Shader Graph
Вы можете создавать шейдеры с помощью Shader Graph для выполнения следующих действий:
- Настраиваемые эффекты кнопок: добавьте свет, размытие или интерактивные изменения цвета кнопок.
- Текстовое отображение: создайте четкий, масштабируемый текст с контурами.
- Анимированные UI элементы: используйте шейдеры для анимации градиентов или текстур.
- Цветовая обработка: применение эффектов, таких как оттенки серого, сепия или коррекция цвета к изображениям в UI.
Важно: UI Shader Graph предназначен для создания шейдеров, которые рендируют UI элементы сетки напрямую. Вы не можете использовать его для создания пользовательских фильтров, которые являются пост-обрабатывающими шейдерами, которые применяют эффекты к рендируемым целям, содержащим поддеревья визуальных элементов. Это фундаментально разные подходы к рендерингу, и вы не можете их взаимозаменять.
UI-специфическое отображение
Когда вы создаете шейдер для UI элементов и открываете его в редакторе Shader Graph, он обычно включает узел Фрагмент и узел Вершина.
Узел Fragment имеет входы для Base Color и Альфа, которые определяют цвет и прозрачность шейдера.
Окно Main Preview показывает результат работы шейдера. Оно немедленно отображает, как пользовательские шейдеры влияют на элементы UI, и позволяет сравнивать состояния до и после.
Раздел No Shader показывает примеры графиков без применения шейдера. Это служит базой для сравнения с эффектами шейдера. Он включает:
- Пример текстурного графа
- Пример градиентного графика
- График с однотонным фоном и рамкой с текстом SDF внутри него. Шрифты Signed Distance Fields (SDF) обычно используются для резкого, масштабируемого текста, который хорошо выглядит в различных размерах, и они отображаются без атласов текстур высокого разрешения.
- Граф с одноцветным фоном и рамкой, в которой расположен текст битмапа. Битмапные шрифты представляют собой пиксельные шрифты, отображаемые с помощью атласа текстур.
В разделе With Shader представлены те же примеры графов, что и в разделе No Shader, но с применённым шейдером. Это позволяет сравнить исходный внешний вид с результатом после изменения шейдера. При настройке шейдера предварительный просмотр обновляется в реальном времени, поэтому влияние изменений на каждый элемент UI можно проверить сразу.
Один шейдер для нескольких типов рендеринга
Сетка UI Toolkit может содержать треугольники, которые соответствуют различным типам рендеринга (текст, сплошные цвета, текстуры, градиенты). В отличие от обычных систем, которые используют отдельные шейдеры для каждого типа рендеринга, UI Toolkit управляет всеми типами рендеринга в рамках одного шейдера для оптимальной производительности CPU.
Для размещения нескольких типов рендеринга, UI Shader Graph предоставляет специализированные узлы, которые позволяют ветвить логику шейдера на основе текущего типа рендеринга.
Тип отображения Узел ветки
Ключевым инструментом является узел Render Type Branch, который позволяет определить различные поведения для сплошных цветов, текстур, SDF и растрового текста, и градиентов в пределах одного шейдера.
Когда вы добавляете узел Render Type Branch, он включает все входные порты для каждого типа рендеринга со значениями по умолчанию. Каждый входной порт узла Render Type Branch соответствует определенному типу рендеринга. Вы можете подключить различные узлы к каждому порту, чтобы определить, как обрабатывается каждый тип рендеринга, а затем подключить выходы узла Render Type Branch к входам узла Fragment для определения окончательного вида шейдера.
На следующей диаграмме показан простой пример назначения разного цвета каждому типу рендеринга с помощью Ветвь типа рендеринга узел:
В этом примере каждый тип рендеринга получает единый цвет: красный для единого цвета, так что фон и рамка кнопок выглядят красными. Аналогичным образом, текст SDF выглядит синим, в то время как текст битмапа выглядит фиолетовым; текстура выглядит зеленой, в то время как векторное изображение выглядит синим.
В следующей таблице кратко описаны все типы отображения, к чему они применяются и как они отображаются в окне Main Preview.
| Тип изображения | Применяется к | Внешний вид в главном предварительном просмотре |
|---|---|---|
| Твердые | Одноцветные фоны и рамки элементов UI | Фон и граница SDF и битмапных графов |
| Текстура | Текстурная графика | Текстурный граф |
| SDF текст | Отображение текста с использованием шрифтов Signed Distance Fields (SDF) | SDF текст в SDF графиках |
| Текст растровой карты | Отображение текста с использованием растровых шрифтов | Текст в растровых графиках |
| Градиент | Векторная графика | Градиентный граф |
Советы: Если вы хотите Ветвь типа рендеринга чтобы узел добавлялся автоматически при создании нового шейдера, вы можете использовать один из следующих способов: UI Shader Graph шаблоны из Создать > Shader Graph > Из шаблона > UI.
Узел типа отображения
Узел Тип отображения выводит текущий тип рендеринга, обрабатываемый шейдером. Это позволяет реализовать условную логику, основанную на типе рендеринга. Например, вы можете использовать вывод узла Тип отображения с узлами сравнения или ветвления, чтобы применить определенные эффекты только к определенным типам рендеринга.
Узлы по умолчанию для каждого типа отображения
Хотя вы можете использовать любой узел в своих пользовательских шейдерах, UI Shader Graph предоставляет узлы по умолчанию для каждого типа рендеринга. Каждый узел по умолчанию представляет реализацию по умолчанию для своего типа ветки. Вы можете использовать их в качестве отправных точек и комбинировать их с другими узлами для создания желаемых визуальных эффектов.
- По умолчанию Твердые
- Текстура по умолчанию
- Градиент по умолчанию
- Текст по умолчанию
- По умолчанию SDF Текст
На следующей графике показано подключение узлов по умолчанию к каждому порту Ветвь типа рендеринга узел:
Примечание: Если входное значение Ветвь типа рендеринга узел не подключен, узел автоматически использует значение по умолчанию для этого входа.
Для наилучшей производительности оставляйте вход отключенным, если вы хотите, чтобы он использовал значение по умолчанию, вместо того, чтобы подключать его к выходам узлов, таких как узел Default Solid или узел Default Texture. Узел более эффективно обрабатывает ветвление, когда вы отключаете входы, что оптимизирует для всех типов отображения.
Настройка типов отображения
Чтобы настроить внешний вид каждого типа отображения, измените вывод из узлов по умолчанию перед подключением их к Ветвь типа рендеринга узел. Например, вы можете добавить узел цвета умножения между узлами Твердое по умолчанию узел и Ветвь типа рендеринга Вы также можете цеплять дополнительные узлы для смешивания цветов, применения эффектов или анимации свойств.
На следующем графике используется узел UV Distortion для создания эффекта анимационной деформации, текстурам применяется фиолетовый оттенок, а текст, растровый текст и градиенты SDF отображаются по умолчанию:
Входные узлы, специфичные для UI
UI Shader Graph содержит несколько узлов специально для элементов UI, предоставляя информацию о текущем элементе UI, который они отображают:
- Текстура элемента UV: Координаты текстуры для выборки назначенной текстуры.
- Компоновка элемента UV: координаты UV внутри прямоугольника компоновки элемента.
- Размер текстуры элемента: Размер назначенной текстуры.
На следующем графике используется узел Element Texture UV, чтобы обеспечить, что искажение UV применяется конкретно к текстуре элемента UI.
Узел текстуры элемента образца
Узел Sample Element Texture позволяет вам взять образец текстуры в конкретных координатах UV. Вы можете использовать этот узел для нескольких образцов текстуры, назначенной элементу, например, для создания сложных визуальных эффектов или для манипулирования текстурой различными способами.
Примечание: Текстура, назначенная элементу, является текстурой, которую использует элемент UI. Это может быть текстура шрифта, изображение фона элемента, исходное изображение, назначенное элементу Изображение, или текстура, предоставленная через MeshGenerationContext.DrawMesh в пользовательском коде отображения.
На следующем графике используется узел Sample Element Texture для создания эффекта, основанного на текстуре:
Этот граф шейдера семплирует текстуру элемента дважды: один раз нормально и один раз с его UVs смещением (0.1, 0.1). Два семплированных цвета затем объединяются вместе, чтобы создать эффект дубля и дублирования текстуры:
