Шейдеры GLSL [ч.1 - Fragment Shaders]

Данная серия туториалов будет посвящена созданию собственных шейдеров на основе языка openGL Shading Language, или GLSL.

Язык GLSL чем-то похож на Java, чем-то — на Си, так что с синтаксисом проблем возникнуть не должно.
Первая часть будет посвящена Фрагментным Шейдерам. Что это такое объясню ниже.

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

Сложно, тёмно и не особо понятно, да? Давайте попробуем упростить вышесказанное и всё таки дать ответ на главный вопрос «что же делают фрагментные шейдеры? «. Готовы?

Как работают ШЕЙДЕРЫ? — Майнкрафт под другим углом || Квадратный


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

Читайте дальше.

На входе фрагментный шейдер действительно получает лишь один пиксель, точнее, его координаты, x и y. А на выходе выдаёт цвет в формате RGBA (красный, зелёный, синий и прозрачность).

Итак, рассмотрим примерный вид программы, которые у вас всех будут в итоге получаться:

#version N uniform type globalVar1; void main() < // Координата текущего пикселя vec2 pixelCoord = gl_FragCoord.xy; // Цвет текущего пикселя vec4 pixelColor = vec4(0.0); /** * Любые вычисления и изменение цвета выходного пикселя * */ // Присвоение выходного результата gl_FragColor = pixelColor; >

Типы переменных:
В GLSL есть практически все стандартные примитивные типы: bool (не boolean!), int, uint (unsigned int, т.е. неотрицательное число), float и double.

В добавок к ним есть контейнеры — векторы: vec2, vec3, vec4 (на 2, 3 и 4 значения соответственно) и матрицы: mat2, mat3, mat4 (2×2, 3×3 и 4×4 соответственно). Стандартый тип переменных в них — float. Если нужен, например, вектор int’ов на три компонента, вначале нужно дописать i — ivec3 (соответственно b — bool, u — uint, d — double).

Грубо говоря, это одно- и двумерные массивы, и доступ к их элементам можно получить через стандартный оператор индексирования — []. Но для нашего удобства был разработан метод swizzling, позволяющий получить доступ к элементам по их идентификаторам (xyzw, rgba или stpq, использующиеся для координат, цветов и точек текстуры соответственно (но не обязательно так)), допустим:

// инициализация: vec4 v = vec4(0.0); // все компоненты равны, т.е. 0.0, 0.0, 0.0, 0.0 vec2 vect = vec2(0.5, 0.7); // два компонента: 0.5 и 0.7 vec4 result = vec4(vect, 0.0, 0.0); // четыре: 0.5, 0.7 (из первого вектора), 0.0, 0.0 vec4 otherResult = vec4(result.xyz, 1.0); // 0.5, 0.7, 0.0, 1.0 // доступ и операции: vec2 someVec; vec4 differentVec = someVec.xyxx; vec3 anotherVec = differentVec.abr; vec4 otherVec = someVec.xyyx + anotherVec.sttp;

Модификатор uniform — это переменные, передаваемые в шейдер извне (из программы, в которой использовался шейдер). Самый распространённый uniform — time, то есть время. Он используется для анимации, ведь мало кому интересно смотреть на статичные шейдеры, которые проще нарисовать текстурой в фотошопе, чем учить новый язык.

Читайте также:  Майнкрафт пи самая старая версия

Модификаторы in и out — это входные и выходные данные. Например, переменная gl_FragColor из кода выше как раз таки является переменной с модификатором out, встроенной в GLSL, её тип — vec4. Она используется для извлечения цвета пикселя из шейдера.

«Аннотация» #version указывает версию GLSL, которую вы хотите использовать. Она всегда должна находится на самом верху. Вот небольшая справка соответствия версий OpenGL и GLSL:

Спойлер: OpenGL — GLSL

(записывать без точки)
2.0 — 1.10
2.1 — 1.20
3.0 — 1.30
3.1 — 1.40
3.2 — 1.50
Начиная с OpenGL 3.3 версии GLSL соответствуют версиям OpenGL, так что, допустим, GL 44 использует GLSL 440
*Источник*

Функции:
В GLSL есть множество встроенных функций, очень похожих на их аналоги из библиотеки Math:
sin(a), cos(a), tan(a); min(a, b), max(a, b) — синус, косинус, тангенс углов; минимальное и максимальное значения.
normalize(a) — возвращает нормализованный (с длинной равной 1) вектор a
length(a) — возвращает длину вектора a
distance(a, b) — расстояние между двумя точками (векторами a и b)
И так далее. Полный список можно найти вот тут — *тык* (для OpenGL 4)

