OpenGL ES濾鏡:分屏濾鏡

9分屏效果如下所示:


9分屏.jpeg

濾鏡初始化

1. 初始化上下文并設(shè)置為當(dāng)前上下文
2. 開(kāi)辟頂點(diǎn)數(shù)組內(nèi)存空間
3. 初始化4個(gè)頂點(diǎn)的頂點(diǎn)坐標(biāo)以及紋理坐標(biāo)
4. 創(chuàng)建圖層(CAEAGLLayer)
5. 綁定渲染緩存區(qū)
6. 圖片解壓縮加載紋理
7. 設(shè)置視口
8. 設(shè)置頂點(diǎn)緩存區(qū),加載頂點(diǎn)數(shù)據(jù)
9. 設(shè)置默認(rèn)著色器
10. 將頂點(diǎn)緩存保存,退出時(shí)才釋放

- (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.初始化4個(gè)頂點(diǎn)的頂點(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ū),加載頂點(diǎn)數(shù)據(jù)
    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;
}

1. 初始化上下文并設(shè)置為當(dāng)前上下文

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

2. 開(kāi)辟頂點(diǎn)數(shù)組內(nèi)存空間

  • 初始化頂點(diǎn)、紋理數(shù)據(jù)結(jié)構(gòu)體

positionCoord:頂點(diǎn)數(shù)據(jù)
positionCoord:紋理數(shù)據(jù)

typedef struct {
    GLKVector3 positionCoord; // (X, Y, Z)
    GLKVector2 textureCoord; // (U, V)
} SenceVertex;
  • 開(kāi)辟頂點(diǎn)數(shù)組內(nèi)存空間
self.vertices = malloc(sizeof(SenceVertex) * 4);

3. 初始化4個(gè)頂點(diǎn)的頂點(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ū)

  1. 生成渲染緩存區(qū),幀緩存區(qū)對(duì)象
  2. 獲取幀渲染緩存區(qū)名稱,綁定渲染緩存區(qū)以及將渲染緩存區(qū)與layer建立連接。
    - (BOOL)renderbufferStorage:(NSUInteger)target fromDrawable:(nullable id<EAGLDrawable>)drawable;:作用:將可繪制對(duì)象的存儲(chǔ)綁定到OpenGL ES 渲染緩存區(qū)(renderbuffer)對(duì)象。
    參數(shù)target:OpenGL ES綁定點(diǎn)用于當(dāng)前綁定的renderbuffer。該參數(shù)的值必須是GL_RENDERBUFFER。
    參數(shù)drawable:管理renderbuffer的數(shù)據(jù)存儲(chǔ)的對(duì)象。在iOS中,此參數(shù)的值必須是一個(gè)CAEAGLLayer。
  3. 獲取幀緩存區(qū)名稱,綁定幀緩存區(qū)以及將渲染緩存區(qū)(RBO)綁定到到幀緩存區(qū)(FBO)上
//綁定渲染緩存區(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);
}

6. 圖片解壓縮加載紋理

  1. 將 UIImage 轉(zhuǎn)換為 CGImageRef
  2. 讀取圖片的大小,寬和高
  3. 獲取圖片字節(jié)數(shù) 寬4(RGBA)
  4. 創(chuàng)建上下文
  5. 獲取紋理ID
  6. 載入紋理2D數(shù)據(jù)
  7. 設(shè)置紋理參數(shù)(環(huán)繞方式、過(guò)濾方式)
  8. 綁定紋理
  9. 釋放上下文context,圖片字節(jié)數(shù)imageData
  10. 返回紋理ID
//從圖片中加載紋理
- (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è)置紋理參數(shù)(環(huán)繞方式、過(guò)濾方式)
    //環(huán)繞方式
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    //過(guò)濾方式
    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;
}

7. 設(shè)置視口

glViewport(0, 0, self.drawableWidth, self.drawableHeight);
7.1 獲取渲染緩存區(qū)的寬和高
//獲取渲染緩存區(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;
}

8. 設(shè)置頂點(diǎn)緩存區(qū),加載頂點(diǎn)數(shù)據(jù)

  • glGenBuffers()創(chuàng)建緩存對(duì)象并且返回緩存對(duì)象的標(biāo)示符。它需要2個(gè)參數(shù):第一個(gè)為需要?jiǎng)?chuàng)建的緩存數(shù)量,第二個(gè)為用于存儲(chǔ)單一ID或多個(gè)IDGLuint變量或數(shù)組的地址。
  • glBindBuffer()當(dāng)緩存對(duì)象創(chuàng)建之后,在使用緩存對(duì)象之前,我們需要將緩存對(duì)象連接到相應(yīng)的緩存上。glBindBuffer()有2個(gè)參數(shù):targetbuffer

