шейдеры для майнкрафт это что

Шейдеры для Майнкрафт [1.17.1] [1.16.5] [1.15.2] [1.12.2]

Potato Shader [1.17.1] [1.16.5]

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

RedHat [1.17.1] [1.16.5] [1.15.2] [1.12.2]

Шейдер RedHat создан с упором на реалистичной и большое количество графических эффектов. Изначально данный шейдер был создан …

Шейдер SFLP 1.16.5 / 1.15.2 (Для слабых ПК)

SFLP Shaders это облегченный шейдеры для Майнкрафт 1.16.5 / 1.15.2 для слабых компьютеров. Данный шейдеры будут не …

Voyager shader [1.16.5] [1.15.2] [1.14.4] [1.12.2]

Отличный шейдер для тех у кого слабый ПК. Он улучшит графику Майнкрафт, добавив красивые эффекты и при …

MakeUp — Ultra Fast [1.16.5]

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

MLGImposter’s Shader [1.16.5]

Это улучшенная версия Chocapic13 от стороннего разработчика. Было изменено освещение и цветовая гамма, чтобы игра стала выглядеть …

SEUS PTGI E12 [1.16.5] [1.15.2] [1.12.2] (шейдеры RTX с трассировкой лучей)

Шейдер SEUS PTGI E10 с трассировкой лучей света в реальном времени сделает Майнкрафт необычайно реалистичным. Никто не …

Chocapic13’s Shaders [1.16.5] [1.15.2] [1.12.2]

Chocapic13 Shaders значительно улучшают графику игры Minecraft. Как следует из названия, его основной функцией является добавление динамических …

BSL Shaders [1.16.5] [1.15.2] [1.14.4] [1.12.2]

Отличный шейдерпак, который сделает цвета в игре сочнее, освещение ярче, появятся тени у блоков и предметов, также …

Exposa Unique [1.16.5] [1.15.2] [1.14.4] [1.12.2]

Отличный шейдерпак, который улучшит графику игры сделав ее более приближенной к реальности добавив новые графические эффекты. Мир …

Шейдеры для Майнкрафт 1.17.1 / 1.16.5 / 1.12.2 улучшат графику в игре путем добавления динамических теней и изменения схемы освещения. Скачать Шейдеры можно тут, выберите понравившиеся из списка ниже. Здесь представлены необходимые модификации для преображения игры Майнкрафт путем модификации визуальных эффектов и добавлениях новых. Давайте все-таки разберемся что такое Шейдеры для Майнкрафт. Это переработка визуальной составляющей игры в пользу повышения качества. В игре появится реалистичные тени объектов в зависимости от положения солнца и других источников света, таких как факелы, лава или печь. Вода станет прозрачной, появятся отражения и небольшие волны. Блоки будут намокать под дождем, а некоторые из них отражать свет. Листва деревьев и трава с цветами колыхаются как будто дует ветер. Это шикарно будет смотреться в сочетании качественным ресурс паком. Рекомендуем скачать Шейдеры для Майнкрафт для полного раскрытия визуального потенциала игры. После установки шейдеров еще раз прогуляетесь по знакомым местам и будете поражены изменениям. Один минус, для обработки такого количества эффектов понадобиться не слабый компьютер. Не огорчайтесь, разработчики решили эту проблему и выпустили специальные редакции шейдеров с оптимизацией путем удаления некоторых эффектов для слабых компьютеров. Шейдеры для Майнкрафт в основном совместимы со всеми популярными релизами игры. Но может возникнуть несовместимость с модификациями или ресурс паками. Но благодаря большому выборы можно подобрать, то что будет хорошо работать и устроит вас в плане графики.

Источник

Как установить Шейдеры на Майнкрафт [1.17.1] [1.16.5] [1.15.2] [1.14.4] [1.12.2] [1.11.2] [1.8.9] [1.7.10]

Как установить шейдеры:

Выбрать и скачать шейдер:

Установить Optifine для вашей версии игры:

Скопировать архив с шейдером в папку shaderpacks:

Включить данный шейдер в игре:

