OpenGL/OpenGL ES入門： 使用OpenGL ES 渲染圖片

系列推薦文章：
OpenGL/OpenGL ES入門：圖形API以及專業名詞解析
OpenGL/OpenGL ES入門：渲染流程以及固定存儲着色器
OpenGL/OpenGL ES入門：圖像渲染實現以及渲染問題
OpenGL/OpenGL ES入門：基礎變換 - 初識向量/矩陣
OpenGL/OpenGL ES入門：紋理初探 - 經常使用API解析
OpenGL/OpenGL ES入門： 紋理應用 - 紋理座標及案例解析(金字塔)
OpenGL/OpenGL ES入門： 頂點着色器與片元着色器（OpenGL過渡OpenGL ES）
OpenGL/OpenGL ES入門： GLKit以及API簡介
OpenGL/OpenGL ES入門： GLKit使用以及案例
OpenGL/OpenGL ES入門： 使用OpenGL ES 渲染圖片
OpenGL/OpenGL ES入門：iOS紋理翻轉策略解析
OpenGL ES入門： 渲染金字塔 - 顏色、紋理、紋理與顏色混合填充以及GLKit實現

OpenGL ES 渲染圖片

在前面幾篇文章中，咱們使用了OpenGL、GLKit等方式去渲染一張圖片，這篇文章咱們使用OpenGL ES來渲染一張圖片的顯示。

幀緩衝區對象(FrameBuffer)

OpenGL將繪製幀緩衝區到一個對象所須要的狀態進行了封裝，成爲幀緩衝區對象(FBO)。 雖然幀緩衝區的名字包含一個「緩衝區」字眼，可是其實它不是緩衝區。實際上，並不存在與一個幀緩衝區對象相關聯的真正內存存儲空間。幀緩衝區對象是一種容器，它能夠保存其餘確實有內存存儲而且能夠進行渲染的對象，例如渲染緩衝區(RBO)和紋理緩衝區(TBO)。採用這種方式，幀緩衝區對象可以在保存OpenGL管線的輸出時將須要的狀態和表面綁定到一塊兒。

使用FBO時，須要先添加圖像，才能渲染到一個FBO。一旦一個FBO被建立、設置和綁定。大多數OpenGL操做就像是在渲染到一個窗口同樣執行，可是輸出結果將存儲在綁定到FBO的圖像中。

同一時間只有一個FBO能夠綁定用來進行繪製，而且同一時間只有一個FBO能夠綁定來進行讀取。

建立新的FBO

GLuint buffer;
glGenFramebuffers(1, &buffer);
// 而後在綁定一個新的FBO來修改和使用
glBindFramebuffer(GL_FRAMEBUFFER, buffer);
// 將渲染緩存區RenderBuffer經過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, buffer);
複製代碼

生成幀緩衝區以後，則須要將renderbuffer跟framebuffer進行綁定，調用glFramebufferRenderbuffer函數進行綁定到對應的附着點上，後面的繪製才能起做用

綁定到GL_FRAMEBUFFER目標後，接下來全部的讀、寫幀緩衝的操做都會影響到當前綁定的幀緩衝。 也能夠把幀緩衝分開綁定到讀或寫目標上，分別使用GL_READ_FRAMEBUFFER或GL_DRAW_FRAMEBUFFER來作這件事。若是綁定到了GL_READ_FRAMEBUFFER，就能執行全部讀取操做，像glReadPixels這樣的函數使用了；綁定到GL_DRAW_FRAMEBUFFER上，就容許進行渲染、清空和其餘的寫入操做。大多數時候你沒必要分開用，一般把兩個都綁定到GL_FRAMEBUFFER上就行。

銷燬FBO 在使用完FBO，或者在退出前進行清除時，要刪除。

glDeleteFramebuffers(1, &buffer);
複製代碼

渲染緩衝區對象(RenderBuffer，RBO)

一個renderbuffer對象是經過應用分配的一個2D圖像緩衝區。renderbuffer可以被用來分配和存儲顏色、深度或模版值。也可以在一個framebuffer被用做顏色、深度、模版的附件。一個renderbuffer是一個相似於屏幕窗口系統提供可繪製的表面，能夠爲給定的FBO挑選須要的任意RBO組合。

和FBO相似，RBO須要先進行綁定才能修改。綁定渲染緩衝區惟一合法目標時GL_RENDERBUFFER.

gluint buffer;
glGenRenderbuffers(1, &buffer);
glBindRenderbuffer(GL_RENDERBUFFER, buffer);
複製代碼

OpenGL ES 渲染圖片代碼實例

案例目標

• 用EAGL建立屏幕上的渲染表面
• 加載頂點/片元着色器
• 建立一個程序對象，並連接頂點/片元着色器，並連接程序對象
• 設置視口
• 清除顏色緩衝區
• 渲染簡單圖元
• 使顏色緩衝區的內容在EAGL窗口表現呈現

圖片渲染實現流程圖

具體代碼實現

建立着色器文件

在Xcode中，新建一個空白文件，以下

而後命名

