在viewController中準(zhǔn)備我們需要的步驟
1.設(shè)置上下文
2.創(chuàng)建圖層
3.設(shè)置頂點(diǎn)數(shù)據(jù)
4.加載紋理
5.打開(kāi)變換管道

- (void)filterInit {

    //1\. 初始化上下文并設(shè)置為當(dāng)前上下文
    self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    [EAGLContext setCurrentContext:self.context];

    //2.開(kāi)辟頂點(diǎn)數(shù)組內(nèi)存空間
    self.vertices = malloc(sizeof(SenceVertex) * 4);

    //3.初始化頂點(diǎn)(0,1,2,3)的頂點(diǎn)坐標(biāo)以及紋理坐標(biāo)
    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}};

    //4.創(chuàng)建圖層(CAEAGLLayer)
    CAEAGLLayer *layer = [[CAEAGLLayer alloc] init];
    //設(shè)置圖層frame
    layer.frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width);
    //設(shè)置圖層的scale
    layer.contentsScale = [[UIScreen mainScreen] scale];
    //給View添加layer
    [self.view.layer addSublayer:layer];

    //5.綁定渲染緩存區(qū)
    [self bindRenderLayer:layer];

    //6.獲取處理的圖片路徑
    NSString *imagePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"kunkun.jpg"];
    //讀取圖片
    UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
    //將JPG圖片轉(zhuǎn)換成紋理圖片
    GLuint textureID = [self createTextureWithImage:image];
    //設(shè)置紋理ID
    self.textureID = textureID;  // 將紋理 ID 保存，方便后面切換濾鏡的時(shí)候重用

    //7.設(shè)置視口
    glViewport(0, 0, self.drawableWidth, self.drawableHeight);

    //8.設(shè)置頂點(diǎn)緩存區(qū)
    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);

    //9.設(shè)置默認(rèn)著色器
    [self setupNormalShaderProgram]; // 一開(kāi)始選用默認(rèn)的著色器

    //10.將頂點(diǎn)緩存保存，退出時(shí)才釋放
    self.vertexBuffer = vertexBuffer;
}

綁定渲染緩存區(qū)和幀緩存區(qū)

- (void)bindRenderLayer:(CALayer <EAGLDrawable> *)layer {

    //1.渲染緩存區(qū),幀緩存區(qū)對(duì)象
    GLuint renderBuffer;
    GLuint frameBuffer;

    //2.獲取幀渲染緩存區(qū)名稱,綁定渲染緩存區(qū)以及將渲染緩存區(qū)與layer建立連接
    glGenRenderbuffers(1, &renderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer);
    [self.context renderbufferStorage:GL_RENDERBUFFER fromDrawable:layer];

    //3.獲取幀緩存區(qū)名稱,綁定幀緩存區(qū)以及將渲染緩存區(qū)附著到幀緩存區(qū)上
    glGenFramebuffers(1, &frameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER,
                              GL_COLOR_ATTACHMENT0,
                              GL_RENDERBUFFER,
                              renderBuffer);
}

紋理加載

- (GLuint)createTextureWithImage:(UIImage *)image {

    //1、將 UIImage 轉(zhuǎn)換為 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.獲取圖片字節(jié)數(shù) 寬*高*4（RGBA）
    void *imageData = malloc(width * height * 4);
    //4.創(chuàng)建上下文
    /*
     參數(shù)1：data,指向要渲染的繪制圖像的內(nèi)存地址
     參數(shù)2：width,bitmap的寬度，單位為像素
     參數(shù)3：height,bitmap的高度，單位為像素
     參數(shù)4：bitPerComponent,內(nèi)存中像素的每個(gè)組件的位數(shù)，比如32位RGBA，就設(shè)置為8
     參數(shù)5：bytesPerRow,bitmap的沒(méi)一行的內(nèi)存所占的比特?cái)?shù)
     參數(shù)6：colorSpace,bitmap上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    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);

    //6.載入紋理2D數(shù)據(jù)
    /*
     參數(shù)1：紋理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     參數(shù)2：加載的層次，一般設(shè)置為0
     參數(shù)3：紋理的顏色值GL_RGBA
     參數(shù)4：寬
     參數(shù)5：高
     參數(shù)6：border，邊界寬度
     參數(shù)7：format
     參數(shù)8：type
     參數(shù)9：紋理數(shù)據(jù)
     */
    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;
}

