EGL(Embedded Graphics Library)

• OpenGL ES 命令需要渲染上下?和繪制表面才能完成圖形圖像的繪制
• 渲染上下?: 存儲(chǔ)相關(guān)OpenGL ES狀態(tài)，是一個(gè)狀態(tài)機(jī)
• 繪制表面：?于繪制圖元的表面,需要指定渲染的緩存區(qū),例如顏?緩、深度和模板
• OpenGL ES API 并沒有提供如何創(chuàng)建渲染上下文或者上下文如何連接到原生窗口系 統(tǒng). EGL 是Khronos 渲染API(如OpenGL ES) 和原?窗?系統(tǒng)之間的接?. 唯?支持 OpenGL ES 卻不支持EGL的平臺(tái)是iOS. Apple 提供?己的EGL API的iOS實(shí)現(xiàn),稱為EAGL
• 因?yàn)槊總€(gè)窗?系統(tǒng)都有不同的定義,所以EGL提供基本的不透明類型—EGLDisplay, 這 個(gè)類型封裝了所有系統(tǒng)相關(guān)性,用于和原生窗?系統(tǒng)接?

主要功能

• 和本地窗口系統(tǒng)（native windowing system）通訊
• 查詢可用的配置
• 創(chuàng)建OpenGL ES 可用的“繪圖表面“（drawing surface）
• 同步不同類別的API之間的渲染，比如在OpenGL ES 和OpenVG之間同步，或者在OpenGL和本地窗口的繪圖命令之間
• 管理”渲染資源“，比如紋理映射（Rendering map）

GLSL語言

• xcode中不支持GLSL語言對(duì)頂點(diǎn)/片元著色器的編譯和連接，因此需要在項(xiàng)目中創(chuàng)建兩個(gè)空文件，分別命名為shader.vsh和shaderv.fsh
  • 使用vsh、fsh后綴的原因是方便區(qū)分著色器，其本質(zhì)就是一個(gè)字符串
  • 是否可以直接使用NSString？并不建議這樣做，因?yàn)榇a結(jié)構(gòu)不清晰，不易讀
  • 這兩個(gè)文件中是否可以加中文注釋？不建議加中文注釋，會(huì)報(bào)奇怪的錯(cuò)誤，由于在xcode中書寫GLSL，完全是純手寫，沒有任何提示，排查問題不好排查

下面是一些類型及API的總結(jié)

向量數(shù)據(jù)類型

常用的是vec2、vec3、vec4，默認(rèn)是浮點(diǎn)類型

矩陣數(shù)據(jù)類型

最常用的是mat3、mat4

變量存儲(chǔ)限定符

常用varying、attribute、uniform

• varying 修飾符：當(dāng)需要將頂點(diǎn)著色器的數(shù)據(jù)傳遞到片元著色器時(shí)，兩個(gè)著色器中一模一樣的紋理坐標(biāo)變量就需要它來修飾
• attribute：數(shù)據(jù)只能從客戶端中傳遞到頂點(diǎn)著色器，且只能在頂點(diǎn)著色器中使用
  • 修飾的數(shù)據(jù)：頂點(diǎn)、紋理、顏色、法線等
  • API通常以glVertex...開頭，例如glVertexAttribPointer
  • 其中的紋理坐標(biāo)，需要頂點(diǎn)著色器間接傳遞到片元著色器，需要在頂點(diǎn)與片元著色器中定義一個(gè)一模一樣的紋理坐標(biāo)，通過這個(gè)變量將紋理坐標(biāo)數(shù)據(jù)間接傳遞到片元著色器，varying lowp vec2 varyTextCoord;
  • 頂點(diǎn)著色器計(jì)算之后的頂點(diǎn)結(jié)果需要賦值給GLSL的內(nèi)建變量gl_Position

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

