Fast Image Manipulation

From Cocoaheads SF, May 10th, 2012

Transcript

1. Patrick B. Gibson Tilde Inc. FAST IMAGE MANIPULATION
2. THE PROBLEM.
3. THE SOLUTION?
4. OPENGL.
5. ▪ CoreImage in a Nutshell ▪ Problems with CoreImage ▪ OpenGL in a Nutshell ▪ Using OpenGL with CoreImage Effectively OVERVIEW
6. ▪ Apply effects ( lters) to images ▪ Deferred rendering ▪ GPU powered – with caveats ▪ High-level API ▪ Mac OS X version different from iOS version COREIMAGE
7. CODE. GITHUB.COM/PATR1CK/ TLDCOREIMAGEDEMO
8. // Create image CIImage *testImage = [CIImage imageWithCGImage:someCGImageRef]; // Set the new filter value CIFilter *contrastFilter = [CIFilter filterWithName:@"CIColorControls"]; [contrastFilter setDefaults]; [contrastFilter setValue:[NSNumber numberWithDouble:contrastSlider.value] forKey:@"inputContrast"]; // Apply the filter [contrastFilter setValue:testImage forKey:@"inputImage"]; // Get the results CIImage *outputImage = [contrastFilter outputImage]; COREIMAGE
9. // Get the context CGContextRef context = UIGraphicsGetCurrentContext(); // Render the image CGImageRef imageRef = [_coreImageContext createCGImage:coreImage fromRect:coreImage.extent]; // Draw it on screen CGContextSaveGState(context); CGContextTranslateCTM(context, 0.0f, coreImage.extent.size.height); CGContextScaleCTM(context, 1.0f, -1.0f); CGContextDrawImage(context, rect, imageRef); CGContextRestoreGState(context); CGImageRelease(imageRef); COREIMAGE
10. COREIMAGE
11. DEMO.
12. ▪ Ludicrous speed ▪ Fully GPU powered ▪ Very low level API ▪ Steep learning curve ▪ But, ludicrous speed OPENGLES
13. ▪ CAEAGLLayer and EAGLContext ▪ Frame buffer ▪ Render buffer ▪ Depth buffer ▪ Stencil buffer, Accumulation buffer (not used here) OPENGLES
14. glGenFramebuffers(1, &frameBuffer); glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer); glGenRenderbuffers(1, &renderBuffer); glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer); [_eaglContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:(CAEAGLLayer *)self.layer]; glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, renderBuffer); glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &backingWidth); glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &backingHeight); OPENGLES
15. glGenRenderbuffers(1, &depthBuffer); glBindRenderbuffer(GL_RENDERBUFFER, depthBuffer); glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, backingWidth, backingHeight); glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, depthBuffer); glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer); glViewport(0, 0, backingWidth, backingHeight); [self drawView] OPENGLES
16. // drawView glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer); glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT); [_coreImageContext drawImage:coreImage inRect:self.bounds fromRect:coreImage.extent]; glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer); [_eaglContext presentRenderbuffer:GL_RENDERBUFFER];
17. DEMO.
18. REAL WORLD EXAMPLE: BRESSON
19. ▪ Cheat like crazy ▪ Some CoreImage lters are slow (CIToneCurve) ▪ CADisplayLink ▪ Do not taunt TLDFastCoreImageView NOTES
20. THANK YOU.
21. @PATR1CK GITHUB.COM/PATR1CK/ TLDCOREIMAGEDEMO TILDE.IO