OpenGL ES 案例08：GLKit使用索引绘图 + 纹理颜

OpenGL + OpenGL ES +Metal 系列文章汇总
本文案例代码有OC及Swift版本，详情见文末链接，讲解以OC版本为主

本案例是在OpenGL ES 案例06：GLKit使用索引绘图案例的基础上新增纹理与颜色的混合填充功能

相比GLSL案例的纹理颜色填充，GLKit中就相对比较简单很多，因为大部分代码apple都已经封装好了，我们只需要使用即可

整体案例的效果如下

08-效果图.gif

整个案例也是OpenGL ES 案例06：GLKit使用索引绘图与OpenGL ES 入门：GLKit加载图片案例综合的一个例子

在原有代码的基础上，需要修改的整体图示如下

修改的整体图示

主要也是在render渲染图形函数中新增纹理数据及操作

• 顶点数据中增加纹理坐标

//1.顶点数据
       //前3个元素，是顶点数据；中间3个元素，是顶点颜色值，最后2个是纹理坐标
    GLfloat attrArr[] =
    {
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f,       0.0f, 1.0f,//左上
        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f,       1.0f, 1.0f,//右上
        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f,       0.0f, 0.0f,//左下
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f,       1.0f, 0.0f,//右下
        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f,       0.5f, 0.5f,//顶点
    };

• 使用纹理数据，即将纹理坐标传入顶点着色器
  注：需要修改顶点、颜色读取时的总长度，否则绘制会有问题

//    ------使用纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (GLfloat*)NULL+6);

• 获取纹理图片 & 加载纹理

//    ------获取纹理路路径
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"mouse" ofType:@"jpg"];
    NSDictionary *option = [NSDictionary dictionaryWithObjectsAndKeys:@"1", GLKTextureLoaderOriginBottomLeft, nil];
    GLKTextureInfo *info = [GLKTextureLoader textureWithContentsOfFile:filePath options:option error:nil];

• 在effect中设置纹理相关信息

    //------着色器
    self.mEffect = [[GLKBaseEffect alloc] init];
    self.mEffect.texture2d0.enabled = GL_TRUE;
    self.mEffect.texture2d0.name = info.name;

完整的代码见github - 11_02_GLKit_三角形变换+纹理与颜色混合OC、11_02_GLKit三角形变换+纹理与颜色混合_Swift