2、cocos2d-x学习笔记——渲染概览

渲染是一个游戏的重要组成部分,给与玩家最直接的体验。渲染做的好,游戏不仅要华丽,还要运行流畅。接下来,我们来看看cocos2d-x的渲染方式。这里只解析渲染流程,不解析优化。

大家都知道,cocos2d-x底层渲染是用的OpenGL ES 2.0,所以在了解Node的渲染之前要先了解一下OpenGL ES的渲染流程。

在游戏中的点,要先将点的坐标转化为世界坐标,再将世界坐标转化为眼睛坐标(观察体上面的坐标),然后将眼睛坐标转化到规范化观察体上面的坐标,最后将规范化观察体上面坐标转化为裁剪坐标。

首先要介绍一下观察体,也就是需要显示的物体的范围所形成的一个立方体。主要有两种观察体,一种是正投影观察体,还有一种是棱台观察体。正投影观察体是一个正方体,里面的点都是平行投影到裁剪坐标系。棱台观察体,模仿人眼观察物体,只是截取后面的棱台。棱台观察体可以经过矩阵变换为正投影观察体。观察体是有边界的。

OpenGL ES的常用规范化观察体坐标系的x、y、z的取值范围为-1到1,通过矩阵变换将观察体上面的点变换到规范化观察体上面,最后投影到裁剪坐标上面。

顶点着色器的输出坐标时标准化标准化观察体上面的坐标。上面的变换只是顶点着色器的简单应用,它还可以用于执行其他的自定义计算(如照明、顶点蒙皮等等)。接下来,对顶点做色器输出的顶点进行图元装配,将定点着色器的输出顶点按设定的图元类型进行绘制。图元类型有点、直线和三角形。然后对超出部分进行裁剪、透视分割,最后进行视口变换。

接着进行光栅化,取得所有图元,并为所有图元生成对应的片段即点。然后将所有点提交给片段着色器,经过片段着色器的处理后输出所有片段的颜色值,最后就是片段操作,有裁剪区域测试,模板深度测试,深度缓冲区测试,多重采样,混合,抖动。

以上简单的介绍了一下OpenGL ES 的渲染流程(如果你想了解的更清楚可以购买《OpenGL ES 2.0 编程指南》这本书),cocos2d-x是在Open GL ES 的基础上进行包装的,肯定也少不了上述流程。那么,现在,我们一起来看看它是如何实现渲染的。

在渲染开始之前,要做好渲染准备,首先创建GLView,也就是用于渲染的窗口,除了苹果要在CAEAGLLayer的基础上面创建外,其他的可以通过EGL创建窗口。创建完之后,将GLView交给Director管理,来看看setOpenGLView函数这个函数做了什么。它输出了GPU的支持信息;在setGLDefaultValues函数里面开启像素颜色混合(像素颜色混合:有使透明像素有透明效果等效果,关闭后透明像素没有透明效果),关闭了深度测试(深度测试:使前面的物体对后面的图元有遮挡效果。关闭后,后绘制的图元先显示),接着在setProjection函数里面设置了viewprot(视口的位置,大小)的值,还设置了眼睛到规范化观察体的转换矩阵,并将其压入MATRIX_STACK_PROJECTION栈中,设置了点坐标到眼睛坐标的转化矩阵,并将其压入MATRIX_STACK_MODELVIEW栈中;接着在initGLView函数里面设置了VBO(vertex buffer object,顶点缓冲区对象,在图形内存中缓存定点数据,减少CPU和GPU之间复制的数据量,获得更好的性能)VAO(vectex array object顶点数组对象,仅在mac或者iphone上调用,保存顶点缓冲区所有绑定和启用的客户顶点状态);最后初始化了FBO(frame buffer object,帧缓冲区对象,缓存一组颜色、深度、模板、纹理和渲染目标,用于性能优化)。

准备做好之后,便开始渲染。渲染放在主循环里面,以便于每一帧都对对象进行渲染。我们来看看Director的mainLoop函数,与渲染有关的是drawScene函数,我们只看与渲染有关的代码。首先,renderer调用了clear函数清理了上一帧的颜色缓冲区和深度缓冲区,然后调用clearAllFBOs函数清理了上一帧所有的帧缓冲区对象的缓冲数据,接着调用clearDrawStats函数将批渲染和顶点个数清0,然后当前场景调用render函数开始渲染当前帧,也就是当前场景的渲染,最后将渲染的图像推送到屏幕上面。

我来看看Scene的render函数,这个函数绘制整个游戏场景。在scene的构造函数里面,创建了一个默认的camera,并把camera加入了scene中,而在camera的OnEnter函数里面,将相机加入了scene的_cameras成员函数中。这样,在遍历scene中相机的时候,就有一个默认的相机。接下来看看遍历相机时的操作,首先,相机调用apply函数启用FBO和viewport,接着清理了相机的背景深度,然后调用了visit遍历了每个节点,并根据传过来的父节点转化矩阵(这个矩阵存储物体坐标系到世界坐标系的变换矩阵、缩放矩阵和翻转矩阵)将每个节点转换矩阵更新,还调用draw函数将需要渲染的图元(RenderCommand类)加入渲染队列,接着调用renderer的render函数渲染图元,将需要批量渲染的图元批量渲染,这样可以减少顶点提交次数,达到渲染优化的效果,并在渲染完成后将渲染图元删除。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容