GPUImage教程(一)安裝,使用例子, 原理和內置濾鏡列表

第一部分: 安裝
一. 安裝: Adding the framework to your iOS project

1. 把GPUImage.xcodeproj 拖到你的Xcode project

2. 在app的target依賴設置裏面添加GPUImage作爲Target Dependency

3. 在build phase的Link Binary With Libraries, 把libGPUImage.a加進來.

4. 添加下面這些系統framework:

CoreMedia
CoreVideo
OpenGLES
AVFoundation
QuartzCore

5. 頭文件搜索路徑: project's build settings, 把GPUImage的source和source下的iOS目錄加到搜索路徑裏, 使用相對路徑和遞歸.

6. 包含下面這個頭文件:

#import "GPUImage.h"

複製代碼

二. 靜態庫方法

Building static library at the command line

If you don't want to include the project as a dependency in your application's Xcode project, you can build a universal static library for the iOS Simulator or device. To do this, run build.sh at the command line. The resulting library and header files will be located at build/Release-iphone. You may also change the version of the iOS SDK by changing the IOSSDK_VER variable in build.sh (all available versions can be found using xcodebuild -showsdks).

第二部分: 使用

一. Filtering live video

GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack];
videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
GPUImageFilter *customFilter = [[GPUImageFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"];
GPUImageView *filteredVideoView = [[GPUImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, viewWidth, viewHeight)];
// Add the view somewhere so it's visible
[videoCamera addTarget:customFilter];
[customFilter addTarget:filteredVideoView];
[videoCamera startCameraCapture];

複製代碼

1. 首先建立一個outputs, 對video情況是video source: videoCamera, 採用背部主相機, 已經預設的(preset) 640x480, 並採用portrait模式, 如果是landscape left下拍攝的,需要自己旋轉一下來顯示.

2. 建立一個filter, customFilter, 並設置爲video source的target.

3. 建立一個顯示view, 並設置爲filter的target. 可以設置顯示view的fillMode

4. 開始action: [videoCamera startCameraCapture];

從 outputs -> filter -> display view 是一個 filter chain, 如果有多個outputs進行混合(blend), 把他們的target都設成相同的filter就可以了.

如果要是記錄電影的話:可以使用下面這句進行聲音捕捉.

videoCamera.audioEncodingTarget = movieWriter;

複製代碼

二. Capturing and filtering a still photo

相機預覽代碼: (此時雖然是相機模式, 仍然會給出一個still camera的預覽視頻)

stillCamera = [[GPUImageStillCamera alloc] init];
stillCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
filter = [[GPUImageGammaFilter alloc] init];
[stillCamera addTarget:filter];
GPUImageView *filterView = (GPUImageView *)self.view;
[filter addTarget:filterView];
[stillCamera startCameraCapture];

複製代碼

拍照代碼:

[stillCamera capturePhotoProcessedUpToFilter:filter withCompletionHandler:^(UIImage *processedImage, NSError *error){
NSData *dataForPNGFile = UIImageJPEGRepresentation(processedImage, 0.8);
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSError *error2 = nil;
if (![dataForPNGFile writeToFile:[documentsDirectory stringByAppendingPathComponent:@"FilteredPhoto.jpg"] options:NSAtomicWrite error:&error2])
{
return;
}
}];

複製代碼

三. Processing a still image

UIImage *inputImage = [UIImage imageNamed:@"Lambeau.jpg"];
GPUImagePicture *stillImageSource = [[GPUImagePicture alloc] initWithImage:inputImage];
GPUImageSepiaFilter *stillImageFilter = [[GPUImageSepiaFilter alloc] init];
[stillImageSource addTarget:stillImageFilter];
[stillImageSource processImage];
UIImage *currentFilteredVideoFrame = [stillImageFilter imageFromCurrentlyProcessedOutput];

複製代碼

一個filter下更簡單的方法:

GPUImageSepiaFilter *stillImageFilter2 = [[GPUImageSepiaFilter alloc] init];
UIImage *quickFilteredImage = [stillImageFilter2 imageByFilteringImage:inputImage];

複製代碼

四. 自定義濾鏡

從bundle裏面加載OpenGL Shading Language編寫的 fragment shader文件, 後綴是 .fsh 或者從字符串裏面加載.

GPUImageFilter *customFilter = [[GPUImageFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"];

複製代碼

NSString *const kfilterShader = SHADER_STRING
(
...
);

複製代碼

一個腳本的例子:

varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
lowp vec4 outputColor;
outputColor.r = (textureColor.r * 0.393) + (textureColor.g * 0.769) + (textureColor.b * 0.189);
outputColor.g = (textureColor.r * 0.349) + (textureColor.g * 0.686) + (textureColor.b * 0.168);
outputColor.b = (textureColor.r * 0.272) + (textureColor.g * 0.534) + (textureColor.b * 0.131);
outputColor.a = 1.0;
gl_FragColor = outputColor;
}

複製代碼

這段腳本有一個varing, 表示的是材質的2D座標, 一個unifrom是材質的圖片.

main函數裏面把這個座標的顏色取出來處理後生成新的顏色, 交給gl_FragColor傳遞個pipeline的下一個單元. 在這裏也就是最終輸出.

五. Filtering and re-encoding a movie

movieFile = [[GPUImageMovie alloc] initWithURL:sampleURL];
pixellateFilter = [[GPUImagePixellateFilter alloc] init];
[movieFile addTarget:pixellateFilter];
NSString *pathToMovie = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/Movie.m4v"];
unlink([pathToMovie UTF8String]);
NSURL *movieURL = [NSURL fileURLWithPath:pathToMovie];
movieWriter = [[GPUImageMovieWriter alloc] initWithMovieURL:movieURL size:CGSizeMake(480.0, 640.0)];
[pixellateFilter addTarget:movieWriter];
movieWriter.shouldPassthroughAudio = YES;
movieFile.audioEncodingTarget = movieWriter;
[movieFile enableSynchronizedEncodingUsingMovieWriter:movieWriter];
[movieWriter startRecording];
[movieFile startProcessing];

複製代碼

GPUImageMovie作爲源, 中間是filter, 最終是GPUImageMovieWriter來寫入文件. 這段代碼是輸出480 x 640 h.264 movie

GPUImageMovieWriter非常快, 能夠實時的保存iPhone 4的640x480到輸出文件, 在iPhone4上, 720p能20fps的速度輸出, iPhone 4S上720p 和 1080p都能達到30 FPS

結束的時候停止代碼:

[pixellateFilter removeTarget:movieWriter];
[movieWriter finishRecording];

複製代碼

如果不停止, 輸出文件不可用, 如果中間被打斷, 輸出文件會丟失.

六. Interacting with OpenGL ES

GPUImage使用GPUImageTextureOutput 和 GPUImageTextureInput 想Open GL ES 2.0輸出或者輸入材質, 可用把GPUImage的輸出作爲OpenGL的材質輸入, 或者把OpenGL的輸出作爲自己的材質輸入.

例子代碼正在整理中

第三部分, 原理

GPUImage是一個鏈(chain),    source -> phase1 target -> phase2 target -> final target

第一個環節是source, 這是一些GPUImageOutput的子類.包括:
(1). GPUImageVideoCamera (for live video from an iOS camera)
(2.) GPUImageStillCamera (for taking photos with the camera)
(3). GPUImagePicture (for still images)
(4). GPUImageMovie (for movies). S

後續環節是被稱爲target.  遵循GPUImageInput protocol

可用多個source到一個target上面進行blend,  也可用進行分支, 添加多個target.

一般的target可分爲兩類
(1)中間環節的target,  一般是各種filter, 是GPUImageFilter或者是子類.
(2)最終環節的target, 可用是GPUImageView, 或者GPUImageMovieWriter

一個典型的例子

GPUImageVideoCamera -> GPUImageSepiaFilter -> GPUImageView

複製代碼

第四部分, 內置濾鏡列表

共125個濾鏡, 分爲四類
Color adjustments:  31 filters, 顏色處理相關
Image processing: 40 filters, 圖像處理相關.
Blending modes:    29 filters,  混合模式相關.
Visual effects:    25 filters,  視覺效果相關.

下面分別列出車125個濾鏡的名字, 後續再對每個專題進行講解.

Color adjustments:  31 filters
GPUImageBrightnessFilter
GPUImageExposureFilter
GPUImageContrastFilter
GPUImageSaturationFilter
GPUImageGammaFilter
GPUImageLevelsFilter
GPUImageColorMatrixFilter
GPUImageRGBFilter
GPUImageHueFilter
GPUImageToneCurveFilter

GPUImageHighlightShadowFilter

GPUImageLookupFilter
GPUImageAmatorkaFilter
GPUImageMissEtikateFilter
GPUImageSoftEleganceFilter

GPUImageColorInvertFilter
GPUImageGrayscaleFilter
GPUImageMonochromeFilter
GPUImageFalseColorFilter

GPUImageHazeFilter

GPUImageSepiaFilter
GPUImageOpacityFilter
GPUImageSolidColorGenerator

GPUImageLuminanceThresholdFilter
GPUImageAdaptiveThresholdFilter
GPUImageAverageLuminanceThresholdFilter
GPUImageHistogramFilter
GPUImageHistogramGenerator
GPUImageAverageColor
GPUImageLuminosity

GPUImageChromaKeyFilter

Image processing:  40 filters
GPUImageTransformFilter
GPUImageCropFilter
GPUImageLanczosResamplingFilter
GPUImageSharpenFilter
GPUImageUnsharpMaskFilter
GPUImageGaussianBlurFilter
GPUImageBoxBlurFilter
GPUImageSingleComponentGaussianBlurFilter
GPUImageGaussianSelectiveBlurFilter
GPUImageGaussianBlurPositionFilter
GPUImageiOSBlurFilter
GPUImageMedianFilter
GPUImageBilateralFilter
GPUImageTiltShiftFilter
GPUImage3x3ConvolutionFilter
GPUImageSobelEdgeDetectionFilter
GPUImagePrewittEdgeDetectionFilter
GPUImageThresholdEdgeDetectionFilter
GPUImageCannyEdgeDetectionFilter
GPUImageHarrisCornerDetectionFilter
GPUImageNobleCornerDetectionFilter
GPUImageShiTomasiCornerDetectionFilter
GPUImageNonMaximumSuppressionFilter
GPUImageXYDerivativeFilter
GPUImageCrosshairGenerator
GPUImageDilationFilter
GPUImageRGBDilationFilter
GPUImageErosionFilter
GPUImageRGBErosionFilter
GPUImageOpeningFilter
GPUImageRGBOpeningFilter
GPUImageClosingFilter
GPUImageRGBClosingFilter
GPUImageLocalBinaryPatternFilter
GPUImageLowPassFilter
GPUImageHighPassFilter
GPUImageMotionDetector
GPUImageHoughTransformLineDetector
GPUImageLineGenerator
GPUImageMotionBlurFilter

Blending modes: 29 filters
GPUImageZoomBlurFilter
GPUImageChromaKeyBlendFilter
GPUImageDissolveBlendFilter
GPUImageMultiplyBlendFilter
GPUImageAddBlendFilter
GPUImageSubtractBlendFilter
GPUImageDivideBlendFilter
GPUImageOverlayBlendFilter
GPUImageDarkenBlendFilter
GPUImageLightenBlendFilter
GPUImageColorBurnBlendFilter
GPUImageColorDodgeBlendFilter
GPUImageScreenBlendFilter
GPUImageExclusionBlendFilter
GPUImageDifferenceBlendFilter
GPUImageHardLightBlendFilter
GPUImageSoftLightBlendFilter
GPUImageAlphaBlendFilter
GPUImageSourceOverBlendFilter
GPUImageColorBurnBlendFilter
GPUImageColorDodgeBlendFilter
GPUImageNormalBlendFilter
GPUImageColorBlendFilter
GPUImageHueBlendFilter
GPUImageSaturationBlendFilter
GPUImageLuminosityBlendFilter
GPUImageLinearBurnBlendFilter
GPUImagePoissonBlendFilter
GPUImageMaskFilter

Visual effects: 25 filters
GPUImagePixellateFilter
GPUImagePolarPixellateFilter
GPUImagePolkaDotFilter
GPUImageHalftoneFilter
GPUImageCrosshatchFilter
GPUImageSketchFilter
GPUImageThresholdSketchFilter
GPUImageToonFilter
GPUImageSmoothToonFilter
GPUImageEmbossFilter
GPUImagePosterizeFilter
GPUImageSwirlFilter
GPUImageBulgeDistortionFilter
GPUImagePinchDistortionFilter
GPUImageStretchDistortionFilter
GPUImageSphereRefractionFilter
GPUImageGlassSphereFilter
GPUImageVignetteFilter
GPUImageKuwaharaFilter
GPUImageKuwaharaRadius3Filter
GPUImagePerlinNoiseFilter
GPUImageCGAColorspaceFilter
GPUImageMosaicFilter
GPUImageJFAVoronoiFilter
GPUImageVoronoiConsumerFilter