OpenGL ES之GLSL实现仿抖音“分屏滤镜”效果

无分屏滤镜

一、GLSL自定义着色器

• Normal.vsh:顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying   vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

• Normal.fsh:片元着色器

precision highp float;
uniform   sampler2D Texture;
varying   vec2 TextureCoordsVarying;

void main (void) {
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

二、ViewController

创建滤镜切换栏

• 定义全局需要使用的变量

typedef struct {
    GLKVector3 positionCoord; // (X, Y, Z)
    GLKVector2 textureCoord;  // (U, V)
} SenceVertex;

@property (nonatomic, assign) SenceVertex *vertices;
// Context
@property (nonatomic, strong) EAGLContext *context;
// 用于刷新屏幕
@property (nonatomic, strong) CADisplayLink *displayLink;
// 开始的时间戳
@property (nonatomic, assign) NSTimeInterval startTimeInterval;
// 着色器程序
@property (nonatomic, assign) GLuint program;
// 顶点缓存
@property (nonatomic, assign) GLuint vertexBuffer;
// 纹理 ID
@property (nonatomic, assign) GLuint textureID;

• 创建滤镜切换栏:

 - (void)setupFilterBar {
    CGFloat filterBarWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat filterBarHeight = 100;
    CGFloat filterBarY = [UIScreen mainScreen].bounds.size.height - filterBarHeight;
    FilterBar *filerBar = [[FilterBar alloc] initWithFrame:CGRectMake(0, filterBarY, filterBarWidth, filterBarHeight)];
    filerBar.delegate = self;
    [self.view addSubview:filerBar];
    
    NSArray *dataSource = @[@"无"];
    filerBar.itemList = dataSource;
}

• FilterBarDelegate实现

#pragma mark - FilterBarDelegate
 - (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index {
    // 选择默认shader
    if (index == 0) {
        [self setupNormalShaderProgram];
    }
    // 渲染
    [self render];
}

• 渲染

- (void)render {
    
    // 清除画布
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    
    // 使用program
    glUseProgram(self.program);
    // 绑定buffer
    glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
    
    // 重绘
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    // 渲染到屏幕上
    [self.context presentRenderbuffer:GL_RENDERBUFFER];
    
}

滤镜处理初始化

• 设置上下文,开辟顶点数组内存空间并初始化顶点坐标和纹理坐标;

	// 初始化上下文并设置为当前上下文
    self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    [EAGLContext setCurrentContext:self.context];
    
    // 开辟顶点数组内存空间
    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}};

• 创建图层并绑定渲染缓存区

	// 创建图层(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];
    
    // 绑定渲染缓存区
    [self bindRenderLayer:layer];

• 设置纹理图片,并创建视口,设置顶点缓存区

	// 读取图片
    UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
    // 将JPG图片转换成纹理图片
    GLuint textureID = [self createTextureWithImage:image];
    // 设置纹理ID
    self.textureID = textureID;  // 将纹理 ID 保存，方便后面切换滤镜的时候重用
    
    // 设置视口
    glViewport(0, 0, self.drawableWidth, self.drawableHeight);
    
    // 设置顶点缓存区
    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);
    
    // 设置默认着色器:开始选用默认的着色器
    [self setupNormalShaderProgram];
    
    // 将顶点缓存保存，退出时才释放
    self.vertexBuffer = vertexBuffer;

// 获取渲染缓存区的宽
- (GLint)drawableWidth {
    GLint backingWidth;
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &backingWidth);
    return backingWidth;
}

// 获取渲染缓存区的高
- (GLint)drawableHeight {
    GLint backingHeight;
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &backingHeight);
    return backingHeight;
}

• 绑定渲染缓存区和帧缓存区

 - (void)bindRenderLayer:(CALayer <EAGLDrawable> *)layer {
    
    // 渲染缓存区,帧缓存区对象
    GLuint renderBuffer;
    GLuint frameBuffer;
    
    // 获取帧渲染缓存区名称,绑定渲染缓存区以及将渲染缓存区与layer建立连接
    glGenRenderbuffers(1, &renderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer);
    [self.context renderbufferStorage:GL_RENDERBUFFER fromDrawable:layer];
    
    // 获取帧缓存区名称,绑定帧缓存区以及将渲染缓存区附着到帧缓存区上
    glGenFramebuffers(1, &frameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER,
                              GL_COLOR_ATTACHMENT0,
                              GL_RENDERBUFFER,
                              renderBuffer);
}

