Шейдер меха на Web. GL 2 / Хабрахабр. Идея. Новый стандарт Web. GL 2 стал недавно доступен в последних версиях Firefox и Chrome, так что возникло желание опробовать некоторые новые возможности. Одна из наиболее полезных и востребованных функций Web.

GL 2 (и Open. GL ES 3. Эта фича позволяет уменьшить количество вызовов отрисовки (draw calls) путем многократной отрисовки одной и той же геометрии с измененными параметрами. Эта функция присутствовала и в некоторых реализациях Web. GL 1, но требовала наличия определенного расширения.

Однако, с появлением DX10+ появились новые типы шейдеров: Geometry Shader, Domain Shader, Hull Shader, Compute Shader. В DX10 (именно эту версию CS мы используем, для поддержки. Он доступен с версии 3.0. Microsoft DirectX и версии Shader Model. Но обновление DirectX 9.0c включает Pixel Shader 3.0.

Наиболее часто эта функция применяется для создания систем частиц и растительности, но также довольно часто она используется для симуляции меха. Концепт и демо. Есть довольно много различных подходов в симуляции меха в Open. GL, но данная реализация основана на методике, описанной в этом видео- уроке. Несмотря на то что в нем описано создание шейдера для Unity, подробные и наглядные пошаговые инструкции из этого видео были взяты за основу создания Open. GL ES шейдера с нуля. Если вы не знакомы с общими принципами симуляции меха, то рекомендуем потратить 1.

Все графические материалы для демо были созданы с нуля (просто глядя на фото разных образцов шерсти). Эти текстуры весьма просты и их создание не требовало каких- либо особых навыков в создании реалистичных текстур. Просмотреть готовую демку можно здесь. Если браузер не поддерживает Web. GL 2 (например, на данный момент мобильные браузеры поддерживают только Web. GL 1), то вот видео демки: Реализация. Чтобы наглядно показать как работает симуляция меха, начнем с рендеринга двух дополнительных слоев меха с достаточно большой толщиной (расстоянием между слоями).

Допустим, шейдер для DirectX 9, OpenGL и OpenGL ES 2.0 будет бесполезен для игровых. 9 — для графических процессоров с SM3.0 и выше — ещё долгое время. Так как такие устройства обычно совместимы с OpenGL ES 3.0, . Программа или игра не запускаются, сообщая об отсутствии у моей видеокарты определенных функций (TnL, шейдеров и тому подобного). Ошибка 81110001: «Шейдеры версии 3.0 не поддерживаются». Минимальные: Nvidia GeForce серия 6XXX и выше; AMD Radeon серия 1XXX и выше . Эмулятор шейдеров скачать: http:// Ваша видеокарта. Поддержка DirectX 9.0 Pixel Shader 3.0; Полная поддержка контроля выполнения. MRT (вывод данных из одного пиксельного шейдера в несколько текстур). Direct3D 10 — набор API функций для взаимодействия с видеокартой; поддерживается аппаратно видеокартами класса NV GeForce 8x00, ATI Radeon 2x00 и выше. Direct3D 10 (D3D10) — компонент интерфейса программирования приложений (англ. API) DirectX 10, 10-я версия Direct3D, преемник Direct3D 9.

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

И достаточно реалистичный конечный результат с использованием 2. В нашей демке используется 5 различных предустановленных параметров — 4 меха и один мох. Все они рендерятся одними и теми же шейдерами но с различными заданными параметрами. Сперва рендерится куб с той же диффузной текстурой, что используется и для всех слоев меха. Однако он должен быть затемнен для того чтобы он сливался с первым слоем меха, так что цвет из текстуры множится на цвет начальный цвет меха. Здесь используется простейший шейдер который просто берет цвет из тектуры и множит его на другой цвет.

Далее начинается отрисовка слоев меха. Они прозрачные и потому требуют подбора корректного режима смешивания цветов для того, чтобы выглядеть реалистично. Использование обычной gl. Blend. Func() приводило к либо чересчур ярким, либо же слишком тусклым цветам меха, так как этот режим влияет на альфа канал и таким образом искажает цвета.

Функция gl. Blend. Func. Separate() позволяет задавать различные режимы смешивания цвета для RGB и альфа- каналов фрагментов и используя ее удалось сохранить альфа- канал без изменений (он полностью контролируется шейдером) и в то же время корректно смешивать цвет каждого слоя меха с самим собой и другой геометрией. В демке используется следующий режим смешивания цветов: gl. Func. Separate(gl. SRC. Отрисовка всего меха реализована одним вызовом — вся работа по дублированию геометрии выполняется в одном шейдере.

Видеокарта без участия драйверов повторяет отрисовку геометрии заданное количество раз и, следовательно, нет затрат на дополнительные вызовы Open. Инструкция По Установке Гбо На Ваз 2109. GL команд. Все последующие разъяснения относятся только к этому шейдеру. Синтаксис GLSL 3.

Web. GL 2 и Open. GL ES 3. 0, несколько отличается от GLSL 1. Чтобы создать слои меха, шейдер смещает каждую вершину в направлении нормали. Это дает некоторую гибкость настройки направления укладки шерсти, ведь нормали модели можно при желании наклонить (в демке нормали перпендикулярны основной геометрии). Из встроенной переменной gl. Чем больше это значение, тем дальше смещается вершина: float f = float(gl. Этот эффект достигается путем постепенного изменения прозрачности слоев.

Также, для симуляции ambient occlusion мех должен быть темнее у основания и светлее на поверхности. Типичными параметрами для меха является начальный цвет . Таким образом мех начинается полностью черным и заканчивается цветом диффузной текстуры, в то время как прозрачность увеличивается от полностью непрозрачного слоя до полностью прозрачного. Сперва в вертексном шейдере вычисляется коэффициент цвета и на основании этого коэффициента интерполируется цвет между начальным и конечным. В фрагментном шейдере этот цвет множится на цвет диффузной текстуры. Конечным этапом является умножение альфа канала фрагмента на цвет из черно- белой текстуры, которая задает распределение шерсти.// vertex shader. Coeff = float(gl.

В нашей демке мы немного смещаем каждую вершину на основании циклически изменяемого параметра, переданного в шейдер. Для того чтобы все слои смещались синхронно, необходимо вычислить некое уникальное значение для каждой вершины с одинаковыми координатами. В данном случае не получится использовать встроенную переменную gl. Так что мы вычисляем некоторую “магическую сумму” из координат вершины и используем ее в синусоидальной функции для создания “волн” ветра. Пример смещения вершин на основании значения параметра time: const float PI2 = 6. Pi * 2 for sine wave calculation.

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