Сегодня мы восстановим струкруру программы Godot Screen Space Shader.Рассмотрим годот 2д гайд.Шейдеры 3
Создадим проект Screen Space Shader experiment. Добавим на сцену корневой узел Control, внутрь которого поместим два дочерних узла Control и две выпадающие кнопки OptionButton. В первый Control вложим четыре узла TextureRect. Во второй Control разместим ещё один вложенный Control и одиннадцать узлов TextureRect
Сохраним сцену как screen_shaders.tscn. Теперь настроим первый TextureRect: расширим его до нужных размеров и загрузим в него изображение burano.jpg
Теперь создадим шейдер, который применяет эффект размытия по виньетке — затемнение и размытие краёв изображения
shader_type canvas_item;
uniform sampler2D screen_texture : hint_screen_texture, filter_linear_mipmap;
uniform sampler2D vignette;
void fragment() {
vec3 vignette_color = texture(vignette, UV).rgb;
COLOR.rgb = textureLod(screen_texture, SCREEN_UV, (1.0 - vignette_color.r) * 4.0).rgb;
COLOR.rgb *= texture(vignette, UV).rgb;
}
Шейдер принимает на вход два изображения: основной экран (текстура screen_texture) и маску виньетки (vignette), которая представляет собой чёрно-белое изображение для затемнения краёв
vec3 vignette_color = texture(vignette, UV).rgb;
Отдельно загружается текстура виньетки — чёрно-белое изображение, которое будет использоваться в качестве маски для затемнения краёв
COLOR.rgb = textureLod(screen_texture, SCREEN_UV, (1.0 - vignette_color.r) * 4.0).rgb;
Основное изображение (screen_texture) растягивается на весь экран с использованием SCREEN_UV. Размытие к краям рассчитывается по формуле (1.0 - vignette_color.r) * 4.0, что создаёт эффект виньетки
COLOR.rgb *= texture(vignette, UV).rgb;
Это усиливает затемнение по краям, акцентируя внимание на центре изображения. Теперь рассмотрим ещё один шейдер, реализующий эффект размытия
shader_type canvas_item;
uniform sampler2D screen_texture : hint_screen_texture, filter_linear_mipmap;
uniform float amount : hint_range(0.0, 5.0);
void fragment() {
COLOR.rgb = textureLod(screen_texture, SCREEN_UV, amount).rgb;
}
Функция textureLod указывает, какую версию текстуры (уровень детализации) следует сгенерировать и использовать. Мы берём уменьшенную в amount раз текстуру и применяем её ко всему изображению. Теперь рассмотрим шейдер, который выполняет пикселизацию изображения
shader_type canvas_item;
uniform sampler2D screen_texture : hint_screen_texture, filter_linear_mipmap;
uniform float size_x = 0.008;
uniform float size_y = 0.008;
void fragment() {
vec2 uv = SCREEN_UV;
uv -= mod(uv, vec2(size_x, size_y));
COLOR.rgb = textureLod(screen_texture, uv, 0.0).rgb;
}
В этом шейдере мы округляем UV-координаты таким образом, чтобы функция textureLod считывала цвет изображения не из точки, а из прямоугольной области. Благодаря этому возникает характерный эффект пикселизации
годот 2д гайд.Шейдеры 3.Конец
Я узнал много нового о шейдерах из учебного проекта Godot Screen Space Shader. Этот проект наглядно показал, что можно корректировать изображение и изменять его с помощью несложных программ — шейдеров. Спасибо за внимание!