iOS開發-OpenGL ES入門教程1
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