地球人己阻止不了程序猿们学习cocos2d-x了 (第六篇)

最新推荐文章于 2022-08-09 00:10:48 发布
最新推荐文章于 2022-08-09 00:10:48 发布
阅读量3.4k 收藏
点赞数
分类专栏： cocos2d-x 文章标签： cocos2d-x

转自http://cocos2d.cocoachina.com/bbs/forum.php?mod=viewthread&tid=3527&extra=page%3D1


内容重点: Hello World 3D, 简单的3D 渲染 + MD2 模型


English version:  http://jameshui.com/?p=10

cocos2d-x 是一个2D 遊戏引擎, 当然主要是拿来写2D遊戏, 但有时候我们会想加些简单的3D 物件做效果或一些特殊的用途, 那该怎麽理呢?

OpenGL ES 2.0 开始, 一切的渲染操作都是用 shader 了, 我首先尝试的是用一些网上找到的 shader, 放到一个 CCLayer 里, 然後在 CCLayer 的 draw() 里画一个3D 的盒子, 可惜试了几个不同的 shader 都没成功.

後来再研究了一下 CCSprite 的 draw(), 发现它用的坐标竟然就是3D的(x, y, z). 所以老话说什麽来著, 寻寻觅觅费劲跑到老远去找你爱的人没找著, 其实她就在你身边只是你没发现...

有了这个发现, 接下来就变得容易了, 基本上可以用 cocos2d-x 本来已有的 shader 就可以渲染简单的3D物件.

(注意: 当测试时, 不要用 cocos2d-x 自带的 HelloWorld, 这个例子的 VC 工程少了一些 lib 的设定, 一定要建立一个新的项目)

在这次的例子里, 我建立了一个叫 Layer3D 的 CCLayer 专门用作渲染3D 物件, 这个 layer 用的 shader 在 init()  里设定为"ShaderPositionTexture":
  1. CCGLProgram* program = CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTexture);
  2.                 setShaderProgram(program);
复制代码



我们想渲染一个有贴图的盒子, 所以同时也载入一张贴图:

  1. mTexture = CCTextureCache::sharedTextureCache()->addImage("HelloWorld.png");
复制代码


接下来我们就可以在 Layer3D 的 draw()  里利用 glDrawArrays 来画3D物件了:

  1.         CCDirector::sharedDirector()->setDepthTest(true);   // 1

  3.         ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position | kCCVertexAttribFlag_TexCoords );   // 2

  5.         getShaderProgram()->use();  // 3

  7. ccGLBindTexture2D( mTexture->getName() );    // 4
复制代码