• uniform：從app代碼傳遞到vertex、fragment中所用的變量
  • 在vertex，fragment中一般將uniform當(dāng)成常量
  • uniform可以傳的數(shù)據(jù)：視圖矩陣、投影矩陣、投影視圖矩陣
  • API通常以glUniform...開頭
  • 片元著色器中最終顏色，即拿到紋理對(duì)應(yīng)坐標(biāo)下的紋素。紋素是紋理對(duì)應(yīng)像素點(diǎn)的顏色值，需要通過內(nèi)建函數(shù)texture2D(紋理，紋理坐標(biāo))計(jì)算，將最終返回的顏色值賦值給內(nèi)建變量gl_FragColor

//需要定義精度，否則可能會(huì)報(bào)錯(cuò)
precsion highp float;
//紋理坐標(biāo) 必須與頂點(diǎn)著色器中一模一樣,通過這個(gè)參數(shù)獲取傳遞過來的值
varying lowp vec2 varyTextCoord;
//紋理 
uniform sampler2D colorMap;   

void main(){
    //1、拿到紋理對(duì)應(yīng)坐標(biāo)下的紋素。紋素是紋理對(duì)應(yīng)像素點(diǎn)的顏色值
    lowp vec4 temp = texture2D(colorMap, varyTextCoord);

    //2、非常重要且必須的內(nèi)建變量：gl_FragColor
    gl_FragColor = temp；
} 

OpenGL ES 錯(cuò)誤處理

如果不正確使用OpenGL ES 命令，應(yīng)用程序就會(huì)產(chǎn)生一個(gè)錯(cuò)誤編碼，且會(huì)被記錄，可以用glGetError查詢，一旦查詢到錯(cuò)誤代碼，當(dāng)前的錯(cuò)誤代碼就會(huì)復(fù)位為GL_NO_ERROR

OpenGL ES 自定義著色器常用API

自定義著色器

自定義著色器一般有以下步驟：

• 創(chuàng)建頂點(diǎn)著色器/片元著色器 --glCreateShader
• 指定shader的source --glShaderSource
• 編譯shader --glCompileShader

以下是創(chuàng)建與編譯一個(gè)著色器的相關(guān)API

image

自定義程序

自定義程序一般有以下步驟：

• 創(chuàng)建一個(gè)程序?qū)ο?--glCreateProgram
• 著色器與程序連接/附著 --glAttachShader
• 鏈接程序 --glLinkProgram
• 使用程序 --glUseProgram

以下是創(chuàng)建與鏈接程序的相關(guān)API

image

//加載shader
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag
{
    //1.定義2個(gè)零時(shí)著色器對(duì)象
    GLuint verShader, fragShader;
    //創(chuàng)建program
    GLint program = glCreateProgram();
    
    //2.編譯頂點(diǎn)著色程序、片元著色器程序
    //參數(shù)1：編譯完存儲(chǔ)的底層地址
    //參數(shù)2：編譯的類型，GL_VERTEX_SHADER（頂點(diǎn)）、GL_FRAGMENT_SHADER(片元)
    //參數(shù)3：文件路徑
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.創(chuàng)建最終的程序,附著Shader
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.釋放不需要的shader(已經(jīng)附著到program)
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}

//編譯shader
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file{
    
    //1.讀取文件路徑字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar* source = (GLchar *)[content UTF8String];
    
    //2.創(chuàng)建一個(gè)shader（根據(jù)type類型）
    *shader = glCreateShader(type);
    
    //3.將著色器源碼附加到著色器對(duì)象上。
    //參數(shù)1：shader,要編譯的著色器對(duì)象 *shader
    //參數(shù)2：numOfStrings,傳遞的源碼字符串?dāng)?shù)量 1個(gè)
    //參數(shù)3：strings,著色器程序的源碼（真正的著色器程序源碼）
    //參數(shù)4：lenOfStrings,長(zhǎng)度，具有每個(gè)字符串長(zhǎng)度的數(shù)組，或NULL，這意味著字符串是NULL終止的
    glShaderSource(*shader, 1, &source,NULL);
    
    //4.把著色器源代碼編譯成目標(biāo)代碼
    glCompileShader(*shader);
    
    
}

