Сегодня хочу рассказать про шейдеры и показать, как их использовать во Flutter-проектах. Прежде чем мы начнем что-то подключать и запускать, давайте разберемся, что это вообще такое.
Шейдер — это программа, которая выполняется на графическом процессоре и отвечает за вычисление цвета каждого пикселя. Именно благодаря шейдерам мы можем получать освещение, тени, блики, искажения, волны, шумы, стеклянные поверхности и множество других эффектов. Для их написания используется язык GLSL. Он напоминает Си и специально создан для задач реального времени, например, в играх и анимации.
Шейдеры могут быть полезны, когда хочется настоящего размытия, а не его имитации, или при создании динамичных эффектов вроде волн, огня, дождя, стекла и других, которые делают интерфейс более уникальным.
Во Flutter можно использовать как готовые шейдеры, так и писать их самостоятельно. Сегодня мы разберем ситуацию, когда шейдер у нас уже есть. В следующем посте попробуем создать его с нуля или адаптировать готовый под наши потребности.
1️⃣ Чтобы шейдер стал частью приложения, достаточно подключить его в pubspec.yaml:
flutter:
shaders:
- shaders/my_shader.frag
Здесь важно именно расширение .frag. Flutter пока поддерживает только фрагментные шейдеры.
2️⃣ После этого загружаем шейдер:
late FragmentProgram program;
Future<void> loadMyShader() async {
program = await FragmentProgram.fromAsset('shaders/my_shader.frag');
}
Объект FragmentProgram можно использовать для создания одного или нескольких экземпляров FragmentShader.
3️⃣ Далее создаем FragmentShader и передаем нужные параметры. Например, размер canvas или время для анимации. Сам рендеринг удобно выполнять через CustomPainter:
class ShaderPainter extends CustomPainter {
final FragmentShader shader;
final double time;
ShaderPainter(FragmentShader fragmentShader, this.time)
: shader = fragmentShader;
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
shader.setFloat(0, size.width);
shader.setFloat(1, size.height);
shader.setFloat(2, time);
paint.shader = shader;
canvas.drawRect(Offset.zero & size, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}Важно помнить про несколько нюансов:
▪️Шейдеры во Flutter пока ограничены только фрагментными программами. Их размер и сложность влияют на вес сборки и производительность, поэтому лучше не переусердствовать
▪️Желательно кэшировать FragmentProgram, чтобы не загружать его повторно
▪️И, конечно, следить за количеством uniform-переменных
Кстати, Uniform-переменные — это глобальные параметры шейдера, которые задаются приложением. Они одинаковые для всех пикселей и позволяют управлять эффектом из Flutter-кода. Например, если в шейдере есть uTime, то мы можем передавать туда анимационное значение:
shader.setFloat(0, controller.value);
Контроллер меняет число каждый кадр, шейдер пересчитывает волну, и ваш UI плавно анимируется, нагружая GPU, а не CPU.
❕Ключевой момент: индекс в shader.setFloat(index, value) обязательно должен совпадать с порядком объявления uniform-переменных в GLSL-коде.
Сегодня мы прошли только базу,а дальше можно экспериментировать бесконечно. Если вам интересно углубиться, загляните в документацию.
❤️ — если хотите посты, в которых мы разберем создание своего собственного шейдера и подключение его к анимации