• 从图片中加载纹理

// 从图片中加载纹理
 - (GLuint)createTextureWithImage:(UIImage *)image {
    
    // 将 UIImage 转换为 CGImageRef
    CGImageRef cgImageRef = [image CGImage];
    // 判断图片是否获取成功
    if (!cgImageRef) {
        NSLog(@"Failed to load image");
        exit(1);
    }
    // 读取图片的大小，宽和高
    GLuint width = (GLuint)CGImageGetWidth(cgImageRef);
    GLuint height = (GLuint)CGImageGetHeight(cgImageRef);
    // 获取图片的rect
    CGRect rect = CGRectMake(0, 0, width, height);
    
    // 获取图片的颜色空间
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    // 获取图片字节数 宽*高*4（RGBA）
    void *imageData = malloc(width * height * 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);
    
    // 设置图片纹理属性
    // 获取纹理ID
    GLuint textureID;
    glGenTextures(1, &textureID);
    glBindTexture(GL_TEXTURE_2D, textureID);
    
    /* 载入纹理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);
    
    // 设置纹理属性
    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);
    
    /* 绑定纹理
     * 参数1：纹理维度
     * 参数2：纹理ID,因为只有一个纹理，给0就可以了。
     */
    glBindTexture(GL_TEXTURE_2D, 0);
    
    // 释放context,imageData
    CGContextRelease(context);
    free(imageData);
    
    // 返回纹理ID
    return textureID;
}

• 设置滤镜动画

- (void)startFilerAnimation {
    // 判断 displayLink 是否为空
    // CADisplayLink 定时器
    if (self.displayLink) {
        [self.displayLink invalidate];
        self.displayLink = nil;
    }
    // 设置 displayLink 的方法
    self.startTimeInterval = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeAction)];
    
    // 将 displayLink 添加到 runloop 运行循环
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
                           forMode:NSRunLoopCommonModes];
}

- (void)timeAction {
    // DisplayLink 的当前时间戳
    if (self.startTimeInterval == 0) {
        self.startTimeInterval = self.displayLink.timestamp;
    }
    // 使用program
    glUseProgram(self.program);
    // 绑定buffer
    glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
    
    // 传入时间
    CGFloat currentTime = self.displayLink.timestamp - self.startTimeInterval;
    GLuint time = glGetUniformLocation(self.program, "Time");
    glUniform1f(time, currentTime);
    
    // 清除画布
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    
    // 重绘
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    // 渲染到屏幕上
    [self.context presentRenderbuffer:GL_RENDERBUFFER];
}

着色器设定

• 着色器初始化

// 初始化着色器程序
 - (void)setupShaderProgramWithName:(NSString *)name {
    // 获取着色器program
    GLuint program = [self programWithShaderName:name];
    
    // use Program
    glUseProgram(program);
    
    // 获取Position,Texture,TextureCoords 的索引位置
    GLuint positionSlot = glGetAttribLocation(program, "Position");
    GLuint textureSlot = glGetUniformLocation(program, "Texture");
    GLuint textureCoordsSlot = glGetAttribLocation(program, "TextureCoords");
    
    // 激活纹理,绑定纹理ID
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, self.textureID);
    
    // 纹理sample
    glUniform1i(textureSlot, 0);
    
    // 打开positionSlot 属性并且传递数据到positionSlot中(顶点坐标)
    glEnableVertexAttribArray(positionSlot);
    glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, positionCoord));
    
    // 打开textureCoordsSlot 属性并传递数据到textureCoordsSlot(纹理坐标)
    glEnableVertexAttribArray(textureCoordsSlot);
    glVertexAttribPointer(textureCoordsSlot, 2, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, textureCoord));
    
    // 保存program,界面销毁则释放
    self.program = program;
}

• 链接 Program

// link Program
- (GLuint)programWithShaderName:(NSString *)shaderName {
    // 编译顶点着色器/片元着色器
    GLuint vertexShader = [self compileShaderWithName:shaderName type:GL_VERTEX_SHADER];
    GLuint fragmentShader = [self compileShaderWithName:shaderName type:GL_FRAGMENT_SHADER];
    
    // 将顶点/片元附着到program
    GLuint program = glCreateProgram();
    glAttachShader(program, vertexShader);
    glAttachShader(program, fragmentShader);
    
    // linkProgram
    glLinkProgram(program);
    
    // 检查是否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);
    }
    // 返回program
    return program;
}

