概述
GPUImage是一个著名的图像处理开源库，它让你能够在图片、视频、相机上使用GPU加速的滤镜和其它特效。与CoreImage框架相比，可以根据GPUImage提供的接口，使用自定义的滤镜。项目地址：https://github.com/BradLarson/GPUImage
这篇文章主要是阅读GPUImage框架中的 GPUImageFilter 类的源码。GPUImageFilter 是GPUImage中很重要、很基础的类，它可以处理帧缓存对象的输入输出，但是对纹理并不添加任何特效，也就是说只是简单的让纹理通过。它更多的是作为其它滤镜的基类，一些具体的滤镜由它的子类去完成。同时它也只能处理单个帧缓存对象的输入，处理多个帧缓存对象的输入也是由它的子类去完成。以下是源码内容：
GPUImageFilter
实现效果
- 通过继承GPUImageFilter，实现自定义滤镜特效。
自定义滤镜.png
- 实现简单的光照效果。
简单光照效果.png
GPUImageFilter
GPUImageFilter 本身并不实现相关的滤镜特效，只是简单的输出输入的纹理样式。GPUImageFilter 更多的是作为其它滤镜的基类，它提供了许多最基础的接口，以及控制了整个滤镜链的基本流程。GPUImageFilter 继承自 GPUImageOutput 实现了 GPUImageInput 协议，可以将输入的纹理经过相关处理后输出，从而对纹理应用相关特效。在一个响应链中可以有多个 GPUImageFilter，从而实现了叠加滤镜的效果。
- 矩阵
在 GPUImage 中主要用到了3维向量、4维向量、4x4矩阵、3x3矩阵，对应OpenGL中的vec3、vec4、mat4、mat3。之所以使用这些向量、矩阵，是为了方便向着色器传值。在 GPUImageFilter 中定义了一组传值的接口，在需要向着色器传值的时候很方便。具体向量定义如下：
struct GPUVector4 {
GLfloat one;
GLfloat two;
GLfloat three;
GLfloat four;
};
typedef struct GPUVector4 GPUVector4;
struct GPUVector3 {
GLfloat one;
GLfloat two;
GLfloat three;
};
typedef struct GPUVector3 GPUVector3;
struct GPUMatrix4x4 {
GPUVector4 one;
GPUVector4 two;
GPUVector4 three;
GPUVector4 four;
};
typedef struct GPUMatrix4x4 GPUMatrix4x4;
struct GPUMatrix3x3 {
GPUVector3 one;
GPUVector3 two;
GPUVector3 three;
};
typedef struct GPUMatrix3x3 GPUMatrix3x3;
- 着色器
在滤镜中着色器程序是很重要的，它决定了滤镜的表现效果。在 GPUImageFilter 中的着色器程序比较简单，只是简单的进行纹理采样，并没有对像素数据进行相关操作。在自定义相关滤镜的时候，我们通常改变片段着色器就行了，如果涉及多个纹理输入，可以使用之前介绍的多重输入滤镜（也是GPUImageFilter的子类，但扩展了帧缓存的输入）。以下是 GPUImageFilter 的相关着色器。
NSString *const kGPUImageVertexShaderString = SHADER_STRING
(
attribute vec4 position;
attribute vec4 inputTextureCoordinate;
varying vec2 textureCoordinate;
void main()
{
gl_Position = position;
textureCoordinate = inputTextureCoordinate.xy;
}
);
#if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
NSString *const kGPUImagePassthroughFragmentShaderString = SHADER_STRING
(
varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
gl_FragColor = texture2D(inputImageTexture, textureCoordinate);
}
);
#else
NSString *const kGPUImagePassthroughFragmentShaderString = SHADER_STRING
(
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
gl_FragColor = texture2D(inputImageTexture, textureCoordinate);
}
);
#endif
- 实例变量
GPUImageFilter 中有两个比较重要的实例变量 firstInputFramebuffer、filterProgram。firstInputFramebuffer 表示输入帧缓存对象，filterProgram 表示GL程序。
@interface GPUImageFilter : GPUImageOutput <GPUImageInput>
{
// 输入帧缓存对象
GPUImageFramebuffer *firstInputFramebuffer;
// GL程序
GLProgram *filterProgram;
// 属性变量
GLint filterPositionAttribute, filterTextureCoordinateAttribute;
// 纹理统一变量
GLint filterInputTextureUniform;
// GL清屏颜色
GLfloat backgroundColorRed, backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha;
// 结束处理操作
BOOL isEndProcessing;
CGSize currentFilterSize;
// 屏幕旋转方向
GPUImageRotationMode inputRotation;
BOOL currentlyReceivingMonochromeInput;
// 保存RestorationBlocks的字典
NSMutableDictionary *uniformStateRestorationBlocks;
// 信号量
dispatch_semaphore_t imageCaptureSemaphore;
}
- 构造方法
GPUImageFilter 构造方法需要我们传入顶点着色器和片段着色器就，当然我们一般只需要传入片段着色器即可。初始化的过程可以概括为这几个步骤：1、初始化相关实例变量；2、初始化GL上下文对象；3、初始化GL程序；4、创建GL程序；5、获取GL相关变量。
- (id)initWithVertexShaderFromString:(NSString *)vertexShaderString fragmentShaderFromString:(NSString *)fragmentShaderString;
- (id)initWithFragmentShaderFromString:(NSString *)fragmentShaderString;
- (id)initWithFragmentShaderFromFile:(NSString *)fragmentShaderFilename;
/******************* 方法实现 ************************************/
- (id)initWithVertexShaderFromString:(NSString *)vertexShaderString fragmentShaderFromString:(NSString *)fragmentShaderString;
{
if (!(self = [super init]))
{
return nil;
}
// 初始化相关实例变量
uniformStateRestorationBlocks = [NSMutableDictionary dictionaryWithCapacity:10];
_preventRendering = NO;
currentlyReceivingMonochromeInput = NO;
inputRotation = kGPUImageNoRotation;
backgroundColorRed = 0.0;
backgroundColorGreen = 0.0;
backgroundColorBlue = 0.0;
backgroundColorAlpha = 0.0;
imageCaptureSemaphore = dispatch_semaphore_create(0);
dispatch_semaphore_signal(imageCaptureSemaphore);
runSynchronouslyOnVideoProcessingQueue(^{
// 初始化GL上下文对象
[GPUImageContext useImageProcessingContext];
// 创建GL程序
filterProgram = [[GPUImageContext sharedImageProcessingContext] programForVertexShaderString:vertexShaderString fragmentShaderString:fragmentShaderString];
if (!filterProgram.initialized)
{
// 初始化属性变量
[self initializeAttributes];
// 链接着色器程序
if (![filterProgram link])
{
// 输出错误日志
NSString *progLog = [filterProgram programLog];
NSLog(@"Program link log: %@", progLog);
NSString *fragLog = [filterProgram fragmentShaderLog];
NSLog(@"Fragment shader compile log: %@", fragLog);
NSString *vertLog = [filterProgram vertexShaderLog];
NSLog(@"Vertex shader compile log: %@", vertLog);
filterProgram = nil;
NSAssert(NO, @"Filter shader link failed");
}
}
// 获取顶点属性变量
filterPositionAttribute = [filterProgram attributeIndex:@"position"];
// 获取纹理坐标属性变量
filterTextureCoordinateAttribute = [filterProgram attributeIndex:@"inputTextureCoordinate"];
// 获取纹理统一变量
filterInputTextureUniform = [filterProgram uniformIndex:@"inputImageTexture"]; // This does assume a name of "inputImageTexture" for the fragment shader
// 使用当前GL程序
[GPUImageContext setActiveShaderProgram:filterProgram];
// 启用顶点属性数组
glEnableVertexAttribArray(filterPositionAttribute);
glEnableVertexAttribArray(filterTextureCoordinateAttribute);
});
return self;
}
- (id)initWithFragmentShaderFromString:(NSString *)fragmentShaderString;
{
if (!(self = [self initWithVertexShaderFromString:kGPUImageVertexShaderString fragmentShaderFromString:fragmentShaderString]))
{
return nil;
}
return self;
}
- (id)initWithFragmentShaderFromFile:(NSString *)fragmentShaderFilename;
{
NSString *fragmentShaderPathname = [[NSBundle mainBundle] pathForResource:fragmentShaderFilename ofType:@"fsh"];
NSString *fragmentShaderString = [NSString stringWithContentsOfFile:fragmentShaderPathname encoding:NSUTF8StringEncoding error:nil];
if (!(self = [self initWithFragmentShaderFromString:fragmentShaderString]))
{
return nil;
}
return self;
}
- 其它方法
GPUImageFilter 的方法中，为着色器传值的方法比较多，这是因为着色器能接受不同类型的值，如：GLint、GLfloat、vec2、vec3、mat3 等。在这些方法中有三个比较重要的方法 - (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex; 和 - (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates; 和 - (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime; 这三个方法和响应链密切相关。GPUImageFilter 会将接收到的帧缓存对象经过特定的片段着色器绘制到即将输出的帧缓存对象中，然后将自己输出的帧缓存对象传给所有Targets并通知它们进行处理。方法被调用的顺序：
1、生成新的帧缓存对象
- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex;；
2、进行GL绘制
- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;
3、绘制完成通知所有的target处理
- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;
接下来主要看这几个方法。
// 变换方法
- (void)setupFilterForSize:(CGSize)filterFrameSize;
- (CGSize)rotatedSize:(CGSize)sizeToRotate forIndex:(NSInteger)textureIndex;
- (CGPoint)rotatedPoint:(CGPoint)pointToRotate forRotation:(GPUImageRotationMode)rotation;
// 查询方法
- (CGSize)sizeOfFBO;
+ (const GLfloat *)textureCoordinatesForRotation:(GPUImageRotationMode)rotationMode;
- (CGSize)outputFrameSize;
// 渲染方法
- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;
- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;
// 设置清屏颜色
- (void)setBackgroundColorRed:(GLfloat)redComponent green:(GLfloat)greenComponent blue:(GLfloat)blueComponent alpha:(GLfloat)alphaComponent;
// 传值方法
- (void)setInteger:(GLint)newInteger forUniformName:(NSString *)uniformName;
- (void)setFloat:(GLfloat)newFloat forUniformName:(NSString *)uniformName;
- (void)setSize:(CGSize)newSize forUniformName:(NSString *)uniformName;
- (void)setPoint:(CGPoint)newPoint forUniformName:(NSString *)uniformName;
- (void)setFloatVec3:(GPUVector3)newVec3 forUniformName:(NSString *)uniformName;
- (void)setFloatVec4:(GPUVector4)newVec4 forUniform:(NSString *)uniformName;
- (void)setFloatArray:(GLfloat *)array length:(GLsizei)count forUniform:(NSString*)uniformName;
- (void)setMatrix3f:(GPUMatrix3x3)matrix forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setMatrix4f:(GPUMatrix4x4)matrix forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setFloat:(GLfloat)floatValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setPoint:(CGPoint)pointValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setSize:(CGSize)sizeValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setVec3:(GPUVector3)vectorValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setVec4:(GPUVector4)vectorValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setFloatArray:(GLfloat *)arrayValue length:(GLsizei)arrayLength forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setInteger:(GLint)intValue forUniform:(GLint)uniform program:(GLProgram *)shaderProgram;
- (void)setAndExecuteUniformStateCallbackAtIndex:(GLint)uniform forProgram:(GLProgram *)shaderProgram toBlock:(dispatch_block_t)uniformStateBlock;
- (void)setUniformsForProgramAtIndex:(NSUInteger)programIndex;
/******************* 方法实现 ************************************/
// 根据旋转方向获取纹理坐标
+ (const GLfloat *)textureCoordinatesForRotation:(GPUImageRotationMode)rotationMode;
{
static const GLfloat noRotationTextureCoordinates[] = {
0.0f, 0.0f,
1.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
};
static const GLfloat rotateLeftTextureCoordinates[] = {
1.0f, 0.0f,
1.0f, 1.0f,
0.0f, 0.0f,
0.0f, 1.0f,
};
static const GLfloat rotateRightTextureCoordinates[] = {
0.0f, 1.0f,
0.0f, 0.0f,
1.0f, 1.0f,
1.0f, 0.0f,
};
static const GLfloat verticalFlipTextureCoordinates[] = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f,
};
static const GLfloat horizontalFlipTextureCoordinates[] = {
1.0f, 0.0f,
0.0f, 0.0f,
1.0f, 1.0f,
0.0f, 1.0f,
};
static const GLfloat rotateRightVerticalFlipTextureCoordinates[] = {
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 0.0f,
1.0f, 1.0f,
};
static const GLfloat rotateRightHorizontalFlipTextureCoordinates[] = {
1.0f, 1.0f,
1.0f, 0.0f,
0.0f, 1.0f,
0.0f, 0.0f,
};
static const GLfloat rotate180TextureCoordinates[] = {
1.0f, 1.0f,
0.0f, 1.0f,
1.0f, 0.0f,
0.0f, 0.0f,
};
switch(rotationMode)
{
case kGPUImageNoRotation: return noRotationTextureCoordinates;
case kGPUImageRotateLeft: return rotateLeftTextureCoordinates;
case kGPUImageRotateRight: return rotateRightTextureCoordinates;
case kGPUImageFlipVertical: return verticalFlipTextureCoordinates;
case kGPUImageFlipHorizonal: return horizontalFlipTextureCoordinates;
case kGPUImageRotateRightFlipVertical: return rotateRightVerticalFlipTextureCoordinates;
case kGPUImageRotateRightFlipHorizontal: return rotateRightHorizontalFlipTextureCoordinates;
case kGPUImageRotate180: return rotate180TextureCoordinates;
}
}
// 产生新的帧缓存
- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex;
{
static const GLfloat imageVertices[] = {
-1.0f, -1.0f,
1.0f, -1.0f,
-1.0f, 1.0f,
1.0f, 1.0f,
};
// 先渲染到帧缓存
[self renderToTextureWithVertices:imageVertices textureCoordinates:[[self class] textureCoordinatesForRotation:inputRotation]];
// 通知所有的Targets
[self informTargetsAboutNewFrameAtTime:frameTime];
}
// 渲染到帧缓存
- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;
{
if (self.preventRendering)
{
[firstInputFramebuffer unlock];
return;
}
[GPUImageContext setActiveShaderProgram:filterProgram];
outputFramebuffer = [[GPUImageContext sharedFramebufferCache] fetchFramebufferForSize:[self sizeOfFBO] textureOptions:self.outputTextureOptions onlyTexture:NO];
[outputFramebuffer activateFramebuffer];
if (usingNextFrameForImageCapture)
{
[outputFramebuffer lock];
}
[self setUniformsForProgramAtIndex:0];
// GL绘制
glClearColor(backgroundColorRed, backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha);
glClear(GL_COLOR_BUFFER_BIT);
glActiveTexture(GL_TEXTURE2);
glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
glUniform1i(filterInputTextureUniform, 2);
glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);
glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, textureCoordinates);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
// 解锁输入帧缓存对象
[firstInputFramebuffer unlock];
// 需要等待绘制完成才去生成图像
if (usingNextFrameForImageCapture)
{
// 发送渲染完成信号
dispatch_semaphore_signal(imageCaptureSemaphore);
}
}
// 通知所有的Targets
- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;
{
if (self.frameProcessingCompletionBlock != NULL)
{
self.frameProcessingCompletionBlock(self, frameTime);
}
// 传递帧缓存给所有target
for (id<GPUImageInput> currentTarget in targets)
{
if (currentTarget != self.targetToIgnoreForUpdates)
{
NSInteger indexOfObject = [targets indexOfObject:currentTarget];
NSInteger textureIndex = [[targetTextureIndices objectAtIndex:indexOfObject] integerValue];
[self setInputFramebufferForTarget:currentTarget atIndex:textureIndex];
[currentTarget setInputSize:[self outputFrameSize] atIndex:textureIndex];
}
}
// Release our hold so it can return to the cache immediately upon processing
[[self framebufferForOutput] unlock];
if (usingNextFrameForImageCapture)
{
// usingNextFrameForImageCapture = NO;
}
else
{
[self removeOutputFramebuffer];
}
// 通知所有targets产生新的帧缓存
for (id<GPUImageInput> currentTarget in targets)
{
if (currentTarget != self.targetToIgnoreForUpdates)
{
NSInteger indexOfObject = [targets indexOfObject:currentTarget];
NSInteger textureIndex = [[targetTextureIndices objectAtIndex:indexOfObject] integerValue];
// 让所有target生成新的帧缓存
[currentTarget newFrameReadyAtTime:frameTime atIndex:textureIndex];
}
}
}
// 需要生成图片则先消耗信号量，确保生成图片的时候GL绘制已经完成
- (void)useNextFrameForImageCapture;
{
usingNextFrameForImageCapture = YES;
// 消耗信号量
if (dispatch_semaphore_wait(imageCaptureSemaphore, DISPATCH_TIME_NOW) != 0)
{
return;
}
}
// 等待渲染完成信号，如果接收到完成信号则生成图片
- (CGImageRef)newCGImageFromCurrentlyProcessedOutput
{
// Give it three seconds to process, then abort if they forgot to set up the image capture properly
double timeoutForImageCapture = 3.0;
dispatch_time_t convertedTimeout = dispatch_time(DISPATCH_TIME_NOW, timeoutForImageCapture * NSEC_PER_SEC);
// 等待GL绘制完成，直到超时
if (dispatch_semaphore_wait(imageCaptureSemaphore, convertedTimeout) != 0)
{
return NULL;
}
// GL渲染完成且等待未超时则生成CGImage
GPUImageFramebuffer* framebuffer = [self framebufferForOutput];
usingNextFrameForImageCapture = NO;
dispatch_semaphore_signal(imageCaptureSemaphore);
CGImageRef image = [framebuffer newCGImageFromFramebufferContents];
return image;
}
实现过程
实现自定义滤镜特效。
1、新建QMFishEyeFilter，并继承自 GPUImageFilter。
//
// QMRotationFilter.h
// GPUImageFilter
//
// Created by qinmin on 2017/6/8.
// Copyright © 2017年 Qinmin. All rights reserved.
//
#import <GPUImage.h>
@interface QMFishEyeFilter : GPUImageFilter
@property (nonatomic, assign) GLfloat radius;
- (instancetype)init;
@end
2、重写 - (instancetype)init; 方法。
- (instancetype)init
{
if (self = [super initWithFragmentShaderFromString:kQMFishEyeFilterFragmentShaderString]) {
radiusUniform = [filterProgram uniformIndex:@"radius"];
self.radius = 0.5;
[self setBackgroundColorRed:0.0 green:1.0 blue:0.0 alpha:1.0];
}
return self;
}
3、 编写自定义的着色器代码。
NSString *const kQMFishEyeFilterFragmentShaderString = SHADER_STRING
(
precision highp float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform float radius;
const float PI = 3.1415926535;
void main()
{
float aperture = 175.0;
float apertureHalf = radius * aperture * (PI / 180.0);
float maxFactor = sin(apertureHalf);
vec2 uv;
vec2 xy = 2.0 * textureCoordinate - 1.0;
float d = length(xy);
if (d < (2.0 - maxFactor)) {
d = length(xy * maxFactor);
float z = sqrt(1.0 - d * d);
float r = atan(d, z) / PI;
float phi = atan(xy.y, xy.x);
uv.x = r * cos(phi) + radius;
uv.y = r * sin(phi) + radius;
}else {
uv = textureCoordinate;
}
vec4 color = texture2D(inputImageTexture, uv);
gl_FragColor = color;
}
);
4、 使用自定义滤镜特效。
#pragma mark - Events
- (IBAction)startButtonTapped:(UIButton *)sender
{
// 加载图片
GPUImagePicture *picture = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"3.jpg"]];
QMFishEyeFilter *filter = [[QMFishEyeFilter alloc] init];
[picture addTarget:filter];
[filter addTarget:_imageView];
[picture processImage];
}
简单光照效果。
1、新建QM3DLightFilter，并继承自 GPUImageFilter。
//
// QMRotationFilter.h
// GPUImageFilter
//
// Created by qinmin on 2017/6/8.
// Copyright © 2017年 Qinmin. All rights reserved.
//
#import <GPUImage.h>
@interface QM3DLightFilter : GPUImageFilter
- (instancetype)init;
@end
2、重写 - (instancetype)init; 方法。
- (instancetype)init
{
if (self = [super initWithVertexShaderFromString:kQM3DLightFilterVertexShaderString fragmentShaderFromString:kQM3DLightFilterFragmentShaderString]) {
[filterProgram addAttribute:@"normal"];
filterNormalAttribute = [filterProgram attributeIndex:@"normal"];
glEnableVertexAttribArray(filterNormalAttribute);
pUniform = [filterProgram uniformIndex:@"P"];
mvUniform = [filterProgram uniformIndex:@"MV"];
normalMatUniform = [filterProgram uniformIndex:@"normalMat"];
[self setMVPMatrix];
[self setupSurface];
[self setBackgroundColorRed:1.0 green:1.0 blue:1.0 alpha:1.0];
}
return self;
}
3、初始化相关矩阵和模型。模型加载使用了开源的tiny_obj_loader。
- (void)setMVPMatrix
{
mat4_t P = mat4_perspective(M_PI/3, 1.0, 1.0, 10.0);
[self setMatrix4f:*((GPUMatrix4x4 *)&P) forUniform:pUniform program:filterProgram];
mat4_t MV = mat4_create_translation(0, 0, -2.2);
[self setMatrix4f:*((GPUMatrix4x4 *)&MV) forUniform:mvUniform program:filterProgram];
mat4_t normalMat = mat4_transpose(mat4_inverse(MV, NULL));
[self setMatrix4f:*((GPUMatrix4x4 *)&normalMat) forUniform:normalMatUniform program:filterProgram];
}
- (void)setupSurface
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"Sphere" ofType:@"obj"];
_tinyOBJModel = std::make_shared<TinyOBJModel>();
_tinyOBJModel->LoadObj(path.UTF8String);
}
4、编写着色器程序。
NSString *const kQM3DLightFilterVertexShaderString = SHADER_STRING
(
attribute vec4 position;
attribute vec2 inputTextureCoordinate;
attribute vec3 normal;
uniform mat4 MV;
uniform mat4 P;
uniform mat4 normalMat;
varying vec2 textureCoordinate;
varying vec3 vNormal;
varying vec3 vPosition;
void main()
{
gl_Position = P * MV * position;
textureCoordinate = inputTextureCoordinate;
vPosition = mat3(MV) * vec3(position);
vNormal = mat3(normalMat) * normal;
}
);
NSString *const kQM3DLightFilterFragmentShaderString = SHADER_STRING
(
precision highp float;
varying vec2 textureCoordinate;
varying vec3 vNormal;
varying vec3 vPosition;
uniform sampler2D inputImageTexture;
void main()
{
vec3 lightPos = vec3(5.0, -5.0, 0.0);
vec3 L = normalize(lightPos);
vec3 N = normalize(vNormal);
//ambient
vec4 AmbientLightColor = vec4(0.5, 0.5, 0.5, 1.0);
vec4 AmbientMaterial = vec4(0.2, 0.2, 0.2, 1.0);
vec4 ambientColor = AmbientLightColor * AmbientMaterial;
//diffuse
vec4 DiffuseLightColor = vec4(1.0, 1.0, 1.0, 1.0);
vec4 DiffuseMaterial = vec4(0.8, 0.8, 0.8, 1.0);
vec4 diffuseColor = DiffuseLightColor * DiffuseMaterial * max(0.0, dot(N, L));
// Specular
vec4 SpecularLightColor = vec4(1.0, 1.0, 0.0, 1.0);
vec4 SpecularMaterial = vec4(0.7, 0.7, 0.7, 1.0);
vec3 eye = vec3(1.0, -2.0, 5.0) - vPosition;
vec3 H = normalize(eye + L);
vec4 specularColor = SpecularLightColor * SpecularMaterial * pow(max(0.0, dot(N, H)), 2.5);
// All light
vec4 light = ambientColor + diffuseColor + specularColor;
vec4 color = texture2D(inputImageTexture, textureCoordinate);
gl_FragColor = color * light;
}
);
5、重写渲染方法 - (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;，在渲染的时候，开启了深度测试，顶点数据使用VBO存储。
#pragma mark - Overwrite
- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates;
{
if (self.preventRendering)
{
[firstInputFramebuffer unlock];
return;
}
[GPUImageContext setActiveShaderProgram:filterProgram];
outputFramebuffer = [[GPUImageContext sharedFramebufferCache] fetchFramebufferForSize:[self sizeOfFBO] textureOptions:self.outputTextureOptions onlyTexture:NO];
[outputFramebuffer activateFramebuffer];
if (usingNextFrameForImageCapture)
{
[outputFramebuffer lock];
}
[self setUniformsForProgramAtIndex:0];
// Setup depth render buffer
int width, height;
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &width);
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &height);
// Create a depth buffer that has the same size as the color buffer.
GLuint depthRenderBuffer;
glGenRenderbuffers(1, &depthRenderBuffer);
glBindRenderbuffer(GL_RENDERBUFFER, depthRenderBuffer);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, width, height);
// Attach color render buffer and depth render buffer to frameBuffer
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT,
GL_RENDERBUFFER, depthRenderBuffer);
glEnable(GL_DEPTH_TEST);
glClearColor(backgroundColorRed, backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glActiveTexture(GL_TEXTURE2);
glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
glUniform1i(filterInputTextureUniform, 2);
int stride = 8 * sizeof(GLfloat);
const GLvoid* normalOffset = (const GLvoid*)(5 * sizeof(GLfloat));
const GLvoid* texCoordOffset = (const GLvoid*)(3 * sizeof(GLfloat));
glBindBuffer(GL_ARRAY_BUFFER, _tinyOBJModel->getVertexBuffer());
glVertexAttribPointer(filterPositionAttribute, 3, GL_FLOAT, GL_FALSE, stride, 0);
glVertexAttribPointer(filterNormalAttribute, 3, GL_FLOAT, GL_FALSE, stride, normalOffset);
glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, GL_FALSE, stride, texCoordOffset);
// Draw the triangles.
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _tinyOBJModel->getIndexBuffer());
glDrawElements(GL_TRIANGLES, _tinyOBJModel->getIndexCount(), GL_UNSIGNED_INT, 0);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glDisable(GL_DEPTH_TEST);
[firstInputFramebuffer unlock];
if (usingNextFrameForImageCapture)
{
dispatch_semaphore_signal(imageCaptureSemaphore);
}
}
6、使用滤镜。
- (IBAction)filterButtonTapped:(UIButton *)sender
{
// 加载图片
GPUImagePicture *picture = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"3.jpg"]];
QM3DLightFilter *filter = [[QM3DLightFilter alloc] init];
[picture addTarget:filter];
[filter addTarget:_imageView];
[picture processImage];
}
总结
GPUImageFilter 是所有滤镜的基础，其它滤镜大多直接或间接继承它，这些滤镜可以混合起来构建复杂的多重滤镜。因此，梳理它的渲染树对理解整个 GPUImage 框架有很大的帮助。
源码地址：GPUImage源码阅读系列 https://github.com/QinminiOS/GPUImage
系列文章地址：GPUImage源码阅读 http://www.jianshu.com/nb/11749791
