滤镜
滤镜就是通过特定的算法编辑图像,使图像呈现不同的效果.其实滤镜的关键在片元着色器其实滤镜处理的原理:就是把静态图片或者视频的每一帧进行图形变换后再显示到屏幕上,其本质就是像素点的坐标和颜色的变化.
OpenGL 实现滤镜流程
1.初始化上下文
2.创建图层Layer
3.绑定渲染缓存区
4.设置视口
5.加载需要渲染的图片
6.编写着色器代码
7.设置顶点缓存区
8.设置着色器
9.渲染
注: 其中除了第5,6点以外,其他步骤是固定的,可以根据自己的需要对代码进行封装.如果使用GLKView,第2,3,4步可以省略,因为GLKView内部已经封装好了.
1.初始上下文
// 初始化上下文
self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
// 设置为当前上下文
[EAGLContext setCurrentContext:self.context];
2.创建图层Layer
// 创建图层(CAEAGLLayer)
CAEAGLLayer *layer = [[CAEAGLLayer alloc] init];
// 设置图层frame
layer.frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width);
// 设置图层的scale
layer.contentsScale = [[UIScreen mainScreen] scale];
// 给View添加layer
[self.view.layer addSublayer:layer];
3.绑定渲染缓存区
//绑定渲染缓存区和帧缓存区
- (void)bindRenderLayer:(CALayer <EAGLDrawable> *)layer {
//1.渲染缓存区,帧缓存区对象
GLuint renderBuffer;
GLuint frameBuffer;
//2.获取帧渲染缓存区名称,绑定渲染缓存区以及将渲染缓存区与layer建立连接
glGenRenderbuffers(1, &renderBuffer);
glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer);
[self.context renderbufferStorage:GL_RENDERBUFFER fromDrawable:layer];
//3.获取帧缓存区名称,绑定帧缓存区以及将渲染缓存区附着到帧缓存区上
glGenFramebuffers(1, &frameBuffer);
glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);
glFramebufferRenderbuffer(GL_FRAMEBUFFER,
GL_COLOR_ATTACHMENT0,
GL_RENDERBUFFER,
renderBuffer);
}
4.设置视口
//绑定渲染缓存区和帧缓存区
glViewport(0, 0, self.drawableWidth, self.drawableHeight);
5.加载需要渲染的图片
//5.绑定渲染缓存区
[self bindRenderLayer:layer];
//6.获取处理的图片路径
NSString *imagePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"kunkun.jpg"];
//读取图片
UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
//将JPG图片转换成纹理图片
GLuint textureID = [self createTextureWithImage:image];
//设置纹理ID
self.textureID = textureID; // 将纹理 ID 保存，方便后面切换滤镜的时候重用
//从图片中加载纹理
- (GLuint)createTextureWithImage:(UIImage *)image {
//1、将 UIImage 转换为 CGImageRef
CGImageRef cgImageRef = [image CGImage];
//判断图片是否获取成功
if (!cgImageRef) {
NSLog(@"Failed to load image");
exit(1);
}
//2、读取图片的大小，宽和高
GLuint width = (GLuint)CGImageGetWidth(cgImageRef);
GLuint height = (GLuint)CGImageGetHeight(cgImageRef);
//获取图片的rect
CGRect rect = CGRectMake(0, 0, width, height);
//获取图片的颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//3.获取图片字节数 宽*高*4（RGBA）
void *imageData = malloc(width * height * 4);
//4.创建上下文
/*
参数1：data,指向要渲染的绘制图像的内存地址
参数2：width,bitmap的宽度，单位为像素
参数3：height,bitmap的高度，单位为像素
参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
参数6：colorSpace,bitmap上使用的颜色空间 kCGImageAlphaPremultipliedLast：RGBA
*/
CGContextRef context = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
//将图片翻转过来(图片默认是倒置的)
CGContextTranslateCTM(context, 0, height);
CGContextScaleCTM(context, 1.0f, -1.0f);
CGColorSpaceRelease(colorSpace);
CGContextClearRect(context, rect);
//对图片进行重新绘制，得到一张新的解压缩后的位图
CGContextDrawImage(context, rect, cgImageRef);
//设置图片纹理属性
//5. 获取纹理ID
GLuint textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
//6.载入纹理2D数据
/*
参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
参数2：加载的层次，一般设置为0
参数3：纹理的颜色值GL_RGBA
参数4：宽
参数5：高
参数6：border，边界宽度
参数7：format
参数8：type
参数9：纹理数据
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
//7.设置纹理属性
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
//8.绑定纹理
/*
参数1：纹理维度
参数2：纹理ID,因为只有一个纹理，给0就可以了。
*/
glBindTexture(GL_TEXTURE_2D, 0);
//9.释放context,imageData
CGContextRelease(context);
free(imageData);
//10.返回纹理ID
return textureID;
}
6.编写着色器代码(根据自己需要的滤镜效果编写)
- 顶点着色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture, TextureCoordsVarying);
gl_FragColor = vec4(mask.rgb, 1.0);
}
- 片元着色器(双屏特效滤镜)
precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;
void main() {
vec2 uv = TextureCoordsVarying.xy;
float y;
if (uv.y >= 0.0 && uv.y <= 0.5) {
y = uv.y + 0.25;
} else {
y = uv.y - 0.25;
}
gl_FragColor = texture2D(Texture, vec2(uv.x, y));
}
7.设置顶点缓存区
typedef struct {
GLKVector3 positionCoord; // (X, Y, Z)
GLKVector2 textureCoord; // (U, V)
} SenceVertex;
// 开辟顶点数组内存空间
self.vertices = malloc(sizeof(SenceVertex) * 4);
// 初始化顶点(0,1,2,3)的顶点坐标以及纹理坐标
self.vertices[0] = (SenceVertex){{-1, 1, 0}, {0, 1}};
self.vertices[1] = (SenceVertex){{-1, -1, 0}, {0, 0}};
self.vertices[2] = (SenceVertex){{1, 1, 0}, {1, 1}};
self.vertices[3] = (SenceVertex){{1, -1, 0}, {1, 0}};
// 设置顶点缓存区
GLuint vertexBuffer;
glGenBuffers(1, &vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
GLsizeiptr bufferSizeBytes = sizeof(SenceVertex) * 4;
glBufferData(GL_ARRAY_BUFFER, bufferSizeBytes, self.vertices, GL_STATIC_DRAW);
8.设置着色器
// 初始化着色器程序
- (void)setupShaderProgramWithName:(NSString *)name {
//1. 获取着色器program
GLuint program = [self programWithShaderName:name];
//2. use Program
glUseProgram(program);
//3. 获取Position,Texture,TextureCoords 的索引位置
GLuint positionSlot = glGetAttribLocation(program, "Position");
GLuint textureSlot = glGetUniformLocation(program, "Texture");
GLuint textureCoordsSlot = glGetAttribLocation(program, "TextureCoords");
//4.激活纹理,绑定纹理ID
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, self.textureID);
//5.纹理sample
glUniform1i(textureSlot, 0);
//6.打开positionSlot 属性并且传递数据到positionSlot中(顶点坐标)
glEnableVertexAttribArray(positionSlot);
glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, positionCoord));
//7.打开textureCoordsSlot 属性并传递数据到textureCoordsSlot(纹理坐标)
glEnableVertexAttribArray(textureCoordsSlot);
glVertexAttribPointer(textureCoordsSlot, 2, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, textureCoord));
//8.保存program,界面销毁则释放
self.program = program;
}
//link Program
- (GLuint)programWithShaderName:(NSString *)shaderName {
//1. 编译顶点着色器/片元着色器
GLuint vertexShader = [self compileShaderWithName:shaderName type:GL_VERTEX_SHADER];
GLuint fragmentShader = [self compileShaderWithName:shaderName type:GL_FRAGMENT_SHADER];
//2. 将顶点/片元附着到program
GLuint program = glCreateProgram();
glAttachShader(program, vertexShader);
glAttachShader(program, fragmentShader);
//3.linkProgram
glLinkProgram(program);
//4.检查是否link成功
GLint linkSuccess;
glGetProgramiv(program, GL_LINK_STATUS, &linkSuccess);
if (linkSuccess == GL_FALSE) {
GLchar messages[256];
glGetProgramInfoLog(program, sizeof(messages), 0, &messages[0]);
NSString *messageString = [NSString stringWithUTF8String:messages];
NSAssert(NO, @"program链接失败：%@", messageString);
exit(1);
}
//5.返回program
return program;
}
//编译shader代码
- (GLuint)compileShaderWithName:(NSString *)name type:(GLenum)shaderType {
//1.获取shader 路径
NSString *shaderPath = [[NSBundle mainBundle] pathForResource:name ofType:shaderType == GL_VERTEX_SHADER ? @"vsh" : @"fsh"];
NSError *error;
NSString *shaderString = [NSString stringWithContentsOfFile:shaderPath encoding:NSUTF8StringEncoding error:&error];
if (!shaderString) {
NSAssert(NO, @"读取shader失败");
exit(1);
}
//2. 创建shader->根据shaderType
GLuint shader = glCreateShader(shaderType);
//3.获取shader source
const char *shaderStringUTF8 = [shaderString UTF8String];
int shaderStringLength = (int)[shaderString length];
glShaderSource(shader, 1, &shaderStringUTF8, &shaderStringLength);
//4.编译shader
glCompileShader(shader);
//5.查看编译是否成功
GLint compileSuccess;
glGetShaderiv(shader, GL_COMPILE_STATUS, &compileSuccess);
if (compileSuccess == GL_FALSE) {
GLchar messages[256];
glGetShaderInfoLog(shader, sizeof(messages), 0, &messages[0]);
NSString *messageString = [NSString stringWithUTF8String:messages];
NSAssert(NO, @"shader编译失败：%@", messageString);
exit(1);
}
//6.返回shader
return shader;
}
9.渲染
//使用program
glUseProgram(self.program);
//绑定buffer
glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
// 清除画布
glClear(GL_COLOR_BUFFER_BIT);
glClearColor(1, 1, 1, 1);
// 重绘
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
// 渲染到屏幕上
[self.context presentRenderbuffer:GL_RENDERBUFFER];
显示效果
分屏2
网友评论