Shader Graph в Unity для начинающих

Узнайте, как создать свой первый шейдер с помощью Unity Shader Graph.

Версия: C# 7.3, Unity 2019.2, Unity

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

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

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

Unity предоставляет Shader Graph, чтобы упростить написание шейдеров при минимальном кодировании или его отсутствии. Лучше всего то, что Shader Graph позволяет легко начать работу с помощью визуального интерактивного интерфейса.

В этом уроке вы прямо сейчас создадите свой первый шейдерный граф в Unity!

Приступая к работе

В этом уроке используется Unity версии 2019.1 и выше. Вы можете скачать версию Unity здесь.

Примечание. Хотя урок предназначен для новичков в Shader Graph, предполагается, что вы знакомы с основами разработки Unity и знакомы с интерфейсом. Если вы новичок в разработке Unity, ознакомьтесь с этим отличным уроком по началу работы в Unity.

Используйте кнопку «Скачать материалы урока» вверху страницы, чтобы скачать нужные файлы для работы. Затем разархивируйте содержимое архива и откройте Intro to Shader Graph Starter в Unity.

Папка RW в окне проекта организована следующим образом:

  • Fonts: шрифты, используемые в сцене.
  • Materials: материалы для сцены.
  • Models: 3D-сетки для игровых элементов и фона.
  • PostFX: эффекты постобработки для рендеринга сцены.
  • Prefabs: различные готовые компоненты.
  • Scenes: игровая сцена.
  • Scripts: пользовательские скрипты для игровой логики.
  • Shaders: графы шейдеров, созданные для этого урока.
  • Sprites: спрайт, используемый как часть инструкций.
  • Textures: карты текстур для игровых элементов и фона.

Теперь загрузите сцену под названием TangramPuzzle из папки Scenes.

Различные элементы игры Tangram в редакторе Unity

Это простая игра под названием Tangram, которая появилась в Китае в 1800-х годах. Цель состоит в том, чтобы преобразовать семь плоских геометрических фигур в стилизованные пиктограммы или силуэты.

Перейдите в режим Play в редакторе, чтобы протестировать демо-игру.

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

Можете ли вы разобраться, как переместить семь элементов, чтобы составить такие фигуры?

Основные фигуры игры Tangram в редакторе Unity

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

Что, если бы вы могли заставить игровой элемент светиться при наведении мыши? Это могло бы улучшить пользовательский интерфейс.

Посветка фигуры игры Tangram при наведении курсора мыши в редакторе Unity

Это отличный шанс продемонстрировать Shader Graph!

Проверка настроек Pipeline для шейдерного графа

Shader Graph работает только с относительно новым конвеером Scriptable Render Pipeline, будь то High-Definition Render Pipeline или Lightweight Render Pipeline.

При создании нового проекта для использования с Shader Graph обязательно выберите правильный шаблон.

Создание нового проекта для использования Shader Graph в Unity

Проект уже настроен для использования Lightweight Render Pipeline. Сначала подтвердите в PackageManager, что у вас установлены пакеты Lightweight RP и ShaderGraph, выбрав Window > PackageManager.

Затем выберите одну из доступных версий и при необходимости используйте кнопку Update. Последняя проверенная версия обычно является самым безопасным выбором.

Подключение Lightweight Render Pipeline в Unity

После обновления пакетов дважды проверьте правильность настроек пайплайна в разделе Edit > Project Settings.

На вкладке Graphics в Scriptable Render Pipeline Settings должно быть указано LWRP-HighQuality. Это позволяет вашему проекту использовать самые высокие настройки по умолчанию для Lightweight Render Pipeline.

Закройте это окно, как только подтвердите, что используете один из ассетов Scriptable Render Pipeline.

Изменение настроек рендеринга для версии выше Unity 2019.2

В версии Unity 2019.3 Lightweight Render Pipeline был пересмотрен и переименован в Universal Render Pipeline. Также были добавлены другие особенности пост-обработки для рендеринга.