1) 要开了 Depth Test, 不然会分不清盒面的前後次序
2) 告诉系统我们会用上顶点列表和贴图座标列表
3) 调用之前设定的 shader
4) 启用盒子的贴图

  1.         ccVertex3F vertices[4];
  2.         ccVertex2F uv[4];

  4.         glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, 0, vertices);
  5.     glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, uv);


  8.         float x = 0;
  9.         float y = 0;
  10.         float len = 8;

  12.         /// front
  13.         vertices[0] = vertex3(x-len,y-len,len);                
  14.         vertices[1] = vertex3(x-len,y+len,len);
  15.         vertices[2] = vertex3(x+len,y-len,len);
  16.         vertices[3] = vertex3(x+len,y+len,len);

  18.         uv[0] = vertex2(0, 1);
  19.         uv[1] = vertex2(0, 0);
  20.         uv[2] = vertex2(1, 1);
  21.         uv[3] = vertex2(1, 0);

  23.     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

  25.         // right
  26.         vertices[0] = vertex3(x+len,y-len,len);                        
  27.         vertices[1] = vertex3(x+len,y+len,len);
  28.         vertices[2] = vertex3(x+len,y-len,-len);
  29.         vertices[3] = vertex3(x+len,y+len,-len);

  31.         uv[0] = vertex2(0, 1);
  32.         uv[1] = vertex2(0, 0);
  33.         uv[2] = vertex2(1, 1);
  34.         uv[3] = vertex2(1, 0);

  36.         glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

  38.         / back
  39.         vertices[0] = vertex3(x+len,y-len,-len);        
  40.         vertices[1] = vertex3(x+len,y+len,-len);
  41.         vertices[2] = vertex3(x-len,y-len,-len);
  42.         vertices[3] = vertex3(x-len,y+len,-len);

  44.         uv[0] = vertex2(0, 1);
  45.         uv[1] = vertex2(0, 0);
  46.         uv[2] = vertex2(1, 1);
  47.         uv[3] = vertex2(1, 0);

  49.     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

  51.         // left
  52.         vertices[0] = vertex3(x-len,y-len,len);                        
  53.         vertices[1] = vertex3(x-len,y+len,len);
  54.         vertices[2] = vertex3(x-len,y-len,-len);
  55.         vertices[3] = vertex3(x-len,y+len,-len);

  57.         uv[0] = vertex2(0, 1);
  58.         uv[1] = vertex2(0, 0);
  59.         uv[2] = vertex2(1, 1);
  60.         uv[3] = vertex2(1, 0);

  62.         glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
  63.         

  65.         / top
  66.         vertices[0] = vertex3(x+len,y+len,len);        
  67.         vertices[1] = vertex3(x-len,y+len,len);
  68.         vertices[2] = vertex3(x+len,y+len,-len);
  69.         vertices[3] = vertex3(x-len,y+len,-len);

  71.         uv[0] = vertex2(0, 0);
  72.         uv[1] = vertex2(1, 0);
  73.         uv[2] = vertex2(0, 1);
  74.         uv[3] = vertex2(1, 1);

  76.     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

  78.         / bottom
  79.         vertices[0] = vertex3(x+len,y-len,len);        
  80.         vertices[1] = vertex3(x-len,y-len,len);
  81.         vertices[2] = vertex3(x+len,y-len,-len);
  82.         vertices[3] = vertex3(x-len,y-len,-len);

  84.         uv[0] = vertex2(0, 0);
  85.         uv[1] = vertex2(1, 0);
  86.         uv[2] = vertex2(0, 1);
  87.         uv[3] = vertex2(1, 1);

  89.     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
复制代码


座标 (0,0,0) 是萤幕的左下角,  如果我们想把盒子移到其他位置, 就要利用 shader 的 matrix 了, 自己设定 matrix 的内容可是一件头痛的事, 还好 cocos2d-x 里自带了 kazmath 库, 我们可以好好的利用一下:

  1.     kmMat4 matrixP;
  2.     kmMat4 matrixMV;
  3.     kmMat4 matrixMVP;

  5.     kmGLGetMatrix(KM_GL_PROJECTION, &matrixP );
  6.     kmGLGetMatrix(KM_GL_MODELVIEW, &matrixMV );

  8.         kmQuaternion quat;
  9.         kmQuaternionRotationYawPitchRoll(&quat, mYaw, mPitch, mRoll); // 1

  11.         kmMat3 rotation;
  12.         kmMat3RotationQuaternion(&rotation, &quat);  // 2

  14.         kmVec3 translation;
  15.         kmVec3Fill(&translation, 240, 150, 220);  // 3

  17.         kmMat4 rotationAndMove;
  18.         kmMat4RotationTranslation(&rotationAndMove, &rotation, &translation);  // 4

  20.     kmMat4Multiply(&matrixMVP, &matrixP, &matrixMV);
  21.         kmMat4Multiply(&matrixMVP, &matrixMVP, &rotationAndMove);        // 5

  23.         GLuint matrixId = glGetUniformLocation(getShaderProgram()->getProgram(), "u_MVPMatrix");
  24.     getShaderProgram()->setUniformLocationwithMatrix4fv(matrixId, matrixMVP.mat, 1);  // 6
复制代码

1) 设定一个带有 X, Y, Z 叁个轴的旋转资料的 quaternion
2) 把 quaternion 换成 3x3 的 matrix
3) 设定移动的数据
4) 设定一个带有旋转和位移的 4x4 matrix
5) 把上边的 matrix 加入到用作更新 shader 的 matrix 里
6) 更新 shader 的 matrix 
box.png 

当然, 如果可以画盒子, 我们自然也可以画3D 模型, 这里就怀旧一下, 我把以前弄的一个 MD2 (Quake2) 模型类移植了过来:

