Создание шейдеров с помощью конструктора шейдеров в Visual Studio

  • Статья

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

Создание базовых плоских шейдеров цветов

Конструктор шейдеров и язык шейдера с направленным графом (DGSL) можно использовать для создания шейдера с плоским цветом. Этот шейдер задает постоянное значение цвета RGB в качестве окончательного цвета. Шейдер с простым цветом можно реализовать, записав значение константы цвета RGB в окончательный выходной цвет.

Перед началом убедитесь, что отображаются окно Свойства и Панель элементов.

  1. Создайте построитель текстуры DGSL, с которым будете работать. Дополнительные сведения о добавлении шейдера DGSL в проект см. в подразделе "Начало работы" раздела Конструктор шейдеров.

  2. Удалите узел Цвет точки. Используя средство Выбрать, выберите узел Цвет точки и в строке меню выберите Изменить>Удалить.

  3. Добавьте в граф узел Константа цвета. В окне Панель элементов в разделе Константы выберите Константа цвета и переместите элемент в область конструктора.

  4. Укажите значение цвета для узла Константа цвета. Используя средство Выбрать, выберите узел Константа цвета, а затем в окне Свойства в свойстве Вывод укажите значение цвета. Для оранжевого укажите значение (1.0, 0,5, 0,2, 1.0).

  5. Соедините константу цвета с окончательным цветом. Чтобы создать соединения, переместите терминал RGB узла Константа цвета к терминалу RGB узла Окончательный цвет, а затем переместите терминал Альфа узла Константа цвета к терминалу Альфа узла Окончательный цвет. В результате для окончательного цвета задается константа цвета, определенная в предыдущем шаге.

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

Примечание.

На рисунке был указан оранжевый цвет для лучшей демонстрации эффекта шейдера.

Shader graph and its result on a 3-D model

Некоторые фигуры могут лучше подходить для предварительного просмотра некоторых шейдеров. Дополнительные сведения о том, как предварительно просматривать шейдеры в конструкторе шейдеров, см. в разделе Конструктор шейдеров.

Создание базовых шейдеров Ламберта

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

Модель освещения Ламберта включает окружающее и направленное освещение для затенения объектов в трехмерной сцене. Окружающие компоненты обеспечивают базовый уровень освещения в трехмерной сцене. Направленные компоненты обеспечивают дополнительное освещение из направленных (и удаленных) источников света. Окружающее освещение в равной степени затрагивает все поверхности в сцене, независимо от их ориентации. Для определенной поверхности это совокупность ее окружающего цвета, а также цвета и интенсивности окружающего освещения в сцене. Направленное освещение влияет на каждую из поверхностей в сцене по-разному, в зависимости от их ориентации по отношению к направлению источника света. Оно представляет собой совокупность диффузного цвета и ориентации поверхности, а также цвета, интенсивности и направления источников света. Поверхности, обращенные непосредственно к источнику света, получают максимальный отражающий вклад, а поверхности, обращенные непосредственно от источника света, не получают никакого вклада. В модели освещения Ламберта окружающий компонент и один или несколько направленных компонентов объединяются для определения общего вклада по диффузному цвету для каждой точки на объекте.

Перед началом убедитесь, что отображаются окно Свойства и Панель элементов.

  1. Создайте построитель текстуры DGSL, с которым вы будете работать. Дополнительные сведения о добавлении шейдера DGSL в проект см. в подразделе "Начало работы" раздела Конструктор шейдеров.

  2. Отсоедините узел Цвет точки от узла Окончательный цвет. Выберите терминал RGB узла Цвет точки, а затем выберите Разорвать связи. Оставьте терминал Альфа подсоединенным.

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

  4. Соедините узел Цвет точки с узлом Ламберт. В режиме Выбрать переместите терминал RGB узла Цвет точки к терминалу Диффузный цвет узла Ламберт. Это соединение предоставляет узлу Ламберта интерполированный диффузный цвет пикселя.

  5. Соедините вычисленное значение цвета с окончательным цветом. Переместите терминал Вывод узла Ламберт к терминалу RGB узла Окончательный цвет.

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

Примечание.

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

The Lambert shader graph and a preview of its effect.

На приведенном ниже рисунке шейдер, описанный в этом документе, применяется к трехмерной модели.

