При создании фото-приложения с фильтрами разработчики сталкиваются с проблемой производительности: карусель превью должна работать при 60 FPS, но последовательная обработка на CPU занимает 200–400 мс на кадр. GPU-шейдеры решают эту задачу: параллельная обработка пикселей занимает 5–15 мс. При этом выбор подхода — CIFilter, Metal или LUT — напрямую влияет на скорость разработки и гибкость готового решения.
В одном проекте для e-commerce нам требовалось 15 фильтров с плавным превью. Мы выбрали комбинацию CIFilter для стандартных эффектов и кастомные Metal-шейдеры для дуотона. Карусель работала стабильно в 60 FPS на iPhone 11 и выше; бюджетные модели (iPhone SE 2020) выдавали 45–50 FPS — мы оптимизировали, уменьшив размер превью до 200×200 и добавив кеширование. Это сэкономило около 30% времени обработки на слабых устройствах.
iOS: CIFilter vs Metal
| Технология | Скорость | Гибкость | Сложность |
|---|---|---|---|
| CIFilter | 2–5 мс (на iPhone 14) | Ограничен набором Apple | Низкая, встроен в SDK |
| Metal | 1–3 мс | Полный контроль пикселей | Высокая, пишем MSL-шейдеры |
CIFilter — простой путь: CIColorMonochrome, CIPhotoEffectChrome, CIVignette. Строим цепочку через filter.outputImage, обязательно используем CIContext(options: [.useSoftwareRenderer: false]) для GPU. По данным Apple (WWDC 2020 Session 10040), это обеспечивает до 90% загрузки GPU.
Metal нужен для дуотона с кастомными цветами, zonal adjustments, LUT-фильтров. Пример fragment shader:
fragment float4 duotoneFilter(VertexOut in [[stage_in]], texture2d<float> texture [[texture(0)]]) { float4 color = texture.sample(sampler, in.texCoord); float luma = dot(color.rgb, float3(0.299, 0.587, 0.114)); return mix(shadowColor, highlightColor, luma); } Android: GPUImage и Vulkan
| Библиотека | API | Производительность |
|---|---|---|
| GPUImage (OpenGL ES) | GPUImageFilter + GPUImageView | 10–15 мс на флагманских устройствах |
| RenderScript Toolkit | Intrinsics Replacement | 5–10 мс |
| Vulkan (новые проекты) | Прямое управление GPU | 3–8 мс |
GPUImageFilterGroup позволяет строить цепочки. Для предпросмотра GPUImageView рендерит на SurfaceTexture без промежуточного Bitmap — критично для производительности. По тестам, Vulkan обрабатывает сложные эффекты в 1.5–2 раза быстрее OpenGL ES.
Flutter: мост к нативу
CPU-библиотека image не годится для превью. Используем ColorFiltered с матрицей для базовых коррекций. Сложные фильтры — через Flutter Texture и нативный код (Metal/OpenGL) на платформенной стороне. Мы подключаем такие решения «под ключ».
Как работает предпросмотр с кешированием?
Генерируем превью заранее: при загрузке экрана создаём уменьшенную копию (300×300 px) через UIGraphicsImageRenderer, прогоняем через каждый фильтр, кешируем в NSCache. Пользователь листает карусель — картинки уже готовы. Финальный рендер в полном разрешении запускается только после выбора фильтра.
Пошаговая реализация предпросмотра
- Получить оригинальное изображение.
- Создать уменьшенную копию (300×300).
- Для каждого фильтра применить к копии и сохранить результат в кеш.
- Отобразить кешированные превью в карусели.
- При выборе фильтра — запустить полный рендер на оригинале.
Этот подход обеспечивает 60 FPS даже на устройствах с 2 ГБ RAM.
Почему LUT-фильтры выигрывают у процедурных?
Look Up Table — это 3D-таблица 64×64×64, где каждый RGB-вход даёт RGB-выход через интерполяцию. Дизайнер создаёт LUT в Lightroom, разработчик подключает как текстуру. Преимущества:
- Одна текстура заменяет цепочку из 5–10 CIFilter-операций.
- Качество цветокоррекции выше — не теряются детали.
- Легко обновлять: поменяли LUT — поменялся фильтр.
На iOS используем CIColorCube или CIColorCubeWithColorSpace. На Android — GPUImageLUTFilter. Мы внедряли LUT в проектах для e-commerce — это дало +15% к конверсии за счёт реалистичных цветов.
Сохранение настроек фильтра
Пользователь выбрал «Хром» с интенсивностью 0.7 — при возврате к посту это значение должно восстановиться. Сохраняем не готовое изображение, а параметры фильтра (filterName, intensity) — это позволяет редактировать фото после сохранения черновика без потери качества.
Финальный рендер в полном разрешении запускаем только перед публикацией или экспортом. Это сохраняет оригинал нетронутым и даёт возможность отменить фильтр в любой момент.
Что входит в разработку
- Анализ требований и прототипирование интерфейса фильтров
- Создание шейдеров Metal/OpenGL или настройка CIFilter
- Реализация предпросмотра с кешированием
- Интеграция LUT-фильтров
- Оптимизация под целевые устройства (iPhone, Android флагманы и бюджетные)
- Тестирование на реальных девайсах (5+ моделей)
- Предоставление исходного кода и документации
Сроки и стоимость
Сроки зависят от сложности: базовый набор фильтров — от 3 до 7 дней, комплексное решение с LUT и ML — 2–3 недели. Стоимость рассчитывается индивидуально после анализа требований.
У нас 7+ лет опыта в мобильной разработке и более 50 реализованных проектов с фильтрами. Мы гарантируем 60 FPS в карусели и соответствие App Store Review Guidelines (Section 4.2, 5.1). Свяжитесь с нами для консультации по вашему проекту — мы поможем выбрать оптимальное решение и подготовим шейдеры под ваши задачи. Закажите внедрение фильтров уже сегодня, и ваше приложение получит профессиональную обработку изображений.