著色器與程序的 編譯 & 鏈接

• 需要?jiǎng)?chuàng)建2個(gè)基本對(duì)象才能使用著色器進(jìn)行傳染：著色器對(duì)象和程序?qū)ο?/li>
• 獲取鏈接后著色器對(duì)象一般的編譯&鏈接分為6步：
  • 創(chuàng)建一個(gè)頂點(diǎn)著色器對(duì)象和一個(gè)片元著色器對(duì)象
  • 將源代碼鏈接到每個(gè)著色器對(duì)象
  • 編譯著色器對(duì)象
  • 創(chuàng)建一個(gè)程序?qū)ο?/li>
  • 將編譯后的著色器對(duì)象連接到程序?qū)ο?/li>
  • 鏈接程序?qū)ο?/li>

為什么要?FrameBuffer 和 RenderBuffer?它們是什么關(guān)系？

A renderbuffer object is a 2D image buffer allocated by the application. The renderbuffer can be used to allocate and store color, depth, or stencil values and can be used as a color, depth, or stencil attachment in a framebuffer object. A renderbuffer is similar to an off-screen window system provided drawable surface, such as a pbuffer. A renderbuffer, however, cannot be directly used as a GL texture.
?個(gè)renderbuffer 對(duì)象是通過應(yīng)?分配的?個(gè)2D圖像緩存區(qū)。renderbuffer 能夠被?來分配和存儲(chǔ)顏?、深度或者模板值。也能夠在?個(gè)framebuffer被?作顏?、深度、模板的附件。?個(gè)renderbuffer是?個(gè)類似于屏幕窗?系統(tǒng)提供可繪制的表?。?如pBuffer。?個(gè)renderbuffer,然后它并不能直接的使?像?個(gè)GL 紋理。

A framebuffer object (often referred to as an FBO) is a collection of color, depth, and stencil buffer attachment points; state that describes properties such as the size and format of the color, depth, and stencil buffers attached to the FBO; and the names of the texture and renderbuffer objects attached to the FBO. Various 2D images can be attached to the color attachment point in the framebuffer object. These include a renderbuffer object that stores color values, a mip-level of a 2D texture or a cube map face, or even a mip-level of a 2D slice in a 3D texture. Similarly, various 2D images contain- ing depth values can be attached to the depth attachment point of an FBO. These can include a renderbuffer, a mip-level of a 2D texture or a cubemap face that stores depth values. The only 2D image that can be attached to the stencil attachment point of an FBO is a renderbuffer object that stores stencil values.
?個(gè) frameBuffer 對(duì)象(通常被稱為?個(gè)FBO)。是?個(gè)收集顏?、深度和模板緩存區(qū)的附著點(diǎn)。描述屬性的狀態(tài)，例如顏?、深度和模板緩存區(qū)的??和格式，都關(guān)聯(lián)到FBO(Frame Buffer Object)。并且紋理的名字和renderBuffer 對(duì)象也都是關(guān)聯(lián)于FBO。各種各樣的2D圖形能夠被附著framebuffer對(duì)象的顏?附著點(diǎn)。它們包含了renderbuffer對(duì)象存儲(chǔ)的顏?值、?個(gè)2D紋理或??體貼圖?；蛘?個(gè)mip-level的?維切?在3D紋理。同樣，各種各樣的2D圖形包含了當(dāng)時(shí)的深度值可以附加到?個(gè)FBO的深度附著點(diǎn)鐘去。唯?的?維圖像，能夠附著在FBO的模板附著點(diǎn)，是?個(gè)renderbuffer對(duì)象存儲(chǔ)模板值。

demo

/*
 不采樣GLKBaseEffect，使用編譯鏈接自定義的著色器（shader）。用簡(jiǎn)單的glsl語言來實(shí)現(xiàn)頂點(diǎn)、片元著色器，并圖形進(jìn)行簡(jiǎn)單的變換。
 思路：
   1.創(chuàng)建圖層
   2.創(chuàng)建上下文
   3.清空緩存區(qū)
   4.設(shè)置RenderBuffer
   5.設(shè)置FrameBuffer
   6.開始繪制
 
 */
