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
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
9
3.7k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
270
Design Foundational Data Engineering Observability
sucitw
3
190
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
730
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
500
速いWebフレームワークを作る
yusukebe
5
1.7k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
840
個人軟體時代
ethanhuang13
0
320
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Navigating Team Friction
lara
189
15k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
The Language of Interfaces
destraynor
161
25k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Being A Developer After 40
akosma
90
590k
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