前言

這里是一篇新手教程，環境是Xcode7+OpenGL ES 2.0，目標寫一個OpenGL ES的hello world。
OpenGL ES系列教程在這里，
OpenGL ES系列教程的代碼地址 ，

你的star和fork是我的源動力，你的意見能讓我走得更遠。

核心思路

通過GLKit，盡量簡單地實現把一張圖片繪制到屏幕。

效果展示

具體細節

1、新建OpenGL ES上下文

- (void)setupConfig {
    //新建OpenGLES 上下文
    self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2]; //2.0，還有1.0和3.0
    GLKView* view = (GLKView *)self.view; //storyboard記得添加
    view.context = self.mContext;
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;  //顏色緩沖區格式
    [EAGLContext setCurrentContext:self.mContext];
}

GLKView* view = (GLKView *)self.view;這里需要在storyboard里面把view的類設置成GLKView，其他代碼是OpenGL ES上下文的創建。

2、頂點數組和索引數組

    //頂點數據，前三個是頂點坐標（x、y、z軸），后面兩個是紋理坐標（x，y）
    GLfloat squareVertexData[] =
    {
        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
        0.5, 0.5, -0.0f,    1.0f, 1.0f, //右上
        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上
        
        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上
        -0.5, -0.5, 0.0f,   0.0f, 0.0f, //左下
    };

頂點數組里包括頂點坐標，OpenGLES的世界坐標系是[-1, 1]，故而點(0, 0)是在屏幕的正中間。
紋理坐標系的取值范圍是[0, 1]，原點是在左下角。故而點(0, 0)在左下角，點(1, 1)在右上角。
索引數組是頂點數組的索引，把squareVertexData數組看成4個頂點，每個頂點會有5個GLfloat數據，索引從0開始。

3、頂點數據緩存

    //頂點數據緩存
    GLuint buffer;
    glGenBuffers(1, &buffer);
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(squareVertexData), squareVertexData, GL_STATIC_DRAW);
    
    glEnableVertexAttribArray(GLKVertexAttribPosition); //頂點數據緩存
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0); //紋理
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);

這是本章節的核心內容。

• glGenBuffers申請一個標識符
• glBindBuffer把標識符綁定到GL_ARRAY_BUFFER上
• glBufferData把頂點數據從cpu內存復制到gpu內存
• glEnableVertexAttribArray 是開啟對應的頂點屬性
• glVertexAttribPointer設置合適的格式從buffer里面讀取數據

4、紋理貼圖

- (void)uploadTexture {
    //紋理貼圖
    NSString* filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"jpg"];
    NSDictionary* options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];//GLKTextureLoaderOriginBottomLeft 紋理坐標系是相反的
    GLKTextureInfo* textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    //著色器
    self.mEffect = [[GLKBaseEffect alloc] init];
    self.mEffect.texture2d0.enabled = GL_TRUE;
    self.mEffect.texture2d0.name = textureInfo.name;
}

• GLKTextureLoader讀取圖片，創建紋理GLKTextureInfo
• 創建著色器GLKBaseEffect，把紋理賦值給著色器

基礎

代碼帶了很多注釋，百度下相應的概念，會有更多解釋。
如果對OpengGL ES感興趣，但是卻毫無圖形學基礎的，可以看看LearnOpenGL教程。

思考題

• 1、代碼中有6個頂點坐標，能否使用更少的頂點顯示一個圖像？
• 2、頂點緩存數組可以不用glBufferData，要如何實現？
• 3、如果把這個圖變成左右兩只對稱的熊貓，該如何改？

這里可以下載demo代碼。

思考題答案

思考題1：
可以使用四個頂點，繪制2個三角形 的6個頂點中有2個是重復的，使用索引可以減少重復。

思考題2：
頂點緩存數組可以不用glBufferData，要如何實現？頂點數組可以通過glBufferData放入緩存，也可以直接通過glVertexAttribPointer最后一個參數，直接把頂點數組從CPU傳送到GPU。區別：glBufferData里面的頂點緩存可以復用，glVertexAttribPointer是每次都會把頂點數組從CPU發送到GPU，影響性能。

思考題3：
如果把這個圖變成左右兩只對稱的熊貓，該如何改？把屏幕切分成4個三角形，左邊兩個三角形同上，右邊兩個三角形的紋理坐標的x值調整即可。