target:告訴VBO該緩存對(duì)象將保存頂點(diǎn)數(shù)組數(shù)據(jù)還是索引數(shù)組數(shù)據(jù):GL_ARRAY_BUFFERGL_ELEMENT_ARRAY。任何頂點(diǎn)屬性,如頂點(diǎn)坐標(biāo)、紋理坐標(biāo)、法線與顏色分量數(shù)組都使用GL_ARRAY_BUFFER。用于glDraw[Range]Elements()的索引數(shù)據(jù)需要使用GL_ELEMENT_ARRAY綁定。

  • void glBufferData(GLenum target,GLsizeiptr size, const GLvoid* data, GLenum usage);當(dāng)緩存初始化之后,你可以使用glBufferData()將數(shù)據(jù)拷貝到緩存對(duì)象。

target: GL_ARRAY_BUFFERGL_ELEMENT_ARRAY
size: 待傳遞數(shù)據(jù)字節(jié)數(shù)量。
data:源數(shù)據(jù)數(shù)組指針,如dataNULL,則VBO僅僅預(yù)留給定數(shù)據(jù)大小的內(nèi)存空間。
usage:標(biāo)志位,VBO的另一個(gè)性能提示,它提供緩存對(duì)象將如何使用:staticdynamicstream、與read、copydraw。

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è)置著色器

9.1 初始化著色器程序
  1. 獲取著色器程序program
  2. 執(zhí)行著色器程序program
  3. 獲取Position,Texture,TextureCoords的索引位置
  4. 激活紋理,綁定紋理ID
  5. 紋理sample
  6. 打開(kāi)positionSlot屬性并且傳遞數(shù)據(jù)到positionSlot中(頂點(diǎn)坐標(biāo))
  7. 打開(kāi)textureCoordsSlot屬性并傳遞數(shù)據(jù)到textureCoordsSlot(紋理坐標(biāo))
  8. 保存program,界面銷(xiāo)毀則釋放
// 初始化著色器程序
- (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;
}
9.2 獲取著色器程序program

glCreateProgram 用于創(chuàng)建一個(gè)空的程序?qū)ο螅绦驅(qū)ο笫强梢愿郊又鲗?duì)象的對(duì)象。通過(guò)使用glAttachShader成功將著色器對(duì)象附加到其上,使用glCompileShader成功編譯該著色器對(duì)象,以及使用glLinkProgram成功鏈接該程序?qū)ο?,可以在程序?qū)ο笾袆?chuàng)建一個(gè)或多個(gè)可執(zhí)行文件。調(diào)用glUseProgram時(shí),這些可執(zhí)行文件將成為當(dāng)前狀態(tài)的一部分??梢酝ㄟ^(guò)調(diào)用glDeleteProgram刪除程序?qū)ο蟆.?dāng)與程序?qū)ο箨P(guān)聯(lián)的內(nèi)存不再是任何上下文的當(dāng)前渲染狀態(tài)的一部分時(shí),將刪除該內(nèi)存。

  1. 編譯頂點(diǎn)著色器/片元著色器
  2. 將頂點(diǎn)/片元著色器附著glAttachShader到著色器程序?qū)ο?code>program
  3. 鏈接程序?qū)ο髄inkProgram
  4. 檢查是否鏈接link成功
  5. 返回著色器程序?qū)ο?code>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)/片元著色器附著(glAttachShader)到著色器程序?qū)ο?program)
    GLuint program = glCreateProgram();
    glAttachShader(program, vertexShader);
    glAttachShader(program, fragmentShader);
    
    //3.鏈接程序?qū)ο?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.返回著色器程序?qū)ο?program)
    return program;
}
9.3 編譯著色器shader代碼
//編譯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;
}
9.4 創(chuàng)建頂點(diǎn)著色器/片元著色器

分屏濾鏡的顯示主要也是在著色器對(duì)象中,其中頂點(diǎn)著色器是不需要改變的,改變的主要是片元著色器。其實(shí)顯示這幾種不同的分屏濾鏡,就是對(duì)應(yīng)相應(yīng)的9.3 編譯不同著色器的執(zhí)行結(jié)果。

頂點(diǎn)著色器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);
}
二分屏片元著色器
precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    vec2 uv = TextureCoordsVarying.xy;

    if (uv.y >= 0.0 && uv.y <= 0.5) {
        uv.y = uv.y + 0.25;
    } else {
        uv.y = uv.y - 0.25;
    }
    
    gl_FragColor = texture2D(Texture, uv);
}
三分屏片元著色器
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);
}

四分屏片元著色器
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);
}
六分屏片元著色器
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);
}
九分屏片元著色器
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. 上下文釋放
  2. 頂點(diǎn)緩存區(qū)釋放
  3. 頂點(diǎn)數(shù)組釋放
  4. 著色器程序釋放
//釋放
- (void)dealloc {
    //1. 上下文釋放
    if ([EAGLContext currentContext] == self.context) {
        [EAGLContext setCurrentContext:nil];
    }
    //2. 頂點(diǎn)緩存區(qū)釋放
    if (_vertexBuffer) {
        glDeleteBuffers(1, &_vertexBuffer);
        _vertexBuffer = 0;
    }
    //3. 頂點(diǎn)數(shù)組釋放
    if (_vertices) {
        free(_vertices);
        _vertices = nil;
    }
    //4. 著色器程序釋放
    if (_program) {
        glDeleteProgram(_program);
        _program = nil;
    }
}

Demo:
SplitScreenFilter

最后編輯于
?著作權(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)容