OpenGL ES 入門之旅 -- GLSL加載圖片案例

在上篇文章GLSL初始着色器語言中已經介紹過如何編寫一個着色器文件，以及如何鏈接程序對象和着色器的對象的方法函數，那麼接下來經過一個實際的案例來看一下這些方法的具體使用。

在學習案例以前，先來看一下什麼是FrameBuffer和RenderBuffer？

幀緩衝區對象FrameBuffer（FBO）

在OpenGL渲染管線中，幾何數據和紋理通過屢次轉化和屢次測試，最後以二維像素的形式顯示在屏幕上。OpenGL管線的最終渲染目的地被稱做幀緩衝（framebuffer）。幀緩衝是一些二維數組和OpenG所使用的存儲區的集合：顏色緩衝、深度緩衝、模板緩衝和累計緩衝。默認狀況下，OpenGL將幀緩衝區做爲渲染最終目的地。此幀緩衝區徹底由系統生成和管理。

咱們知道，在應用程序調用任何的OpenGL ES命令以前，須要首先建立一個渲染上下文和繪圖表面，並使之成爲現行上下文和表面，以前在渲染的時候，其實一直使用的是原生窗口系統（好比EAGL，GLFW）提供的渲染上下文和繪圖表面（即幀緩衝區）。 通常狀況下，咱們只須要系統提供的幀緩衝區做爲繪圖表面，可是又有些特殊狀況，好比陰影貼圖、動態反射、處理後特效等須要渲染到紋理操做的，若是使用系統提供的幀緩衝區，效率會比較低低下，所以須要自定義本身的幀緩衝區。

幀緩衝區對象API支持以下操做： ·僅使用OpenGL ES 命令建立幀緩衝區對象 ·在單一EGL上下文中建立和使用多個緩衝區對象，也就是說，不須要每個幀緩衝區都有一個渲染上下文。 ·建立屏幕外顏色，深度或者模板渲染緩衝區和紋理，並將它們連接到幀緩衝區對象 ·在多個幀緩衝區之間共享顏色，深度或者模板緩衝區 ·將紋理直接連接到幀緩衝區做爲顏色或者深度，從而避免了進行復制操做的必要 ·在幀緩衝區之間複製並使幀緩衝區內容失效。

建立幀緩衝區對象

//定義一個緩存區ID
GLuint buffer;
//申請一個緩存區標誌
glGenFramebuffers(1, &buffer);
// 而後綁定
glBindFramebuffer(GL_FRAMEBUFFER, buffer);
複製代碼

glGenFramebuffers (GLsizei n, GLuint* framebuffers) : 第一個參數是要建立的幀緩存的數目， 第二個參數是指向存儲一個或者多個ID的變量或數組的指針。 它返回未使用的幀緩衝區對象的ID。ID爲0表示默認幀緩存，即系統提供的幀緩存。 一旦一個FBO被建立，在使用它以前必須綁定 glBindFramebuffer (GLenum target, GLuint framebuffer): 第一個參數target是GL_FRAMEBUFFER， 第二個參數是幀緩衝區對象的ID。 一旦幀緩衝區對象被綁定，以後的全部的OpenGL操做都會對當前所綁定的幀緩衝區對象形成影響。ID爲0表示缺省幀緩存，即默認的系統提供的幀緩存。所以，在glBindFramebuffer()中將ID設置爲0能夠解綁定當前幀緩衝區對象。

在綁定到GL_FRAMEBUFFER目標以後，全部的讀取和寫入幀緩衝的操做將會影響當前綁定的幀緩衝。咱們也可使用GL_READ_FRAMEBUFFER或GL_DRAW_FRAMEBUFFER，將一個幀緩衝分別綁定到讀取目標或寫入目標。綁定到GL_READ_FRAMEBUFFER的幀緩衝將會使用在全部像是glReadPixels的讀取操做中，而綁定到GL_DRAW_FRAMEBUFFER的幀緩衝將會被用做渲染、清除等寫入操做的目標。大部分狀況都不須要區分它們，一般都會使用GL_FRAMEBUFFER。

刪除緩衝區對象

在緩衝區對象再也不被使用時，緩衝區對象能夠經過調用glDeleteFramebuffers (GLsizei n, const GLuint* framebuffers)來刪除。

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

和系統的幀緩衝區同樣，幀緩衝區對象也包括顏色緩衝區、深度和模版緩衝區，這些邏輯上的緩衝區在幀緩衝區對象中稱之爲可附加的圖像，它們是能夠附加到幀緩衝區對象的二維像素數組。 FBO包含兩種類型的附加圖像：紋理圖像（texture images）和渲染緩存圖像（renderbuffer images）。若是紋理對象的圖像數據關聯到幀緩存，OpenGL執行的是「渲染到紋理」（render to texture）操做。若是渲染緩存的圖像數據關聯到幀緩存，OpenGL執行的是離屏渲染（offscreen rendering）。