Запускайте игру, вам нужна версия с припиской оптифайн, либо вы Forge если вы скопировали оптифайн в папку mods.

В меню игры перейдите в настройки.

Шейдеры
Если кнопки шейдеры нету, значит вы не верно установили Optifine

Выберите шейдер (ты ведь скопировал их в папку shaderpacks?)

Настроить шейдер если необходимо:

Многие шейдеры не имеют версий под разное качество графики (Low, medium, ultra), но они могут иметь переключатель качества в настройках.
Каждый шейдер имеет собственное меню настроек, в некоторых нет возможности выбора качества, но можно изменить другие параметры, отключить некоторые эффекты, ослабить или усилить их. Зачастую в настройках нужно установить разрешение ваших текстур для лучшего эффекта, либо включить опции для старых версий игры, многие настройки повысят или понизят FPS, крутите, меняйте и смотрите.

Пример меню настроек шейдера:

Источник

Шейдеры для Майнкрафт

Шейдеры AstraLex

Шейдеры AstraLex созданые автором LexBoosT выполняет сразу две функции. Он делает графику реалистичной и мультяшной одновременно. Второй эффект достигается благодаря использованию cel-shading. В настройках доступно несколько уровней качества: от Low…

Шейдеры Ymir

Шейдеры Ymir созданы с целью достичь максимально реалистичной графики в Майнкрафте. С ними можно делать очень красивые скриншоты, особенно во время дождя или снега. Огромное внимание уделено свету, в большинстве…

Шейдеры Complementary

Complementary – это красивые и хорошо оптимизированные шейдеры, созданные на основе BSL Shaders. Они добавляют в игру реализма при помощи теней, отражений и улучшенного освещения, но при этом мир не…

Шейдеры BSL

