在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix。它其实是一个uniform,每一个Cocos2d-x预定义的shader都包含有这个uniform,但是如果你在shader里面不使用这个变量的话,OpenGL底层会把它优化掉。

但是,CC_MVPMatrix是在什么时候设置进来的呢?我在shader里面明明没有看到它,它从哪儿来的?别急,请继续往下读。

初识Uniform

在回答上面几个问题之前,让我们先来介绍一下什么是uniform。简单来说,uniform是shader里面的一种变量,它是由外部程序设置进来的,它不像vertex的attribute,每个顶点都有一份数据。除非你显式地调用glUniformXXX函数来修改这个uniform的值,否则它的值恒定不变。接下来,让我们修改myFragmentShader.frag,给它添加一个新的uniform数据:

varying vec4 v_fragmentColor;

uniform vec4 u_color;

void main()
{
gl_FragColor = v_fragmentColor * u_color;
}

此时,我们需要在程序里面给这个u_color传值。它的基本做法与attribute的传值是一样的。

首先,我们需要获得这个uniform在shader里面的位置。

GLuint uColorLocation = glGetUniformLocation(glProgram->getProgram(), "u_color");

然后,我们可以通过glUniformXXX函数给这个uniform赋值:

float uColor[] = {1.0, 0.0, 0.0, 1.0};
glUniform4fv(uColorLocation,, uColor);

此时,我们就在C++代码和shader程序之间传递数据啦。编译并运行,我们会得到一个半红不红的三角形:

初识CC_MVPMatrix

CC_MVPMatrix是一个mat4类型的uniform,在shader代码被编译之前,它由Cocos2d-x框架插入进来的。

bool GLProgram::compileShader(GLuint * shader, GLenum type, const GLchar* source)
{
//部分代码省略
const GLchar *sources[] = {
#if (CC_TARGET_PLATFORM != CC_PLATFORM_WIN32 && CC_TARGET_PLATFORM != CC_PLATFORM_LINUX && CC_TARGET_PLATFORM != CC_PLATFORM_MAC)
(type == GL_VERTEX_SHADER ? "precision highp float;\n" : "precision mediump float;\n"),
#endif
"uniform mat4 CC_PMatrix;\n"
"uniform mat4 CC_MVMatrix;\n"
"uniform mat4 CC_MVPMatrix;\n"
"uniform vec4 CC_Time;\n"
"uniform vec4 CC_SinTime;\n"
"uniform vec4 CC_CosTime;\n"
"uniform vec4 CC_Random01;\n"
"uniform sampler2D CC_Texture0;\n"
"uniform sampler2D CC_Texture1;\n"
"uniform sampler2D CC_Texture2;\n"
"uniform sampler2D CC_Texture3;\n"
"//CC INCLUDES END\n\n",
source,
};
*shader = glCreateShader(type);
glShaderSource( *shader, sizeof(sources)/sizeof( *sources), sources, nullptr);
glCompileShader( *shader);
//下面的代码省略了...
}

从上面的代码,我们可以看到, 这里除了插入CC_MVPMatrix以外,还插入了其它一些uniform。只要你在后面的main函数里面不使用这些变量,最终shader program里面是看不到它们的。(被优化掉了)

CC_MVPMatrix的作用

CC_MVPMatrix本质上是一个变换矩阵,用来把一个世界坐标系中的点转换到Clipping space。当然,如果学过OpenGL的人都知道,3D物体从建模到最终显示到屏幕上面要经历以下几个阶段

对象空间(Object Space)
世界空间(World Space)
照相机空间(Camera Space/Eye Space)
裁剪空间(Clipping Space)
设备空间(normalized device space)
视口空间(Viewport)

