title: Using GPUImage to Recreate iOS 7 Glass Effect
body: <p>I am trying to use the iOS 7 style glass effect in my glass by applying image effects to a screenshot of a <code>MKMapView</code>. <a href="http://cloud.coneybeare.net/Qynk" rel="nofollow noreferrer">This UIImage category</a>, provided by Apple, is what I am using as a baseline. This method desaturates the source image, applies a tint color, and blurs heavily using the input vals:</p>
  
  <pre><code>[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];
  </code></pre>
  
  <p>This produces the effect I am looking for, but takes way too long — between <code>.3</code> and <code>.5</code> seconds to render on an iPhone 4.</p>
  
  <p><img src="https://i.stack.imgur.com/zcFR1.png" alt="enter image description here"></p>
  
  <p>I would like to use the excellent <a href="https://github.com/BradLarson/GPUImage" rel="nofollow noreferrer"><code>GPUImage</code></a> as my preliminary attempts have been about 5-10 times faster, but I just can't seem to get it right.</p>
  
  <pre><code>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];
  </code></pre>
  
  <p>This produces an image which is close, but not quite there</p>
  
  <p><img src="https://i.stack.imgur.com/TkIim.png" alt="enter image description here"></p>
  
  <p>The blur doesn't seem to be deep enough, but when I try to increase the <code>blurSize</code> above, it becomes grid-like, almost like a kaleidoscope. You can actually see the grid here by zooming in on the second image. The tint-color I am trying to mimic seems to just wash out the image instead of overlaying and blending, which I think the Apple sample is doing.</p>
  
  <p>I have tried to setup the filters according to comments made by @BradLarson in <a href="https://stackoverflow.com/questions/11601166/iphone-sdk-frosted-glass-ios-7-blur-effect">another SO question</a>. Am I using the wrong <code>GPUImage</code> filters to reproduce this effect, or am I just setting them up wrong?</p>