#import <OpenGLES/ES2/gl.h>
#import "CCView.h"
@interface CCView()

//在iOS和tvOS上繪制OpenGL ES內(nèi)容的圖層，繼承與CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;

@property(nonatomic,strong)EAGLContext *myContext;

@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;

@property(nonatomic,assign)GLuint myPrograme;

@end

@implementation CCView

-(void)layoutSubviews
{
    //1.設(shè)置圖層
    [self setupLayer];
    
    //2.設(shè)置圖形上下文
    [self setupContext];
    
    //3.清空緩存區(qū)
    [self deleteRenderAndFrameBuffer];

    //4.設(shè)置RenderBuffer
    [self setupRenderBuffer];
    
    //5.設(shè)置FrameBuffer
    [self setupFrameBuffer];
    
    //6.開始繪制
    [self renderLayer];
}

//6.開始繪制
-(void)renderLayer
{
    //設(shè)置清屏顏色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
    //1.設(shè)置視口大小
    CGFloat scale = [[UIScreen mainScreen]scale];
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
    
    //2.讀取頂點(diǎn)著色程序、片元著色程序
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
    
    NSLog(@"vertFile:%@",vertFile);
    NSLog(@"fragFile:%@",fragFile);
    
    //3.加載shader
    self.myPrograme = [self loadShaders:vertFile Withfrag:fragFile];
    
    //4.鏈接
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    //獲取鏈接狀態(tài)
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
    
    NSLog(@"Program Link Success!");
    //5.使用program
    glUseProgram(self.myPrograme);
    
    //6.設(shè)置頂點(diǎn)、紋理坐標(biāo)
    //前3個(gè)是頂點(diǎn)坐標(biāo)，后2個(gè)是紋理坐標(biāo)
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    
    
    //7.-----處理頂點(diǎn)數(shù)據(jù)--------
    //(1)頂點(diǎn)緩存區(qū)
    GLuint attrBuffer;
    //(2)申請(qǐng)一個(gè)緩存區(qū)標(biāo)識(shí)符
    glGenBuffers(1, &attrBuffer);
    //(3)將attrBuffer綁定到GL_ARRAY_BUFFER標(biāo)識(shí)符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //(4)把頂點(diǎn)數(shù)據(jù)從CPU內(nèi)存復(fù)制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    //8.將頂點(diǎn)數(shù)據(jù)通過myPrograme中的傳遞到頂點(diǎn)著色程序的position
    //1.glGetAttribLocation,用來獲取vertex attribute的入口的.
    //2.告訴OpenGL ES,通過glEnableVertexAttribArray，
    //3.最后數(shù)據(jù)是通過glVertexAttribPointer傳遞過去的。
    
    //(1)注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
    glEnableVertexAttribArray(position);
    
    //(3).設(shè)置讀取方式
    //參數(shù)1：index,頂點(diǎn)數(shù)據(jù)的索引
    //參數(shù)2：size,每個(gè)頂點(diǎn)屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個(gè)組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
    //參數(shù)4：normalized,固定點(diǎn)數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
    //參數(shù)5：stride,連續(xù)頂點(diǎn)屬性之間的偏移量，默認(rèn)為0；
    //參數(shù)6：指定一個(gè)指針，指向數(shù)組中的第一個(gè)頂點(diǎn)屬性的第一個(gè)組件。默認(rèn)為0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    //9.----處理紋理數(shù)據(jù)-------
    //(1).glGetAttribLocation,用來獲取vertex attribute的入口的.
    //注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
    glEnableVertexAttribArray(textCoor);
    
    //(3).設(shè)置讀取方式
    //參數(shù)1：index,頂點(diǎn)數(shù)據(jù)的索引
    //參數(shù)2：size,每個(gè)頂點(diǎn)屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
    //參數(shù)3：type,數(shù)據(jù)中的每個(gè)組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
    //參數(shù)4：normalized,固定點(diǎn)數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
    //參數(shù)5：stride,連續(xù)頂點(diǎn)屬性之間的偏移量，默認(rèn)為0；
    //參數(shù)6：指定一個(gè)指針，指向數(shù)組中的第一個(gè)頂點(diǎn)屬性的第一個(gè)組件。默認(rèn)為0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //10.加載紋理
    [self setupTexture:@"kunkun"];
    
    //11. 設(shè)置紋理采樣器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.繪圖
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.從渲染緩存區(qū)顯示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
    
    
}