Если версия редактора выше, указанной в начале урока, тогда вам нужно произвести некоторые действия для корректной работы рендеринга и шейдеров:

  • В окне Window > PackageManager удалите LightweightRenderPipeline и PostProcessing.
  • Добавьте пакет Universal RP.
  • Удалите все неработающие компоненты из объекта MainCamera и PostProcessing из окна Hieararchy.
  • В объекте Main Camera переключите Layer на Default. В разделе Rendering установите PostProcessing и выберите вариант из списка anti-aliasing.
  • Добавьте компонент Volume, установите параметр mode на Global.
  • Создайте и назначьте Volume Profile, этот компонент отличается в других версиях редактора.
  • В Volume Profile добавьте Bloom, Tonemapping, Color Adjustments, и Vignette. Отрегулируйте настройки так, как они первоначально были в объекте PostProcessing проекта-примера в предыдущих версиях редактора.

Настройки рендеринга для объекта Camera в окне Inspector редактора Unity

Добавление параметров в компонент Volume в окне Inspector редактора Unity

Создание PBR Graph

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

Сначала используйте кнопку Create в окне Project, чтобы сгенерировать новый материал в папке RW / Materials. Выберите Create > Material, затем переименуйте его в Glow_Mat.

Затем в папке RW / Shaders создайте PBR Graph, выбрав Create > Shader > PBR Graph. Это граф шейдера, поддерживающий физически-точный рендеринг или PBR.

Назовите его HighlightShaderGraph.

Создание Shader Graph в Unity

Материал Glow_Mat в настоящее время использует шейдер по умолчанию для LightweightRenderPipeline, который называется LightweightRenderPipeline / Lit.

Выбор материала шейдера в Unity

Измените его, чтобы использовать только что созданный вами новый граф шейдера. Выбрав Glow_Mat, щелкните раскрывающийся список Shader в верхней части окна Inspector и выберите Shader Graphs > HighlightShaderGraph.

Материал Glow_Mat изменится на более светлый оттенок серого, но в остальном останется довольно тусклым. Не волнуйтесь! Вы скоро это исправите.

Теперь дважды нажмите на ассет HighlightShaderGraph или нажмите Open Shader Editor в Инспекторе, чтобы открыть окно Shader Graph.

Редактор Shader Graph в Unity

Вам следует ознакомиться с основными частями этого интерфейса:

  • Main workspace (основное рабочее пространство) — это темно-серая область, в которой вы будете сохранять свои операции с графом. Вы можете нажать правой кнопкой мыши по рабочей области, чтобы увидеть контекстное меню.
  • Node (узел) — это отдельная единица графа. Каждый узел содержит вход, выход или операцию, в зависимости от его портов. Узлы соединяются друг с другом с помощью ребер.
  • Master node (главный узел) — это последний выходной узел графа. В этом примере вы используете вариант рендеринга на основе физических данных, также называемый PBR Master node. Вы можете распознать несколько свойств, таких как Albedo, Normal, Emission и Metallic, как в стандартном шейдере Unity.
  • Blackboard может открывать инспектору определенные части графа. Это позволяет пользователю настраивать определенные параметры без необходимости напрямую редактировать граф.
  • В Main Preview (главное окно предварительного просмотра) интерактивно отображается результат текущего шейдера на сфере.

Соединяя различные узлы вместе, вы можете создать граф шейдера, который Unity компилирует и отправляет на GPU.

Создание Color Node

Во-первых, придайте шейдеру базовый цвет. Это делается путем передачи цветового узла в компонент Albedo главного узла PBR. Щелкните правой кнопкой мыши в области рабочего пространства, чтобы создать первый узел из контекстного меню, выбрав Create Node > Input > Basic > Color.

Создание нового элемента node в Unity

Обратите внимание, что в меню Create Node есть сотни узлов! Поначалу это может показаться ошеломляющим, но вы быстро познакомитесь с наиболее часто используемыми.

Далее перетащите узел по рабочему пространству, используя его строку заголовка. Затем перетащите его куда-нибудь слева от PBR Master node.

Color node позволяет вам определить один цвет. Нажмите на цветовую схему и выберите красивый красный оттенок, например R: 128, G: 5, B: 5.

Чтобы вывести цвет на PBR Master node, перетащите порт Out в порт Albedo, который представляет собой базовый цвет шейдера.

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

Окно Main Preview для отображения эффектов шейдера в Unity

Успех! При написании шейдеров создание простого однотонного шейдера эквивалентно написанию кода Hello, world!

Вы можете этого не осознавать, но создали свой первый шейдер!

Навигация по интерфейсу

Хотя на графе всего пара узлов, сейчас самое время привыкнуть к интерфейсу Shader Graph.

