Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Frosted glass effect
in mobile web and app
Anistar Sung
John Wu

Saturday, November 2, 13
Anistar Sung

Yahoo EC Lead Engineer

John wu

Yahoo EC Sr. Engineer

Saturday, November 2, 13
Why we like
frosted glass
effect?

Saturday, November 2, 13
content is the king

Saturday, November 2, 13
content is the king

Saturday, November 2, 13
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
Frosted glass flow
Saturday, November 2, 13
DEMO

Saturday, November 2, 13
DEMO

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

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

Saturday, November 2, 13
Framework Solutions
CoreGraphics: 1425 ms
GPUImage:
153 ms
CoreImage:
138 ms
UIToolbar:

Saturday, November 2, 13

N/A (un...
GPUImage Framework
GPUImagePicture *imagePicture = [[GPUImagePicture alloc] initWithImage:sourceImage];
GPUImageFastBlurFi...
CoreImage Framework
CIImage *coreSourceImage = [CIImage imageWithCGImage:sourceImage.CGImage];
CIFilter *blurFilter = [CIF...
UIToolbar
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(
0.0f, 0.0f, 320.0f, 100.0f)];
[self.view addSu...
Q&A

Saturday, November 2, 13
Prochain SlideShare
Chargement dans…5
×

Yahoo2013 hackday - Frosted Glass Effect on iOS app

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

  • Soyez le premier à commenter

Yahoo2013 hackday - Frosted Glass Effect on iOS app

  1. 1. Frosted glass effect in mobile web and app Anistar Sung John Wu Saturday, November 2, 13
  2. 2. Anistar Sung Yahoo EC Lead Engineer John wu Yahoo EC Sr. Engineer Saturday, November 2, 13
  3. 3. Why we like frosted glass effect? Saturday, November 2, 13
  4. 4. content is the king Saturday, November 2, 13
  5. 5. content is the king Saturday, November 2, 13
  6. 6. Saturday, November 2, 13
  7. 7. Frosted glass flow Saturday, November 2, 13
  8. 8. Frosted glass flow Saturday, November 2, 13
  9. 9. Frosted glass flow Saturday, November 2, 13
  10. 10. Frosted glass flow Saturday, November 2, 13
  11. 11. Frosted glass flow Saturday, November 2, 13
  12. 12. Frosted glass flow Saturday, November 2, 13
  13. 13. Frosted glass flow Saturday, November 2, 13
  14. 14. DEMO Saturday, November 2, 13
  15. 15. DEMO Saturday, November 2, 13
  16. 16. Mobile device so slow Speed is most important thing in UX Saturday, November 2, 13
  17. 17. CPU vs GPU GPU faster than CPU 50X in blur effect. Saturday, November 2, 13
  18. 18. Framework Solutions CoreGraphics: 1425 ms GPUImage: 153 ms CoreImage: 138 ms UIToolbar: Saturday, November 2, 13 N/A (unadjustable)
  19. 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. 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. 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. 22. Q&A Saturday, November 2, 13

×