• 编译shader

- (GLuint)compileShaderWithName:(NSString *)name type:(GLenum)shaderType {
    // 获取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);
    }
    
    // 创建shader->根据shaderType
    GLuint shader = glCreateShader(shaderType);
    
    // 获取shader source
    const char *shaderStringUTF8 = [shaderString UTF8String];
    int shaderStringLength = (int)[shaderString length];
    glShaderSource(shader, 1, &shaderStringUTF8, &shaderStringLength);
    
    // 编译shader
    glCompileShader(shader);
    
    // 查看编译是否成功
    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);
    }
    // 返回shader
    return shader;
}

调用GLSL代码执行滤镜效果

    - (void)setupNormalShaderProgram {
    // 设置着色器程序
    [self setupShaderProgramWithName:@"Normal"];
}

效果展示

二分屏滤镜

一、实现原理

当实现二分屏滤镜时，图片纹理坐标的x值是没有任何变化的，主要是y值变化:

• 当 y 在[0, 0.5]范围时，屏幕的（0，0）坐标需要对应图片的（0，0.25），所以y = y+0.25
• 当 y 在[0.5, 1]范围时，屏幕的（0，0.5）坐标需要对应图片的（0，0.25），所以y = y-0.25

二、实现流程

• 新建TwoSplitScreen.vsh和TwoSplitScreen.fsh,着色器的代码与上面的“无分屏滤镜”一样,只需要修改TwoSplitScreen.fsh的main函数实现:

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));
}

• 在FilterBarDelegate实现调用“二分屏”的GLSL代码

