本案例是在OpenGL ES案例04_2-GLKit使用索引绘图基础上增加纹理颜色混合。
最终效果如下
本案例与之前案例最大的区别是增加了纹理颜色混合。其它绘制流程一致,可参考之前案例描述或文末的完整代码。接下来描述一下如何增加纹理颜色混合。
使用GLKit绘制图形比使用GLSL绘制图形较简单,因为GLKit中帮我们完成了着色器的定义、编译、链接等。在本案例中,只需要设置纹理坐标、载入纹理数据即可。
设置纹理坐标
由于GLKit封装了着色器文件的相关内容,所以设置顶点数据的时候,不需要再获取属性通道,可通过指定枚举打开属性通道即可。
- 定义顶点坐标/顶点颜色/纹理坐标的数组。
- 生成一个buffer,并将这个buffer绑定到GL_ARRAY_BUFFER。
- 将顶点数据从CPU拷贝至GPU。
- 指定顶点坐标的读取方式。
- 指定顶点颜色的读取方式。
- 指定纹理坐标的读取方式。
- (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];
}
载入纹理数据
载入纹理数据相对来说也比较简单。
- 获取图片路径。
- 设置纹理加载时,左下角为原点。
- 使用GLKTextureLoader读取纹理信息。
- 将纹理数据设置到着色器中。
- (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三角形变换_纹理颜色混合
网友评论