Patrick B. Gibson Tilde Inc. FAST IMAGE MANIPULATION 

THE PROBLEM. 

THE SOLUTION? 

OPENGL. 

■ CoreImage in a Nutshell ■ Problems with CoreImage ■ OpenGL in a Nutshell ■ Using OpenGL with CoreImage Effectively OVERVIEW 

■ Apply effects ( lters) to images ■ Deferred rendering ■ GPU powered – with caveats ■ High-level API ■ Mac OS X version different from iOS version COREIMAGE 

CODE. GITHUB.COM/PATR1CK/ TLDCOREIMAGEDEMO 

// 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 

// 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 

COREIMAGE 

DEMO. 

■ Ludicrous speed ■ Fully GPU powered ■ Very low level API ■ Steep learning curve ■ But, ludicrous speed OPENGLES 

■ CAEAGLLayer and EAGLContext ■ Frame buffer ■ Render buffer ■ Depth buffer ■ Stencil buffer, Accumulation buffer (not used here) OPENGLES 

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 

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 

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

DEMO. 

REAL WORLD EXAMPLE: BRESSON 

■ Cheat like crazy ■ Some CoreImage lters are slow (CIToneCurve) ■ CADisplayLink ■ Do not taunt TLDFastCoreImageView NOTES 

THANK YOU. 

@PATR1CK GITHUB.COM/PATR1CK/ TLDCOREIMAGEDEMO TILDE.IO