Yahoo 2013 Hackdy演講： 毛玻璃效果如何在app中進行實作，並瞭解執行效率的差異。

1. Frosted glass effect
in mobile web and app
Anistar Sung
John Wu
Saturday, November 2, 13

2. Anistar Sung
Yahoo EC Lead Engineer
John wu
Yahoo EC Sr. Engineer
Saturday, November 2, 13

3. Why we like
frosted glass
effect？
Saturday, November 2, 13

4. content is the king
Saturday, November 2, 13

5. content is the king
Saturday, November 2, 13

6. Saturday, November 2, 13

7. Frosted glass flow
Saturday, November 2, 13

8. Frosted glass flow
Saturday, November 2, 13

9. Frosted glass flow
Saturday, November 2, 13

10. Frosted glass flow
Saturday, November 2, 13

11. Frosted glass flow
Saturday, November 2, 13

12. Frosted glass flow
Saturday, November 2, 13

13. Frosted glass flow
Saturday, November 2, 13

14. DEMO
Saturday, November 2, 13

15. DEMO
Saturday, November 2, 13

16. Mobile device so slow
Speed is most important thing in UX
Saturday, November 2, 13

17. CPU vs GPU
GPU faster than CPU 50X
in blur effect.
Saturday, November 2, 13

18. Framework Solutions
CoreGraphics: 1425 ms
GPUImage:
153 ms
CoreImage:
138 ms
UIToolbar:
Saturday, November 2, 13
N/A (unadjustable)

19. GPUImage Framework
GPUImagePicture *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];
Saturday, November 2, 13

20. CoreImage Framework
CIImage *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);
Saturday, November 2, 13

21. UIToolbar
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(
0.0f, 0.0f, 320.0f, 100.0f)];
[self.view addSubview:toolbar];
Saturday, November 2, 13

22. Q&A
Saturday, November 2, 13