Осваиваем шейдеры Metal

Задумывались ли вы когда-нибудь, как создаются некоторые из самых сложных и визуально насыщенных анимаций, которые вы видите в приложениях каждый день? Многие из этих эффектов основаны на Metal, низкоуровневой графической и вычислительной технологии Apple, которая обеспечивает прямой доступ к графическому процессору (GPU). В то время как большая часть кода Swift и SwiftUI выполняется на ЦП и связана с логикой приложения и компоновкой, рендеринг — это задача другого рода: каждый кадр, отображаемый на экране, состоит из миллионов пикселей, которые должны многократно и эффективно вычисляться. Графический процессор создан специально для такого рода высокопараллельной работы, и Metal — это фреймворк, который позволяет разработчикам использовать его преимущества.

Metal состоит из доступного для Swift API, используемого для настройки и планирования операций GPU, и языка шейдеров Metal (MSL), языка на основе C, используемого для написания шейдеров — небольших программ, которые выполняются непосредственно на графическом процессоре. Шейдеры определяют, как позиционируется и преобразуется геометрия, в то время как фрагментные (или пиксельные) шейдеры вычисляют цвета, текстуры, освещение и визуальные эффекты. С точки зрения графического процессора, рендеринг — это непрерывный процесс преобразования данных в пиксели, кадр за кадром.

В отличие от модели анимации, управляемой представлениями в SwiftUI, Metal работает на уровне пикселей. Это позволяет создавать эффекты и анимации, управляемые временем, математическими функциями и данными, а не изменениями в иерархии представлений. Таким образом, работа с Metal требует изменения перспективы: от представлений и модификаторов к пикселям, параллельному выполнению и покадровому рендерингу, но зато такая работа обеспечивает гораздо более высокий уровень визуального контроля.

Понимаем шейдеры

Прежде чем углубляться в код, давайте разберемся, что такое шейдер. Шейдер — это просто функция, которая выполняется один раз для каждого пикселя на экране. Таким образом, представление размером 300×300 пикселей вызовет свою функцию шейдера 90,000 раз, по одному разу для каждого пикселя. Графический процессор специально разработан для параллельного выполнения этих вычислений, поэтому он может плавно обрабатывать эту огромную нагрузку со скоростью 60 кадров в секунду.

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

Связь Metal и SwiftUI

Рабочий процесс использования шейдеров Metal в SwiftUI удивительно прост, как только вы его поймете:

1. Создайте файл .metal в вашем проекте Xcode с вашими функциями шейдера
2. Соберите свой проект, и Xcode автоматически сгенерирует класс ShaderLibrary
3. Импортируйте Metal в свой файл SwiftUI с помощью команды import Metal
4. Примените шейдер к представлению SwiftUI, используя модификаторы, такие как .colorEffect() или .layerEffect()

Давайте посмотрим, как это работает на примере самого простого шейдера.

Ваш первый шейдер: basicColor

Вот полный код вашего первого шейдера.

#include <metal_stdlib>
#include <SwiftUI/SwiftUI.h>
using namespace metal;

[[ stitchable ]] half4 basicColor(float2 position, half4 currentColor) {
    return half4(0.2, 0.6, 0.9, 1.0);
}

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

Заголовки

#include <metal_stdlib>
#include <SwiftUI/SwiftUI.h>
using namespace metal;

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

Атрибут Stitchable

[[ stitchable ]]

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

Сигнатура функции

half4 basicColor(float2 position, half4 currentColor)

Давайте разберем это по пунктам:

• half4: Это возвращаемый тип. Это 4-компонентный вектор, представляющий цвет RGBA (красный, зеленый, синий, альфа-канал). Тип half — это 16-битное число с плавающей запятой, идеально подходящее для цветов, поскольку оно обеспечивает достаточную точность при высокой скорости работы на графическом процессоре.
• basicColor: Это просто имя функции. Вы можете назвать ее как угодно.
• float2 position: Этот параметр автоматически предоставляется SwiftUI. Он содержит координаты x и y отображаемого пикселя. Например, если вы отображаете представление 400×400, position может быть (200, 200) для центрального пикселя или (0, 0) для верхнего левого угла.
• half4 currentColor: Этот параметр также автоматически предоставляется SwiftUI. Он содержит существующий цвет в этой позиции пикселя до запуска шейдера. Это позволяет изменять или смешивать существующий цвет.

Тело функции

return half4(0.2, 0.6, 0.9, 1.0);