渲染緩存區對象RenderBuffer（RBO）

渲染緩存是爲離線渲染而新引進的。它容許將一個場景直接渲染到一個渲染緩存對象中，而不是渲染到紋理對象中。渲染緩存對象是用於存儲單幅圖像的數據存儲區域。該圖像按照一種可渲染的內部格式存儲。它用於存儲沒有相關紋理格式的OpenGL邏輯緩存，好比模板緩存或者深度緩存。

一個renderbuffer對象是經過應用程序分配的一個2D圖像緩衝區，renderbuffer能夠用於分配和存儲顏色，深度或者模板值，也能夠做爲一個framebuffer的顏色，深度，模板的附着，一個renderbuffer是一個相似於屏幕外的窗口系統提供的可繪製表面。可是renderbuffer不能直接用做GL紋理。

建立渲染緩衝區

//1.定義一個緩存區ID
    GLuint buffer;
 //2.申請一個緩存區標誌
    glGenRenderbuffers(1, &buffer);
//3.將標識符綁定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, buffer);
複製代碼

和幀緩衝區對象同樣，在引用渲染緩衝區對象以前必須綁定當前渲染緩衝對象，調用函數glBindRenderbuffer (GLenum target, GLuint renderbuffer)進行綁定， 第一個參數target是GL_RENDERBUFFER， 第二個參數是渲染緩衝區對象的ID。

刪除緩衝區對象

在緩衝區對象再也不被使用時，緩衝區對象能夠經過調用glDeleteRenderbuffers (GLsizei n, const GLuint* renderbuffers)來刪除。

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

當一個渲染緩存被建立，它沒有任何數據存儲區域，因此還要爲它分配空間，這能夠經過用glRenderbufferStorage (GLenum target, GLenum internalformat, GLsizei width, GLsizei height)實現。

glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 600, 800);
複製代碼

第一個參數必須是GL_RENDERBUFFER, 第二個參數是可用於顏色，深度，模板的格式， width和height是渲染緩存圖像的像素維度

附加渲染緩衝對象

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

//將渲染緩存區myColorRenderBuffer 經過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
複製代碼

下圖展現了幀緩衝區對象，渲染緩衝區對象和紋理之間的關係，一個幀緩衝區對象中只能有一個顏色，深度，模板附着。

簡單來講就是framebuffer只是一個管理者，其自己並無任何存儲區（沒有存儲紋理，頂點，顏色等數據），只是有顏色，深度，模板附着點，而真正存儲這些數據的是renderbuffer。

GLSL渲染圖片

這個案例大概實現如下這些內容： ·用EAGL 建立屏幕上的渲染表面 ·加載頂點/片元着⾊器 ·建立一個程序對象,並連接頂點/⽚元着⾊器,並連接程序對象 ·設置視口 ·清除顏色緩存區 ·渲染簡單圖元 ·使顏⾊緩存區的內容在EAGL 窗⼝表現呈現

#####1.建立頂點/片元着色器文件 着色器文件通常以.vsh/.fsh/.gsl爲文件後綴名 頂點着色器shaderv.vsh

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

在着色器文件中最好不要加中文註釋，以防編譯沒法經過，此處的中文註釋只做爲理解註釋。

片元着色器shaderf.fsh

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

建立一個UIView，並導入頭文件#import <OpenGLES/ES2/gl.h>，這次用GLSL渲染圖片的代碼所有書寫在這個UIView中。

//在iOS和tvOS上繪製OpenGL ES內容的圖層，繼承與CALayer
@property(nonatomic,strong)CAEAGLLayer *zhEagLayer;
@property(nonatomic,strong)EAGLContext *zhContext;
@property(nonatomic,assign)GLuint zhColorRenderBuffer;
@property(nonatomic,assign)GLuint zhColorFrameBuffer;
@property(nonatomic,assign)GLuint zhPrograme;
複製代碼

2.設置圖層setupLayer

//1.建立特殊圖層
//這裏須要重寫layerClass，將ZHView返回的圖層從CALayer替換成CAEAGLLayer
self.zhEagLayer = (CAEAGLLayer *)self.layer;
    
//2.設置scale
[self setContentScaleFactor:[[UIScreen mainScreen]scale]];
//3.設置描述屬性，這裏設置不維持渲染內容以及顏色格式爲RGBA8
self.zhEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
複製代碼

