GPUImage

13 May 2013

（翻譯自 NSHispter，原文鏈接：http://nshipster.com/gpuimage/）

在 NSHipster，我們一直在研究 Objective-C 不為人知的一面來(lái)了解我們每天面對(duì)的系統(tǒng)。一般來(lái)說(shuō)，這意味著仔細(xì)研究 Apple 的框架和語(yǔ)言特性（畢竟每天要用 Obective-C 工作）。不過(guò)，有些時(shí)候，看看成堆的第三方庫(kù)和框架也蠻好的（而且里面有些真的很好），還可以看一下 Cupertino 外面有什么新東西。

本周我們來(lái)看一下你能找到的最厲害的一個(gè)開(kāi)源項(xiàng)目：GPUImage。系好安全帶，NSHipster 們，一不小心你讀完這篇文章就造出一個(gè)相機(jī) app 了。

---

GPUImage 作者是?Brad Larson，以 BSD 協(xié)議放出，能夠在圖像、實(shí)時(shí)攝像頭影像和視頻上使用 GPU 加速的濾鏡和其他效果。

GPU vs. CPU

每只 iPhone 都有兩個(gè)處理器：一個(gè)?CPU，也就是中央處理器，和一個(gè)?GPU，也就是圖形處理器。每個(gè)處理器都有它自己的優(yōu)勢(shì)，現(xiàn)代芯片架構(gòu)（例如 AppleA4）把 CPU 和 GPU 集成在一個(gè)物理封裝里。

在 Xcode 里面寫(xiě) C 和 Objective-C 的時(shí)候，產(chǎn)生的指令絕大部分會(huì)被 CPU 執(zhí)行。相對(duì)地，GPU 是一枚專用芯片，專門(mén)用來(lái)做獨(dú)立的小操作，例如圖形渲染。GPU 執(zhí)行的指令和 CPU 是有很大區(qū)別的，因此用特殊的語(yǔ)言來(lái)編寫(xiě)：OpenGL（特別地，在 iPhone 和 iPad 上使用?OpenGL ES）

如果想學(xué)習(xí) OpenGL ES 和渲染管線相關(guān)的知識(shí)，可以參考?Jeff LaMarche's GLProgram OpenGL ES 2.0 book

比較一下 GPU 渲染和 CPU 渲染的性能，區(qū)別還是蠻大的：

CPU vs. GPU 幀率對(duì)比 (FPS 越高越好) CalculationGPU FPSCPU FPSΔ

Thresholding ? 1	60.00	4.21	14.3?
Thresholding ? 2	33.63	2.36	14.3?
Thresholding ? 100	1.45	0.05	28.7?

"哦，這貨是 Instagram？"

好吧，我們這么說(shuō)：

Instagram : GPUImage :: 拍立得 : NASA 空間光學(xué)制造中心

換種說(shuō)法，用 GPUImage 的 API 可以做出數(shù)千種相機(jī) app，只需要把濾鏡正確地組合起來(lái)，外加一小點(diǎn)想象力。

這張表包含了 GPUImage 內(nèi)置的 125 種濾鏡：（譯者：你想翻譯死我嗎？）

Color AdjustmentsImage ProcessingBlending ModesVisual Effects

Brightness Filter Exposure Filter Contrast Filter Saturation Filter Gamma Filter Levels Filter Color Matrix Filter RGB Filter Hue Filter Tone Curve Filter Highlight Shadow Filter Lookup Filter Amatorka Filter Miss Etikate Filter Soft Elegance Filter Color Invert Filter Grayscale Filter Monochrome Filter False Color Filter Haze Filter Sepia Filter Opacity Filter Solid Color Generator Luminance Threshold Filter Adaptive Threshold Filter Average Luminance Threshold Filter Histogram Filter Histogram Generator Average Color Luminosity Chroma Key Filter	Transform Filter Crop Filter Lanczos Resampling Filter Sharpen Filter Unsharp Mask Filter Fast Blur Filter Single Component Fast Blur Filter Gaussian Blur Filter Single Component Gaussian Blur Filter Gaussian Selective Blur Filter Gaussian Blur Position Filter Median Filter Bilateral Filter Tilt Shift Filter Box Blur Filter 3x3 Convolution Filter Sobel Edge Detection Filter Threshold Edge Detection Filter Canny Edge Detection Filter Harris Corner Detection Filter Noble Corner Detection Filter Shi-Tomasi Corner Detection Filter Non Maximum Suppression Filter X/Y Derivative Filter Crosshair Generator Dilation Filter RGB Dilation Filter Erosion Filter RGB Erosion Filter Opening Filter RGB Opening Filter Closing Filter RGB Closing Filter Local Binary Pattern Filter Low Pass Filter High Pass Filter Motion Detector Hough Transform Line Detector Line Generator Motion Blur Filter Zoom Blur Filter	Chroma Key Blend Filter Dissolve Blend Filter Multiply Blend Filter Add Blend Filter Subtract Blend Filter Divide Blend Filter Overlay Blend Filter Darken Blend Filter Lighten Blend Filter Color Burn Blend Filter Color Dodge Blend Filter Screen Blend Filter Exclusion Blend Filter Difference Blend Filter Hard Light Blend Filter Soft Light Blend Filter Alpha Blend Filter Source Over Blend Filter Color Burn Blend Filter Color Dodge Blend Filter Normal Blend Filter Color Blend Filter Hue Blend Filter Saturation Blend Filter Luminosity Blend Filter Linear Burn Blend Filter Poisson Blend Filter Mask Filter	Pixellate Filter Polar Pixellate Filter Polka Dot Filter Halftone Filter Crosshatch Filter Sketch Filter Threshold Sketch Filter Toon Filter Smooth Toon Filter Emboss Filter Posterize Filter Swirl Filter Bulge Distortion Filter Pinch Distortion Filter Stretch Distortion Filter Sphere Refraction Filter Glass Sphere Filter Vignette Filter Kuwahara Filter Kuwahara Radius 3 Filter Perlin Noise Filter CGAColorspace Filter Mosaic Filter JFAVoronoi Filter Voronoi Consumer Filter