初始化著色器

- (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.打開(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,界面銷(xiāo)毀則釋放
    self.program = program;
}

這里我們需要加載自定義著色器，并且進(jìn)行編譯鏈接獲取program這個(gè)id。

void glGetShaderiv（GLuint shader,GLenum pname,GLint *params）;
參數(shù)
shader
指定要查詢的著色器對(duì)象，直接放入需要檢查的著色器即可。
pname
指定著色器對(duì)象的參數(shù)。 可接受的符號(hào)名稱為

#pragma mark -shader compile and link
//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;
}

濾鏡點(diǎn)擊的代理方法，每次點(diǎn)擊之后，界面重新渲染

#pragma mark - FilterBarDelegate
- (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index {
    //1\. 選擇默認(rèn)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];
    }else if(index == 4)
    {
        [self setupSplitScreen_6ShaderProgram];
    }else if(index == 5)
    {
        [self setupSplitScreen_9ShaderProgram];
    }
    // 重新開(kāi)始濾鏡動(dòng)畫(huà)'.
    [self startFilerAnimation];
}

// 開(kāi)始一個(gè)濾鏡動(dòng)畫(huà)
- (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];
}

最后，當(dāng)頁(yè)面消失的時(shí)候需要釋放并移除

//釋放
- (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;
    }
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];

    // 移除 displayLink
    if (self.displayLink) {
        [self.displayLink invalidate];
        self.displayLink = nil;
    }
}

分屏計(jì)算

首先我們需要了解一下在vsh和fsh文件中是如何編寫(xiě)的，實(shí)現(xiàn)了分屏效果。其實(shí)我們的頂點(diǎn)著色器是不需要修改，主要修改的是紋理著色器。

頂點(diǎn)著色器

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

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

紋理著色器

這里每一種分屏類(lèi)型對(duì)應(yīng)一個(gè)文件，這只是匯總它實(shí)現(xiàn)效果的算法。

//一張圖片
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//一張圖片
void main (void) {
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

二分屏

    所謂二分屏，就是當(dāng)顯示一張圖片的時(shí)候，截取紋理Y坐標(biāo)下0.25-0.75的位置，為什么是0.25至0.75了，因?yàn)樵谖覀兣臄z的過(guò)程，大多圖片的核心內(nèi)容顯示在這個(gè)區(qū)域。我們知道紋理的坐標(biāo)范圍是（0，1）

//兩張圖片
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));
}

三分屏

三分屏和二分屏的原理一樣，判斷的位置變成了1/3處:

//三張
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);
}

四分屏

四分屏特點(diǎn):原樣顯示圖片的大小，不放大縮小，從代碼中我們可以看出，當(dāng)紋理坐標(biāo)（x，y）在0-0.5的時(shí)候，我們讓其乘以2，為什么？原來(lái)紋理坐標(biāo)在0到0.5的時(shí)候，獲取紋理的時(shí)候，只能對(duì)應(yīng)紋理0到0.5，使其乘以2，原本0到0.5的范圍就變成了0到1，當(dāng)紋理坐標(biāo)（x，y）大于0.5的時(shí)候，先減去0.5，再乘以2，也使其0.5到1的范圍先變成0到0.5，最后變成0到1，這樣，當(dāng)獲取紋理的時(shí)候，無(wú)論從0到0.5的范圍，還是0.5到1的范圍，都是變成獲取（0，1）整張圖片。究其根本原因就是改變紋理坐標(biāo)獲取的紋理位置。

//四張
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);
}

六分屏

你看懂了2/3/4分屏原理，6和9分屏原理就很簡(jiǎn)單了，6分屏實(shí)現(xiàn)原理就是同時(shí)改變紋理坐標(biāo)的值，x坐標(biāo)取三分之一處，Y坐標(biāo)取0.5之處，主要是看你的圖拍你的樣子，原理示意圖參照2/3/4分屏

//六張
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);
}

九分屏

九分屏原理和四分屏原理一樣，只是x，y分屏的地方選擇的是1/3，2/3處，相關(guān)流程示意圖，請(qǐng)參照4分屏示意圖

//九張
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);
}