對於drawableProperties設置描述屬性， kEAGLDrawablePropertyRetainedBacking：表示繪圖表面顯示後，是否保留其內容 kEAGLDrawablePropertyColorFormat：表示可繪製表面的內部顏色緩存區格式，這個key對應的值是一個NSString指定特定顏色緩存區對象。默認是kEAGLColorFormatRGBA8； · kEAGLColorFormatRGBA8：32位RGBA的顏色 · kEAGLColorFormatRGB565：16位RGB的顏色 · kEAGLColorFormatSRGBA8：sRGB表明了標準的紅、綠、藍，即CRT顯示器、LCD顯示器、投影機、打印機以及其餘設備中色彩再現所使用的三個基本色素。sRGB的色彩空間基於獨立的色彩座標，可使色彩在不一樣的設備使用傳輸中對應於同一個色彩座標體系，而不受這些設備各自具備的不一樣色彩座標的影響。

重寫layerClass

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

3.設置渲染上下文setupContext

//1.指定OpenGL ES 渲染API版本
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
//2.建立圖形上下文
EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
//3.判斷是否建立成功
if (!context) {
        NSLog(@"Create failed!");
        return;
}
//4.設置圖形上下文
if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"Set failed!");
        return;
}
//5.將局部context賦值成全局的context
self.zhContext = context;
複製代碼

4.清空緩衝區deleteRenderAndFrameBuffer

//清空幀緩衝區
glDeleteBuffers(1, &_zhColorFrameBuffer);
self.zhColorFrameBuffer = 0;
//清空渲染緩衝區
glDeleteBuffers(1, &_zhColorRenderBuffer);
self.zhColorRenderBuffer = 0;
複製代碼

清空緩衝區的代碼也能夠寫成：

glDeleteFramebuffers(1, &_zhColorFrameBuffer);
self.zhColorFrameBuffer = 0;

glDeleteRenderbuffers(1, &_zhColorRenderBuffer);
self.zhColorRenderBuffer = 0;
複製代碼

5.設置RenderBuffer

//1.定義一個緩存區ID
GLuint buffer;
//2.申請一個緩存區標誌
glGenRenderbuffers(1, &buffer);
//3.將當前申請的buffer變成全局的
self.zhColorRenderBuffer = buffer;
//4.將標識符綁定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.zhColorRenderBuffer);
//5.將可繪製對象drawable object's CAEAGLLayer的存儲綁定到OpenGL ES renderBuffer對象 [self.zhContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.zhEagLayer]; 複製代碼

6.設置FrameBuffer

//1.定義一個緩存區ID
GLuint buffer;
//2.申請一個緩存區標誌
glGenRenderbuffers(1, &buffer);
//3.將buffer變成全局的
self.zhColorFrameBuffer = buffer;  
//4.綁定標識符到GL_FRAMEBUFFER
glBindFramebuffer(GL_FRAMEBUFFER, self.zhColorFrameBuffer);

/*生成幀緩存區以後，則須要將renderbuffer跟framebuffer進行綁定，
調用glFramebufferRenderbuffer函數進行綁定到對應的附着點上，後面的繪製才能起做用*/
    
//5.將渲染緩存區myColorRenderBuffer 經過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.zhColorRenderBuffer);
複製代碼

7.開始繪製renderLayer

1.設置清屏顏色

glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
複製代碼

2.清除屏幕

glClear(GL_COLOR_BUFFER_BIT);
複製代碼

3.設置視口大小

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);
複製代碼

4.讀取頂點着色程序、片元着色程序

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

5.加載着色器shader

self.zhPrograme = [self loadShaders:vertFile Withfrag:fragFile];

//加載shader
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag
{
    //1.定義2個臨時的着色器對象
    GLuint verShader, fragShader;
    //建立program
    GLint program = glCreateProgram();
    //2.編譯頂點着色程序和片元着色器程序
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    /*
    關於這個compileShader:type:file:方法傳入的三個參數：
    參數1：編譯完存儲的底層地址
    參數2：編譯的着色器的類型，GL_VERTEX_SHADER（頂點）、GL_FRAGMENT_SHADER(片元)
    參數3：文件路徑
    */
    
    //3.連接着色器對象和程序對象
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.釋放不須要的shader
    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.根據type類型建立一個shader
    *shader = glCreateShader(type);
    //3.將着色器源碼附加到着色器對象上。
    glShaderSource(*shader, 1, &source,NULL);
    /*
    參數1：shader,要編譯的着色器對象 *shader
    參數2：numOfStrings,傳遞的源碼字符串數量 1個
    參數3：strings,着色器程序的源碼（真正的着色器程序源碼）
    參數4：lenOfStrings,長度，具備每一個字符串長度的數組，或NULL，這意味着字符串是NULL終止的
    */
    //4.把着色器源代碼編譯成目標代碼
    glCompileShader(*shader);  
}
複製代碼