Lambert lighting applied to a model.

Создание базовых шейдеров Phong

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

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

Дополнительные сведения о модели освещения по методу Ламберта см. в разделе Практическое руководство. Создание простейшего шейдера освещения с использованием модели Ламберта.

Перед началом убедитесь, что отображаются окно Свойства и Панель элементов.

  1. Создайте шейдер Ламберта, как описано в разделе Практическое руководство. Создание простейшего шейдера освещения с использованием модели Ламберта.

  2. Отсоедините узел Ламберт от узла Окончательный цвет. Выберите терминал RGB узла Ламберт, а затем выберите Разорвать связи. Таким образом освобождается место для узла, который добавляется на следующем шаге.

  3. Добавьте в граф узел Добавить. В окне Панель элементов в разделе Математика выберите Добавить и переместите элемент в область конструктора.

  4. Добавьте в граф узел Отражающий. В окне Панель элементов в разделе Служебная программа выберите Отражающий и переместите элемент в область конструктора.

  5. Добавьте добавочное отражение. Переместите терминал Вывод узла Отражающий к терминалу X узла Добавить, а затем переместите терминал Вывод узла Ламберт к терминалу Y узла Добавить. Эти соединения объединяют итоговые диффузные и отражающие вклады для цвета пикселя.

  6. Соедините вычисленное значение цвета с окончательным цветом. Переместите терминал Вывод узла Добавить к терминалу RGB узла Окончательный цвет.

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

Примечание.

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

Phong Shader graph and a preview of its effect.

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

На приведенном ниже рисунке шейдер, описанный в этом документе, применяется к трехмерной модели. Для свойства MaterialSpecular задается значение (1.00, 0.50, 0.20, 0.00), а для его свойства MaterialSpecularPower — значение 16.

Примечание.

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

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

Phong lighting applied to a model

Создание базовых шейдеров текстур

Используйте конструктор шейдеров и язык шейдера с направленными графами (DGSL) для создания шейдера с одной текстурой. Этот шейдер задает окончательный цвет непосредственно в RGB-значениях и альфа-факторах, взятых из текстуры.

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

Перед началом убедитесь, что отображаются окно Свойства и Панель элементов.

  1. Создайте построитель текстуры DGSL, с которым будете работать. Дополнительные сведения о добавлении шейдера DGSL в проект см. в подразделе "Начало работы" раздела Конструктор шейдеров.

  2. Удалите узел Цвет точки. В режиме Выбрать выберите узел Цвет точки и в строке меню выберите Изменить>Удалить. Таким образом освобождается место для узла, который добавляется на следующем шаге.

  3. Добавьте узел Образец текстуры в граф. В окне Панель элементов в разделе Текстура выберите Образец текстуры и переместите этот элемент в область конструктора.

  4. Добавьте узел Координата текстуры в граф. В окне Панель элементов в разделе Текстура выберите Координата текстуры и переместите этот элемент в область конструктора.

  5. Выберите текстуру, которую требуется применить. В режиме Выбрать выберите узел Образец текстуры и в окне Свойства укажите текстуру, которую требуется использовать, с помощью свойства Имя файла.

  6. Сделайте текстуру общедоступной. Выберите узел Образец текстуры, а затем в окне Свойства задайте для свойства Доступ значение Общедоступный. Теперь можно задать текстуру из другого средства, такого как Редактор моделей.

  7. Соедините координаты текстуры с образцом текстуры. В режиме Выбрать переместите терминал Вывод узла Координата текстуры к терминалу UV узла Образец текстуры. Это соединение обеспечивает выборку текстуры по указанным координатам.

  8. Соедините образец текстуры с окончательным цветом. Переместите терминал RGB узла Образец текстуры к терминалу RGB узла Окончательный цвет, а затем переместите терминал Альфа узла Образец текстуры к терминалу Альфа узла Окончательный цвет.

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

Примечание.

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

Texture shader graph and a preview of its effect

Некоторые фигуры могут лучше подходить для предварительного просмотра некоторых шейдеров. Дополнительные сведения о том, как предварительно просматривать шейдеры в конструкторе шейдеров, см. в разделе Конструктор шейдеров.

Создание шейдеров текстур серого уровня

