標籤:tco poi 需要 images draw 格式 current ebooks notebook
http://www.jianshu.com/p/750fde1d8b6a
這裡是一篇新手教程,環境是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、頂點數組和索引數組
//頂點資料,前三個是頂點座標,後面兩個是紋理座標 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值調整即可。
落影loyinglin
連結:http://www.jianshu.com/p/750fde1d8b6a
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
iOS開發-OpenGL ES入門教程1