Shader programming для новичка

Пошаговое руководство по базовым концепциям шейдерного программирования и созданию первого шейдера в Godot 4.4. Примерное время выполнения: 90–150 минут.

Шейдер — короткая программа, выполняющаяся на графическом процессоре (GPU) для расчёта позиции вершин, цвета пикселей и атрибутов промежуточных этапов рендеринга. Основные классы шейдеров: vertex (вершинный), fragment (пиксельный) и compute (вычислительный). Vertex шейдер трансформирует координаты вершин и может передавать данные во фрагментный шейдер. Fragment шейдер вычисляет итоговый цвет пикселя, читая текстуры и применяя освещение.

Шейдеры часто пишут на языках, специфичных для платформы: GLSL (OpenGL/Vulkan), HLSL (DirectX) или Godot Shader Language (основан на GLSL-подобном синтаксисе, адаптирован в Godot 4.4). Правильное разделение обязанностей между vertex и fragment помогает снизить нагрузку на GPU и улучшить кроссплатформенность.

Шаг 1: vertex vs fragment

Команда: создать два файла simple.vert и simple.frag и проверить их через glslangValidator.

# simple.vert
#version 450
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec2 a_uv;
layout(location = 0) out vec2 v_uv;
layout(push_constant) uniform Push { mat4 u_model; mat4 u_view; mat4 u_proj; };
void main() {
    v_uv = a_uv;
    gl_Position = u_proj * u_view * u_model * vec4(a_position, 1.0);
}

# simple.frag
#version 450
layout(location = 0) in vec2 v_uv;
layout(location = 0) out vec4 out_color;
layout(binding = 0) uniform sampler2D u_tex;
void main() {
    out_color = texture(u_tex, v_uv);
}

Пояснение: vertex шейдер принимает атрибуты вершин и высчитывает позицию в экранных координатах. Fragment шейдер читает текстуру по UV и выводит итоговый цвет. Такой базовый паттерн покрывает 2D/3D текстурирование.

Выполните команду в терминале (glslangValidator 2026):

glslangValidator -V simple.vert -o simple.vert.spv
glslangValidator -V simple.frag -o simple.frag.spv

Ожидаемый вывод (успех):

simple.vert
WARNING: 0:1: Extension 'GL_GOOGLE_cpp_style_line_directive' is not supported
simple.vert.spv: Success
simple.frag
simple.frag.spv: Success

Типичная ошибка и фикс:

Ошибка:
ERROR: simple.frag:5: 'texture' : no matching overloaded function found