Используйте конструктор шейдеров и язык шейдера с направленным графом (DGSL) для создания шейдера текстур серого масштаба. Этот шейдер изменяет значение цвета RGB в образце текстуры, а затем использует его вместе с неизмененным значением альфа-фактора, чтобы задать окончательный цвет.

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

Перед началом убедитесь, что отображаются окно Свойства и Панель элементов.

  1. Создайте простейший шейдер текстуры, как описано в разделе Практическое руководство. Создание простейшего шейдера текстуры.

  2. Отсоедините терминал RGB узла Образец текстуры от терминала RGB узла Окончательный цвет. В режиме Выбрать выберите терминал RGB узла Образец текстуры, а затем выберите Разорвать связи. Таким образом освобождается место для узла, который добавляется на следующем шаге.

  3. Добавьте в граф узел Приведение к серому. В окне Панель элементов в разделе Фильтры выберите Приведение к серому и переместите элемент в область конструктора.

  4. Вычислите значение серого с помощью узла Приведение к серому. В режиме Выбрать переместите терминал RGB узла Образец текстуры к терминалу RGB узла Приведение к серому.

    Примечание.

    По умолчанию узел Приведение к серому полностью приводит к серому цвет ввода и использует стандартные весовые коэффициенты освещенности для преобразования в оттенки серого. Режим работы Приведение к серому можно сменить, изменив значение свойства Освещенность либо приведя цвет ввода к серому лишь частично. Чтобы частично привести цвет ввода к серому, укажите скалярное значение в диапазоне [0,1) для терминала Процент узла Приведение к серому.

  5. Соедините значение цвета в оттенках серого с окончательным цветом. Переместите терминал Вывод узла Приведение к серому к терминалу RGB узла Окончательный цвет.

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

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

Grayscale texture shader graph and a preview of its effect

Создание градиентных градиентов на основе геометрии

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

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

Перед началом убедитесь, что отображаются окно Свойства и Панель элементов.

  1. Создайте построитель текстуры DGSL, с которым вы будете работать. Сведения о добавлении шейдера DGSL в проект см. в разделе "Начало работы" в конструкторе шейдеров.

  2. Отсоедините узел Цвет точки от узла Окончательный цвет. Выберите терминал RGB узла Цвет точки, а затем выберите Разорвать связи. Таким образом освобождается место для узла, который добавляется на следующем шаге.

  3. Добавьте в граф узел Умножение. В окне Панель элементов в разделе Математика выберите Умножение и переместите элемент в область конструктора.

  4. Добавьте в граф узел Вектор маски. В окне Панель элементов в разделе Служебная программа выберите Вектор маски и переместите элемент в область конструктора.

  5. Укажите значения маски для узла Вектор маски. В режиме Выбрать выберите узел Вектор маски, а затем в окне Свойства задайте для свойства Зеленый / Y значение True, а для свойств Красный / X, Синий / Z и Альфа / W — значение False. В этом примере свойства Красный / X, Зеленый / Y и Синий / Z соответствуют компонентам X, Y и Z узла Положение в мировых координатах, а Альфа / W не используется. Поскольку только свойство Значение / Y установлено в значение True, после маскировки останется только компонент Y входного вектора.

  6. Добавьте в граф узел Положение в мировых координатах. В окне Панель элементов в разделе Константы выберите Положение в мировых координатах и переместите элемент в область конструктора.

  7. Замаскируйте положение фрагмента в абсолютном пространстве. В режиме Выбрать переместите терминал Вывод узла Положение в мировых координатах к терминалу Вектор узла Вектор маски. Это соединение маскирует позицию фрагмента, чтобы игнорировать компоненты X и Z.

  8. Умножьте константу цвета RGB на замаскированное положение в абсолютном пространстве. Переместите терминал RGB узла Цвет точки к терминалу Y узла Умножение, а затем переместите терминал Вывод узла Вектор маски к терминалу X узла Умножение. Это соединение масштабирует значение цвета по высоте пикселя в абсолютном пространстве.

  9. Соедините масштабированное значение цвета с окончательным цветом. Переместите терминал Вывод узла Умножение к терминалу RGB узла Окончательный цвет.

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

Примечание.

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

Gradient Shader graph and a preview of its effect

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

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

Gradient effect applied to a 3-D terrain model

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

Связанный контент