OpenGL ES案例04_4-GLKit索引绘图添加纹理颜色混合

本案例是在OpenGL ES案例04_2-GLKit使用索引绘图基础上增加纹理颜色混合。
最终效果如下

Sep-01-2020 15-33-42.gif

本案例与之前案例最大的区别是增加了纹理颜色混合。其它绘制流程一致，可参考之前案例描述或文末的完整代码。接下来描述一下如何增加纹理颜色混合。
使用GLKit绘制图形比使用GLSL绘制图形较简单，因为GLKit中帮我们完成了着色器的定义、编译、链接等。在本案例中，只需要设置纹理坐标、载入纹理数据即可。

设置纹理坐标

由于GLKit封装了着色器文件的相关内容，所以设置顶点数据的时候，不需要再获取属性通道，可通过指定枚举打开属性通道即可。

1. 定义顶点坐标/顶点颜色/纹理坐标的数组。
2. 生成一个buffer，并将这个buffer绑定到GL_ARRAY_BUFFER。
3. 将顶点数据从CPU拷贝至GPU。
4. 指定顶点坐标的读取方式。
5. 指定顶点颜色的读取方式。
6. 指定纹理坐标的读取方式。

- (void)setupVertexData{
    GLfloat attrArr[] = {
        -0.5f, 0.5f, 0.0f,      0.0f, 0.0f, 0.5f,       0.0f, 1.0f,//左上
        0.5f, 0.5f, 0.0f,       0.0f, 0.5f, 0.0f,       1.0f, 1.0f,//右上
        -0.5f, -0.5f, 0.0f,     0.5f, 0.0f, 1.0f,       0.0f, 0.0f,//左下
        0.5f, -0.5f, 0.0f,      0.0f, 0.0f, 0.5f,       1.0f, 0.0f,//右下
        0.0f, 0.0f, 1.0f,       1.0f, 1.0f, 1.0f,       0.5f, 0.5f,//顶点
    };
    GLuint buffer;
    glGenBuffers(1, &buffer);
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 8*sizeof(GLfloat), NULL);
    
    glEnableVertexAttribArray(GLKVertexAttribColor);
    glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, 8*sizeof(GLfloat), (GLfloat*)NULL+3);
    
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 8*sizeof(GLfloat), (GLfloat*)NULL+6);
    
    self.mEffect = [[GLKBaseEffect alloc] init];
}

载入纹理数据

载入纹理数据相对来说也比较简单。

1. 获取图片路径。
2. 设置纹理加载时，左下角为原点。
3. 使用GLKTextureLoader读取纹理信息。
4. 将纹理数据设置到着色器中。

- (void)setupTexture{
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"nn" ofType:@"jpg"];
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@"1",GLKTextureLoaderOriginBottomLeft, nil];
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    self.mEffect.texture2d0.enabled = GL_TRUE;
    self.mEffect.texture2d0.name = textureInfo.name;
}

使用GLKit绘制图形相对来比较简单，通过以上两步就能完成在索引绘图的基础上增加纹理颜色混合。
完整代码见：GLKit三角形变换_纹理颜色混合