基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)
在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了。在这篇文章中,我们不再画三角形了,改为画四边形。下篇教程,我们就可以画立方体了,到时候就是真3D了。
为什么三角形在OpenGL教程里面这么受欢迎呢?因为在OpenGL的世界里面,所有的几何体都可以用三角形组合出来。我们的四边形也一样,它可以用两个三角形组合出来。
注:本篇代码在基于Cocos2d-x学习OpenGL ES 2.0系列——编写自己的shader(2)代码的基础上修改。
你的第一个四边形
首先,因为OpenGL里面没有直接绘制四边形的命令的,所以我们需要画两个三角形来拼成一个四边形。这样的话,这样的话我们一共需要6个顶点。这6个顶点的坐标如下所示:
float vertercies[] =
{ -,-,
, -,
-, ,
-, ,
,,
, -};
此时,我们还需要修改glDrawArray和CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES宏,如下所示:
//注意3个顶点,变成了6个顶点,这里一定要改成6,否则OpenGL只会画3个顶点
glDrawArrays(GL_TRIANGLES, , );
glBindVertexArray();
//这里的6是可选的,改成6可以更好地与cocos2d-x引擎融合
CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(, );
此时,运行程序,你会发现只有一个三角形。那是因为我们的顶点属性color只有3份,现在6个顶点了,所以也需要6份颜色数据。另外,为了显示好看,这里把6个颜色统一修改成绿色:
float color[] = { , ,, ,
,,, ,
, , , ,
, ,, ,
,,, ,
,, , };
同时,记得把上一篇教程中设置的uniform u_color也重置一下:
float uColor[] = {1.0, 1.0, 1.0, 1.0};
glUniform4fv(uColorLocation,, uColor);
此时,编译并运行,你会得到一个纯绿色的四边形:
怎么样,画4边形不过如此吧,只需要多准备点数据就行啦。另外,注意一下三角形的顶点顺序。不过,细心的读者立马就会发现,我们的顶点数据里面有两个顶点是重复的。这其实是一种内存浪费。假设我们现在渲染一个复杂的模型,它可能包含几千个三角形,如果采用这种方式,那不知道要浪费多少内存。接下来,我们要介绍一种方法,使用索引数组来重用顶点数据。
使用VBO索引
推荐大家先看看VBO索引原理,相信大家看完之后应该知道怎么实现了。
1)修改原始顶点数据
把vertercies修改为下面的样子:
float vertercies[] =
{ -,-,
, -,
-, ,
,};
从上面的顶点数据可以看出,这4个点刚好就是normalized device space的四个边界的顶点。
2)指定2个三角形的索引
我们需要为两个三角形指定索引数据,如下所示:
GLubyte indices[] = { ,,, //第一个三角形索引
,,}; //第二个三角形索引
3)创建索引缓冲区并绑定索引数据到缓冲区
GLuint indexVBO;
glGenBuffers(, &indexVBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexVBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices) , indices, GL_STATIC_DRAW);
这里索引缓冲区与之前的GL_ARRAY_BUFFER的创建与使用方式是一样的。
4)最后,我们把glDrawArray替换成glDrawElements
glDrawElements(GL_TRIANGLES, , GL_UNSIGNED_BYTE,(GLvoid*));
第一个参数:指定绘制基本图元的类型,这里我们指定的是三角形
第二个参数:需要绘制的元素个数,即索引的数量,我们一共是6个索引
第三个参数:指定索引数据的类型,注意必须是 GL_UNSIGNED_BYTE和GL_UNSIGNED_SHORT中的一个。推荐用GL_UNSIGNED_BYTE。
第四个参数:指定开始绘制的第一个索引数据在缓冲区的偏移。
此时,编译并运行,我们还是得到了和之前一样的四边形。
改进顶点数据结构
现在顶点属性包含位置(position)和颜色(color),将来还会有法线(normal),纹理坐标(texture coordinate)等数据。如果每一种类型的顶点数据都分开来存放,一来不利于管理,二来也会产生内存碎片。
在本小节中,我将向大家介绍如何使用一个结构体来封装这些数据。这也是cocos2d-x里面所用的方法,比如一个Quard的定义如下:
struct V3F_C4B_T2F
{
//! vertices (3F)
Vec3 vertices; // 12 bytes
//! colors (4B)
Color4B colors; // 4 bytes
// tex coords (2F)
Tex2F texCoords; // 8 bytes
};
仿照上面的结构体,我们也定义一个结构体Vertex,用来表示顶点的数据,目前它里面包含位置和颜色:
typedef struct {
float Position[];
float Color[];
} Vertex;
下面是我们的顶点数据定义:
Vertex data[] =
{
{{-,-},{,,,}},
{{,-},{,,,}},
{ {-,},{,,,}},
{{,},{,,,}}
};
注意,我们画四边形需要4个顶点,所以,需要四份Vertex数据。接下来,我们指定Vertex Shader如何读取这些属性(VBO可以一次性传递所有的顶点数据给vertex shader(目前是position和color,以后还有法线和纹理坐标),然后使用glVertexAttribPointer按一定的规则去取数据就行了):
glGenBuffers(, &vertexVBO);
glBindBuffer(GL_ARRAY_BUFFER, vertexVBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(data), data, GL_STATIC_DRAW); GLuint positionLocation = glGetAttribLocation(program->getProgram(), "a_position");
glEnableVertexAttribArray(positionLocation);
glVertexAttribPointer(positionLocation,
,
GL_FLOAT,
GL_FALSE,
sizeof(Vertex),
(GLvoid* )offsetof(Vertex,Position)); GLuint colorLocation = glGetAttribLocation(program->getProgram(), "a_color");
glEnableVertexAttribArray(colorLocation);
glVertexAttribPointer(colorLocation,
,
GL_FLOAT,
GL_FALSE,
sizeof(Vertex),
(GLvoid* )offsetof(Vertex,Color));
这里,我们需要指定glVertexAttribPointer的第5个参数和第6个参数。
下图告诉我们Vertex Shader是如何读取属性的:
注意,我们这里把colorVBO的生成和绑定代码注释掉了,因为已经不需要了。
编译并运行,这时候你还是会看到一个绿色的四边形。
结语
从本例中可以看到,VBO可以一次性传递所有的顶点数据给vertex shader(目前是position和color,以后还有法线和纹理坐标),然后使用glVertexAttribPointer按一定的规则去取数据就行了。至于几何图元如何组装,可以交给索引VBO去解决,最后调用glDrawElements来完成实际的绘制。
另外如果我们只想画纯色的四边形,那么建议不要使用attribute,直接使用uniform并把该uniform的值传给gl_FragColor就行了。这个就留给读者自行去实验啦。
点击下载本教程源码。
推荐阅读:
基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)的更多相关文章
- 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)
在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个三角形(1)
前言 在本系列教程中,我会以当下最流行的2D引擎Cocos2d-x为基础,介绍OpenGL ES 2.0的一些基本用法.本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2d-x过程中,知其然 ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备(7)
Cocos2d-x底层图形绘制是使用OpenGL ES协议的.OpenGL ES是什么呢? OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API的子集 ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——编写自己的shader(2)
在上篇文章中,我给大家介绍了如何在Cocos2d-x里面绘制一个三角形,当时我们使用的是Cocos2d-x引擎自带的shader和一些辅助函数.在本文中,我将演示一下如何编写自己的shader,同时, ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之LayerColor(8)
在前面文章中讲述了Cocos2d-x引擎OpenGL渲染准备Shader方面,本文主要讲解使用LayerColor来讲述OpenGL的渲染过程. 1.LayerColor对象创建 添加LayerCol ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体(5)
在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的 ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——初识MVP(3)
在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix.它其实是一个uniform,每一个Cocos2d-x预定义的shader都包含有这个uniform,但是如 ...
- 基于Cocos2d-x学习OpenGL ES 2.0之多纹理
没想到原文出了那么多错别字,实在对不起观众了.介绍opengl es 2.0的不多.相信介绍基于Cocos2d-x学习OpenGL ES 2.0之多纹理的,我是独此一家吧.~~ 子龙山人出了一个系列: ...
- OpenGL ES 3.0 顶点缓冲区VBO使用
一般情况下数据都是有CPU从RAM取数据 然后传给GPU去处理,相对于GPU速度要慢一些. 使用VBO技术 可以把数据存储到GPU的内存空间中,这样GPU可以直接从GPU的内存中取得数据进行处理 速度 ...
随机推荐
- linux的一些软件基本安装
买了个腾讯云的服务器,开始玩起来了,先装环境吧. JAVA安装 安装个java yum -y install java-1.7.0-openjdk* 查看java版本 java -version 可以 ...
- Excel最多可存多少行,多少列?
查到的资料如下: Excel 07-2003一个工作表最多可有65536行,行用数字1—65536表示;最多可有256列,列用英文字母A—Z,AA—AZ,BA—BZ,……,IA—IV表示:一个工作簿中 ...
- Hadoop计算中的Shuffle过程(转)
Hadoop计算中的Shuffle过程 作者:左坚 来源:清华万博 时间:2013-07-02 15:04:44.0 Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方.要想理解Ma ...
- 用Lucene对文档进行索引搜索
问题 现在给出很多份文档,现在对某个搜索词感兴趣,想找到相关的文档. 简单搜索 一种简单粗暴的做法是: 1.读取每个文档:2.找到其中含有搜索词的文档:3.对找到的文档中搜索词出现的次数统计:4.根据 ...
- kafka+storm+hbase
kafka+storm+hbase实现计算WordCount. (1)表名:wc (2)列族:result (3)RowKey:word (4)Field:count 1.解决: (1)第一步:首先准 ...
- Spring Tools Suite (STS) 简介
首先,sts是一个定制版的Eclipse,专为Spring开发定制的,方便创建调试运行维护Spring应用. 官方页面.下载地址(3.8.1 win x64). 其次,没什么好介绍的,用一下就明白了. ...
- zookeeper_process内存泄露问题
单线程模式下,不能递归调用zookeeper_process函数,否则会造成内存泄露. 下列图是在watcher中调用zookeeper_process时,用valgrind检测到的情况:
- postman从入门到精通
今天总监让我给测试同事们培训postman,使用过postman的朋友应该知道,这个简直就是前后端接口调试神器.根据平时的经验以及自己到网上看了相关的帖子,对于postman又有了新的认识. post ...
- Kubernetes(一)初探
Kubernetes是Google开源的容器集群管理系统.它构建于docker技术之上,为容器化的应用提供资源调度.部署运行.服务发现.扩容缩容等整一套功能,本质上可看作是基于容器技术的mini-Pa ...
- 帝国CMS7.2新增多图同时上传插件,上传多图效率更高
原来上传多图文件,需要挨个选择文件,然后再点批量上传,比较麻烦.所以帝国CMS7.2新增了多图上传插件:为采用FLASH方式实现同时选择多个图片一起上传,提高多图上传效率. 帝国CMS多图上传插件特性 ...