前言
這里是一篇新手教程，環境是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.0GLKView* 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、頂點數組和索引數組
//頂點數據，前三個是頂點坐標，后面兩個是紋理坐標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、頂點數據緩存
//頂點數據緩存GLuintbuffer;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 = [[NSBundlemainBundle] pathForResource:@"for_test"ofType:@"jpg"];NSDictionary* options = [NSDictionarydictionaryWithObjectsAndKeys:@(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值調整即可。
轉載:http://www.lxweimin.com/p/750fde1d8b6a
