美文网首页
OpenGL ES案例04_4-GLKit索引绘图添加纹理颜色混

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

作者: 卡布奇诺_95d2 | 来源:发表于2020-09-01 16:01 被阅读0次

    本案例是在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三角形变换_纹理颜色混合

    相关文章

      网友评论

          本文标题:OpenGL ES案例04_4-GLKit索引绘图添加纹理颜色混

          本文链接:https://www.haomeiwen.com/subject/orhvsktx.html