文件的名字本身能夠隨便定義，且它的後綴名也能夠本身隨便定義爲字符串，建議最好可以關聯，好比這裏的頂點着色器命名爲 vsh。

頂點着色器代碼

// 頂點座標
attribute vec4 position;
// 紋理座標
attribute vec2 textCoordinate;
// 紋理座標
varying lowp vec2 varyTextCoord;
void main() {
    varyTextCoord = textCoordinate;
    gl_Position = position;
}
複製代碼

這裏文件裏最好不要寫註釋，可能會出現莫名的錯誤。且這裏沒有代碼提示，因此須要保證這裏代碼的準確性。

在main函數中，經過varying修飾的varyTextCoord將紋理座標傳遞到片元着色器。 最後給內建變量gl_Position賦值，這一步切記不能忘，否則全部操做都徒勞無功。

片元着色器代碼

// 紋理座標
varying lowp vec2 varyTextCoord;
// 紋理採樣器(獲取對應的紋理ID)
uniform sampler2D colorMap;
void main() {
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
複製代碼

texture2D(紋理採樣器，紋理座標)獲取對應座標的紋理的像素，gl_FragColor也是內建變量，這一步也不能忘記寫。

設置圖層

// 建立特殊圖層
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    // 設置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    // 設置屬性
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
複製代碼

CAEAGLLayer是專門提供給OpenGL專門使用的一個特殊圖層，此外必要要重寫layerClass，將圖層CALayer替換成CAEAGLLayer。

+ (Class)layerClass {
    return [CAEAGLLayer class];
}
複製代碼

若是不寫，則會出現下面的錯誤提示：

而後進行設置描述屬性，kEAGLDrawablePropertyRetainedBacking與kEAGLDrawablePropertyColorFormat。

kEAGLDrawablePropertyRetainedBacking表示繪圖表面顯示後，是否保留其內容。
kEAGLDrawablePropertyColorFormat則表示可繪製表面的內部顏色緩存區格式，這個key對應的值是一個NSString指定特定顏色緩存區對象。默認是kEAGLColorFormatRGBA8。

kEAGLColorFormatRGBA8：32位RGBA的顏色，4*8=32位.
kEAGLColorFormatRGB565：16位RGB的顏色，
kEAGLColorFormatSRGBA8：sRGB表明了標準的紅、綠、藍，即CRT顯示器、LCD顯示器、投影機、打印機以及其餘設備中色彩再現所使用的三個基本色素。sRGB的色彩空間基於獨立的色彩座標，可使色彩在不一樣的設備使用傳輸中對應於同一個色彩座標體系，而不受這些設備各自具備的不一樣色彩座標的影響。

設置上下文

// 指定OpenGL ES 渲染API版本，咱們使用3.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
    // 建立圖形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    // 判斷是否建立成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    // 設置圖形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    // 將局部context，變成全局的
    self.myContext = context;
複製代碼

清空緩存區

glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
複製代碼

buffer分爲framebuffer和renderbuffer。其中framebuffer至關於renderbuffer的管理者。frame buffer object 即稱爲FBO。 renderbuffer則又能夠分爲三種：colorBuffer、depthBuffer、stencilBuffer.

設置RenderBuffer

GLuint buffer;
    glGenRenderbuffers(1, &buffer);
    self.myColorRenderBuffer = buffer;
    
    // 將標識符綁定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    // 將可繪製對象drawable object's CAEAGLLayer的存儲綁定到OpenGL ES renderBuffer對象 [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer]; 複製代碼

設置FrameBuffer

GLuint buffer;
    glGenRenderbuffers(1, &buffer);
    self.myColorFrameBuffer = buffer;
    
    // 將標識符綁定到GL_FRAMEBUFFER
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    // 將渲染緩存區myColorRenderBuffer 經過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
複製代碼

生成幀緩存區以後，則須要將renderbuffer跟framebuffer進行綁定，調用glFramebufferRenderbuffer函數進行綁定到對應的附着點上，後面的繪製才能起做用

繪製

進行繪製的常規步驟：

• 設置清屏顏色、清屏、視口大小

// 設置清屏顏色
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    // 清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    // 設置視口大小
    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);
複製代碼

• 讀取頂點着色程序、片元着色程序

NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
複製代碼

• 加載shader

- (GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
    // 定義2個臨時着色器對象
    GLuint verShader, fragShader;
    // 建立program
    GLint program = glCreateProgram();
    
    // 編譯頂點着色程序、片元着色器程序
    //參數1：編譯完存儲的底層地址
    //參數2：編譯的類型，GL_VERTEX_SHADER（頂點）、GL_FRAGMENT_SHADER(片元)
    //參數3：文件路徑
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    // 建立最終的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    // 釋放不須要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    return program;
}
複製代碼

• 編譯shader

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

• 連接、使用glLinkProgram

// 連接（這裏的self.myPrograme就是在上面加載獲得的）
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    // 獲取連接狀態
    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!");
    // 使用program
    glUseProgram(self.myPrograme);
複製代碼

