Yahoo2013 hackday - Frosted Glass Effect on iOS app

Frosted glass effect in mobile web and app

Anistar SungJohn Wu

Saturday, November 2, 13

Anistar SungYahoo EC Lead Engineer

John wuYahoo EC Sr. Engineer


Why we like frosted glass

effect？


content is the king


content is the king



Frosted glass flowSaturday, November 2, 13







DEMO


DEMO


Mobile device so slowSpeed is most important thing in UX


CPU vs GPUGPU faster than CPU 50X

in blur effect.


Framework SolutionsCoreGraphics: 1425 msGPUImage: 153 msCoreImage: 138 ms

UIToolbar: N/A (unadjustable)


GPUImage FrameworkGPUImagePicture *imagePicture = [[GPUImagePicture alloc] initWithImage:sourceImage];GPUImageFastBlurFilter *gpuBlurFilter = [[GPUImageFastBlurFilter alloc] init];gpuBlurFilter.blurPasses = 4;gpuBlurFilter.blurSize = 2.0f;[imagePicture addTarget:gpuBlurFilter];[gpuBlurFilter prepareForImageCapture];[imagePicture processImage]; UIImage *resultImage = [gpuBlurFilter imageFromCurrentlyProcessedOutput];


CoreImage FrameworkCIImage *coreSourceImage = [CIImage imageWithCGImage:sourceImage.CGImage];CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];[blurFilter setValue:coreSourceImage forKey:kCIInputImageKey];[blurFilter setValue:@5.0f forKey:@"inputRadius"];CIImage *resultCoreImage = [blurFilter outputImage]; CGImageRef cgImageRef = [_context createCGImage:resultCoreImage fromRect:coreSourceImage.extent];UIImage *resultImage = [UIImage imageWithCGImage:cgImageRef];CGImageRelease(cgImageRef);


UIToolbarUIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 100.0f)];[self.view addSubview:toolbar];


Q&A


Yahoo2013 hackday - Frosted Glass Effect on iOS app

Technology