Использование GPUImage для воссоздания эффекта стекла iOS 7

Question

Я пытаюсь использовать эффект стекла в стиле iOS 7 в своем стекле, применяя эффекты изображения к скриншоту MKMapView. This UIImage category, предоставленный Apple, является тем, что я использую в качестве базовой линии. Этот метод уменьшает насыщенность исходного изображения, применяет оттенок цвета, и стирает сильно используя входные Vals:

[image applyBlurWithRadius:10.0 
       tintColor:[UIColor colorWithRed:229/255.0f green:246/255.0f blue:255/255.0f alpha:0.33] 
    saturationDeltaFactor:0.66 
       maskImage:nil]; 

Это производит эффект я ищу, но занимает слишком много времени - между .3 и .5 секундой, чтобы вынести на iPhone 4.

Я хотел бы использовать отличную GPUImage как мои предварительные попытки были приблизительно в 5-10 раз быстрее, но я просто не могу показаться, чтобы получить это право.

GPUImagePicture *stillImageSource = [[GPUImagePicture alloc] initWithImage:image]; 

GPUImageSaturationFilter *saturationFilter = [[GPUImageSaturationFilter alloc] init]; 
saturationFilter.saturation = 0.33; // 1.0 - 0.66; 
[stillImageSource addTarget:saturationFilter]; 

GPUImageMonochromeFilter *monochromeFilter = [[GPUImageMonochromeFilter alloc] init]; 
[monochromeFilter setColor:(GPUVector4){229/255.0f, 246/255.0f, 1.0f, 0.33f}]; 
[monochromeFilter setIntensity:0.2]; 
[saturationFilter addTarget:monochromeFilter]; 

GPUImageFastBlurFilter *blurFilter = [[GPUImageFastBlurFilter alloc] init]; 
blurFilter.blurSize = 2; 
blurFilter.blurPasses = 3; 
[monochromeFilter addTarget:blurFilter]; 

[saturationFilter prepareForImageCapture]; 
[monochromeFilter prepareForImageCapture]; 

[stillImageSource processImage]; 
image = [blurFilter imageFromCurrentlyProcessedOutput]; 

Это создает изображение, которое близко, но не совсем там

размывания, кажется, не достаточно глубоко, но когда я пытаюсь увеличить blurSize выше, становится сетчатым, почти как калейдоскоп. Вы можете увидеть сетку здесь, увеличив изображение на втором изображении. Цвет оттенка, который я пытаюсь подражать, кажется, просто вымывает изображение вместо наложения и смешивания, которые, по моему мнению, делают образец Apple.

Я попытался настроить фильтры в соответствии с комментариями, сделанными @BradLarson в another SO question. Использую ли я неправильные фильтры GPUImage, чтобы воспроизвести этот эффект, или я просто устанавливаю их неправильно?

Answer 1

ОК, я немного что-то работаю над этим, и у меня, наконец, есть его функциональность. Я просто ввел ряд изменений в фильтры размытия GPUImage в фреймворк, и в результате я считаю, что у меня есть разумная копия эффекта размытости Apple, которую они используют для таких вещей, как вид центра управления.

Раньше размытия, которые у меня были в каркасе, использовали один предварительно просчитанный радиус, и единственный способ повлиять на их интенсивность заключался в том, чтобы настроить расстояние, на котором они выбрали пиксели из входного изображения. При ограниченном числе выборок на пиксель изменение множественности для интервала между выбранными пикселями намного выше 1.5 начинало вводить серьезные блокирующие артефакты по мере пропуска пикселей.

Новая реализация гауссовского размытия, которую я построил, сочетает в себе преимущества производительности предварительно рассчитанных гауссовских весов с возможностью использования произвольного радиуса (сигма) для размытия Гаусса. Он делает это, создавая шейдеры «на лету», поскольку они необходимы для различных радиусов. Он также уменьшает количество образцов текстуры, необходимых для данного размытия, используя аппаратную интерполяцию для считывания двух текселей за раз для каждой точки выборки.

Новый GPUImageiOSBlurFilter объединяет этот настроенный гауссовский размытый фильтр произвольного радиуса с фильтром коррекции цвета, который, как представляется, реплицирует настройку. Apple выполняет цвета после того, как они были размыты.Я добавил ниже сравнение с моим ответом here, но он показывает Apple, встроенный в размытости с точки зрения центра управления на левой, и мой новый GPUImage фильтра размывания справа:

как способ (размытость Apple, по-видимому, происходит с сигмой 48, для которой требуется довольно большая площадь для каждого пикселя), я использую 4X понижающую дискретизацию перед размыванием Gaussian, а затем 4-кратное повышение частоты дискретизации. Это уменьшает количество пикселов, которые должны быть размыты 16X, а также уменьшает сигма размытия от 48 до 12. iPhone 4S может размыть весь экран примерно через 30 мс с помощью этого фильтра.

Получение размытия вправо - это одно. Apple по-прежнему не обеспечивает быстрый способ получения содержимого изображения за вашими взглядами, так что, скорее всего, это будет вашим узким местом для быстрого изменения контента.