Stranger Shaders: выворачиваем приложение наизнанку на Android и iOS

В приложении Drinkit была пасхалка: карточка продукта по нажатию кнопки проваливается в мир, очень похожий на популярный сериал про очень странные дела.

Это комбинация эффектов глитча и смены палитры плюс летающие частицы и ползущие корни. Это всё работает на Android и iOS поверх фонового видео.

Как это выглядит:

— Android

— iOS

Мы те самые Android- и iOS-разработчики, которые этот эффект делали.

Сначала мы расскажем про шейдеры. AGSL и RuntimeShader на Android, SwiftUI-шейдеры на Metal (colorEffect и layerEffect) на iOS. Несколько десятков строк, и любой ваш экран можно перекрасить, исказить и заставить жить своей жизнью. Такой эффект вы соберете у себя в тот же вечер.

А потом пойдет хард-кор. Добавляем шейдер на видео, и всё ломается. Видео живет в отдельном мире: свой surface, свой декодер, своя композиция кадров, до которой обычные шейдерные API просто не дотягиваются. Разберем, как устроен рендеринг видео на обеих платформах, покажем способы всё-таки применить шейдер к видеокадрам и сравним их цену: FPS, пропущенные кадры, батарея.

Доклад для мобильных разработчиков, которые хотят делать красиво и понимать, что происходит под капотом рендеринга.

Порог входа низкий: базу по шейдерам даем с нуля, первую половину повторит любой.

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