Перетащите узлы и обратите внимание, что ребро остается соединенным между выходным портом Color и входным портом PBR Master.

Узлы могут содержать разные типы данных. Когда вы создали узел, содержащий ввод цвета, вы также можете создать узел, представляющий одно число, выбрав Create Node > Input > Basic > Integer. На самом деле вы ничего не будете делать с этим новым узлом — это только в целях иллюстрации.


Создание отдельного узла с целочисленными данными Shader Graph в Unity

Подключите порт Integer Out к порту Alpha узла PBR Master.

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

  • F: создать контур для выбранного узела или узлов.
  • A: создать контур для всего графа.

Вы также можете использовать кнопки в верхней части окна для переключения между Main Preview и Blackboard. Кнопка Show in Project поможет найти текущий граф шейдера в окне Project.

Как только вы освоитесь с перемещением по графу, произведите некоторую очистку. Вам понадобится только Color node и PBR Master node.

Нажмите правой кнопкой мыши на соединение между узлом Integer и Master, и выберите Delete. Это позволяет отключить узел от графа.

Удаление ребра узла Shader Graph в Unity

Точно так же вы можете полностью удалить узел Integer. Нажмите на узел правой кнопкой мыши и выберите Delete.

Удаление узла Shader Graph в Unity

После этого нажмите на кнопку Save Asset в левом верхнем углу интерфейса. Unity сохранит все изменения, затем скомпилирует и активирует шейдер. Этот шаг требуется каждый раз, когда вы хотите увидеть последние изменения в редакторе.

Теперь вернитесь в окно проекта, затем выберите материал Glow_Mat.

Окно просмотра материала Shader Graph в Unity

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

Теперь перетащите материал Glow_Mat на один из элементов танграма в окне Scene.

Назначение материала элементу в Unity

Как и планировалось, материал и шейдер окрашивают сетку в красный цвет.

Добавление эффекта свечения

Если вы хотите, чтобы материал Glow_Mat имел более эффектное свечение, снова отредактируйте граф шейдера.

В настоящее время у вас есть выход Color, поступающий в Albedo главного PBR Master.

Вы также можете перетащить другой край из Out в Emission. Теперь этот же цвет используется дважды: один раз для основного цвета и еще раз для цвета излучения.

Установка одинакового цвета в Shader Graph как базового и для цвета излучения в Unity

Выходные порты могут иметь несколько ребер, а входные порты — только один.

Теперь переключите раскрывающийся список Mode в узле Color на HDR. Это задействует высокодинамичный диапазон цветов.

Переключение режима на HDR Color для расширенного динамического диапазона цветов в Shader Graph редактора Unity

Затем отредактируйте цветовую схему. В режиме HDR mode вы получаете дополнительную опцию для Intensity (интенсивности цвета). Дважды щелкните значок +1 в нижнем образце или перетащите ползунок примерно на 2,5. Затем сохраните изменения и вернитесь в редактор.

Дополнительный параметр настройки цвета HDR Color Intensity в Shader Graph редактора Unity

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

Теперь выберите игровой объект PostProcessing в Иерархии. Свечение происходит от эффекта Блума.

Затем откройте параметры Bloom и отрегулируйте Intensity (интенсивность) или степень яркости свечения, а также Threshold (порог) или отсечку для начала свечения. В этом примере показано значение 3 и 2 соответственно.

Настройка параметров Intensity и Threshold свойства Bloom для шейдера в Unity

Вау, это потрясающий цвет!

Эффект свечения Bloom для шейдера в Unity

Создание скрипта Highlighter

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

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

Сначала создайте новый скрипт C# в RW / Scripts под названием Highlighter. Это поможет вам переключаться между двумя материалами во время выполнения. Замените все строки в своем скрипте следующими:

using UnityEngine;

// 1
[RequireComponent(typeof(MeshRenderer))]
[RequireComponent(typeof(Collider))]
public class Highlighter : MonoBehaviour
{
    // 2
    // reference to MeshRenderer component
    private MeshRenderer meshRenderer;

    [SerializeField]
    private Material originalMaterial;

    [SerializeField]
    private Material highlightedMaterial;

    void Start()
    {
        // 3
        // cache a reference to the MeshRenderer
        meshRenderer = GetComponent<MeshRenderer>();

        // 4
        // use non-highlighted material by default
        EnableHighlight(false);
    }

