上一篇文章中,我在介绍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数据:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  1. varying vec4 v_fragmentColor;
  2. uniform vec4 u_color;
  3. void main()
  4. {
  5. gl_FragColor = v_fragmentColor * u_color;
  6. }

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

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

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

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

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

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

triangle

初识CC_MVPMatrix

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

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  1. bool GLProgram::compileShader(GLuint * shader, GLenum type, const GLchar* source)
  2. {
  3. //部分代码省略
  4. const GLchar *sources[] = {
  5. "uniform mat4 CC_PMatrix;\n"
  6. "uniform mat4 CC_MVMatrix;\n"
  7. "uniform mat4 CC_MVPMatrix;\n"
  8. "uniform vec4 CC_Time;\n"
  9. "uniform vec4 CC_SinTime;\n"
  10. "uniform vec4 CC_CosTime;\n"
  11. "uniform vec4 CC_Random01;\n"
  12. "uniform sampler2D CC_Texture0;\n"
  13. "uniform sampler2D CC_Texture1;\n"
  14. "uniform sampler2D CC_Texture2;\n"
  15. "uniform sampler2D CC_Texture3;\n"
  16. "//CC INCLUDES END\n\n",
  17. source,
  18. };
  19. *shader = glCreateShader(type);
  20. glShaderSource( *shader, sizeof(sources)/sizeof( *sources), sources, nullptr);
  21. glCompileShader( *shader);
  22. //下面的代码省略了...
  23. }

从上面的代码,我们可以看到, 这里除了插入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变换放到一起,一般做法如下:

  1. 1
  1. 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函数的最开头加入下列代码:

  1. 1
  2. 2
  3. 3
  4. 4
  1. Director::getInstance()->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  2. Director::getInstance()->loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  3. Director::getInstance()->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
  4. Director::getInstance()->loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);

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

  1. 1
  2. 2
  1. Director::getInstance()->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
  2. Director::getInstance()->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);

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

  1. 1
  1. glProgram->setUniformsForBuiltins();

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

设备空间(normalized device space)

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

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

为什么要这样呢?因为任何一个顶点乘以一个单位矩阵,它的值是不变的。而normalized device space空间的取值范围是-1~+1,如下图所示:

clippingspace

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

(转载)Cocos2dx-OpenGL ES2.0教程:初识MVP(3)的更多相关文章

  1. Cocos2d-x中使用OpenGL ES2.0编写shader

    这几天在看子龙山人的关于OpenGL的文章,先依葫芦画瓢,能看到些东西,才能慢慢深入了解,当入门文章不错,但是其中遇到的一些问题,折腾了一些时间,为了方便和我一样的小白们,在这篇文章中进行写补充. O ...

  2. OpenGL ES2.0 入门经典例子

    原文链接地址:http://www.raywenderlich.com/3664/opengl-es-2-0-for-iphone-tutorial 免责申明(必读!):本博客提供的所有教程的翻译原稿 ...

  3. iOS开发——图形编程OC篇&OpenGL ES2.0编程步骤

    OpenGL ES2.0编程步骤 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌入式设备而设 ...

  4. Eclipse中通过Android模拟器调用OpenGL ES2.0函数操作步骤

    原文地址: Eclipse中通过Android模拟器调用OpenGL ES2.0函数操作步骤 - 网络资源是无限的 - 博客频道 - CSDN.NET http://blog.csdn.net/fen ...

  5. OpenGL ES2.0入门详解

    引自:http://blog.csdn.net/wangyuchun_799/article/details/7736928  1.决定你要支持的OpenGL ES的版本.目前,OpenGL ES包含 ...

  6. OPENGL ES2.0如何不使用glActiveTexture而显示多个图片

    https://www.oschina.net/question/253717_72107 用opengl es 2.0显示多个图片的话,我只会一种方式,先将图片生成纹理,然后用下面的方式渲染 // ...

  7. Android +NDK+eclipse+opengl ES2.0 开启深度測试

    參考:https://www.opengl.org/discussion_boards/showthread.php/172736-OpenGL-ES-Depth-Buffer-Problem 环境: ...

  8. OpenGL ES2.0 基本编程

    1. EGL OpenGL ES命令须要一个rendering context和一个drawing surface. Rendering Context: 保存当前的OpenGL ES状态. Draw ...

  9. (转载)Cocos2dx-OpenGL ES 2.0教程:你的第一个三角形(1)

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

随机推荐

  1. Java Classloader原理分析

       类的加载过程指通过一个类的全限定名来获取描述此类的二进制字节流,并将其转化为方法区的数据结构,进而生成一个java.lang.Class对象作为方法区这个类各种数据访问的入口.这个过程通过Jav ...

  2. poj 2585 拓扑排序

    这题主要在于建图.对9个2*2的小块,第i块如果出现了不等于i的数字,那么一定是在i之后被brought的.可以从i到该数字建一条边. 图建好后,进行一次拓扑排序,判段是否存在环.若存在环,那么就是B ...

  3. windows 端搭建nfs 服务器

    因为最近虚拟机桥连模式总是用不了会出问题,所以今天花了半个小时研究了一下在Windows主机下搭建一个nfs服务器进行文件传输. 其实步骤很简单,如下: 1. 下载NFS Windows服务器软件,我 ...

  4. java url中文 编译和解码

    js到servlet: js端 var minename='中文'; minename=encodeURI(encodeURI(minename)); java servlet 端 String na ...

  5. Ajax中解析Json的两种方法详解

    eval();  //此方法不推荐 JSON.parse();  //推荐方法 一.两种方法的区别 我们先初始化一个json格式的对象: var jsonDate = '{ "name&qu ...

  6. 初学JSP+Servlet常见的错误

    web编程中常见的错误: 一.404(要访问的资源没有找到) 1.web程序有没有部署(将项目到tomcat中) 2.url有没有写错(包括大小写,包括项目有没有重命名) 3.有没有将jsp/html ...

  7. Spring(3.2.3) - Beans(10): 生命周期

    Spring 容器可以管理 singleton 作用域 Bean 的生命周期,容器能够跟踪 Bean 实例的创建.销毁.管理 Bean 生命周期行为主要有两个时机: 注入 Bean 的依赖关系之后 即 ...

  8. JQuery合并列(可用于导出Word)

    在网上找了一些JQuery合并列的例子,但是都是用.hide()的方式,这样导致了在导出Word的时候表格严重变形 自己写了一个用.remove()方式的合并列 function arrangeTab ...

  9. HDOJ2008数值统计

    数值统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. 一个简单的Makefile的编写【用自己的话,解释清楚这些】

    用自己的话,解释清楚这些~ Makefile是程序员编写出来指导编译器编译程序源码为目标文件(可执行文件,或链接库) 这里只写一个简单的Makefile 作为例子 其需求如下: frank@ubunt ...