Фикс:
Проверьте версию GLSL в шапке (#version 450 для Vulkan). В Vulkan GLSL для sampler2D требуется корректный контекст; убедитесь, что сигнатуры и входы совпадают между вертексом и фрагментом (location, layout(binding)).

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

Шаг 2: первый шейдер в Godot

Команда: проверьте установленную версию Godot и создайте новый проект, сцену и Sprite2D (или MeshInstance3D для 3D). В терминале:

godot --version
# ожидаемый вывод:
# Godot Engine v4.4.1.stable.official - 2025-11-12

Пояснение: в Godot 4.4 используется Godot Shader Language, схожий с GLSL, но с собственными блоками shader_type и встроенными переменными.

# простой 2D шейдер Godot (file: color_shift.shader)
shader_type canvas_item;

uniform vec4 tint : hint_color = vec4(1.0, 0.7, 0.4, 1.0);

void fragment() {
    vec2 uv = UV;
    vec4 tex = texture(TEXTURE, uv);
    COLOR = tex * tint;
}

Пошагово в редакторе Godot 4.4 (GUI): создать Sprite2D -> в свойствах Material -> New ShaderMaterial -> Shader -> New Shader -> вставить код. Для 3D: создайте MeshInstance3D, материал ShaderMaterial и аналогичный шейдер с shader_type spatial (в 4.4 также поддержан рендерер Vulkan).

Ожидаемый визуальный вывод: спрайт с применённой цветовой тонировкой (tint). В редакторе в окне сцены вы увидите немедленную смену цвета.

Типичная ошибка и фикс:

Ошибка:
SCRIPT ERROR: Shader compilation failed: 'fragment' : syntax error

Фикс:
Проверьте правильность ключевых слов: для 2D используйте shader_type canvas_item;, для 3D — shader_type spatial;. Убедитесь, что блоки называются vertex() иfragment(), если вы их используете, и что переменные не конфликтуют с именами движка (например, COLOR, UV, SCREEN_UV).

Дополнительный пример: простой анимированный градиент в Godot (фрагмент):

shader_type canvas_item;
uniform float time;
void fragment() {
    vec2 uv = UV;
    float v = 0.5 + 0.5 * sin(uv.x * 10.0 + time);
    COLOR = vec4(v, uv.y, 1.0 - v, 1.0);
}

В редакторе можно передавать uniform time из скрипта по кадрам (50–120 ms для видимого эффекта). Это базовый паттерн для анимации шейдеров без CPU-изменений.

Шаг 3: типичные эффекты

Команда: каждый эффект — небольшой шейдерный фрагмент. Ниже приведены 4 типичных эффекта с кодом и пояснениями.

Outline (окантовка)

shader_type canvas_item;
uniform vec4 outline_color : hint_color = vec4(0.0,0.0,0.0,1.0);
uniform float thickness = 2.0;
void fragment() {
    vec2 texSize = textureSize(TEXTURE, 0);
    float a = 0.0;
    for (int x = -2; x <= 2; ++x) {
        for (int y = -2; y <= 2; ++y) {
            vec2 off = vec2(float(x), float(y)) * (thickness / texSize);
            a = max(a, texture(TEXTURE, UV + off).a);
        }
    }
    vec4 base = texture(TEXTURE, UV);
    if (base.a < 0.1 && a > 0.1) {
        COLOR = outline_color;
    } else {
        COLOR = base;
    }
}

Ожидаемый вывод: контур вокруг непрозрачных областей. Типичная ошибка — плохая производительность при большом размере текстуры. Фикс: уменьшите диапазон сэмплов или используйте отдельно отрисованный контур через MultiMesh/пост-эффект.

Rim lighting (обводка освещением)

shader_type spatial;
uniform vec3 rim_color : hint_color = vec3(1.0, 0.8, 0.6);
uniform float rim_power = 2.0;
void fragment() {
    vec3 N = NORMAL;
    vec3 V = normalize(-VERTEX);
    float rim = pow(1.0 - max(dot(N, V), 0.0), rim_power);
    ALBEDO = vec3(ALBEDO) + rim * rim_color;
}

Ожидаемый вывод: яркая кайма по краям формы. Ошибка: использование неподдерживаемых Built-in переменных в Godot 4.4 (переименования). Фикс: проверьте актуальную документацию Godot 4.4 и используйте правильные переменные (NORMAL, POSITION, WORLD_POSITION).

Dissolve (растворение)

shader_type canvas_item;
uniform sampler2D noise_tex : hint_white;
uniform float threshold = 0.5;
void fragment() {
    float n = texture(noise_tex, UV * 2.0).r;
    vec4 col = texture(TEXTURE, UV);
    if (n < threshold) discard;
    COLOR = col;
}

Ожидаемый вывод: части спрайта исчезают по шумовой карте при изменении threshold. Типичная ошибка — странный артефакт при использовании MIPMAP: шумовая текстура должна иметь корректный фильтр (nearest для чистого шума) и корректные UV-координаты. Фикс: установите filter = nearest или используйте high-frequency noise с большим разрешением.

Normal mapping (нормал-майппинг) — краткая вставка

shader_type spatial;
uniform sampler2D normal_map : hint_normal;
void fragment() {
    vec3 nmap = texture(normal_map, UV).rgb;
    vec3 N = normalize(nmap * 2.0 - 1.0);
    // combine N with lighting model
}

Ожидаемый вывод: визуальная детализация поверхности при минимальной геометрии. Типичная ошибка — неправильный формат normal map (RGB vs. signed normals). Фикс: убедитесь, что карта сохранена в формате, где (0.5,0.5,1.0) соответствует плоской поверхности; используйте настройку импорта в Godot (Normal Map checkbox).

Шаг 4: отладка шейдеров

Команда: используйте glslangValidator для статической валидации и RenderDoc для рент-тайм отладки. Пример валидации GLSL:

glslangValidator -V my_shader.frag -o /dev/null
# ожидаемый вывод при успешной валидации:
# my_shader.frag: Success

Пояснение: статическая валидация ловит синтаксис и несоответствия интерфейсов между шейдерами. Динамическая отладка через RenderDoc позволяет захватить кадр, инспектировать буферы, текстуры и результат исполнения шейдера. В Godot 4.4 можно подключать RenderDoc к запуску игры из редактора (Desktop Vulkan).

Примеры техник отладки непосредственно в шейдере:

• Вывод промежуточных значений в цвет: COLOR = vec4(N, 1.0).
• Пошаговая замена сложных выражений на константы для локализации ошибки.
• Проверка выходной альфы: если фрагмент неожиданно исчезает, временно установите COLOR.a = 1.0.

Типовая ошибка: «black screen» — шейдер компилируется, но ничего не видно. Фикс: проверьте, не произошло ли discard раннее, правильны ли UV и TEXTURE, не переписаны ли uniform'ы нулевыми значениями из скриптов. Также убедитесь, что материал действительно назначен объекту и рендер-пас включён.

Пример отладки в Godot (GDScript):
# передаём time в шейдер
var mat = $Sprite.material
mat.set_shader_parameter("time", Engine.get_time_secs())

Шаг 5: оптимизация для мобильных

Команда: провести профилирование рендера на целевом устройстве (Android) и применить оптимизации. Инструменты: Android GPU Inspector, Vulkan validation layers, профайлер Godot. Рекомендуемый цикл: профайлинг -> hotspot -> оптимизация -> повторный профайлинг.

Ключевые практики оптимизации:

• Снижайте количество сэмплов в фрагментных алгоритмах (outline, blur).
• Используйте lower precision: заменить float на mediump в GLSL для OpenGL ES; в Godot применяйте компактные выражения.
• Объединяйте текстуры в атлас, чтобы уменьшить переключения текстур (texture binds).
• Минимизируйте branching в фрагментных шейдерах; на некоторых мобильных GPU ветвление стоит очень дорого.

Пример перехода на экономную точность (GLSL для ES):

#version 300 es
precision mediump float;

in vec2 v_uv;
out vec4 out_color;
uniform sampler2D u_tex;
void main() {
    vec3 col = texture(u_tex, v_uv).rgb;
    out_color = vec4(col, 1.0);
}

Ожидаемые улучшения: снижение энергопотребления и увеличение FPS на 10–40% в зависимости от профиля шейдера и устройства. Типичная ошибка: визуальное ухудшение из-за слишком низкой точности (banding). Фикс: оставьте mediump для большинства выражений, но используйте highp для критичных расчётов (например, позиции или высокочастотной нормали).

Какие ресурсы?

• Официальная документация Godot 4.4 — примеры shader language и особенности импорта текстур.
• Khronos GLSL и Vulkan спецификации (2025–2026) — для правильной валидации и трансляции в SPIR-V.
• Книги и курсы: «Real-Time Rendering» (4-е издание) и онлайн-курсы по shader programming 2025–2026.
• Форумы и сообщества: GitHub репозитории по Godot-шаблонам, статьи на /category/tutorials и подборки в /category/godot.

Дополнительно: готовые ассеты шумов и normal map размером 512×512–2048×2048, форматы PNG/EXR. Для мобильных целей используйте 512×512 или 1024×1024 в зависимости от памяти.

Какие инструменты?

• Godot Engine 4.4 (2025) — основной редактор и рантайм.
• glslangValidator (2026.01) — статическая валидация и компиляция в SPIR-V (~6–10 MB).
• RenderDoc 1.26 (2025) — захват кадров и инспекция текстур/буферов.
• Android GPU Inspector / Mali Profiler / Adreno Profiler — профильные инструменты для мобильных GPU.
• Изображения: Krita / Photoshop для генерации карт (normal, roughness, noise). Формат импорта в Godot: PNG, EXR для HDR.

Частые вопросы

как начать писать шейдеры, если я не знаком с матемatikой?

Начать можно с простых визуальных задач: изменение цвета, смещение UV, наложение градиентов. Базовая линейная алгебра (векторы, матрицы 3×3 и 4×4) применима постоянно, но на начальном этапе достаточно понимать операции сложения, скаляра и dot/cross. Используйте визуальные подходы: выводите промежуточные значения как цвет (например, нормали как RGB) — это заменяет текстовые отладчики. По мере прогресса добавляйте темы: трансформации (model/view/proj), нормали и освещение объясняются шаг за шагом. Практика в Godot 4.4 с простыми примерами даст быстрый прогресс без глубокого погружения в теорию.

что быстрее: перенос расчётов в vertex или fragment?

В общих случаях vertex-шейдеры выполняются на уникальных вершинах, а fragment-шейдеры — на каждом пикселе, поэтому перенос вычислений в vertex может значительно снизить нагрузку при небольшом количестве вершин. Однако нельзя переносить всё: интерполяция вершинных данных между фрагментами даёт ограничения точности, и некоторые эффекты (постобработка, fine-detail текстуры) по определению должны быть выполнены во фрагментном шейдере. Следуйте правилу: если значение можно адекватно интерполировать и повторное вычисление в фрагменте дорого, перемещайте в vertex.

почему на мобильных устройствах шейдер выглядит по-другому?

Различия вызваны несколькими причинами: разная точность вычислений (mediump vs highp), поддерживаемые расширения, разное поведение MIPMAP/фильтрации и ограниченная пропускная способность памяти. Кроме того, драйверы могут по-разному оптимизировать шейдеры, что влияет на порядок вычислений и точность. Для предсказуемого результата тестируйте на целевых устройствах, используйте профилирование и, при необходимости, применяйте специальные ветки для мобильных версий шейдеров (например, упрощённая версия эффекта с меньшим количеством текстурных выборок).

каким инструментом лучше всего отлаживать шейдеры?

Для десктопа самый универсальный инструмент — RenderDoc (версия 1.26 в 2025 году). Он позволяет сделать захват кадра, посмотреть содержимое текстур, буферов вершин и фрейбуфера, а также пошагово анализировать входы и выходы шейдеров. Для мобильных GPU используйте Android GPU Inspector или специфичные профайлеры от производителей (Mali, Adreno). В Godot встроенный отладчик и вывод ошибок compilation log часто дают достаточно информации на этапе разработки.

сколько времени займёт освоение базовых шейдеров?

Для получения рабочих базовых навыков (напиши свой первый vertex/fragment, применить 2–3 эффекта) потребуется примерно 4–10 часов практики, если уделять внимание примерам и описанным шагам. Чтобы уверенно писать оптимизированные шейдеры для разных платформ, потребуется несколько недель регулярной практики и профайлинга на целевых устройствах. Важнее качество практики: создавайте маленькие проекты с чёткими целями и замеряйте производительность каждого изменения.