    // toggle betweeen the original and highlighted materials
    public void EnableHighlight(bool onOff)
    {
        // 5
        if (meshRenderer != null && originalMaterial != null && 
            highlightedMaterial != null)
        {
            // 6
            meshRenderer.material = onOff ? highlightedMaterial : originalMaterial;
        }
    }
}

Давайте подробнее рассмотрим скрипт:

  1. Скрипт можно применить только к объекту, который содержит MeshRenderer и компонент Collider. Он контролируется добавлением атрибутов [RequireComponent] в начало скрипта.
  2. Это ссылки на MeshRenderer, originalMaterial и highlightedMaterial. Материалы помечены атрибутом [SerializeField], что делает их назначаемыми из инспектора.
  3. В методе Start вы автоматически заполняете MeshRenderer с помощью GetComponent.
  4. Вы вызываете EnableHighlight (false). Это гарантирует, что невыделенный материал будет отображаться по умолчанию. Публичный метод EnableHighlight, который переключает материал средства визуализации, находится прямо ниже. Для определения включенного состояния выделения необходим параметр типа bool, называемый onOff.
  5. Вы защищаете, чтобы предотвратить любые ошибки NullReference
  6. Вы используете тернарный оператор для экономии места.

Добавление событий мыши

Поскольку вы примените это к игровым элементам с прикрепленными MeshColliders, вы можете воспользоваться преимуществами встроенных методов OnMouseOver и OnMouseExit. Добавьте следующее после метода EnableHighlight:

    private void OnMouseOver()
    {
        EnableHighlight(true);
    }

    private void OnMouseExit()
    {
        EnableHighlight(false);
    }

Когда мышь находится над игровым элементом, она вызывает EnableHighlight (true). Аналогичным образом, когда мышь покидает коллайдер, она вызывает EnableHighlight (false).

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

Подсветка игрового элемента

Если вы применили Glow_Mat к каждому элементу, то вам нужно переключить их обратно на материал Wood_Mat в редакторе. Вместо этого вы будете использовать Highlighter, чтобы включить свечение во время выполнения.

Сначала выберите семь объектов внутри преобразования Танграма, которые представляют отдельные формы игровых элементов. Затем добавьте скрипт Highlighter ко всем сразу.

Назначение скрипта Highlighter для элементов в Unity

Затем в поле Original Material перетащите материал Wood_Mat, в поле Highlighted Material перетащите материал Glow_Mat. Наконец, войдите в режим Play и оцените свою работу.

Хорошо! Когда вы наводите указатель мыши на элемент танграма, он светится ярко-красным цветом. Отодвиньте мышь от его элементов, и он вернется в исходное состояние.

Проверка скрипта Highlighter для шейдера в Unity

Вы по-прежнему можете играть в игру в обычном режиме, но теперь эффект выделения добавляет немного визуального интереса, фокусируя внимание пользователя.

Использование узлов текстуры

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

Сначала отредактируйте HighlightShaderGraph, дважды нажав на него мышью или выбрав Open Shader Editor в инспекторе.

Удалите узел цвета, нажмите на него правой кнопкой мыши и выберите Delete. Вы создадите все с нуля.

Вместо одного цвета вы вставите текстуру с помощью узла Sample Texture 2D.

Создайте узел либо из контекстного меню, щелкнув правой кнопкой мыши, затем выберите Create Node или используя горячую клавишу пробела. Выберите Input > Texture > Sample Texture 2D.

Узел Sample Texture 2D считывает информацию о цвете из ассета текстуры и затем выводит его значения RGB.

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

Выберите ассет текстуры WoodAlbedo.

Узел текстуры в Shader Graph редактора Unity

Подключите RGBA выходного порта Sample Texture 2D к порту PBR Master Albedo.

Вуаля! Сфера предварительного просмотра теперь показывает текстуру дерева на поверхности.

Окно Shader Preview с установленным материалом текстуры в Shader Graph редактора Unity

Если вы добавите карту нормалей, то вы сможете добавить больше деталей поверхности. Сначала создайте еще один узел Sample Texture 2D, выбрав Create Node > Input > Texture > Sample Texture 2D.

Выберите текстуру WoodNormal во входном порту текстуры.

Создание узла нормали в Shader Graph редактора Unity

Измените раскрывающийся список Type с Default на Normal.

Выведите значения RGBA в порт Normal главного PBR Master.

