第一部分: 安裝
一. 安裝: 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. 包含下面這個標頭檔案:

1. #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

1. GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack];
   
2. videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
   
3. GPUImageFilter *customFilter = [[GPUImageFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"];
   
4. GPUImageView *filteredVideoView = [[GPUImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, viewWidth, viewHeight)];
   
5. // Add the view somewhere so it's visible
   
6. [videoCamera addTarget:customFilter];
   
7. [customFilter addTarget:filteredVideoView];
   
8. [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就可以了. 如果要是記錄電影的話:可以使用下面這句進行聲音捕捉.

1. videoCamera.audioEncodingTarget = movieWriter;

複製程式碼
二. Capturing and filtering a still photo 相機預覽程式碼:  (此時雖然是相機模式, 仍然會給出一個still camera的預覽視訊)

1. stillCamera = [[GPUImageStillCamera alloc] init];
   
2. stillCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
   
3. filter = [[GPUImageGammaFilter alloc] init];
   
4. [stillCamera addTarget:filter];
   
5. GPUImageView *filterView = (GPUImageView *)self.view;
   
6. [filter addTarget:filterView];
   
7. [stillCamera startCameraCapture];

複製程式碼 拍照程式碼:

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

複製程式碼 三. Processing a still image

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

複製程式碼 一個filter下更簡單的方法:

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

複製程式碼 四. 自定義濾鏡
從bundle裡面載入OpenGL Shading Language編寫的 fragment shader檔案, 字尾是 .fsh  或者從字串裡面載入.

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

複製程式碼

1. NSString *const kfilterShader = SHADER_STRING
   
2. (
   
3. ...
   
4. );

複製程式碼 一個指令碼的例子:

1. varying highp vec2 textureCoordinate;
   
2. uniform sampler2D inputImageTexture;
   
3. void main()
   
4. {
   
5.     lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
   
6.     lowp vec4 outputColor;
   
7.     outputColor.r = (textureColor.r * 0.393) + (textureColor.g * 0.769) + (textureColor.b * 0.189);
   
8.     outputColor.g = (textureColor.r * 0.349) + (textureColor.g * 0.686) + (textureColor.b * 0.168);    
   
9.     outputColor.b = (textureColor.r * 0.272) + (textureColor.g * 0.534) + (textureColor.b * 0.131);
   
10.     outputColor.a = 1.0;
    
11.     gl_FragColor = outputColor;
    
12. }

複製程式碼 這段指令碼有一個varing, 表示的是材質的2D座標, 一個unifrom是材質的圖片. main函式裡面把這個座標的顏色取出來處理後生成新的顏色, 交給gl_FragColor傳遞個pipeline的下一個單元. 在這裡也就是最終輸出. 五. Filtering and re-encoding a movie

1. movieFile = [[GPUImageMovie alloc] initWithURL:sampleURL];
   
2. pixellateFilter = [[GPUImagePixellateFilter alloc] init];
   
3. [movieFile addTarget:pixellateFilter];
   
4. NSString *pathToMovie = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/Movie.m4v"];
   
5. unlink([pathToMovie UTF8String]);
   
6. NSURL *movieURL = [NSURL fileURLWithPath:pathToMovie];
   
7. movieWriter = [[GPUImageMovieWriter alloc] initWithMovieURL:movieURL size:CGSizeMake(480.0, 640.0)];
   
8. [pixellateFilter addTarget:movieWriter];
   
9. movieWriter.shouldPassthroughAudio = YES;
   
10. movieFile.audioEncodingTarget = movieWriter;
    
11. [movieFile enableSynchronizedEncodingUsingMovieWriter:movieWriter];
    
12. [movieWriter startRecording];
    
13. [movieFile startProcessing];

複製程式碼 GPUImageMovie作為源, 中間是filter, 最終是GPUImageMovieWriter來寫入檔案.  這段程式碼是輸出480 x 640 h.264 movie GPUImageMovieWriter非常快, 能夠實時的儲存iPhone 4的640x480到輸出檔案, 在iPhone4上, 720p能20fps的速度輸出, iPhone 4S上720p 和 1080p都能達到30 FPS
結束的時候停止程式碼:

1. [pixellateFilter removeTarget:movieWriter];
   
2. [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

一個典型的例子

1. 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