認(rèn)真說(shuō)，GPUImage 代碼里帶的這個(gè)?濾鏡展示示例 app?能在 AppStore 賣(mài) 3.99 刀。要是再加上 twitter 集成和一些聲音效果，賣(mài)個(gè) 6.99 刀不成問(wèn)題。

渲染管線

GPUImage 從本質(zhì)上來(lái)說(shuō)是一個(gè)渲染管線的 Objective-C 抽象。從相機(jī)、網(wǎng)絡(luò)或者磁盤(pán)上加載的源圖像，在經(jīng)過(guò)一系列濾鏡處理后，最終輸出到了 view、graphics context 或是數(shù)據(jù)流中。

例如說(shuō)，攝像頭中的圖像可以應(yīng)用一個(gè) Color Levels 濾鏡，來(lái)模擬各種色盲效果，然后實(shí)時(shí)顯示在一個(gè) view 中。

GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc]initWithSessionPreset:AVCaptureSessionPreset640x480cameraPosition:AVCaptureDevicePositionBack]; videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;GPUImageFilter *filter = [[GPUImageLevelsFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"]; [filter setRedMin:0.299 gamma:1.0 max:1.0 minOut:0.0 maxOut:1.0]; [filter setGreenMin:0.587 gamma:1.0 max:1.0 minOut:0.0 maxOut:1.0]; [filter setBlueMin:0.114 gamma:1.0 max:1.0 minOut:0.0 maxOut:1.0]; [videoCamera addTarget:filter];GPUImageView *filteredVideoView = [[GPUImageView alloc] initWithFrame:self.view.bounds)]; [filter addTarget:filteredVideoView]; [self.view addSubView:filteredVideoView];[videoCamera startCameraCapture];

或者，結(jié)合不同的顏色混合模式，圖像效果和一些調(diào)整，你可以把靜止圖像轉(zhuǎn)變成可以分享給你時(shí)髦的朋友們看看的精美圖像（例子來(lái)自基于 GPUImage 的FilterKit）。

GPUImageFilterGroup *filter = [[FKGPUFilterGroup alloc] init];GPUImageSaturationFilter *saturationFilter = [[GPUImageSaturationFilter alloc] init]; [saturationFilter setSaturation:0.5];GPUImageMonochromeFilter *monochromeFilter = [[GPUImageMonochromeFilter alloc] init]; [monochromeFilter setColor:(GPUVector4){0.0f, 0.0f, 1.0f, 1.0f}]; [monochromeFilter setIntensity:0.2];GPUImageVignetteFilter *vignetteFilter = [[GPUImageVignetteFilter alloc] init]; [vignetteFilter setVignetteEnd:0.7];GPUImageExposureFilter *exposureFilter = [[GPUImageExposureFilter alloc] init]; [exposureFilter setExposure:0.3];[filter addGPUFilter:exposureFilter]; [filter addGPUFilter:monochromeFilter]; [filter addGPUFilter:saturationFilter]; [filter addGPUFilter:vignetteFilter];

---

看完了 GPUImage 的功能，一定很興奮吧。GPUImage 非常簡(jiǎn)單，可以馬上開(kāi)始使用（不需要了解 OpenGL），性能上也足夠完成你想要的一切。不止是這樣，它還自帶了非常多的積木一樣的部件 -- 色彩調(diào)整，混合模式，你能想到的想不到的一切視覺(jué)效果。

GPUImage 是開(kāi)源社區(qū)少有的好東西，我們 Mac 和 iOS 開(kāi)發(fā)者非常幸運(yùn)的能擁有它。用 GPUImage 做些牛逼的東西，向其他人展示一個(gè)嶄新的世界。

---

譯者吐槽時(shí)間

我自己也用過(guò)一點(diǎn) GPUImage，方便是很方便，不光是省掉了 AVFoundation 的許多煩人的 setup 代碼，還內(nèi)置了許多濾鏡效果。不過(guò)它也有不少坑，我遇到的一個(gè)就是占用太多內(nèi)存，一段時(shí)間后就 crash 掉了，畢竟是處理視頻，需要不少內(nèi)存，iPhone 的內(nèi)存又不太多，就要更加注意。我當(dāng)時(shí)是加了一個(gè) @autoreleasepool 就好多了。

總結(jié)

以上是生活随笔為你收集整理的GPUImage的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。