从对象空间到世界空间的变换通常叫做Model-To-World变换,从世界空间到照相机空间的变换叫做World-To-View变换,而从照相机空间到裁剪空间的变换叫做View-To-Projection。合起来,就是我们常常提到的MVP变换。这里面每一个变换都是乘以一个矩阵,3个矩阵相乘最后还是一个矩阵,也就是Cocos2d-x里面的CC_MVPMatrix啦。当然,实际开发过程中,我们往往会把MV变换放到一起,一般做法如下:

gl_Position = P * MV * ObjectPosition;

具体这些变换是怎么计算的,另外每一个计算的几何意义是什么。本系列教程暂不讨论,感兴趣的读者可以去看看我在本系列教程第一篇的最后推荐的一些资源。

修改CC_MVPMatrix

我们怎么样修改CC_MVPMatrix呢?前面介绍过uniform变量的修改方法在这里是适用的,我们可以先通过glGetUniformLocation来获取这个uniform的入口,然后调用glUniformMatrix4fv来给它传值就行了。

但是,等等。我该怎么计算这个矩阵的值呢?有两个函数glLookAt和glPerspective可以做这些事,具体的用法 ,大家可以参考CCDirector.cpp里面的代码。我就不在此处展开讨论了,另外强烈推荐大家运行此网页中的一个演示程序,用来加深于这两个函数的理解。

在Cocos2d-x里面,我们可以通过修改矩阵栈里面的ModelView和Projection栈顶元素,从而修改ModelView和Projection矩阵,最终达到修改CC_MVPMatrix的目的。

首先,让我们在onDraw函数的最开头加入下列代码:

// 将当前的模型视图矩阵入栈(在栈中保存一份当前模型视图矩阵的拷贝)
Director::getInstance()->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
// 将当前的模型视图矩阵重置为单位矩阵
Director::getInstance()->loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
Director::getInstance()->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
Director::getInstance()->loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);

然后在onDraw函数返回前加入下列代码:

// 恢复投影矩阵和模型视图矩阵
Director::getInstance()->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
Director::getInstance()->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);

这里,我们通过调用pushMatrix把当前矩阵压栈,这个操作会把原来栈顶上的元素拷贝一份并压入栈,这样我们后续对于此矩阵的操作可以通过调用popMatrix来撤销影响。此处,我们把ModelView和Projection矩阵都重置成了单位矩阵。而我们通过调用下列代码可以更新CC_MVPMatrix:

glProgram->setUniformsForBuiltins();

此时,如果我们运行程序,会得到一个黑屏(什么也显示不了)。

设备空间(normalized device space)

为了解决上述问题,我们只需要把对象的顶点数据修改为:

float vertercies[] = { -,-,   //第一个点的坐标
, -, //第二个点的坐标
, }; //第三个点的坐标

为什么要这样呢?因为任何一个顶点乘以一个单位矩阵,它的值是不变的。而normalized device space空间的取值范围是-1~+1,而原来,顶点不是乘以单位矩阵,而是乘以了MVP变换矩阵,顶点坐标被正确转换为设备坐标显示出来了。如下图所示:

所以,如果我们要想显示同之前一模一样的三角形,就必须修改这个顶点数据,让它的取值范围落在Clipping Space以内。这也是我们在其它许多书本上面看到的规范的三角形的范例。

结语

最后,按照惯例,附上本教程的源码下载地址

推荐阅读

https://www.youtube.com/watch?v=-tonZsbHty8&index=26&list=PLRwVmtr-pp06qT6ckboaOhnm9FxmzHpbY

http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

http://blog.db-in.com/cameras-on-opengl-es-2-x/ (强烈推荐)

