OpenGL ES案例-實(shí)現(xiàn)分屏濾鏡

分屏濾鏡在現(xiàn)在的短視頻中十分常見(jiàn)，今天我們就使用OpenGL ES來(lái)實(shí)現(xiàn)分屏濾鏡的效果。

一、實(shí)現(xiàn)結(jié)果

QQ20200810-154456-HD.gif

二、分屏原理：

既然是濾鏡效果，那肯定就得用到著色器來(lái)實(shí)現(xiàn)了，分屏效果只需要在片源著色器中修改代碼即可，片源著色器代碼不需要修改。

1、普通模式下頂點(diǎn)著色器和片源著色器代碼：

  • 頂點(diǎn)著色器
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    TextureCoordsVarying = TextureCoords;
    gl_Position = Position;
    
}
  • 片源著色器：
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main (void) {

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

2、二分屏

二分屏實(shí)際就是截取圖片中間的一部分，并上下重復(fù)顯示：


二分屏.png

片源著色器代碼：

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

3、三分屏

三分屏和二分頻類似，只截取圖片中間1/3的區(qū)域：


三分屏.png

片源著色器代碼：

precision highp float;
uniform sampler2D Texture;
varying highp 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);
}

4、四分屏

四分屏和前面兩個(gè)不太一樣，因?yàn)槲覀儼咐械膱D片是正方形的，所以直接調(diào)整位置，不需要再截取了，實(shí)際開(kāi)發(fā)中可以根據(jù)需求靈活配置。


四分屏.png

片源著色器代碼：

precision highp float;
uniform sampler2D Texture;
varying highp 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);
}

5、六分屏

六分屏，同樣是截取圖片中的一部分


六分屏.png

片源著色器代碼：

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

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

6、九分屏

九分屏和四分屏類似，不需要截取


九分屏.png

片源著色器代碼：

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

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 - 1.0 / 3.0) * 3.0;
    } else {
        uv.x = (uv.x - 2.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 - 1.0 / 3.0) * 3.0;
    } else {
        uv.y = (uv.y - 2.0 / 3.0) * 3.0;
    }
    gl_FragColor = texture2D(Texture, uv);
}

三、代碼部分

1、項(xiàng)目結(jié)構(gòu)：

image.png

2、ViewController

#import "ViewController.h"
#import <GLKit/GLKit.h>
#import "FilterBar.h"

typedef struct {
    GLKVector3 positionCoord; // (X, Y, Z)
    GLKVector2 textureCoord; // (U, V)
} SenceVertex;
@interface ViewController ()<FilterBarDelegate>
@property (nonatomic, assign) SenceVertex *vertices;
@property (nonatomic, strong) EAGLContext *context;
// 用于刷新屏幕
@property (nonatomic, strong) CADisplayLink *displayLink;
// 開(kāi)始的時(shí)間戳
@property (nonatomic, assign) NSTimeInterval startTimeInterval;
// 著色器程序
@property (nonatomic, assign) GLuint program;
// 頂點(diǎn)緩存
@property (nonatomic, assign) GLuint vertexBuffer;
// 紋理 ID
@property (nonatomic, assign) GLuint textureID;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //設(shè)置背景顏色
    self.view.backgroundColor = [UIColor blackColor];
       //創(chuàng)建濾鏡工具欄
    [self setupFilterBar];
       //濾鏡處理初始化
    [self filterInit];
       //開(kāi)始一個(gè)濾鏡動(dòng)畫(huà)
    [self startFilerAnimation];
}
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    // 移除 displayLink
    if (self.displayLink) {
        [self.displayLink invalidate];
        self.displayLink = nil;
    }
}
- (void)dealloc {
    //1.上下文釋放
    if ([EAGLContext currentContext] == self.context) {
        [EAGLContext setCurrentContext:nil];
    }
    //頂點(diǎn)緩存區(qū)釋放
    if (_vertexBuffer) {
        glDeleteBuffers(1, &_vertexBuffer);
        _vertexBuffer = 0;
    }
    //頂點(diǎn)數(shù)組釋放
    if (_vertices) {
        free(_vertices);
        _vertices = nil;
    }
}
// 創(chuàng)建濾鏡欄
- (void)setupFilterBar{
    CGFloat filterBarWidth = [UIScreen mainScreen].bounds.size.width;
       CGFloat filterBarHeight = 60;
       CGFloat filterBarY = [UIScreen mainScreen].bounds.size.height - filterBarHeight - 50;
       FilterBar *filerBar = [[FilterBar alloc] initWithFrame:CGRectMake(0, filterBarY, filterBarWidth, filterBarHeight)];
       filerBar.delegate = self;
       [self.view addSubview:filerBar];
       
       NSArray *dataSource = @[@"無(wú)",@"分屏_2",@"分屏_3",@"分屏_4",@"分屏_6",@"分屏_9"];
       filerBar.itemList = dataSource;
}
- (void)filterInit{
    self.context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
    [EAGLContext setCurrentContext:self.context];
    
    self.vertices = malloc(sizeof(SenceVertex) * 4);
    
    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 *layer = [[CAEAGLLayer alloc]init];
    layer.frame = CGRectMake(0, 100, self.view.bounds.size.width, self.view.bounds.size.width);
    layer.contentsScale = [UIScreen mainScreen].scale;
    [self.view.layer addSublayer:layer];
    [self bindRenderLayer:layer];
    
    NSString *imagePath = [[NSBundle mainBundle]pathForResource:@"jessica" ofType:@"jpg"];
    
    UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
    
    GLuint textureID = [self createTextureWithImage:image];
    
    self.textureID = textureID;
    
    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;
    
}
- (void)startFilerAnimation{
    //1.判斷displayLink 是否為空
    //CADisplayLink 定時(shí)器
    if (self.displayLink) {
        [self.displayLink invalidate];
        self.displayLink = nil;
    }
    //2. 設(shè)置displayLink 的方法
    self.startTimeInterval = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeAction)];
    
    //3.將displayLink 添加到runloop 運(yùn)行循環(huán)
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
                           forMode:NSRunLoopCommonModes];
}

