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上下文

    //新建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;  //颜色缓冲区格式
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24; // 模板缓冲区格式
    [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,    0.0f, 1.0f, //左上
        -0.5, -0.5, 0.0f,   0.0f, 0.0f, //左下
        0.5, 0.5, -0.0f,    1.0f, 1.0f, //右上
    };

    //顶点索引
    GLuint indices[] =
    {
        0, 1, 2,
        1, 3, 0
    };
    self.mCount = sizeof(indices) / sizeof(GLuint);

顶点数组里包括顶点坐标，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);

    GLuint index;
    glGenBuffers(1, &index);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, 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、纹理贴图

    //纹理贴图
    NSString* filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"png"];
    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，把纹理赋值给着色器

基础

代码带了很多注释，百度下相应的概念，会有更多解释；如果懒得查，可以留言疑问。

思考题

• 代码中只有四个顶点坐标，如何显示出来一个图像？
• 顶点缓存数组可以不用glBufferData，要如何实现？
• 如果把这个图变成左右两只对称的熊猫，该如何改？

这里可以下载demo代码。

送上两个有意思的blog
飘飘白云系列讲解
从零开始构建OpenGLES应用

思考题答案

代码中只有四个顶点坐标，如何显示出来一个图像？
四个顶点，可以绘制2个三角形，两个三角形拼接成一个矩形。三角形内的任意一点，根据顶点坐标插值生成对应的顶点和纹理坐标。

顶点缓存数组可以不用glBufferData，要如何实现？顶点数组可以通过glBufferData放入缓存，也可以直接通过glVertexAttribPointer最后一个参数，直接把顶点数组从CPU传送到GPU。区别：glBufferData里面的顶点缓存可以复用，glVertexAttribPointer是每次都会把顶点数组从CPU发送到GPU，影响性能。

如果把这个图变成左右两只对称的熊猫，该如何改？把屏幕切分成4个三角形，左边两个三角形同上，右边两个三角形的纹理坐标的x值调整即可。

文／落影loyinglin（简书作者）
原文链接：http://www.jianshu.com/p/750fde1d8b6a
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。