Настройки Normal PBR Master в окне предварительного просмотра материалов шейдера в Unity

Сфера в окне Main Preview теперь должна выглядеть более грубой. Карта нормалей имитирует небольшие углубления и выемки на поверхности. Это помогает улучшить внешний вид текстуры древесины.

Примечание. Тип данных каждого порта указан в скобках рядом с портом. (T2) означает, что порт совместим с двумерной текстурой, а (4) означает, что порт использует Vector4. В зависимости от контекста Shader Graph достаточно умен, чтобы игнорировать лишние значения с плавающей запятой.

Добавление эффекта Френеля

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

Вместо того, чтобы сделать весь объект равномерным, вы можете ограничить свечение только краями. Этого можно добиться с помощью, так называемого эффекта Френеля.

Создайте новый узел, щелкнув правой кнопкой мыши или используя горячую клавишу пробела, затем выберите Create Node > Math > Vector > Fresnel Effect.

Этот новый узел показывает сферу с белым светящимся кольцом по окружности. Вы можете отрегулировать ширину его ореола с помощью вводного порта Power. Щелкните и перетащите метку X слева от поля или введите определенные числа.

Большие значения делают ореол очень тонким, а меньшие — очень широким. Вы можете использовать значение 4 для более тонкого свечения контура.

Создание узла с эффектом Френеля в Shader Graph редактора Unity

Чтобы передать этот ореол материалу, вы подключаете выход эффекта Френеля к Emission (излучению) главного PBR Master.

Эффект Френеля с рассеиванием в окне предварительного просмотра материала шейдера в Unity

MainPreview теперь показывает деревянную сферу с ярко-белым ореолом из-за эффекта Френеля.

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

Эффект Френеля на обычном примере в реальном окружении

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

Умножение на цвет

Добавить цвет к светящемуся контуру так же просто, как выполнить базовые расчеты цветов.

Создайте новый цветовой узел, который будет определять цвет светящегося кольца. Используйте правый щелчок мыши или пробел, чтобы открыть контекстное меню, затем выберите Create node > Input > Basic > Color. Переключите цветовой режим на HDR.

Выберите цвет для обозначения цвета выделения. Например, выберите здесь красивый ярко-зеленый цвет, R: 5, G: 255, B: 5.

Увеличьте Intensity до 3,5.

Установка параметра Color Intensity в световой схеме HDR Color редактора Unity

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

Создайте узел Multiply нажав правой кнопкой мыши, затем выберите Create node > Math > Basic > Multiply.

Удалите существующую границу между Эффектом Френеля и Master PBR. Вместо этого подключите выход эффекта Френеля к входу A узла Multiply.

Соедините Out узла Color со входом B узла Multiply.

Создание множественного узла Shader Graph в Unity

И наконец, подключите порт Multiply Out к Emission порта PBR Master. Вуаля! Вы можете видеть ярко-зеленый цвет HDR, окружающий сферу в окне Main Preview.

Визуальный эффект, созданный соединеннием порта Multiply Out с параметром Emission порта PBR Master в Shader Graph редактора Unity

Помните, что вы можете использовать силу эффекта Френеля для увеличения или уменьшения ореола. Меньшее значение 1,5 дает широкое зеленое свечение.

Для этого примера игры подойдет значение от 4 до 5, но не стесняйтесь экспериментировать со своими собственными значениями.

Изменение настроек Shader Graph отображается в окне предварительного просмотра материалов шейдера в редакторе Unity

Сохраните граф шейдера и вернитесь в редактор, вы готовы увидеть HighlightShaderGraph в действии.

Перейдите в режим Play.

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

Итоговый результат подсветки элементов при помощи шейдеров в Unity

Добавление свойств Blackboard

Если вы хотите изменить внешний вид эффекта свечения, вам нужно вернуться в окно редактора Shader Graph и внести эти изменения. Например, вы можете захотеть увеличить или уменьшить яркий ореол, используя силу эффекта Френеля.

Это не очень удобно, если вы хотите протестировать различные изменения. К счастью, в Shader Graph есть концепция свойств.

Вы можете публично открыть часть графа в Инспекторе, что позволит вам вносить небольшие изменения в интерактивном режиме. Это делается с помощью интерфейса Blackboard.

Вернитесь к Shader Graph и убедитесь, что Blackboard виден. Переключите кнопку Blackboard в правом верхнем углу, если она скрыта.