Обычно именно здесь происходит волшебство. В данном случае тело функции очень простое, поскольку она возвращает только цвет со следующими параметрами:

• Красный: 0.2 (интенсивность 20%)
• Зеленый: 0.6 (интенсивность 60%)
• Синий: 0.9 (интенсивность 90%)
• Альфа: 1.0 (полностью непрозрачный)

Эта комбинация создает приятный бирюзовый/синий цвет. Обратите внимание, что position и currentColor полностью игнорируются. Этому шейдеру все равно, где находится пиксель или какого цвета он был раньше, он просто делает все одинаковым синим цветом.

Использование в SwiftUI

Теперь давайте посмотрим, как использовать этот шейдер в SwiftUI. При сборке проекта Xcode автоматически сканирует все файлы .metal, находит все функции, помеченные как [[stitchable]], и генерирует для вас класс ShaderLibrary. Для каждой написанной вами функции шейдера, например, для нашего basicColor, Xcode создает соответствующую функцию в ShaderLibrary, которую вы можете вызвать из Swift, например, ShaderLibrary.basicColor(). Вам не нужно писать никакого кода для связывания, это полностью автоматизировано.

import SwiftUI
import Metal

struct BasicColorShaderView: View {
    var body: some View {
        Rectangle()
            .colorEffect(ShaderLibrary.basicColor())
            .frame(width: 300, height: 300)
    }
}

Вот что происходит:

1. Мы создаём объект Rectangle(), который будет выступать в качестве холста
2. Мы применяем шейдер с помощью метода .colorEffect(ShaderLibrary.basicColor())
3. Мы устанавливаем размер 300×300 пикселей.

При отрисовке этого представления SwiftUI вызывает функцию шейдера basicColor 90 000 раз (по одному разу для каждого пикселя), и каждый раз она возвращает один и тот же синий цвет. Результат? Сплошной синий прямоугольник.

Использование позиции: градиентный шейдер

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

#include <metal_stdlib>
#include <SwiftUI/SwiftUI.h>
using namespace metal;

[[ stitchable ]] half4 gradient(float2 position, half4 currentColor) {
    float normalizedX = position.x / 300.0;
    float normalizedY = position.y / 300.0;
    
    half r = half(normalizedX);
    half g = half(normalizedY);
    half b = half(1.0 - normalizedX);
    
    return half4(r, g, b, 1.0);
}

Вот как будет выглядеть этот шейдер после его реализации в SwiftUI:

А теперь давайте разберем его по пунктам.

Понимание нормализации

Первое, что нужно понять, это нормализация. Параметр position дает нам абсолютные координаты пикселей, например, для области размером 300×300, x находится в диапазоне от 0 до 300, а y — от 0 до 300. Но значения цвета должны быть в диапазоне от 0 до 1. Поэтому мы нормализуем, разделив на ширину:

float normalizedX = position.x / 300.0;

Это преобразует диапазон 0-300 в диапазон 0-1:

• Левый край (x=0): 0 / 300 = 0,0
• Центр (x=150): 150 / 300 = 0,5
• Правый край (x=300): 300 / 300 = 1,0

Создание градиента

Теперь мы можем использовать эти нормализованные значения непосредственно в качестве цветовых компонентов:

half r = half(normalizedX);

Это создает горизонтальный градиент для красного цвета:

• На левом краю (нормализованное значение X = 0,0): нет красного цвета
• В центре (нормализованное значение X = 0,5): средне-красный цвет
• На правом краю (нормализованное значение X = 1,0): полностью красный цвет

Аналогично, для зеленого цвета мы используем вертикальную позицию:

half g = half(normalizedY);

Для синего цвета мы делаем кое-что интересное — используем обратный эффект:

half b = half(1.0 - normalizedX);

Выражение 1.0 - normalizedX создает обратный градиент:

• На левом краю: 1.0 — 0.0 = 1.0 (полностью синий)
• В центре: 1.0 — 0.5 = 0.5 (средне-синий)
• На правом краю: 1.0 — 1.0 = 0.0 (нет синего)

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

Использование в SwiftUI

import SwiftUI
import Metal

struct GradientShaderView: View {
    var body: some View {
        Rectangle()
            .colorEffect(ShaderLibrary.gradient())
            .frame(width: 300, height: 300)
    }
}

Обратите внимание, что код SwiftUI практически идентичен нашему первому примеру. Мы просто изменили вызываемую функцию шейдера. SwiftUI по-прежнему автоматически предоставляет параметры position и currentColor.

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

Источник