(转载)Cocos2dx-OpenGL ES 2.0教程:你的第一个三角形(1)
前言
在本系列教程中,我会以当下最流行的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函数修改成下面的样子:
1 |
bool HelloWorld::init() |
此时,再编译运行之。你将会得到以下界面。
first
发送CustomCommand
由于Cocos2D-X 从3.0开始引入了一种新的渲染机制,所有的OpenGL渲染代码不再放到每一个node的draw函数里面,而是通过各种RenderCommand封装起来,然后添加到一个渲染队列里面去,最后在每一帧结束时把所有的这些命令都渲染出来。具体细节,大家可以参考这个文档.
首先,打开HelloWorldScene.h,添加一个onDraw函数,一个CustomCommand成员变量,并且重载Layer的visit函数,代码如下:
1 |
class HelloWorld : public cocos2d::Layer |
然后我们实现这个visit函数:
1 |
void HelloWorld::visit(cocos2d::Renderer *renderer, const Mat4 &transform,uint32_t parentFlags) |
这里要稍微解释一下。由于此函数是个重载的虚函数,所以我们在函数的最开始调用了父类的visit函数。如果你不调用父类的visit函数,那么当你往HelloWorldScene里面添加节点的时候,它们是不会被渲染出来的。(这个留给读者自己去完成)
然后,我们使用_globalZOrder和一个std::function来初始化CustomCommand。_globalZOrder会影响渲染的顺序,这个在后面的博文中再详细探讨。而std::function会在CustomCommand被render队列处理的时候被调用。最后我们把该CustomCommand添加到renderer里面去。
最后,让我们看看onDraw函数,它是整个绘制三角形的核心。
1 |
void HelloWorld::onDraw() |
如果你现在直接运行程序,会crash。这是因为我们还没有指定Shader,所以下面的调用会失败:
1 |
auto glProgram = getGLProgram(); |
这个调用的含义是从Cocos2D-X的shader缓存中取出一个带有position和color顶点属性的shader,然后传给HelloWorld这个Layer.如果你是第一次接触OpenGL ES,看到这句话肯定无法理解,不过没有关系,后面的文章我们逐步讲清楚。如果你等不及,也可以先看我在文章最后推荐的链接。
接下来,运行一下程序.恭喜你,你的第一个漂亮的三角形完成啦,还算简单吧:)
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
书籍:
OpenGL
ES 2.0 Programming Guide
Real-Time
Rendering, Third Edition
(转载)Cocos2dx-OpenGL ES 2.0教程:你的第一个三角形(1)的更多相关文章
- 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个三角形(1)
前言 在本系列教程中,我会以当下最流行的2D引擎Cocos2d-x为基础,介绍OpenGL ES 2.0的一些基本用法.本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2d-x过程中,知其然 ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体(5)
在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的 ...
- 基于Cocos2d-x学习OpenGL ES 2.0之多纹理
没想到原文出了那么多错别字,实在对不起观众了.介绍opengl es 2.0的不多.相信介绍基于Cocos2d-x学习OpenGL ES 2.0之多纹理的,我是独此一家吧.~~ 子龙山人出了一个系列: ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)
在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了.在这篇文章中,我们不再画三角形了,改为画四边形.下篇教程,我们就可以画立方体了, ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)
在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...
- cocos2d-x OpenGL ES 坐标系总结
很多教程都说cocos2d-x OpenGL ES世界坐标系原点在左下角,但至于为什么在左下角却从来没有人提过,这导致大部分人觉得这是OpenGL ES的规定,事实上这是错的.OpenGL ES的坐标 ...
- [置顶] 使用Android OpenGL ES 2.0绘图之五:添加运动
传送门 ☞ 系统架构设计 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 传送门 ☞ GoF23种设计模式 ☞ 转载请注明 ☞ http://blog.csd ...
- 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解
最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...
- OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解
最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...
随机推荐
- 从医生看病和快餐店点餐理解Node.js的事件驱动
第一个例子是关于医生看病. 在美国去看医生,需要填写大量表格,比如保险.个人信息之类,传统的基于线程的系统(thread-based system),接待员叫到你,你需要在前台填写完成这些表格,你站着 ...
- CF Fox And Two Dots (DFS)
Fox And Two Dots time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- CF Theatre Square
Theatre Square time limit per test 2 seconds memory limit per test 64 megabytes input standard input ...
- MSP430常见问题之复位系统类
Q1:请问msp430 怎么手动复位啊?是不是连到RST/NMI 上?但是这个脚不是和JTAG 连吗?我看到一些资料上说复位的话还要上拉电阻或者复位电路.A1:JTAG 功能只在下载程序时候使用,正常 ...
- 区间求mex的两种方法
区间求mex的两种方法 1.莫队+分块/莫队+二分+树状数组 2.线段树 预处理1-i的sg值(用一个vis数组,一个cur指针) 预处理nxt数组(a[nxt[i]]=a[i]) 枚举左端点l, 考 ...
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
- Apache httpd开启SSL
https://my.oschina.net/xpbug/blog/197454 必要软件 apache httpd 2.4(windows) perl 5 (windows) openssl (wi ...
- ubuntu 更新软件源
ubuntu 更新软件源 修改文件sources.list 位于/etc/apt/sources.list,并备份原文件为sources.list.bak deb http://mirrors.163 ...
- 初话C++模板【用自己的话,解释清楚这些】
用自己的话解释清楚C++的模板编程 模板编程是为了解决什么问题而出现的? 提高代码的重用性,提高代码的利用率. 泛型编程的一种实现. 模板的精神是: 类型参数化. 模板的实现 模板分为:函数模板.类模 ...
- Objective-c中的对象间的消息传递以及消息路由
刚开始使用Objective-C时,总是习惯将对象间发送消息之间称呼为方法调用.心想,这和c#不是一回事吗?不就是调用实例方法吗,还搞个消息发送作甚,最后还不是要转化为方法的调用?通过一段时间的理解学 ...