Шейдеры BSL отличаются высокой реалистичностью, а также огромным количеством настроек. Ты сможешь изменить их под себя, отрегулировав параметры освещения, теней и многое другое. Есть возможность включить эффект cel-shading (стиль рисованных…

Шейдеры Raspberry

Главной особенностью шейдеров Raspberry является возможность максимально гибкой настройки. С ними ты сможешь сделать графику в Майнкрафте именно такой, какой всегда хотел её видеть. Правда, для этого нужно будет довольно…

Шейдеры Fog Remover

Шейдеры Fog Remover не добавляют никаких новых эффектов, а лишь убирают туман, появляющийся на границе рендеринга чанков. С ним предметы, находящиеся близко к краю прорисовки, будут намного лучше заметны и…

Шейдеры UShader

UShader – это качественные и красивые шейдеры со множеством реалистичных эффектов. Их автор вдохновлялся шейдерами SEUS, но при этом не использовал их в качестве основы. Здесь реализованы все привычные функции,…

Шейдеры Sunflawer

Для создания Sunflawer использовались известные шейдеры BSL. Но автор хорошо поработал над оптимизацией, что позволяет использовать их даже на слабых ПК. При этом ты получишь очень красивые облака и воду,…

Шейдеры Youtuber’ Dream

Шейдеры Youtuber’ Dream создавались специально для улучшения качества роликов ютуберов. Они не добавляют лишних эффектов, а просто заметно улучшают графику. С ними в Майнкрафте появятся качественные тени, приятное мягкое освещение…

Шейдеры NV

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

Шейдеры Windom

Шейдеры Windom – это отличный выбор для слабых ПК, ведь с ними Майнкрафт станет намного красивее, сохранив приемлемые показатели FPS. С ними ты сможешь добавить красивые тени, легкое размытие в…

Шейдеры Spectrum

Главной особенностью шейдеров Spectrum является высокий уровень реалистичности. Они делают освещение максимально естественным, добавляя отражение и рассеивание лучей. Вода и небо также станут очень реалистичными. Важной особенностью данных шейдеров является…

Популярные Шейдеры

Скачать шейдеры для Майнкрафт

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

При этом они не привязаны к версиям игры. Если ты начинал играть с ранних модификаций, таких как 1.5, 1.6 или 1.7, и нашел для себя идеальный шейдер, ты можешь перейти на новую и продолжить его использовать. В актуальных версиях Minecraft, таких как 1.10, 1.11, 1.12 и даже в 1.13 они будут отображаться точно так же.

Источник

Лучшие шейдеры для Minecraft

С момента официального выхода в 2011 году Minecraft прошла долгий путь, получив многочисленные обновления и дополнения. Однако одну область Mojang упорно обходит вниманием – это графика игры, которая за последние 10 лет практически не поменялась. К счастью, моддерское сообщество Minecraft взяло дело в свои руки и создало целый ряд шейдеров на все случаи жизни.

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

Как устанавливать шейдеры для Minecraft

Чтобы установить шейдеры для Майнкрафта, сначала потребуется скачать и установить менеджер модификаций, который существенно упростит весь процесс. Этот инструмент автоматически отслеживает, совместимы ли между собой моды, которые вы планируете использовать. Наиболее популярным менеджером модов является Forge, но есть и отличная альтернатива с открытым исходным кодом в виде MultiMC, который также дает вам возможность одновременно запускать несколько независимых процессов Minecraft одновременно.

Помимо менеджера модов, вам может потребоваться установить Optifine, если у вас ее еще нет. Эта программа значительно улучшает графику и быстродействие Minecraft, а также позволяет вам регулировать частоту кадров, снизить задержку и управлять графикой на микроуровне. Главное – выбрать подходящую версию, соответствующую вашей версии игры, на данный момент это 1.14 или 1.15.

И последнее по порядку, но не по значимости – разрешите запуск Java в Optifine и выбранном менеджере модов. Теперь вы готовы к работе с шейдерами для Майнкрафта.

Где найти шейдеры для Minecraft

Есть огромное количество мест, где можно найти шейдеры для Minecraft, будь то сайты отдельных моддеров, сообщества на r/Minecraft и форумах Minecraft, или просмотр демонстрационных роликов на YouTube, один из которых вы видите выше. Кроме того, новые и популярные шейдеры для Майнкрафт можно встретить на следующих сайтах:

Подборка лучших шейдеров для Minecraft

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

Sonic Ether’s Unbelievable Shaders

Sonic Ether’s Unbelievable Shaders (SEUS) существуют с начала 2010-х и остаются самым надежным high-end вариантом для игроков в Minecraft, которые хотят получить от своих шейдеров максимум. Если говорить более конкретно, то SEUS прекрасно удается внести в игру некоторый реализм за счет таких моментов, как мягкое естественное освещение, атмосферные эффекты дождя и многие другие. Однако, из-за этого данные шейдеры – одни из наиболее требовательных среди всей подборки, хотя это зависит от выбранной вами версии: Renewed, PTGI или Legacy.

Sildur’s Shaders

Подобно SEUS, Sildur’s Shaders существуют с момента официального выхода Minecraft в 2011 году и получили признание в сообществе игры. Вместо реализма Sildur’s Shaders ориентированы на настройку цветовой гаммы по трем кастомизированным профилям: Basic (базовый), Enhanced (улучшенный) и Vibrant (яркий). Кроме того, по сравнению с SEUS они гораздо менее требовательны к ресурсам, позволяя использовать такие эффекты, как отражение света, не перегружая компьютер.

Шейдеры RRe36 Vanilla Plus

Если вы фанат классического вида Minecraft, но все равно хотите ощутить преимущества улучшенных цветов и эффектов, то шейдеры Vanilla Plus от RRe36 – та самая золотая середина. Они повышают общую насыщенность игры, добавляя объемные лучи, динамические тени и улучшенные облака/туман. В зависимости от того, насколько далеко вы готовы отойти от оригинального вида Minecraft, можно выбрать три версии: SE, CE или Vanilla Plus по умолчанию.

Lagless Shaders

Если вы играете на старом или бюджетном ПК, стоит обратить внимание на набор Lagless Shaders, который не позволит вашему ПК тормозить при работе шейдеров. И хотя здесь нет такого количества крутых графических фишек, как в других наборах, он все равно придаст вашей игре большую яркость, позволяя ей даже на медленных машинах работать на плавных 60 кадрах в секунду. Если у вас постоянно возникают проблемы с корректной работой шейдеров, попробуйте этот вариант.

Continuum Shaders

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

Шейдеры Chocapic13

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

Nostalgia Shaders

Как следует из названия, пакет Nostalgia Shaders пытается воссоздать стилизованную версию базовой Minecraft с добавлением некоторых современных фишек. От представленных выше шейдеров Vanilla Plus он отличается тем, что сосредоточен на воссоздании воспоминаний о Minecraft давних игроков, а не реального вида игры. В комплекте – новые цвета для неба и освещения, динамические тени, объемный туман и эффекты ветра на листве.

Oceano

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

KUDA Shaders

KUDA Shaders – самый новый пункт этого списка, бета-тестирование которого было завершено в 2018 году, но он уверенно идет к званию наиболее универсального пакета шейдеров для Майнкрафта. Он предпринимает попытку полной переработки уникального вида Minecraft за счет новых теней, освещения и объемных лучей, а также объемного тумана и более высокого разрешения текстур. Это подкрепляется отзывами игроков, сообщающих о великолепных результатах и практически полном отсутствии багов при работе шейдеров KUDA.

CrankerMan’s TME Shaders

На первый взгляд, шейдеры TME от CrankerMan достигают тех же результатов, что и практически все остальные наборы шейдеров в этом списке. Однако, их главное отличие от конкурентов в том, что это один из немногих наборов шейдеров, получающих регулярные обновления, но при этом до сих пор поддерживающих более старые версии игры (на данный момент 1.15 – 1.9). В комплекте – огромное количество графических эффектов, от движения листвы на деревьях до реалистичных туч и теней, придающих игре ощущение большей трехмерности.

Источник

Создание шейдеров

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

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

Сцена из Minecraft, до и после добавления нескольких шейдеров.

Задача этого туториала

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

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

Что же такое шейдер?

Шейдер — это просто программа, выполняемая в графическом конвейере. Она сообщает компьютеру, как рендерить каждый пиксель. Эти программы называются шейдерами («затенителями»), потому что их часто используют для управления эффектами освещения и затенения, но ничего не мешает использовать их и для других спецэффектов.

Шейдеры пишут на специальном языке шейдеров. Не волнуйтесь, вам не придётся изучать совершенно новый язык: мы будем использовать GLSL (OpenGL Shading Language), который похож на C. (Существует несколько языков написания шейдеров для разных платформ, но поскольку все они адаптированы под выполнение в видеопроцессоре, то похожи друг на друга.)

Примечание: эта статья посвящена исключительно фрагментным шейдерам (fragment shader). Если вам любопытно, какие ещё виды шейдеров бывают, то можно почитать о различных этапах графического конвейера в OpenGL Wiki.

Приступаем!

В этом туториале мы будем использовать ShaderToy. Он позволяет нам начать программировать шейдеры прямо в браузере, без возни с установкой и настройкой! (Для рендеринга он использует WebGL, поэтому требуется браузер с поддержкой этой технологии.) Создавать учётную запись не обязательно, но удобно для сохранения кода.

Примечание: на момент написания статьи ShaderToy находился в состоянии беты [прим. пер.: статья написана в 2015 году]. Некоторые детали интерфейса/синтаксиса могут немного отличаться.

Нажав на New Shader, вы увидите что-то вроде этого:

Если вы не зарегистрировались, интерфейс может немного отличаться.

Маленькая чёрная стрелка внизу служит для компиляции кода.

Что происходит?

Я собираюсь описать то, как работают шейдеры, одним предложением. Приготовились? Вот оно!

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

Поздравляю! Вот ваш первый готовый шейдер!

Задача: Попробуйте изменить цвет на сплошной серый.

vec4 — это просто тип данных, поэтому мы могли бы объявить цвет как переменную, вот так:

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

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

Входные данные шейдера

Вы заметили проблему в приведённом выше коде? Попробуйте нажать на кнопку go fullscreen в правом нижнем углу окна предварительного просмотра.

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

Если что-то не является встроенной переменной, то можно отправить эту информацию из центрального процессора (из основной программы) в видеопроцессор (в ваш шейдер). ShaderToy берёт эту задачу на себя. Все передаваемые шейдеру переменные указаны во вкладке Shader Inputs. Переменные, передаваемые таким образом из ЦП в видеопроцессор, называются в GLSL uniform (глобальными).

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

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

От разделения к градиенту

Задача: Можете превратить эту картинку в вертикальный градиент? А как насчёт диагонального? Как насчёт градиента из нескольких цветов?

Отрисовка изображений

Экспериментировать с цветами интересно, но если мы хотим сделать что-то впечатляющее, то наш шейдер должен научиться получать в качестве входных данных изображение и изменять его. Таким образом можно получить шейдер, воздействующий на весь игровой экран (например, «подводный» эффект или цветокоррекцию), или воздействовать нужным способом только на определённые объекты (например, для создания реалистичной системы освещения).

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

Четыре входных канала ShaderToy

Нажмите на iChannel0 и выберите любую текстуру (изображение).

Если мы можем только возвращать цвет, то как можно нарисовать текстуру на экране? Нам нужно каким-то образом привязать текущий пиксель шейдера к соответствующему пикселю текстуры:

В зависимости от расположения (0,0) на экране может потребоваться отразить ось Y для правильной привязки текстуры. На момент написания статьи ShaderToy был обновлён и исходная точка находится в левом верхнем углу, так что ничего отражать не требуется.

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

Мы хотим только увидеть изображение, поэтому пиксели будут совпадать в масштабе 1:1:

Так мы получили своё первое изображение!

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

Давайте попробуем наложить на изображение градиент, похожий на то, что мы делали раньше:

Поздравляю, вы только что написали свой первый эффект постпроцессинга!

Задача: Сможете написать шейдер, делающий изображение чёрно-белым?

Учтите, что хотя мы и выбрали статичное изображение, всё, что вы видите, выполняется в реальном времени. Чтобы убедиться в этом, замените статичное изображение на видео: нажмите на iChannel0 и выберите любое видео.

Добавляем движение

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

Задача: Можете ли вы сделать шейдер, меняющий изображение с чёрно-белого на цветное и обратно?

Примечание об отладке шейдеров

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

Подводим итог

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

В этом туториале я не упоминал вершинные шейдеры (Vertex Shaders). Они пишутся на том же языке, но выполняются для каждой вершины, а не пикселя, и возвращают вместе с цветом ещё и положение. Вершинные шейдеры обычно проецируют 3D-сцену на экран (эта функция встроена в большинство графических конвейеров). Пиксельные шейдеры обеспечивают большинство наблюдаемых на экране сложных эффектов, поэтому я рассматриваю их.

Ещё одна задача: Сможете ли вы написать шейдер, удаляющий зелёный цвет из видео с ShaderToy и добавляющий другое видео в качестве фона первого видео?

ShaderToy, с которым мы работали ранее, отлично подходит для быстрой проверки и экспериментов, но его возможности довольно ограничены. Например, вы не можете контролировать данные, передаваемые шейдеру. Если у нас будет собственная среда для запуска шейдеров, то мы сможем создавать всевозможные интересные эффекты и использовать их в собственных проектах! Для запуска шейдеров в браузере мы будем использовать в качестве фреймворка Three.js. WebGL — это Javascript API, позволяющий рендерить шейдеры, Three.js нужен только для упрощения работы.

Если вам не интересны JavaScript или веб-платформа, не волнуйтесь, мы не будем вдаваться в особенности веб-рендеринга (но если вы хотите узнать о фреймворке больше, то изучите этот туториал). Настройка шейдеров в браузере — самый быстрый способ начать работу, но освоившись с этим процессом, вы сможете с лёгкостью настраивать и использовать шейдеры на любой платформе.

Настройка

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

Hello Three.js!

Three.js — это JavaScript-фреймворк, который берёт на себя большую часть boilerplate-кода для WebGL, необходимого для рендеринга шейдеров. Проще всего начать с использования версии, выложенной на CDN.

Можете скачать файл HTML, который является простой сценой Threejs.

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

Для создания куба нам нужно определить его геометрию и материал, а затем добавить его в сцену. Добавьте этот фрагмент кода в поле Add your code here :

Мы не будем подробно рассматривать куб, потому что нам больше интересен шейдер. Но если всё сделано верно, то вы увидите в центре экрана зелёный куб:

Задача: Сможете повращать куб по другой оси? А как насчёт двух осей одновременно?

Итак, всё готово, пора добавить шейдеры!

Добавляем шейдеры

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

Шаг 1: загрузка кода GLSL

Для создания сцены мы используем JavaScript. В других ситуациях может использоваться C++, Lua или любой другой язык. Вне зависимости от этого шейдеры пишутся на специальном языке шейдеров. Язык шейдеров OpenGL называется GLSL (OpenGL Shading Language). Поскольку мы используем WebGL, основанный на OpenGL, то будем писать на GLSL.

В JavaScript это можно сделать простой передачей кода внутри переменной, вот так:

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

Теперь давайте вставим очень простой шейдер, возвращающий белый цвет.

(Компоненты vec4 в этом случае соответствуют значению RGBA, ка объяснялось в начале туториала.)

Теперь нам нужно загрузить этот код. Мы сделаем это простой строкой на JavaScript, находящей HTML-элемент и получающей внутренний текст:

Он должен находится под кодом куба.

Не забывайте: только загруженный как строка код будет парситься как действительный код GLSL (то есть void main() <. >. Остальное — это просто boilerplate HTML.)

Шаг 2: применение шейдера

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

Нам нужно создать специальный материал и передать его коду шейдера. В качестве объекта шейдера мы создадим плоскость (но можем использовать и куб). Вот что нужно сделать:

На этом этапе вы должны видеть белый экран:

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

Задача: Сможете ли вы сделать одну часть экрана красной, а другую синей? (Если не получится, то на следующем шаге я дам подсказку!)

Шаг 3: передача данных

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

Для передачи данных шейдеру нам нужно отправить то, что мы назвали uniform-переменной. Для этого мы создаём объект uniforms и добавляем к нему наши переменные. Вот синтаксис передачи разрешения экрана:

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

Изменим код шейдера следующим образом:

В результате у нас получится красивый градиент!

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

Шаг 4: обновление данных

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

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

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

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

Задача: Попробуйте постепенно изменять цвета.

Шаг 5: работа с текстурами

Вне зависимости от способа загрузки и формата текстур на всех платформах они передаются в шейдер как uniform-переменные.

Небольшое примечание о загрузке файлов в JavaScript: можно без проблем загружать изображения с внешнего URL (именно так мы и будем делать). Однако если вы захотите загрузить изображение локально, то возникнут проблемы с разрешениями, потому что JavaScript обычно не может и не должен иметь доступа к файлам в системе. Простейший способ решения — запустить локальный Python-сервер, что на самом деле проще, чем кажется.

В Three.js есть небольшая удобная функция для загрузки изображения как текстуры:

Первая строка задаётся только один раз. В неё можно вставить любой URL изображения.

И, наконец, нам нужно объявить uniform-переменную в коде шейдера, а потом отрисовать её тем же способом, как мы делали ранее — с помощью функции texture2D :

На экране должно появиться растянутое изображение конфет:

(Это изображение является стандартным тестовым изображением в компьютерной графике, оно взято у Института обработки сигналов и изображений (SIPI) (поэтому на нём показана аббревиатура IPI) Университета Южной Калифорнии. Думаю, оно нам подходит, ведь мы как раз изучаем графические шейдеры!)

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

Дополнительный шаг: применяем шейдеры к другим объектам

В созданной нами плоскости нет ничего особенного. Мы могли применить шейдер и к кубу. На самом деле можно просто заменить строку с геометрией плоскости:

Вуаля, конфеты нарисованы на кубе:

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

Если бы мы хотели применить текстуру так, чтобы она выглядела физически нарисованной на кубе, то наша работа напоминала бы изобретение заново 3D-движка (что было бы довольно глупо, учитывая, что мы уже используем 3D-движок и мы можем просто попросить его отрисовать текстуру отдельно на каждой стороне). В этом туториале мы используем шейдеры для того, что иначе достичь было бы невозможно, так что мы не будем вдаваться в такие подробности. (Если вы жаждете узнать больше, на Udacity есть отличный курс по основам 3D-графики!)

Следующие шаги

На этом этапе мы уже можем делать всё, что сделали в ShaderToy, однако теперь мы способны использовать любые текстуры и любые объекты, на любой платформе.

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

Освоившись с основами шейдеров мы на практике применим мощь видеопроцессора для создания реалистичного динамического освещения.

Начиная с этого момента мы будем рассматривать общие концепции графических шейдеров без привязки к конкретной платформе. (Для удобства во всех примерах кода по-прежнему будет использоваться JavaScript/WebGL.)

Для начала найдите подходящий вам способ выполнения шейдеров. (JavaScript/WebGL — это простейший способ, но я рекомендую вам поэкспериментировать со своей любимой платформой!)

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

Вот как будет выглядеть конечный результат (нажмите мышью для включения света):

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

Отличным примером этого является Chroma. Игрок может бегать по динамическим теням, создаваемым в реальном времени:

Приступаем к работе: наша исходная сцена

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

Здесь не происходит ничего сложного. Код на JavaScript задаёт сцену и отправляет шейдеру текстуру для рендеринга и размеры экрана.

В коде на GLSL мы объявляем и используем эти uniform-переменные:

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

Просто чтобы убедиться, что вы всё понимаете, вот вам небольшое задание на разогрев:

Задача: Отрендерите текстуру, не изменяя соотношения её сторон (Попробуйте сделать это самостоятельно, мы рассмотрим решение ниже.)

Довольно очевидно, почему текстура растянута, но если это непонятно, то вот подсказка: посмотрите на строку, в которой мы нормализуем координаты:

Мы делим x и y на разные числа (на ширину и высоту экрана). Естественно, что изображение будет растянутым.

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

Шаг 1: добавление источника света

Прежде чем создать что-то интересное, нам нужен источник света. «Источник света» — это просто точка, передаваемая шейдеру. Для этой точки мы создадим новую uniform:

Мы создали вектор с тремя измерениями, потому что мы хотим использовать x и y в качестве положения источника на экране, а z — в качестве радиуса.

Давайте присвоим в JavaScript значения нашему источнику света:

Мы будем использовать радиус как процент от размеров экрана, поэтому 0.2 будет составлять 20% экрана. (В этом выборе нет ничего особенного. Мы могли бы задать размер в пикселях. Это число ничего не значит, пока мы не начнём с ним делать что-нибудь в коде GLSL.)

Чтобы получить положение мыши, нужно просто добавить получатель события (event listener):

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

На GLSL это может выглядеть примерно так:

Здесь мы сделали следующее:

Ой-ёй! Источник света следует за мышью как-то странно.

Задача: Сможете это исправить? (Попробуйте снова разобраться самостоятельно, прежде чем мы решим эту задачу ниже.)

Исправление движения источника света

Возможно, вы помните, что ось Y здесь перевёрнута. Вы можете поторопиться просто ввести:

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

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

Теперь мы успешно определили видимый радиус нашей сцены. Однако он выглядит слишком резким…

Добавление градиента

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

Вместо присвоения всем пикселям в пределах радиуса цвета текстуры:

мы можем умножать его на коэффициент расстояния:

На этом рисунке dist вычисляется для произвольного пикселя. dist меняется в зависимости от того, в каком пикселе мы находимся, а значение light.z * res.x постоянно.

Если мы посмотрим на пиксель на границе круга, то dist равно длине радиуса, то есть в результате мы умножаем color на 0 и получаем чёрный цвет.

Шаг 2: добавляем глубину

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

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

Однако вот что видит наша система освещения сейчас:

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

A находится наверху фигуры, а B и C — по бокам. D — это ещё одна точка на земле. Мы видим, что A и D должны быть самыми яркими, причём D немного темнее, потому что свет достигает её под углом. С другой стороны, B и C должны быть очень тёмными, потому что до них почти не доходит свет, ведь они направлены от источника света.

Не так важна высота, как направление, в котором повёрнута поверхность. Оно называется нормалью поверхности.

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

На рисунке выше показана простая карта нормалей. Если воспользоваться инструментом «пипетка» мы увидим, что направление по умолчанию («плоское») представлено цветом (0.5, 0.5, 1) (синий цвет, занимающий бо́льшую часть изображения). Это направление, указывающее прямо вверх. Значения x, y и z присваиваются значениям r, g и b.

Наклонная сторона справа повёрнута вправо, поэтому её значение x выше. Значение x также является значением красного, именно поэтому сторона выглядит немного красноватой или розоватой. То же самое относится ко всем остальным сторонам.

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

Давайте загрузим эту простую карту нормалей для теста:

И добавим её как одну из uniform-переменных:

Чтобы проверить, что мы загрузили её правильно, давайте попробуем отрендерить её вместо текстуры, изменив код на GLSL (помните, что мы на этом этапе используем просто фоновую текстуру, а не карту нормалей):

Шаг 3: применение модели освещения

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

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

Мы просто вычисляем угол между источником света и нормалью поверхности:

Чем меньше угол, тем ярче пиксель.

Это значит, что когда пиксель находится непосредственно под источником света, где разность углов равна 0, он будет самым ярким. Самые тёмные пиксели будут указывать в том же направлении, что и источник света (это будет похоже на заднюю часть объекта).

Давайте реализуем эту модель.

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

Давайте сделаем сплошной белый цвет (или любой другой цвет):

Вот как выглядит алгоритм:

1. Получаем вектор нормали текущего пикселя

Нам нужно знать, в каком направлении «смотрит» поверхность, чтобы можно было вычислить количество света, попадающего на этот пиксель. Это направление хранится в карте нормалей, поэтому получение вектора нормали заключается в получении цвета текущего пикселя в текстуре нормалей:

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

2. Получаем вектор направления света

Теперь нам нужно знать, в каком направлении указывает свет. Можно представить, что поверхность освещения — это фонарик, направленный на экран в точке расположения курсора мыши. Поэтому можно вычислить вектор направления света просто с помощью расстояния между источником света и пикселем:

Он должен иметь и координату Z (чтобы можно было вычислить угол относительно трёхмергого вектора нормали поверхности). С этим значением можно поэкспериментировать. Вы заметите, что чем оно меньше, тем резче контраст между яркими и тёмными областями. Можно представить, что это высота фонарика над сценой: чем он дальше, тем равномернее распространяется свет.

3. Нормализуем векторы

Теперь нам нужно нормализировать:

4. Вычисляем угол между векторами

Давайте сделаем это с помощью встроенной функции dot:

Я назвал переменную diffuse потому что этот термин используется в модели освещения по Фонгу, ведь она определяет количество света, достигающее поверхности сцены.

5. Умножаем конечный цвет на этот коэффициент

И мы получили работающую модель освещения! (Попробуйте увеличить радиус источника света, чтобы эффект был сильнее заметен.)

Хм, кажется, что-то не так. Похоже, что источник как-то наклонён.

Давайте ещё раз посмотрим на наши вычисления. У нас есть вектор света:

Задача: Понимаете ли вы, в чём заключается решение? Сможете реализовать его?

Вот как демо выглядит после вычитания 0.5 из координат x и y вектора нормали:

И у нас получилась работающая модель освещения!

Можно поставить на фон каменную текстуру, а настоящую карту нормалей взять в репозитории этого туториала на GitHub (а именно здесь):

Нам нужно только изменить одну строку на JavaScript, с:

И одну строку на GLSL:

Нам больше не нужен сплошной белый цвет, мы загрузим настоящую текстуру, вот так:

И вот окончательный результат:

Советы по оптимизации

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

Ветвление

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

Отложенный рендеринг

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

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

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

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

Следующие шаги

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

Ссылки

Каменная текстура и карта нормалей для этого туториала взяты с OpenGameArt: http://opengameart.org/content/50-free-textures-4-normalmaps.

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

Источник