- (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index {
    // 选择默认shader
    if (index == 0) {
        [self setupNormalShaderProgram];
    } else if (index == 1) {
        [self setupSplitScreen_2ShaderProgram];
    }
    // 渲染
    [self render];
}

// 二分屏
- (void)setupSplitScreen_2ShaderProgram {
    [self setupShaderProgramWithName:@"TwoSplitScreen"];
}

三、效果展示

三分屏滤镜

一、实现原理

当实现三分屏滤镜时，即为显示的图片三等分，图片纹理坐标的x值是没有任何变化的，主要是y值变化:

• 当 y 在[0, 1/3]范围时，屏幕的（0，0）坐标需要对应图片的（0，1/3），所以y = y+1/3
• 当 y 在[1/3, 2/3]范围时，屏幕的（0，1/3）坐标需要对应图片的（0，1/3），所以y 不变
• 当 y 在[2/3, 1]范围时，屏幕的（0，2/3）坐标需要对应图片的（0，1/3），所以y = y-1/3

二、实现流程

• 新建ThreeSplitScreen.vsh和ThreeSplitScreen.fsh,着色器的代码与上面的“无分屏滤镜”一样,只需要修改ThreeSplitScreen.fsh的main函数实现:

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main(){
    vec2 uv = TextureCoordsVarying.xy;
    if (uv.y < 1.0/3.0) {
        uv.y = uv.y + 1.0/3.0;
    } else if (uv.y > 2.0/3.0) {
        uv.y = uv.y - 1.0/3.0;
    }
    
    gl_FragColor = texture2D(Texture, uv);
}

• 在FilterBarDelegate实现调用“三分屏”的GLSL代码

- (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index {
    // 选择默认shader
    if (index == 0) {
        [self setupNormalShaderProgram];
    } else if (index == 1) {
        [self setupSplitScreen_2ShaderProgram];
    } else if (index == 2) {
        [self setupSplitScreen_3ShaderProgram];
    }
    // 渲染
    [self render];
}

// 三分屏
- (void)setupSplitScreen_3ShaderProgram {
    [self setupShaderProgramWithName:@"ThreeSplitScreen"];
}

三、效果展示

四分屏滤镜

一、实现原理

• 四分屏的显示是屏幕四等分，分别显示缩小的纹理图片纹理图片，与屏幕的映射既可以是一致的坐标，也可以映射到缩小的坐标
• 当实现四分屏时，纹理坐标x、y均需要变化，且屏幕坐标需要与纹理坐标一一映射，例如（x，y）取值（0.5，0.5）需要映射到纹理坐标（1，1）时，x、y均需要乘以2，即0.5 * 2 = 1，变化规则如下：
  当 x 在[0, 0.5]范围时，x = x*2
  当 x在[0.5, 1]范围时，x = (x-0.5)2
  当 y 在[0, 0.5]范围时，y = y2
  当 y 在[0.5, 1]范围时，y = (y-0.5)*2

二、实现流程

• 新建FourSplitScreen.vsh和FourSplitScreen.fsh,着色器的代码与上面的“无分屏滤镜”一样,只需要修改FourSplitScreen.fsh的main函数实现:

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main(){
    
    vec2 uv = TextureCoordsVarying.xy;
    
    if (uv.x <= 0.5) {
        uv.x = uv.x * 2.0;
    } else {
        uv.x = (uv.x - 0.5) * 2.0;
    }
    
    if (uv.y <= 0.5) {
       uv.y = uv.y * 2.0;
    } else {
       uv.y = (uv.y - 0.5) * 2.0;
    }
    
    gl_FragColor = texture2D(Texture, uv);
}

• 在FilterBarDelegate实现调用“四分屏”的GLSL代码

- (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index {
    // 选择默认shader
    if (index == 0) {
        [self setupNormalShaderProgram];
    } else if (index == 1) {
        [self setupSplitScreen_2ShaderProgram];
    } else if (index == 2) {
        [self setupSplitScreen_3ShaderProgram];
    } else if (index == 3) {
        [self setupSplitScreen_4ShaderProgram];
    }
    // 渲染
    [self render];
}

// 四分屏
- (void)setupSplitScreen_4ShaderProgram {
    [self setupShaderProgramWithName:@"FourSplitScreen"];
}

三、效果展示

六分屏滤镜与九分屏滤镜

与上述的“二分屏”“三分屏”“四分屏”的实现逻辑,只是片元着色器的实现逻辑不一样

• 当实现六分屏时，纹理坐标x、y均需要变化，其变化规则如下：
  当 x 在[0, 1/3]范围时，x = x+1/3
  当 x 在[1/3, 2/3]范围时，x 不变
  当 x 在[2/3, 1]范围时，x = x-1/3
  当 y 在[0, 0.5]范围时，y = y+0.25
  当 y 在[0.5, 1]范围时，y = y-0.24

• 当实现九分屏时，纹理坐标x、y均需要变化，其变化规则如下：
  当 x 在[0, 1/3]范围时，x = x*3
  当 x 在[1/3, 2/3]范围时，x = (x-1/3)*3
  当 x 在[2/3, 1]范围时，x = (x-2/3)3
  当 y 在[0, 1/3]范围时，y= y3
  当 y 在[1/3, 2/3]范围时，y = (y-1/3)*3
  当 y在[2/3, 1]范围时，y = (y-2/3)*3

片元着色器的y修改如下:

• 六分屏

void main() {
    
    vec2 uv = TextureCoordsVarying.xy;
    
    if (uv.x <= 1.0/3.0) {
        uv.x = uv.x + 1.0/3.0;
    } else if (uv.x >= 2.0/3.0){
        uv.x = uv.x - 1.0/3.0;
    }
    
    if (uv.y <= 0.5) {
         uv.y = uv.y + 0.25;
    } else {
         uv.y = uv.y - 0.25;
    }
    
    gl_FragColor = texture2D(Texture, uv);
}

• 九分屏

void main(){
    
    vec2 uv = TextureCoordsVarying.xy;
    
    if (uv.x <= 1.0/3.0) {
        uv.x = uv.x * 3.0;
    } else if (uv.x >= 2.0/3.0) {
        uv.x = (uv.x - 2.0/3.0) * 3.0;
    } else {
        uv.x = (uv.x - 1.0/3.0)*3.0;
    }
    
    if (uv.y <= 1.0/3.0) {
        uv.y = uv.y * 3.0;
    } else if (uv.y >= 2.0/3.0) {
        uv.y = (uv.y - 2.0/3.0) * 3.0;
    } else {
        uv.y = (uv.y - 1.0/3.0)*3.0;
    }
    
    gl_FragColor = texture2D(Texture, uv);
}

完整示例

GLSL之实现“二分屏”、“三分屏”、“四分屏”、“六分屏”、“九分屏”等各种分屏效果