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
490
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
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
490
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
160
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
1
200
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
1
3k
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
360
Is Xcode slowly dying out in 2025?
uetyo
1
180
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
46
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Code Review Best Practice
trishagee
68
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Facilitating Awesome Meetings
lara
54
6.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
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