基于Cocos2d-x学习OpenGL ES 2.0系列——初识MVP(3)的更多相关文章

  1. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  2. 基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)

    在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了.在这篇文章中,我们不再画三角形了,改为画四边形.下篇教程,我们就可以画立方体了, ...

  3. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个三角形(1)

    前言 在本系列教程中,我会以当下最流行的2D引擎Cocos2d-x为基础,介绍OpenGL ES 2.0的一些基本用法.本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2d-x过程中,知其然 ...

  4. 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备(7)

    Cocos2d-x底层图形绘制是使用OpenGL ES协议的.OpenGL ES是什么呢? OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API的子集 ...

  5. 基于Cocos2d-x学习OpenGL ES 2.0系列——编写自己的shader(2)

    在上篇文章中,我给大家介绍了如何在Cocos2d-x里面绘制一个三角形,当时我们使用的是Cocos2d-x引擎自带的shader和一些辅助函数.在本文中,我将演示一下如何编写自己的shader,同时, ...

  6. 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之LayerColor(8)

    在前面文章中讲述了Cocos2d-x引擎OpenGL渲染准备Shader方面,本文主要讲解使用LayerColor来讲述OpenGL的渲染过程. 1.LayerColor对象创建 添加LayerCol ...

  7. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体(5)

    在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的 ...

  8. 基于Cocos2d-x学习OpenGL ES 2.0之多纹理

    没想到原文出了那么多错别字,实在对不起观众了.介绍opengl es 2.0的不多.相信介绍基于Cocos2d-x学习OpenGL ES 2.0之多纹理的,我是独此一家吧.~~ 子龙山人出了一个系列: ...

  9. OpenGL ES 2.0 渲染管线 学习笔记

    图中展示整个OpenGL ES 2.0可编程管线 图中Vertex Shader和Fragment Shader 是可编程管线: Vertex Array/Buffer objects 顶点数据来源, ...

随机推荐

  1. [转]好用工具:Oracle SQL Developer

    我們一直以來就很少使用 Oracle 資料庫,一年下來也頂多 1 ~ 2 個案子採用 Oracle 的資料庫,所以一直都對 Oracle 資料庫的操作不太熟悉,尤其是用 Oracle 內建的那些超難用 ...

  2. Head first 第一章

    一.两个设计原则: 原则一:找出应用中可能需要变化之处,把他们独立出来,不要和那些不需要变化的代码混在一起. 鸭子模型中展现是必须的,而且每个展现都不一样,所以可以在基类中定义一个抽象类.以便子类可以 ...

  3. jsp c标签不遍历的方法

    生产中遇到过不需要遍历的事情. 一般遍历必须要 <c:forEach items="${resultObj.xxx}" var="data" varSta ...

  4. 网络虚拟化(SDN,NFV..)和企业骨干网的演化

    本来昨天就规划了今天的这篇文章,无奈昨天中午自己喝了将近一瓶的52度二锅头...晚上想着今天怎么着也完了,要颓废难受一天了...没想到早上居然一点都不难受了.于是就写下了本文.正文之前,还是做个广告, ...

  5. js 函数参数 arguments[0]

    function box() {            return arguments[0] + '|' + arguments[1];                    }        al ...

  6. 抽取、转换和装载介绍(七)管理ETL环境(待续)

    数据仓库的目标之一是能够为增强业务功能提供适时的.一致的和可靠的数据. 为了达到上述目标,ETL必须按照下述三条标准不断地加以完善: 可靠性 可用性 易管理性 子系统22--作业调度器 子系统23-- ...

  7. [LintCode]各位相加

    描述: 给出一个非负整数 num,反复的将所有位上的数字相加,直到得到一个一位的整数. 给出 num = 38. 相加的过程如下:3 + 8 = 11,1 + 1 = 2.因为 2 只剩下一个数字,所 ...

  8. 奇妙的go语言(面向对象)

    [ 声明:版权全部.欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 有过C++语言学习经历的朋友都知道.面向对象主要包含了三个基本特征:封装.继承和多态.封装,就 ...

  9. Linux下如何查看tomcat是否启动/系统日志等

    Linux下如何查看tomcat是否启动/系统日志等 查看tomcat是否启动 ps -ef | grep tomcat  或者  ps -ef | grep java 启动tomcat(在tomca ...

  10. 传说中的纯CSS圆角代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...