//從圖片中加載紋理
- (GLuint)setupTexture:(NSString *)fileName {
    
    //1、將 UIImage 轉(zhuǎn)換為 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判斷圖片是否獲取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    //2、讀取圖片的大小，寬和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.獲取圖片字節(jié)數(shù) 寬*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //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的沒一行的內(nèi)存所占的比特?cái)?shù)
     參數(shù)6：colorSpace,bitmap上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    //5、在CGContextRef上--> 將圖片繪制出來
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐標(biāo)系與UIKit 不一樣。UIKit框架的原點(diǎn)在屏幕的左上角，Core Graphics框架的原點(diǎn)在屏幕的左下角。
     CGContextDrawImage 
     參數(shù)1：繪圖上下文
     參數(shù)2：rect坐標(biāo)
     參數(shù)3：繪制的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默認(rèn)方式繪制
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    //7、畫圖完畢就釋放上下文
    CGContextRelease(spriteContext);
    //只有一個(gè)紋理的時(shí)候，紋理ID為0，可省略
//    glGenTextures(1, 0);
    //8、綁定紋理到默認(rèn)的紋理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.設(shè)置紋理屬性
    /*
     參數(shù)1：紋理維度
     參數(shù)2：線性過濾、為s,t坐標(biāo)設(shè)置模式
     參數(shù)3：wrapMode,環(huán)繞模式
     */
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    
    float fw = width, fh = height;
    
    //10.載入紋理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, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.釋放spriteData
    free(spriteData);   
    return 0;
}

//5.設(shè)置FrameBuffer
-(void)setupFrameBuffer
{
    //1.定義一個(gè)緩存區(qū)ID
    GLuint buffer;
    
    //2.申請(qǐng)一個(gè)緩存區(qū)標(biāo)志
    //glGenRenderbuffers(1, &buffer);
    //glGenFramebuffers(1, &buffer);
    glGenBuffers(1, &buffer);
    
    //3.
    self.myColorFrameBuffer = buffer;
    
    //4.
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    /*生成幀緩存區(qū)之后，則需要將renderbuffer跟framebuffer進(jìn)行綁定，
     調(diào)用glFramebufferRenderbuffer函數(shù)進(jìn)行綁定到對(duì)應(yīng)的附著點(diǎn)上，后面的繪制才能起作用
     */
    
    //5.將渲染緩存區(qū)myColorRenderBuffer 通過glFramebufferRenderbuffer函數(shù)綁定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
    
}

//4.設(shè)置RenderBuffer
-(void)setupRenderBuffer
{
    //1.定義一個(gè)緩存區(qū)ID
    GLuint buffer;
    
    //2.申請(qǐng)一個(gè)緩存區(qū)標(biāo)志
    glGenRenderbuffers(1, &buffer);
    
    //3.
    self.myColorRenderBuffer = buffer;
    
    //4.將標(biāo)識(shí)符綁定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    //5.將可繪制對(duì)象drawable object's  CAEAGLLayer的存儲(chǔ)綁定到OpenGL ES renderBuffer對(duì)象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
    
    
}

//3.清空緩存區(qū)
-(void)deleteRenderAndFrameBuffer
{
    /*
     buffer分為frame buffer 和 render buffer2個(gè)大類。
     其中frame buffer 相當(dāng)于render buffer的管理者。
     frame buffer object即稱FBO。
     render buffer則又可分為3類。colorBuffer、depthBuffer、stencilBuffer。
     */
    
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
    
}


