Frosted glass effect in mobile web and app

Anistar SungAnistar SungJohn WuJohn Wu

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 flow

Frosted glass flow

Frosted glass flow

Frosted glass flow

DEMO

Mobile device so slow

Speed is most important thing in UX

CPU vs GPUGPU faster than CPU

50X in blur effect.

Framework Solutions

CoreGraphics: 1425 msGPUImage: 153 msCoreImage: 138 ms

UIToolbar: N/A (unadjustable)

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];

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);

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

Yahoo! Presentation, Confidential 18

Graphics Effect in Web

Frosted glass in Web

Yahoo! Presentation, Confidential 19

Blur Image

Origin Image

Transparency Mask

Yahoo! Presentation, Confidential 20

Scale extremely small image to large

Type I

21Yahoo! Presentation, Confidential

22Yahoo! Presentation, Confidential

Yahoo! Presentation, Confidential 23

Duplicate origin image with CSS filter Blur.

Type II

24Yahoo! Presentation, Confidential

25Yahoo! Presentation, Confidential

Yahoo! Presentation, Confidential 26

• CSS Filter : Blur• SVG Filter • filter : progid:

DXImageTransform.Microsoft.Blur

Cross Browser

Yahoo! Presentation, Confidential 27

• Canvas getImageData

• Using Javascript to evaluate blur effect

• Set blur image to web and modify position

Type III

Q&AQ&A