Cocos2dx-OpenGL ES2.0教程:你的第一个立方体(5)

Cocos2dx-OpenGL ES2.0教程:你的第一个立方体(5),第1张

概述在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率。 本教程将带领大家一起走进3D–绘制一个立方体。其实画立方体本质上和画三角形没什么区别,所有的模型最终都要转换为三角形。 同时,本文还会介绍如何通过修改MVP矩阵来让此立方体不停地旋转。另外,大家还可以动手去修改本教程的示例代码,借此我们可以更加深入地理解OpenGL的normalized de

在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率。

本教程将带领大家一起走进3D–绘制一个立方体。其实画立方体本质上和画三角形没什么区别,所有的模型最终都要转换为三角形。

同时,本文还会介绍如何通过修改MVP矩阵来让此立方体不停地旋转。另外,大家还可以动手去修改本教程的示例代码,借此我们可以更加深入地理解OpenGL的normalized device space。

准备立方体数据

在开始真正的绘制代码之前,我们先要准备好数据。首先,我们需要改进的是代表顶点属性的结构体:

1234
 typedef struct {        float position[3];        float color[4];} Vertex;

这里,我们把position从一个长度为2的数组变成了一个长度为3的数组,用于存储顶点的xyz的值。

接下来是顶点数据,因为一共有6个面。每个面由二个三角形组成,因此需要4个顶点,那么整个立方体就需要4*6=24个顶点。

123456789101112131415161718192021222324252627282930313233
Vertex data[] =   {       // Front       { {1,-0},{0,87)">1}},       { {       { {-       // Back       { {2},153)">// left       { {-// Right       { {// top       { {// Bottom       { {1}}   };

接下来,当然是最重要的VBO索引啦:

1234567891011121314151617181920
glubyte indices[] = {       // Front       2,       3,153)">// Back       4,87)">5,87)">6,87)">7,153)">// left       8,87)">9,87)">10,87)">11,153)">// Right       12,87)">13,87)">14,87)">15,153)">// top       16,87)">17,87)">18,87)">19,153)">// Bottom       20,87)">21,87)">22,87)">23,87)">20   };

最后,由于我们修改了顶点属性,所以我们要相应地修改vertex shader和glVertexAttribPointer的调用:

12345678910111213141516171819
    glVertexAttribPointer(positionLocation,                                                    GL_float,                          GL_FALSE,                          sizeof(Vertex),                          (GLvoID*)offsetof(Vertex,position));//下面是vertex shaderattribute vec3 a_position;  //注意之前我们使用的是vec2attribute vec4 a_color;varying vec4 v_fragmentcolor;voID main(){    gl_position = CC_MVPMatrix * vec4(a_position.xyz,1);  //这里用swizzle的时候是xyz    v_fragmentcolor = a_color;}

此时,编译运行,你会得到如下结果 :

cube01

别诧异,这就是一个立方体,只不过现在它离我们的“眼睛”(Cemera)很近,所以我们只能看到一个面。接下来,让我们修改一个modelVIEw矩阵,让它离我们的camera远一点。

让立方体动起来

我们有很多方法可以让立方体转起来。比如直接修改modelVIEw矩阵,也可以使用modelVIEw配合projection矩阵。

首先,是最简单的方法,我们把整个立方体数据先缩小一半,然后再往-z轴方向移动0.5个单位,最后让它围绕着x轴不停地旋转。

1234567891011
modelVIEwMatrix.scale(0.5);modelVIEwMatrix.translate(0.0,87)">0.5);static float rotation = 0;modelVIEwMatrix.rotate(Vec3(0),CC_degrees_TO_radians(rotation));rotation++;if (rotation < 360) {    rotation = 0;}Director::getInstance()->multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW,modelVIEwMatrix);

注意,这里我们 *** 纵顶点的取值范围只能是-1~+1,xyz每一个轴都是这样。超出这个区域(normalized device space)就会裁剪掉。但是我们实际 *** 作一个物体的移动的时,肯定不可能局限于这么小的范围,我们可以通过modelVIEw和projection矩阵来定义一个更好用的坐标系,然后基于这个坐标系去指定物体的坐标。
比如cocos2d-x里面,通过下列代码指定了自己的坐标系范围在(0~size.wIDth)和(0~size.height)之间。

1234567891011121314
case Projection::_3D:{    float zeye = this->getZEye();    Mat4 matrixPerspective,matrixLookup;    loadIDentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);    // issue #1334    Mat4::createPerspective(60,(GLfloat)size.wIDth/size.height,zeye+size.height/    multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,matrixPerspective);    Vec3 eye(size.wIDth/2,size.height/2,zeye),center0.0f),153)">up(0.0f,1.0f,0.0f);    Mat4::createLookAt(eye,center,up,&matrixLookup);    multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,matrixLookup);    loadIDentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);    break;}

这里面,我们可以直接拿来用,也可以自己再写一个。下面是我用的代码:

123456789101112131415
Mat4 projectionMatrix;Mat4::createPerspective(480/320,87)">1.0,87)">42,&projectionMatrix);Director::getInstance()->multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,projectionMatrix);Mat4 modelVIEwMatrix;Mat4::createLookAt(Vec3(1),Vec3(modelVIEwMatrix.translate(5);0;}Director::getInstance()->multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW,95)"> 这里我让camera的位置位于(0,0,1),然后看着(0,0)点,并且头朝上(0,1,0)。大家可以尝试去修改createLookAt的参数,看看每一个参数具体是什么意思。这里有一个非常不错的程序介绍View Frustum的,强烈推荐!

最终效果:(如果你看不到,请升级你的浏览器!!!)

结语

附上本教程源码,从下篇文章开始,我们将介绍纹理映射。

推荐阅读 Iphone OpenGL ES 2.0开发指引 总结

以上是内存溢出为你收集整理的Cocos2dx-OpenGL ES2.0教程:你的第一个立方体(5)全部内容,希望文章能够帮你解决Cocos2dx-OpenGL ES2.0教程:你的第一个立方体(5)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1074944.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)