//2.設(shè)置上下文
-(void)setupContext
{
    //1.指定OpenGL ES 渲染API版本，我們使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    //2.創(chuàng)建圖形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    //3.判斷是否創(chuàng)建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    //4.設(shè)置圖形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    //5.將局部context，變成全局的
    self.myContext = context;
    
}

//1.設(shè)置圖層
-(void)setupLayer
{
    //1.創(chuàng)建特殊圖層
    /*
     重寫layerClass，將CCView返回的圖層從CALayer替換成CAEAGLLayer
     */
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
    //2.設(shè)置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];


    //3.設(shè)置描述屬性，這里設(shè)置不維持渲染內(nèi)容以及顏色格式為RGBA8
    /*
     kEAGLDrawablePropertyRetainedBacking  表示繪圖表面顯示后，是否保留其內(nèi)容。
     kEAGLDrawablePropertyColorFormat
         可繪制表面的內(nèi)部顏色緩存區(qū)格式，這個(gè)key對(duì)應(yīng)的值是一個(gè)NSString指定特定顏色緩存區(qū)對(duì)象。默認(rèn)是kEAGLColorFormatRGBA8；
     
         kEAGLColorFormatRGBA8：32位RGBA的顏色，4*8=32位
         kEAGLColorFormatRGB565：16位RGB的顏色，
         kEAGLColorFormatSRGBA8：sRGB代表了標(biāo)準(zhǔn)的紅、綠、藍(lán)，即CRT顯示器、LCD顯示器、投影機(jī)、打印機(jī)以及其他設(shè)備中色彩再現(xiàn)所使用的三個(gè)基本色素。sRGB的色彩空間基于獨(dú)立的色彩坐標(biāo)，可以使色彩在不同的設(shè)備使用傳輸中對(duì)應(yīng)于同一個(gè)色彩坐標(biāo)體系，而不受這些設(shè)備各自具有的不同色彩坐標(biāo)的影響。


     */
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
  
}

+(Class)layerClass
{
    return [CAEAGLLayer class];
}


#pragma mark --shader
//加載shader
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag
{
    //1.定義2個(gè)零時(shí)著色器對(duì)象
    GLuint verShader, fragShader;
    //創(chuàng)建program
    GLint program = glCreateProgram();
    
    //2.編譯頂點(diǎn)著色程序、片元著色器程序
    //參數(shù)1：編譯完存儲(chǔ)的底層地址
    //參數(shù)2：編譯的類型，GL_VERTEX_SHADER（頂點(diǎn)）、GL_FRAGMENT_SHADER(片元)
    //參數(shù)3：文件路徑
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.創(chuàng)建最終的程序,附著Shader
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.釋放不需要的shader(已經(jīng)附著到program)
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}

//編譯shader
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file{
    
    //1.讀取文件路徑字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar* source = (GLchar *)[content UTF8String];
    
    //2.創(chuàng)建一個(gè)shader（根據(jù)type類型）
    *shader = glCreateShader(type);
    
    //3.將著色器源碼附加到著色器對(duì)象上。
    //參數(shù)1：shader,要編譯的著色器對(duì)象 *shader
    //參數(shù)2：numOfStrings,傳遞的源碼字符串?dāng)?shù)量 1個(gè)
    //參數(shù)3：strings,著色器程序的源碼（真正的著色器程序源碼）
    //參數(shù)4：lenOfStrings,長(zhǎng)度，具有每個(gè)字符串長(zhǎng)度的數(shù)組，或NULL，這意味著字符串是NULL終止的
    glShaderSource(*shader, 1, &source,NULL);
    
    //4.把著色器源代碼編譯成目標(biāo)代碼
    glCompileShader(*shader); 
}
@end

.vsh

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

.fsh

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    //lowp vec4 temp = texture2D(colorMap, varyTextCoord);
    //gl_FragColor = temp;
    
    gl_FragColor = texture2D(colorMap, varyTextCoord);

}