Frosted glass effect
in mobile web and app
Anistar Sung
John Wu
Anistar Sung
Yahoo EC Lead Engineer

John wu
Yahoo EC Sr. Engineer
Why we like
frosted glass
effect ?
content is the king
content is the king
Frosted glass flow
Frosted glass flow
Frosted glass flow
Frosted glass flow
DEMO
Mobile device so slow
Speed is most important thing in UX
CPU vs GPU
GPU faster than CPU 50X
in blur effect.
Framework Solutions
CoreGraphics: 1425 ms
GPUImage:
153 ms
CoreImage:
138 ms
UIToolbar:

N/A (unadjustable)
GPUImage Framework
GPUImagePicture *imagePicture = [[GPUImagePicture alloc]
initWithImage:sourceImage];GPUImageFastBlurFil...
CoreImage Framework
CIImage *coreSourceImage = [CIImage
imageWithCGImage:sourceImage.CGImage];CIFilter *blurFilter = [CIFi...
UIToolbar
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(
0.0f, 0.0f, 320.0f, 100.0f)];
[self.view addSu...
Graphics Effect in
Web

Frosted glass in Web
Yahoo! Presentation, Confidential

18
Transparency Mask
Blur Image

Origin Image

Yahoo! Presentation, Confidential

19
Type I
Scale extremely small
image to large
Yahoo! Presentation, Confidential

20
Yahoo! Presentation, Confidential

21
Yahoo! Presentation, Confidential

22
Type II
Duplicate origin
image with CSS filter
Blur.

Yahoo! Presentation, Confidential

23
Yahoo! Presentation, Confidential

24
Yahoo! Presentation, Confidential

25
Cross Browser
• CSS Filter : Blur
• SVG Filter
• filter : progid:
DXImageTransform.Micros
oft.Blur
Yahoo! Presentation, Co...
Type III
• Canvas getImageData
• Using Javascript to
evaluate blur effect
• Set blur image to web
and modify position

Yah...
Q&A
Yahoo! Open Hackday 2013 - Frosted Glass Effect
Upcoming SlideShare
Loading in …5
×

Yahoo! Open Hackday 2013 - Frosted Glass Effect

1,102 views

Published on

Published in: Business, Technology
1 Comment
0 Likes
Statistics
Notes
  • Free Download : http://gg.gg/114bb

    Hey Guyz and girls, Today I am gonna show you perfact tool, Remember This video is old, But the download link with hack is brand new. Its very simple to using this tool and here are some instructions in video. Please REDOWNLOAD. Don't Forget to Comment Subscribe & Rate My Video :)

    Virus Scan :- This file has been scanned with avast! Antivirus. -- Status: FILE IS CLEANN.

    Copyright © 2014. All Rights Reserved
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,102
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Yahoo! Open Hackday 2013 - Frosted Glass Effect

  1. 1. Frosted glass effect in mobile web and app Anistar Sung John Wu
  2. 2. Anistar Sung Yahoo EC Lead Engineer John wu Yahoo EC Sr. Engineer
  3. 3. Why we like frosted glass effect ?
  4. 4. content is the king
  5. 5. content is the king
  6. 6. Frosted glass flow
  7. 7. Frosted glass flow
  8. 8. Frosted glass flow
  9. 9. Frosted glass flow
  10. 10. DEMO
  11. 11. Mobile device so slow Speed is most important thing in UX
  12. 12. CPU vs GPU GPU faster than CPU 50X in blur effect.
  13. 13. Framework Solutions CoreGraphics: 1425 ms GPUImage: 153 ms CoreImage: 138 ms UIToolbar: N/A (unadjustable)
  14. 14. 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];
  15. 15. 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);
  16. 16. UIToolbar UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 100.0f)]; [self.view addSubview:toolbar];
  17. 17. Graphics Effect in Web Frosted glass in Web Yahoo! Presentation, Confidential 18
  18. 18. Transparency Mask Blur Image Origin Image Yahoo! Presentation, Confidential 19
  19. 19. Type I Scale extremely small image to large Yahoo! Presentation, Confidential 20
  20. 20. Yahoo! Presentation, Confidential 21
  21. 21. Yahoo! Presentation, Confidential 22
  22. 22. Type II Duplicate origin image with CSS filter Blur. Yahoo! Presentation, Confidential 23
  23. 23. Yahoo! Presentation, Confidential 24
  24. 24. Yahoo! Presentation, Confidential 25
  25. 25. Cross Browser • CSS Filter : Blur • SVG Filter • filter : progid: DXImageTransform.Micros oft.Blur Yahoo! Presentation, Confidential 26
  26. 26. Type III • Canvas getImageData • Using Javascript to evaluate blur effect • Set blur image to web and modify position Yahoo! Presentation, Confidential 27
  27. 27. Q&A

×