Добавление свойств базовой текстуры и карты нормалей

Теперь вы собираетесь выставить как базовую текстуру, так и карту нормалей, чтобы они были доступны из Инспектора.

Нажмите на значок + в правом верхнем углу Blackboard. В раскрывающемся списке выберите Texture 2D. Запись должна появиться на Blackboard. Переименуйте его в BaseTexture.

Свойство Texture 2D в Shader Graph редактора Unity

Убедитесь, что параметр exposed включен. Если вы решили раскрыть свойство, оно станет общедоступным и доступно в Инспекторе.

Установка параметра Expose в свойствах HighlightShaderGraph в редакторе Unity

Чтобы добавить свойство на граф, просто перетащите его за метку и поместите в рабочую область. Оставьте его где-нибудь слева от узла Sample Texture 2D.

Подключите порт BaseTexture к входному порту текстуры на SampleTexture 2D, который подключается к Albedo. Это заменит предыдущее установленное значение.

Повторите тот же процесс для карты нормалей. Щелкните значок + и создайте новую Texture 2D. Переименуйте его в Normal Map.

Перетащите его в рабочую область и вставьте в образец Texture 2D для карты нормалей.

Свойства карты нормалей Normal Map в Shader Graph редактора Unity

Нажмите Save Asset и вернитесь в главное окно редактора.

Выберите материал Glow_Mat, затем обратите внимание на два дополнительных поля в Инспекторе: Base Texture и Normal Map.

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

Просмотр эффекта настройки шейдера материала в окне Inspector редактора Unity

Выберите текстуры WoodAlbedo и WoodNormal для BaseTexture и NormalMap соответственно.

Текстуры дерева теперь корректно отображаются под светящимися краями.

Просмотр эффекта настройки шейдера материала с текстурой в окне Inspector редактора Unity

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

Добавление свойств Glow Size и Glow Color

Теперь вы сделаете видимыми и другие типы свойств на Blackboard. Например, было бы полезно разрешить пользователю регулировать значение мощности эффекта Френеля.

Щелкните значок + на Blackboard и создайте свойство Vector1. Это представляет собой единственный параметр с плавающей запятой.

Переименуйте его в GlowSize.

Вы можете ограничить, какие значения могут быть введены в это свойство, преобразовав его в ползунок. Переключите параметр mode на значение slider, затем установите минимальное значение 0,05 и максимальное значение 6, чтобы определить диапазон. Установите значение по умолчанию на 5.

Свойство Glow Size в Shader Graph редактора Unity

Перетащите свойство GlowSize в рабочую область. Подключите выходной порт к входу power эффекта Френеля.

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

Свойство Glow Color в Shader Graph редактора Unity

Выберите узел Color, затем щелкните правой кнопкой мыши и выберите Convert to Property.

Узел Color преобразуется в свойство цвета на Blackboard, которое больше нельзя редактировать непосредственно на графе. Переименуйте это свойство в GlowColor.

Итоговые настройки Shader Graph в редакторе Unity

Нажмите на Save Asset и вернитесь в главное окно редактора.

Окно редактора Shader Graph в Unity

Выберите материал Glow_Mat в окне проекта. Вы должны увидеть ползунок GlowSize и цветовой код GlowColor, доступные в Инспекторе.

Установка параметров GlowSize и GlowColor в окне предварительного просмотра материалов шейдера редактора Unity

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

Итоговый вариант игры с подсветкой шейдерами в редакторе Unity

Теперь у вас есть подсветка для объектов, сделанная при помощи шейдеров, которую вы можете настроить в окне Inspector по своему усмотрению!

Куда двигаться дальше

Поздравляю! Теперь вы можете создавать свои собственные шейдеры с помощью Shader Graph!

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

Хотя есть буквально сотни узлов, которые нужно исследовать, этот урок должен помочь вам начать работу с Shader Graph.

Если у вас есть вопросы или предложения, присоединяйтесь к обсуждению в комментариях.

Автор перевода: Jean Winters

Источник: Shader Graph in Unity for Beginners

Смотрите также:

Введение в шейдеры UnityUnity: Введение в шейдеры


Unity: Поиск пути с использованием NavMeshПоиск пути с использованием NavMesh в Unity


Комментировать

Почта не публикуется.Обязательные поля отмечены *