Практика:
С теорией покончили, настало время попрактиковаться!
Для этого есть множество удобных и не очень программ и сайтов, лично я при обучении использовал Shader Edit for Android — бесплатная программа из Play Market’а (нет, это не реклама и мне за неё не платили). Для компьютеров можно использовать ShaderToy, но убедитесь, что ваш браузер поддерживает WebGL, иначе ничего не выйдет.

Итак, давайте для начала покрасим весь экран в один цвет, скажем, зелёный.
Для этого нам понадобится всего одна строка в нашей main функции:
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); — мы создаём вектор на 4 компонента, отвечающий за цвет текущего пикселя (RGBA), присваивая зелёному цвету значение 1.0 (это максимально допустимое значение. Если вам сложно рассчитать нужное число, используйте конструкцию «n/255» чтобы превратить числа из диапазона 0-255 в 0.0-1.0), а так же устанавливая насыщенность цвета на максимум:

Спойлер: Результат:

8abceEqBV8g.jpg

Теперь давайте превратим сплошной цвет в градиент. Для этого «нормализуем» координаты нашего пикселя по размеру экрана, то есть поделим его координаты на размер окна:
vec2 xy = gl_FragCoord.xy / resolution.xy;
И используем координату y для выбора цвета:
gl_FragColor = vec4(0.0, xy.y, 0.0, 1.0);

Спойлер: Результат:

jF1uZA1XTRU.jpg

Сможете перевернуть градиент, чтобы чёрный был сверху? А справа? А слева внизу?
Спойлер: Если сможете и так, вы — молодец!

rH9eF_1PeJw.jpg

Теперь давайте попробуем вставить изображение. В ShaderToy для этого используются каналы ниже; в Shader Edit нужно нажать на три точки справа вверху и в меню «Add uniform/texture» выбрать и добавить нужный sampler2D, нажав на +, например:
uniform sampler2D img;
Далее, используя функцию texture[2D] мы получаем цвет в нужной нам точке текстуры и возвращаем его программе:
gl_FragColor = texture2D(img, gl_FragCoord.xy)

Спойлер: Результат:

smxoy1mf_cY.jpg

Вы можете заметить, что экран окрасился в один цвет, совсем не похожий на вашу картинку.
Что же делать? Попробуйте нормализовать координаты (поделить на разрешение экрана):
gl_FragColor = texture2D(img, gl_FragCoord.xy/resolution)

Читайте также:  Где в Майнкрафте найти звездочку

Спойлер: Так-то лучше!

rvQcEtJuhvk.jpg

Теперь давайте попробуем поменять цвета на картинке, скажем, наложив градиент жёлтый -> синий.
Для этого просто сделаем синий цвет зависимым от какой-то координаты:

vec2 xy = gl_FragCoord / resolution; vec4 col = texture(img, xy); col.b = distance(vec2(0.5), xy); gl_FragColor = col;
Спойлер: Поздравляю, вы только что создали собственный фильтр для фото!

wJcXulwExIw.jpg


Теперь фотографируем всё подряд и пропускаем через этот шейдер 😀
Попробуйте сделать чёрно-белый фильтр. А сепию? Осветление/затемнение?
Спойлер: А негатив?

vgBp_SthqPk.jpg

Ну вот и всё.
Для закрепления материала попробуйте создать радугу, имитацию водной поверхности (с волнами) или телевизионные помехи. Не забывайте использовать встроенные в Shader Edit и ShaderToy uniform’ы.

Послесловие:
Вершинный шейдер выполняется ДЛЯ КАЖДОГО пикселя на экране, а таких пикселей может быть миллионы и миллиарды, так что вот пара советов по оптимизации:
— Чем меньше условных операторов, тем лучше
— Старайтесь экономить память, т.е. не создавать переменных, без которых можно обойтись

Спойлер: Использованные материалы и источники информации:

  • Создание шейдеров by PatientZero
  • Learn OpenGL — Shaders by FERusM
  • Google
  • Wikipedia

Автор AlexSoсol Просмотры 7,697 Первый выпуск 4 Дек 2017 Обновление 4 Дек 2017 Оценка 4.29 звёзд 7 оценок

Источник: forum.mcmodding.ru

Как использовать шейдеры через OptiFine в Minecraft 1.19.3

blank

