OpenGL ES2.0教程：编写自己的shader(2)

1
2
3
4
5
6
7
8
9
10

attribute vec4 a_position; a_color;  varying v_fragmentColor;  void main() {  gl_Position = CC_MVPMatrix * a_position;  v_fragmentColor = a_color; } 

gl_FragColor = v_fragmentColor; } 

fragment shader中也有一个main函数，同时我们看到这里也声明了一个与vertex shader相同的变量v_fragmentColor。前面我们讲过，这个变量是用来在vertex shader和fragment shader之间传递数据用的。所以，它们的参数类型必须完全相同。如果一个是vec3,一个是vec4，shader编译的时候是会报错的。而gl_FragColor我们知道它肯定是一个系统内置变量了，它的作用是定义最终画在屏幕上面的像素点的颜色。我们回过头去看上一篇文章中画出来的三角形，我们指定的是三个顶点的颜色，分别为Red,Green和Blue，但是最后的三角形的颜色是通过这三个点的颜色插值出来的。因为最终三角形的像素点可不只有三个，理解这一点非常重要。

最后，让我们修改一下shader progam的创建代码：

 //create my own program  auto program = new GLProgram;  program->initWithFilenames("myVertextShader.vert", "myFragmentShader.frag");  link();  //set uniform locations  updateUniforms(); 

编译并运行，此时你会得到和之前效果一样的三角形。

下图解释了我们的顶点数据是如何渲染成最终屏幕上面的像素的：

VAO和VBO初探

VBO，全名Vertex Buffer Object。它是GPU里面的一块缓冲区，当我们需要传递数据的时候，可以先向GPU申请一块内存，然后往里面填充数据。最后，再通过调用glVertexAttribPointer把数据传递给Vertex Shader。而VAO，全名为Vertex Array Object，它的作用主要是记录当前有哪些VBO，每个VBO里面绑定的是什么数据，还有每一个vertex attribute绑定的是哪一个VBO。关于VBO和VAO更详细的介绍，请参考此文

使用VBO和VAO的步骤都差不多，步骤如下： 1. glGenXXX 2. glBindXXX

让我们修改之前的代码：

 //创建和绑定vao  glGenVertexArrays(1, &vao;);  glBindVertexArray(vao);   //创建和绑定vbo  glGenBuffers(vertexVBO;);  glBindBuffer(GL_ARRAY_BUFFER, vertexVBO);   size = Director::getInstance()->getVisibleSize();  float vertercies[] = { 0,//第一个点的坐标  size.width, //第二个点的坐标  width / 2,210)!important">height}; //第三个点的坐标   color[] = { 1};   glBufferData(sizeof(vertercies),210)!important">vertercies,210)!important">GL_STATIC_DRAW);  //获取vertex attribute "a_position"的入口点  GLuint positionLocation = glGetAttribLocation(getProgram(),152)!important">"a_position");  //打开入a_position入口点  glEnableVertexAttribArray(positionLocation);  //传递顶点数据给a_position，注意最后一个参数是数组的偏移了。  glVertexAttribPointer(positionLocation,210)!important">GL_FLOAT,210)!important">GL_FALSE, (GLvoid*)0);   //set for color  colorVBO;);  colorVBO);  color),210)!important">color,210)!important">GL_STATIC_DRAW);   colorLocation = "a_color");  colorLocation);  colorLocation,152)!important">4,117)!important">//for safty  glBindVertexArray(0);  0); 

这里glBufferData把我们定义好的顶点和颜色数据传给VBO，此时，注意glVertexAttribPointer的最后一个参数，这里传递的都是(GLvoid*)0。而不像之前一样传的是vertex和color的数组地址。这一点是使用VBO和不使用VBO时要特别注意的。

顶点数据是怎么传递的

要弄明白程序里面定义的数组是怎么传递到vertex shader的，我们需要先弄清楚vertex attribute。

每一个attribute在vertex shader里面有一个location，它是用来传递数据的入口。我们可以通过下列代码获取这个入口值:

 "a_position");  positionLocation); 

glGetAttribLocation是用来获得vertex attribute的入口的，在我们要传递数据之前，首先要告诉OpenGL，所以要调用glEnableVertexAttribArray。最后的数据通过glVertexAttribPointer传进来。它的第一个参数就是glGetAttribLocation返回的值。

重用VAO

最后，为了不让这些生成和绑定VBO和VAO的操作在每一帧都被执行，我们需要把它放在初始化函数里面。最终我们的draw函数如下：

 glProgram = getGLProgram();   glProgram->use();   //set uniform values,the order of the line is very important  setUniformsForBuiltins();   getWinSize();   //use vao，因为vao记录了每一个顶点属性和缓冲区的状态，所以只需要绑定就可以使用了  vao);   glDrawArrays(GL_TRIANGLES,152)!important">3);   0);   CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(3);  CHECK_GL_ERROR_DEBUG(); 

这里可以看出，VAO对于简化程序作用是很大的。

好了，编译并运行，还是原来的三角形。

下一篇文章，我们将讲一下OpenGL各种坐标系及其变换。当然，最重要的是World-to-Model变换，Model-to-View变换和View-to-Projection变换。

本文源代码下载,源代码仓库地址是：https://git.oschina.net/zilongshanren/Cocos2D-X-OpenGL-ES-2.0

参考资料

1. http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html

2. http://opengl.zilongshanren.com/opengl-tutorial/tut02/zh.html

3. http://www.opengl.org/wiki/Rendering_Pipeline_Overview