(转载)Cocos2dx-OpenGL ES 2.0教程:你的第一个三角形(1)
2015-11-17 21:13
585 查看
前言
在本系列教程中,我会以当下最流行的2D引擎Cocos2D-X为基础,介绍OpenGL ES 2.0的一些基本用法。本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2D-X过程中,知其然,更知其所以然。因为我自己的图形学水平有限,所以这些教程不会涉及非常底层的数学原理,同时也不会过多地提及OpenGL本身的一些细节知识。但是我会在每篇文章的最后给出一些参考链接,大家可以顺藤摸瓜,一举Get OpenGL这个新技能。我第一次学习OpenGL是在2008年,但是那时候学得很烂,被各种矩阵变换搞得云里雾里。我于今年年初彻底重新学习OpenGL,目前来讲,应该算是入门了,至少矩阵变换是理解了,同时也会自己写一些简单的shader,可以进行OpenGL调试了。但是,我的学习之路才刚刚开始,我希望在我自己学习的过程,把有用的一些知识记录下来,方便自己和他人查阅。经过这次重新学习,我个人觉得,OpenGL真的没有那么难,只要你用心,就一定可以学会。当然,好的学习方法和好的学习资料肯定是会使之事半功倍的,希望接下来我的这些博文能为大家带来些许帮助。
在第一篇文章正式开始前,我谈下我自己的入门心得体会吧,而《如何学习OpenGL》这是个更大的话题,等我OpenGL水平精进之后,我再单独写一篇文章来谈谈我的看法。
目前来说,我的体会是“三要”和“三不要”。
要理解OpenGL渲染管线
要理解OpenGL是个状态机
要多动手实践。
当然还有最重要的“三不要”:
不要每天去群里问怎样最快能学好OpenGL
不要每天去看各种资料而不动手写一点代码
不要出了问题到处问,尝试先自己解决,实在解决不了再问
正文
准备工作
首先,是创建一个新的工程(注意我这里使用的版本是3.7. Update: Tuesday, June 16, 2015)。打开命令行工具,然后输入下列命令:1 | cocos new -l cpp |
编译并运行成功,然后把HelloWorldScene.cpp里面的init函数修改成下面的样子:
12 | bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !Layer::init() ) { return false; } return true; } |
![](http://guanghuiqu.qiniudn.com/cocos2d-x-es-1.0.png)
first
发送CustomCommand
由于Cocos2D-X 从3.0开始引入了一种新的渲染机制,所有的OpenGL渲染代码不再放到每一个node的draw函数里面,而是通过各种RenderCommand封装起来,然后添加到一个渲染队列里面去,最后在每一帧结束时把所有的这些命令都渲染出来。具体细节,大家可以参考这个文档.首先,打开HelloWorldScene.h,添加一个onDraw函数,一个CustomCommand成员变量,并且重载Layer的visit函数,代码如下:
12 | class HelloWorld : public cocos2d::Layer { public: //其它函数省略 virtual void visit(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags) override; void onDraw(); private: CustomCommand _command; }; |
12 | void HelloWorld::visit(cocos2d::Renderer *renderer, const Mat4 &transform,uint32_t parentFlags) { Layer::visit(renderer, transform, parentFlags); _command.init(_globalZOrder); _command.func = CC_CALLBACK_0(HelloWorld::onDraw, this); Director::getInstance()->getRenderer()->addCommand(&_command); } |
然后,我们使用_globalZOrder和一个std::function来初始化CustomCommand。_globalZOrder会影响渲染的顺序,这个在后面的博文中再详细探讨。而std::function会在CustomCommand被render队列处理的时候被调用。最后我们把该CustomCommand添加到renderer里面去。
最后,让我们看看onDraw函数,它是整个绘制三角形的核心。
12 | void HelloWorld::onDraw() |
12 | auto glProgram = getGLProgram(); glProgram->use(); glProgram->setUniformsForBuiltins(); ``` 接下来,让我们在HelloWorldScene.cpp的init方法中加入下列代码: ```cpp this->setGLProgram(GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR)); |
接下来,运行一下程序.恭喜你,你的第一个漂亮的三角形完成啦,还算简单吧:)
![](http://guanghuiqu.qiniudn.com/cocos2d-x-es-1.1.png)
cocos2d-x-es-1.1
本教程源代码下载,请认准tutorial1分支。
Git仓库地址: https://git.oschina.net/zilongshanren/Cocos2D-X-OpenGL-ES-2.0
结束语
为了保持第一篇文章的简单性,我只在画三角形的代码里面给了一些注释,因为我并不想一开始就涉及到OpenGL底层的一些细节,而且有些内容我一时半会儿也很难说清楚。所以,我会在文章的最后给出一些参考链接,强烈推荐大家在看完本文后,有时间就多看一看这些链接,相信对理解上面的代码有帮助。下一篇文章中,我将给大家介绍如何编写自己的shader,包括vertex attribute, uniform,vertex shader, fragment shader等内容。如果您对本文有什么建议或者意义,欢迎在下方评论。写在最后
关于参考链接:所有的推荐阅读都是我精心挑选的,部分内容我自己看过,另外一些我也正在计划看。如果大家有好的资料,欢迎推荐给我。关于评论:请不要找我要电子书,所有的电子书都可以通过google找到。
另外,我推荐的资料大部分都是英文版,如果对英文不是很感冒的同学,可以看翻译的版本。
推荐阅读
网站:http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter01.html
http://www.opengl-tutorial.org/
http://antongerdelan.net/opengl/index.html
http://www.arcsynthesis.org/gltut/
http://www.scratchapixel.com/
http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html
视频:
https://www.youtube.com/watch?v=-tonZsbHty8&index=26&list=PLRwVmtr-pp06qT6ckboaOhnm9FxmzHpbY
书籍:
Iphone
3D programming
OpenGL
ES 2.0 for Android
OpenGL
ES 2.0 Programming Guide
Real-Time
Rendering, Third Edition
相关文章推荐
- Cocos2d-x shader学习1: 灰度shader
- cocosPods 遇到的问题
- 实习小白::cocos2d-x 2.2 study ---------- 双击事件处理
- Cocos-2d js 多个精灵都调用同一个动作 执行不成功(加“.copy()“)
- cocos2d-x 2.2 study ------------------------ 双击事件(转)
- cocos2d 游戏引擎发展历史
- cocos2dx之Lua调用C++
- cocos2dx之Lua调用C++
- 使用BabeLua3.x在cocos2d-x中编辑和调试Lua
- cocos2d-lua class 方法解释
- cocospush android
- cocos中类扩展的坑
- cocos2dx之C++调用Lua
- cocos2dx之C++调用Lua
- iOS 使用cocospods 引入第三方库出错
- Cocos2D:塔防游戏制作之旅(十八)
- Cocos2D:塔防游戏制作之旅(十八)
- Cocos2D:塔防游戏制作之旅(十八)
- Cocos2D:塔防游戏制作之旅(十七)
- Cocos2D:塔防游戏制作之旅(十七)