• 設置頂點、紋理座標，並處理

// 前3個是頂點座標，後2個是紋理座標
    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,
    };
    
    
    // -----處理頂點數據--------
    // 1.頂點緩存區
    GLuint attrBuffer;
    // 2.申請一個緩存區標識符
    glGenBuffers(1, &attrBuffer);
    // 3.將attrBuffer綁定到GL_ARRAY_BUFFER標識符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    // 4.把頂點數據從CPU內存複製到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

    // 將頂點數據經過myPrograme中的傳遞到頂點着色程序的position
    // 1.glGetAttribLocation,用來獲取vertex attribute的入口的.
    // 2.告訴OpenGL ES,經過glEnableVertexAttribArray，
    // 3.最後數據是經過glVertexAttribPointer傳遞過去的。
    
    // 注意：第二參數字符串必須和shaderv.vsh中的輸入變量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    // 設置合適的格式從buffer裏面讀取數據
    glEnableVertexAttribArray(position);
    
    // 設置讀取方式
    //參數1：index,頂點數據的索引
    //參數2：size,每一個頂點屬性的組件數量，1，2，3，或者4.默認初始值是4.
    //參數3：type,數據中的每一個組件的類型，經常使用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認初始值爲GL_FLOAT
    //參數4：normalized,固定點數據值是否應該歸一化，或者直接轉換爲固定值。（GL_FALSE）
    //參數5：stride,連續頂點屬性之間的偏移量，默認爲0；
    //參數6：指定一個指針，指向數組中的第一個頂點屬性的第一個組件。默認爲0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    // ----處理紋理數據-------
    // glGetAttribLocation,用來獲取vertex attribute的入口的.
    //注意：第二參數字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    // 設置合適的格式從buffer裏面讀取數據
    glEnableVertexAttribArray(textCoor);
    
    // 設置讀取方式
    //參數1：index,頂點數據的索引
    //參數2：size,每一個頂點屬性的組件數量，1，2，3，或者4.默認初始值是4.
    //參數3：type,數據中的每一個組件的類型，經常使用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認初始值爲GL_FLOAT
    //參數4：normalized,固定點數據值是否應該歸一化，或者直接轉換爲固定值。（GL_FALSE）
    //參數5：stride,連續頂點屬性之間的偏移量，默認爲0；
    //參數6：指定一個指針，指向數組中的第一個頂點屬性的第一個組件。默認爲0
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
複製代碼

這部分代碼，在以前的篇章中都詳細的講解過，因此這裏再也不着重解釋，代碼中的註釋，也能過幫助你很好的理解。

• 加載紋理

// 將 UIImage 轉換爲 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判斷圖片是否獲取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    // 讀取圖片的大小，寬和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    // 獲取圖片字節數 寬*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    // 建立上下文
    /*
     參數1：data,指向要渲染的繪製圖像的內存地址
     參數2：width,bitmap的寬度，單位爲像素
     參數3：height,bitmap的高度，單位爲像素
     參數4：bitPerComponent,內存中像素的每一個組件的位數，好比32位RGBA，就設置爲8
     參數5：bytesPerRow,bitmap的沒一行的內存所佔的比特數
     參數6：colorSpace,bitmap上使用的顏色空間  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    // 在CGContextRef上--> 將圖片繪製出來
    /*
     CGContextDrawImage 使用的是Core Graphics框架，座標系與UIKit 不同。UIKit框架的原點在屏幕的左上角，Core Graphics框架的原點在屏幕的左下角。
     CGContextDrawImage 
     參數1：繪圖上下文
     參數2：rect座標
     參數3：繪製的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    // 使用默認方式繪製
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    // 畫圖完畢就釋放上下文
    CGContextRelease(spriteContext);
    
    // 綁定紋理到默認的紋理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    // 設置紋理屬性
    /*
     參數1：紋理維度
     參數2：線性過濾、爲s,t座標設置模式
     參數3：wrapMode,環繞模式
     */
    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;
    
    // 載入紋理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, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.釋放spriteData
    free(spriteData);   
複製代碼

上面代碼繪製出來的圖片是翻轉過來的，緣由在代碼中也有註釋，CGContextDrawImage 使用的是Core Graphics框架，座標系與UIKit 不同。UIKit框架的原點在屏幕的左上角，Core Graphics框架的原點在屏幕的左下角。

解決圖片翻轉問題

利用下面代碼，可修改這個問題

CGRect rect = CGRectMake(0, 0, width, height);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
複製代碼

緣由解釋：
第一步：
CGContextTranslateCTM(spriteContext, 0, rect.size.height);，在y軸方向移動rect.size.height的距離

第二步：
CGContextScaleCTM(spriteContext, 1.0, -1.0);，這句代碼表示在y軸方向進行旋轉，效果以下圖

通過上面2個步驟，圖形便可翻轉過來。

設置紋理採樣器、繪圖、從渲染緩衝區顯示到屏幕上

// 設置紋理採樣器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    // 從渲染緩衝區顯示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
複製代碼

最終效果圖：

未翻轉：

翻轉後：