capture02.png capture01.png 
Screen Shot 2012-08-13 at 11.33.54 AM.png 
Screen Shot 2012-08-13 at 11.33.45 AM.png 

这里我只是随便的弄了一下, 大家可以继续研究研究怎样处理 camera 或是加入 lighting 
偶尔e网事
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Cocos】基础篇-2、3D游戏物体成像的基本原理
学无止境
11-29 884
【Cocos】基础篇-2、3D游戏物体成像的基本原理
Cocos技术派 | 3d人物渲染详细教程
大掌教的Cocos Creator研究院
06-01 6998
Cocos Creator 2.1.1版3d模型导入详细介绍，主要讲解3d基础特性，3d场景操作，3d摄像机属性，3d模型材质贴图设置，动画设置等内容。
使用Cocos2d-x 开发3D游戏
08-12
由CSDN知名博客讲师火云红孩儿创建的火云开发课堂正式开始讲授新的Cocos2d-x v3.7版本中的3D引擎功能模块！
【CocosCreator 3.x】使用 UIMeshRenderer 组件实现 3D 渲染在 UI 上 =＞ 攻略
最新发布
u014206745的博客
08-09 1808
5分钟让你学会使用 UIMeshRenderer 组件实现 3D 模型渲染在 UI 上的效果。
Cocos2d-x 3D模型渲染
Wlk1229
11-11 5563
Cocos2d-x 3D模型渲染 声明：本文使用的是cocos2d-x-3.17的代码 文章中的提到的测试代码下载地址https://gitee.com/Kyle12/Cocos2dRenderStudy 3D模型 Cocos2d支持渲染*.fbx和*.obj两种3D模型，*.obj模型可以直接渲染，*.fbx模型需要先使用官方的转换程序fbx-conv.exe转换成*.c3t或者*.c3...
地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记04 .源码
11-01
本篇将深入探讨"地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记04"中的源码，特别是针对Android平台移植后的源码，并分析如何在Visual Studio（VS）中编译Win32版本。 首先，我们关注的是"FlyGame"这个项目，它...
cocos2d-x-3rd-party-libs-src:cocos2d-x的依存关系
05-28
cocos2d-x第三方库 该存储库包含与cocos2d-x捆绑在一起的第三方库（二进制）的源代码。 对于cocos2d-x开发人员和/或想要： 生成特定库的更新版本（例如：将libpng 1.6.2升级到1.6.14） 将cocos2d-x移植到其他平台...
经典版本 方便下载 源码 旧版本 3.8 官网找不到了 cocos2d-x-3.8.zip
03-14
cocos2d-x 是一个跨平台的游戏开发框架，它基于C++，同时提供了Lua和JavaScript的绑定，让开发者可以方便地在多种操作系统上创建2D游戏、演示程序和其他图形交互应用。这个“cocos2d-x-3.8.zip”压缩包包含的是cocos...
Cocos2d-Lua-社区：基于Cocos2d-x 4.0，打造易用稳定的Cocos2d-x lua引擎
02-03
Cocos2d-Lua社区Cocos2d-Lua-Community是Cocos2d-x 4.0的改进，并且易于使用Lua游戏引擎。 它是与Quick-Cocos2dx-Community v3.7.x兼容的Lua“框架”。得到帮助 QQ群：社区版千人群（1群）号：361920466社区版2群：...
cocos2d-x-3.13.1 spine3.6.zip
04-21
《Cocos2d-x 3.13.1与Spine 3.6集成详解》 Cocos2d-x是一个广泛使用的开源游戏开发框架，它基于C++，同时支持Lua和JavaScript等多种脚本语言，为开发者提供了高效、跨平台的游戏开发解决方案。在3.13.1版本中，...
Cocos2D-X开发学习笔记-渲染框架之图形的绘制
08-04
Cocos2D-X开发学习笔记-渲染框架之图形的绘制 教程地址：http://blog.csdn.net/yangyu20121224/article/details/9748001
[转载] glDrawArrays, glDrawElements
baobaoupup
10-06 389
[转载] glDrawArrays, glDrawElements 2010-09-21 15:13:50 楼主 用户名：admin 名爵：扶正大臣 发帖：178 回帖：128 积分：103151 金币：0 注册：2010-01-23 glDrawA...
码农干货系列【8】--世界上最简单的3D渲染(no webgl)
weixin_33737774的博客
03-10 137
简介 进行上图所示的3D格子地板的渲染，需要进行Canvas的像素级别操作，从视点连接屏幕（屏幕就是canvas）中的所有像素点，形成大量的射线，倘若射线与地板相交，把交点以及交点的颜色反馈给屏幕(canvas)。如下图所示: 像素操作 在进行3D渲染之前，必须了解Canvas的像素操作相关概念。在给定了width和height的canvas上，在坐标(x ,y)上的像素的inde...
Cocos Creator 3D初体验
云飞扬的博客
10-22 4311
同步发布在Cocos论坛 Cocos Creator 3D初体验 官方文档 https://docs.cocos.com/creator3d/manual/zh/ 下载 https://www.cocos.com/creator3d 目前个人使用的版本是v1.1.1，官方已发布v1.2版本 整体的使用感受 UI界面的制作一如既往的便捷高效 对Cocos Creator 2D上手很友好 有自己的3D编辑器 材质系统非常的灵活 当前版本对2D游戏的支持不够完善 目前不太完善的地方 2D方面 不支
cocos2d-x游戏引擎核心之六——绘图原理和绘图技巧
weixin_30594001的博客
11-10 217
一、OpenGL基础 　　游戏引擎是对底层绘图接口的包装，Cocos2d-x 也一样，它是对不同平台下 OpenGL 的包装。OpenGL 全称为 Open Graphics Library，是一个开放的、跨平台的高性能图形接口。OpenGL ES 则是 OpenGL 在移动设备上的衍生版本，具备与 OpenGL 一致的结构，包含了常用的图形功能。Cocos2d-x 就是一个基于 OpenGL ...
使用cocos2dx 实现3D搓牌效果，包括铺平动画
qq_41544618的博客
12-26 7043
使用cocos2dx实现3D搓牌效果，包括铺平动画 前段时间帮朋友做的一个项目中需要实现一个模拟真实的翻牌效果，因为之前没有做过这样的特效，忙活了几天走了不少弯路，终于完美实现了，现将实现过程记录下来。 首先想到的是使用序列帧动画，但这样的话每张牌都要做对应的序列帧，会大大增加资源包的大小，不得已放弃。 后面又想到使用CCScaleTo和CCSequence来实现，即将扑克牌设置为正面，然后
COCOS学习笔记--Cocos引擎渲染流程
热门推荐
RapdoZoroの博客
12-27 1万+
最近在研究Cocos引擎的渲染流程，在这里将其整个渲染流程进行一下梳理： 梳理之前我们要知道一些东西，就是我们的Cocos引擎是通过使用OpenGL的一些API来进行渲染绘制的，所以如果我们要彻底理解Cocos引擎的渲染流程并想修改引擎底层渲染的相关内容，熟悉OpenGL是很有必要的。 这里先简单说一下大概流程，Cocos3.x版本的渲染是将所有需要渲染的node先通过各种RenderComm
Cocos引擎3D优化和BUG问题总结
wang371372的专栏
08-29 1959
     对自己这一年多对cocos底层开发做一个总结。 系统优化     1.批次渲染，cocos3D不支持批次渲染，对应场景类似物体很多（如麻将）的时候，如果采用每个物体绘制一次drallcall会很大，帧率也很低，因此，可以更改cocos源码，提供批次渲染功能，将相似物体的纹理打包成一张图片，批次渲染多个物体。实验发现，对麻将这种多种相似物体的渲染，可大大降低DrallCall(150降...
CocosCreator3D之视角移动
kuokuo666的博客
11-21 5204
摘要 你是否困惑于 CocosCreator3D 的视角与移动？KUOKUO 带你搞定！底部源码相送！ 正文 版本说明 使用 CocosCreator3D 的 1.0.1 版本演示。 模型的移动 在二维和三维的移动控制中，对于平面移动，虽然也都是控制两个方向，但是还采用角度计算的方式会出现很多问题，毕竟还有第三个轴。我们要转变思维，从 Math.sin 与 Math.cos 转变为 Vec3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值