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. 包含下面这个头文件:

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. 
   
4. GPUImageFilter *customFilter = [[GPUImageFilter alloc] initWithFragmentShaderFromFile:@"CustomShader"];
   
5. GPUImageView *filteredVideoView = [[GPUImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, viewWidth, viewHeight)];
   
6. 
   
7. // Add the view somewhere so it's visible
   
8. 
   
9. [videoCamera addTarget:customFilter];
   
10. [customFilter addTarget:filteredVideoView];
    
11. 
    
12. [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. 
   
4. filter = [[GPUImageGammaFilter alloc] init];
   
5. [stillCamera addTarget:filter];
   
6. GPUImageView *filterView = (GPUImageView *)self.view;
   
7. [filter addTarget:filterView];
   
8. 
   
9. [stillCamera startCameraCapture];

复制代码

拍照代码:

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

复制代码

三. Processing a still image

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

复制代码

一个filter下更简单的方法:

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

复制代码

四. 自定义滤镜

从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. 
   
3. uniform sampler2D inputImageTexture;
   
4. 
   
5. void main()
   
6. {
   
7.     lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
   
8.     lowp vec4 outputColor;
   
9.     outputColor.r = (textureColor.r * 0.393) + (textureColor.g * 0.769) + (textureColor.b * 0.189);
   
10.     outputColor.g = (textureColor.r * 0.349) + (textureColor.g * 0.686) + (textureColor.b * 0.168);    
    
11.     outputColor.b = (textureColor.r * 0.272) + (textureColor.g * 0.534) + (textureColor.b * 0.131);
    
12.     outputColor.a = 1.0;
    
13. 
    
14.     gl_FragColor = outputColor;
    
15. }

复制代码

这段脚本有一个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. 
   
4. [movieFile addTarget:pixellateFilter];
   
5. 
   
6. NSString *pathToMovie = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/Movie.m4v"];
   
7. unlink([pathToMovie UTF8String]);
   
8. NSURL *movieURL = [NSURL fileURLWithPath:pathToMovie];
   
9. 
   
10. movieWriter = [[GPUImageMovieWriter alloc] initWithMovieURL:movieURL size:CGSizeMake(480.0, 640.0)];
    
11. [pixellateFilter addTarget:movieWriter];
    
12. 
    
13. movieWriter.shouldPassthroughAudio = YES;
    
14. movieFile.audioEncodingTarget = movieWriter;
    
15. [movieFile enableSynchronizedEncodingUsingMovieWriter:movieWriter];
    
16. 
    
17. [movieWriter startRecording];
    
18. [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

参考资料:

https://github.com/BradLarson/GPUImage

http://bbs.lbsweek.com/thread-1923-1-1.html