OpenGL-ES-案例08:GLKit使用索引绘图-+-纹理颜色混合(下)

439 阅读1分钟

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

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

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

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

image

主要也是在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