Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fast Image Manipulation
Search
patr1ck
May 11, 2012
Programming
2
500
Fast Image Manipulation
From Cocoaheads SF, May 10th, 2012
patr1ck
May 11, 2012
Tweet
Share
More Decks by patr1ck
See All by patr1ck
Ember.js in 10 Minutes
patr1ck
11
930
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.7k
個人軟體時代
ethanhuang13
0
330
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
700
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
1
290
OSS開発者という働き方
andpad
5
1.7k
RDoc meets YARD
okuramasafumi
4
170
Testing Trophyは叫ばない
toms74209200
0
890
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Facilitating Awesome Meetings
lara
55
6.5k
4 Signs Your Business is Dying
shpigford
184
22k
Designing for Performance
lara
610
69k
GraphQLとの向き合い方2022年版
quramy
49
14k
Done Done
chrislema
185
16k
Designing Experiences People Love
moore
142
24k
Site-Speed That Sticks
csswizardry
10
820
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing for humans not robots
tammielis
253
25k
Transcript
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