6.連接程序對象

glLinkProgram(self.zhPrograme);
//檢查連接是否成功
GLint linkStatus;
//獲取連接狀態
glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
 if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.zhPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"program link error:%@",messageString);
        return;
  }
NSLog(@"program link success!");
複製代碼

7.使用程序對象

glUseProgram(self.zhPrograme);
複製代碼

8.設置頂點座標和紋理座標

//座標數組
GLfloat attrArr[] =
    {
        1.0f, -1.0f, -1.0f,     1.0f, 0.0f,
        -1.0f, 1.0f, -1.0f,     0.0f, 1.0f,
        -1.0f, -1.0f, -1.0f,    0.0f, 0.0f,
        
        1.0f, 1.0f, -1.0f,      1.0f, 1.0f,
        -1.0f, 1.0f, -1.0f,     0.0f, 1.0f,
        1.0f, -1.0f, -1.0f,     1.0f, 0.0f,
    };
//每一行的前3位爲頂點座標，後兩位爲紋理座標
複製代碼

9.處理頂點數據

//(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);
複製代碼

10.將頂點數據傳入到頂點着色器對象

將頂點數據經過self.zhPrograme中的傳遞到頂點着色器程序的position，經過如下三個函數處理頂點數據 ·glGetAttribLocation,用來獲取vertex attribute的入口。 ·告訴OpenGL ES,經過glEnableVertexAttribArray從buffer讀取數據(打開通道) ·glVertexAttribPointer設置讀取數據的方式

//第二參數字符串必須和shaderv.vsh中的輸入變量：position保持一致
GLuint position = glGetAttribLocation(self.zhPrograme, "position");
//設置合適的格式從buffer裏面讀取數據
glEnableVertexAttribArray(position);
//設置讀取方式
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
複製代碼

glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr) 參數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

11.處理紋理數據

//第二參數字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
GLuint textCoor = glGetAttribLocation(self.zhPrograme, "textCoordinate");
//設置合適的格式從buffer裏面讀取數據
glEnableVertexAttribArray(textCoor);
//設置讀取方式
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
複製代碼

12.加載紋理

//一、將 UIImage 轉換爲 CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//判斷圖片是否獲取成功
if (!spriteImage) {
       NSLog(@"load image failed: %@", fileName);
       return;
   }
    
//二、讀取圖片的大小，寬和高
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
//3.獲取圖片字節數 寬*高*4（RGBA）
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
//4.建立上下文
/*
     參數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);
//6.使用默認方式繪製
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextDrawImage(spriteContext, rect, spriteImage);
//七、畫圖完畢就釋放上下文
CGContextRelease(spriteContext);
//八、綁定紋理到默認的紋理ID（
glBindTexture(GL_TEXTURE_2D, 0);
//9.設置紋理屬性
/*
     參數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;
//10.載入紋理2D數據
/*
     參數1：紋理模式(綁定紋理對象的種類)，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     參數2：加載的層次，通常設置爲0, 0表示沒有進行縮小的原始圖片等級。
     參數3：紋理的顏色值GL_RGBA, 表示了紋理所採用的內部格式，內部格式是咱們的像素數據在顯卡中存儲的格式，這裏的GL_RGB顯然就表示紋理中像素的顏色值是以RGB的格式存儲的。
     參數4：紋理的寬
     參數5：紋理的高
     參數6：border，邊界寬度，一般爲0.
     參數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); 
複製代碼

13.設置紋理採樣器 sampler2D

glUniform1i(glGetUniformLocation(self.zhPrograme, "colorMap"), 0);
複製代碼

14.繪圖

glDrawArrays(GL_TRIANGLES, 0, 6);
複製代碼

15.從渲染緩衝區顯示到屏幕上

[self.zhContext presentRenderbuffer:GL_RENDERBUFFER];
複製代碼

至此用GLSL渲染圖片的代碼已經基本完成，若是沒有處理圖片的翻轉問題的話，運行的效果顯示出來圖片是翻轉的，至於圖片翻轉的緣由和解決圖片翻轉的方法已在上一篇文章中作了詳細的介紹，這裏就再也不一一贅述。

下面將上述的代碼步驟作一個梳理，以下圖所示：

文中部份內容參考：《OpenGL ES 3.0 編程指南》