Fast Image Manipulation

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