//2. 動(dòng)畫(huà)
- (void)timeAction {
    //DisplayLink 的當(dāng)前時(shí)間撮
    if (self.startTimeInterval == 0) {
        self.startTimeInterval = self.displayLink.timestamp;
    }
    //使用program
    glUseProgram(self.program);
    //綁定buffer
    glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
    
    // 傳入時(shí)間
    CGFloat currentTime = self.displayLink.timestamp - self.startTimeInterval;
    GLuint time = glGetUniformLocation(self.program, "Time");
    glUniform1f(time, currentTime);
    
    // 清除畫(huà)布
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    
    // 重繪
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    //渲染到屏幕上
    [self.context presentRenderbuffer:GL_RENDERBUFFER];
}

#pragma mark -- render
- (void)render{
    
    // 清除畫(huà)布
    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];
    
}


//綁定渲染緩存區(qū)和幀緩存區(qū)
- (void)bindRenderLayer:(CALayer <EAGLDrawable> *)layer {
    GLuint renderBuffer;
    GLuint frameBuffer;
    
    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);
    
}
#pragma mark -- 紋理
- (GLuint)createTextureWithImage:(UIImage *)image {
    
    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.獲取圖片字節(jié)數(shù) 寬*高*4（RGBA）
    void *imageData = malloc(width * height * 4);
    
    CGContextRef context = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
       
       //將圖片翻轉(zhuǎn)過(guò)來(lái)(圖片默認(rèn)是倒置的)
       CGContextTranslateCTM(context, 0, height);
       CGContextScaleCTM(context, 1.0f, -1.0f);
       CGColorSpaceRelease(colorSpace);
       CGContextClearRect(context, rect);
       
       //對(duì)圖片進(jìn)行重新繪制，得到一張新的解壓縮后的位圖
       CGContextDrawImage(context, rect, cgImageRef);
       
       //設(shè)置圖片紋理屬性
       //5. 獲取紋理ID
       GLuint textureID;
       glGenTextures(1, &textureID);
       glBindTexture(GL_TEXTURE_2D, textureID);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
    
    //7.設(shè)置紋理屬性
    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.綁定紋理
    /*
     參數(shù)1：紋理維度
     參數(shù)2：紋理ID,因?yàn)橹挥幸粋€(gè)紋理，給0就可以了。
     */
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.釋放context,imageData
    CGContextRelease(context);
    free(imageData);
    
    //10.返回紋理ID
    return textureID;
}
#pragma mark - Shader
// 默認(rèn)著色器程序
- (void)setupNormalShaderProgram {
    //設(shè)置著色器程序
    [self setupShaderProgramWithName:@"normal"];
}

// 初始化著色器程序
- (void)setupShaderProgramWithName:(NSString *)name {
    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.打開(kāi)positionSlot 屬性并且傳遞數(shù)據(jù)到positionSlot中(頂點(diǎn)坐標(biāo))
       glEnableVertexAttribArray(positionSlot);
       glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, positionCoord));
       
       //7.打開(kāi)textureCoordsSlot 屬性并傳遞數(shù)據(jù)到textureCoordsSlot(紋理坐標(biāo))
       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. 編譯頂點(diǎn)著色器/片元著色器
    GLuint vertexShader = [self compileShaderWithName:shaderName type:GL_VERTEX_SHADER];
    GLuint fragmentShader = [self compileShaderWithName:shaderName type:GL_FRAGMENT_SHADER];
    
    //2. 將頂點(diǎn)/片元附著到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. 創(chuàng)建shader->根據(jù)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;
}


//獲取渲染緩存區(qū)的寬
- (GLint)drawableWidth {
    GLint backingWidth;
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &backingWidth);
    return backingWidth;
}
//獲取渲染緩存區(qū)的高
- (GLint)drawableHeight {
    GLint backingHeight;
    glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &backingHeight);
    return backingHeight;
}

#pragma mark -- FilterBarDelegate
- (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index{
    if (index == 0) {
         [self setupNormalShaderProgram];
    }else{
        [self setupShaderWithIndex:index];
    }
    
    
     // 重新開(kāi)始濾鏡動(dòng)畫(huà)
      [self startFilerAnimation];
     
     //渲染
//     [self render];
}
- (void)setupShaderWithIndex:(NSUInteger )index{
    switch (index) {
        case 1:
            [self setupShaderProgramWithName:@"SplitScreen_2"];
            break;
        case 2:
            [self setupShaderProgramWithName:@"SplitScreen_3"];
            break;
        case 3:
            [self setupShaderProgramWithName:@"SplitScreen_4"];
            break;
        case 4:
            [self setupShaderProgramWithName:@"SplitScreen_6"];
            break;
        case 5:
            [self setupShaderProgramWithName:@"SplitScreen_9"];
            break;
            
        default:
            break;
    }
}

@end

覺(jué)得不錯(cuò)記得點(diǎn)贊哦！聽(tīng)說(shuō)看完點(diǎn)贊的人逢考必過(guò)，逢獎(jiǎng)必中。?( ′???` )比心

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容