Поскольку Minecraft 1.19.3 не может похвастаться лучшей графикой в ​​современном игровом мире, преданное сообщество игры-песочницы придумало различные типы шейдеров для улучшения Визуальное качество. Это графические функции, которые можно применить к игре, чтобы значительно улучшить освещение, тени, отражения и другие ее аспекты.

Чтобы установить один из этих шейдеров, игрокам понадобится специальный мод для графики и производительности, такой как OptiFine или Sodium. Учитывая, что для Sodium также требуется установка мода Iris Shaders, OptiFine — один из лучших модов, позволяющих легко использовать шейдеры в Minecraft 1.19.3. Вот несколько простых шагов по использованию шейдеров с этим модом.

blank

Шаги по использованию шейдеров через Optifine в Minecraft 1.19.3

1) Загрузите и запустите OptiFine

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

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

2) Загрузите нужные шейдеры

Затем вы должны найти и загрузить шейдер по вашему выбору. Поскольку игре более десяти лет, на выбор предлагается множество разных и интересных шейдеров. Некоторые из лучших шейдеров, которые стоит проверить, это SEUS, Sildur, Complementary, BSL и т. д.

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

3) Заходим в игру и находим настройки шейдеров

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

Читайте также:  Как в Майнкрафте сделать аниматроника

Нажмите кнопку открытия папки шейдеров, которая приведет вас к пустому диалоговому окну File Explorer. Сюда нужно поместить загруженный шейдер. Шейдер будет загружен в виде сжатого файла .zip, но вы никогда не должны извлекать содержимое этого файла, поскольку он будет работать только в сжатом виде. Просто вставьте шейдер в только что открытую папку шейдеров.

4) Активация шейдеров и их использование в мире

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

Для получения подробных руководств, пошаговых руководств, советов и amp; подробнее см. SK Minecraft Wiki

Источник: fox-guide.ru

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

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

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

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

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

ШАГ #1 — Установка мода на шейдеры

  1. Скачайте и установите Java
  2. Установите OptiFine HD или ShadersMod;
  3. Распаковываем полученный архив в любое место;
  4. Запускаем jar файл, т.к. он является инсталлером;
  5. Программа укажет вам путь к игре, если всё верно, нажимаем Yes, Ok, Ok;
  6. Переходим в .minecraft и создаем там папку shaderpacks;
  7. Заходим в лаунчер и видим в строке новый профиль с именем «ShadersMod», если нет, то выбираем вручную.
  8. Дальше нужно скачать шейдерпаки

ШАГ #2 — Установка шейдерпака

  1. Скачайте интересующий вас шейдерпак (список в конце статьи)
  2. Нажмите клавиши WIN + R
  3. Перейдите в .minecraft/shaderpacks. Если такой папки нет, то создайте её.
  4. Переместите или извлеките архив с шейдерами в .minecraft/shaderpacks. Должен получиться такой путь: .minecraft/shaderpacks/ИМЯ_ПАПКИ_ШЕЙДЕРА/shaders/[.fsh и .vsh файлы внутри]
  5. Запустите Майнкрафт и перейдите Настройки > Shaders. Здесь вы увидите список доступных шейдеров. Выберите нужный
  6. В настройках шейдеров включите «tweakBlockDamage», отключите «CloudShadow» и «OldLighting»

Sonic Ether’s Unbelievable Shaders
Sildur’s shaders
Chocapic13’s Shaders
sensi277’s yShaders
MrMeep_x3’s Shaders
Naelego’s Cel Shaders
RRe36’s Shaders
DeDelner’s CUDA Shaders
bruceatsr44’s Acid Shaders
Beed28’s Shaders
Ziipzaap’s Shader Pack
robobo1221’s Shaders
dvv16’s Shaders
Stazza85 super Shaders
hoo00’s Shaders pack B
Regi24’s Waving Plants
MrButternuss ShaderPack
DethRaid’s Awesome Graphics On Nitro Shaders
Edi’s Shader ForALLPc’s
CrankerMan’s TME Shaders
Kadir Nck Shader (for skate702)
Werrus’s Shaders
Knewtonwako’s Life Nexus Shaders
CYBOX shaderpack
CrapDeShoes CloudShade Alpha
AirLoocke42 Shader
CaptTatsu’s BSL Shaders
Triliton’s shaders
ShadersMcOfficial’s Bloominx Shaders (Chocapic13′ Shaders)
dotModded’s Continuum Shaders
Qwqx71’s Lunar Shaders (chocapic13’s shader)

Видео обзор Как установить шейдеры на Майнкрафт? на YouTube

Источник: minecraft.ru.net