Cocos2D-X shader(三) Shader and Program编程基本概念

最新推荐文章于 2024-08-15 17:20:34 发布
最新推荐文章于 2024-08-15 17:20:34 发布
阅读量3k 收藏 6
点赞数
分类专栏： Shader Cocos2d-X 文章标签： cocos2d-x Shader

一、本文关注的问题：

• Shader and program 对象介绍
• 创建并编译一个Shader对象
• 创建并链接一个Program对象
• 获取并设置uniforms
• 获取并设置attributes

      在OpenGL ES中，每个program对象有且仅有一个Vertex Shader对象和一个Fragment Shader对象连接到它。 

      Shader：类似于C编译器

      Program：类似于C链接器

      glLinkProgram操作产生最后的可执行程序，它包含最后可以在硬件上执行的硬件指令。

二、Shader和Program编程概述

1. 创建Shader
      1）编写Vertex Shader和Fragment Shader源码。

      2）创建两个shader 实例：GLuint   glCreateShader(GLenum type);

      3）给Shader实例指定源码。 glShaderSource

      4）在线编译shaer源码 void   glCompileShader(GLuint shader)

2. 创建Program

      1）创建program  GLuint   glCreateProgram(void)

      2）绑定shader到program 。 void   glAttachShader(GLuint program, GLuint shader)。每个program必须绑定一个Vertex Shader 和一个Fragment Shader。

      3）链接program 。 void   glLinkProgram(GLuint program)

      4）使用porgram 。 void   glUseProgram(GLuint program)

      对于使用独立shader编译器编译的二进制shader代码，可使用glShaderBinary来加载到一个shader实例中。

 

三、 Shading Language中的数据类型与变量
1. Uniforms and Attributes

     Uniforms 是一个program 中统一分配的，vertext 和fragment中同名的Uniform必须同类型。对应于不经常变化的变量（用于存储只读常量值的变量）。

     Attributes 变化率高的变量。主要用来定义输入的每个点属性。

     Uniforms and Attributes 在shader中通过location 和 name 来对应的。

2. 数据类型

1）三类基本数据类型：float , int , boolean

2）复合类型：浮点、整型、布尔向量   vec2 , vec3,vec4。vector访问方式有以下两种：

      （1）.操作：数学{x, y, z, w}, 颜色{r, g, b, a}或 纹理坐标{s, t, r, q}，但不能混用，举例如下：

        vec3 myVec3 = vec3(0.0, 1.0, 2.0); // myVec3 = {0.0, 1.0, 2.0}
        vec3 temp;
        temp = myVec3.xyz; // temp = {0.0, 1.0, 2.0}
        temp = myVec3.xxx; // temp = {0.0, 0.0, 0.0}
        temp = myVec3.zyx; // temp = {2.0, 1.0, 0.0}

      （2）[ ]操作：[0]对应x，[1]对应y，[2]对应z，[3]对应w。[ ]中只能为常量或uniform变量，不能为整数量变量（如：i，j，k）。

 

3）矩阵：mat2, mat3,mat4 （按列顺序存储）

      mat3 myMat3 = mat3(1.0, 0.0, 0.0,  // 第一列
                                  0.0, 1.0, 0.0,  // 第二列
                                  0.5, 1.0, 1.0); // 第三列

     可用[ ]或.操作符来访问：

     mat4 myMat4 = mat4(1.0);   // Initialize diagonal to 1.0 (identity)
     vec4 col0 = myMat4[0];        // Get col0 vector out of the matrix
     float m1_1 = myMat4[1][1];  // Get element at [1][1] in matrix
     float m2_2 = myMat4[2].z;   // Get element at [2][2] in matrix

4）常量

     const float zero = 0.0;
     const float pi = 3.14159;
     const vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
     const mat4 identity = mat4(1.0);

5）结构体： 用基本类型和复合类型构建结构体。

     struct fogStruct
     {
         vec4 color;
         float start;
         float end;
     } fogVar;
     fogVar = fogStruct(vec4(0.0, 1.0, 0.0, 0.0), // color
                                  0.5, // start
                                  2.0); // end
     vec4 color = fogVar.color;
     float start  = fogVar.start;
     float end   = fogVar.end;

6）数组：类似于C语言，索引从0开始。在创建时不能被初始化，索引只能为常量或uniform变量。

     float floatArray[4];
     vec4 vecArray[2];

7）操作

     支持的操作有：*,/,+,-,++,--,=,+=, -=, *=, /=,==, !=, <, >, <=, >=,&&,^^,||

[cpp]  view plain copy
  1. float myFloat;  
  2. vec4 myVec4;  
  3. mat4 myMat4;  
  4. myVec4 = myVec4 * myFloat; // Multiplies each component of myVec4  
  5.                            // by a scalar myFloat  
  6. myVec4 = myVec4 * myVec4;  // Multiplies each component of myVec4  
  7.                            // together (e.g., myVec4 ^ 2 )  
  8. myVec4 = myMat4 * myVec4;  // Does a matrix * vector multiply of  
  9.                            // myMat4 * myVec4  
  10. myMat4 = myMat4 * myMat4;  // Does a matrix * matrix multiply of  
  11.                            // myMat4 * myMat4  
  12. myMat4 = myMat4 * myFloat; // Multiplies each matrix component by  
  13.                            // the scalar myFloat  

     前面矩阵的行数就是结果矩阵的行数，后面矩阵的列数就是结果矩阵的列数。

8）自定义函数：

[cpp]  view plain copy
  1. vec4 myFunc(inout float myFloat,  // inout parameter  
  2.             out vec4 myVec4,      // out parameter  
  3.             mat4 myMat4);         // in parameter (default)  

     函数不能递归调用，因为GPU不一定有Stack和流控。

9）Shading Language内嵌函数

     主要有以下几类函数：

     （1）角度和三角函数

     （2）指数函数

     （3）通用函数（绝对值、取整、取余、取小数部分等）

     （4）几何函数

     （5）矩阵函数

     （6）向量比较函数

     （7）纹理查找函数

     （8）Derivative函数

10）控制流

  

[cpp]  view plain copy
  1. if(color.a < 0.25)  
  2. {  
  3.    color *= color.a;  
  4. }  
  5. else  
  6. {  
  7.    color = vec4(0.0);  
  8. }  
  9.   
  10. //For循环。只支持常数循环次数。  
  11.  //无论下标，还是循环变量，都只能使用编译时可确定的常数。  
  12.  for(int i = 0; i < 3; i++)  
  13. {  
  14.    sum += i;  
  15. }  

   以下不允许（因为下标为变量或loop次数为变量）：

[cpp]  view plain copy
  1. float myArr[4];  
  2. for(int i = 0; i < 3; i++)  
  3. {  
  4.     sum += myArr[i]; // NOT ALLOWED IN OPENGL ES, CANNOT DO  
  5.                      // INDEXING WITH NONCONSTANT EXPRESSION  
  6. }  
  7. ...  
  8. uniform int loopIter;  
  9. // NOT ALLOWED IN OPENGL ES, loopIter ITERATION COUNT IS NONCONSTANT  
  10. for(int i = 0; i < loopIter; i++)  
  11. {  
  12.     sum += i;  
  13. }  


11）Uniforms（前辍修改）
       Uniform前辍修饰的变量初始值由外部程序赋值。在program中具有统一访问空间，存储空间有限。在Shader中是只读的，只能由外部主机程序传入值。

       它用于存储shader需要的各种数据，如：变换矩阵、光照参数和颜色。基本上，对于Shader是一个常量，但在编译时其值未知，则应当作为一个uniform变量。

        Uniform变量在Vertex Shader和Fragment Shader之间共享。当使用glUniform***设置了一个uniform变量的值之后，Vertex Shader和Fragment Shader中具有相同的值。

       Uniform变量被存储在GPU中的“常量存储区”，其空间大小是固定的，可通过API<glGetIntegerv>查询（GL_MAX_VERTEX_UNIFORM_VECTORS 或 GL_MAX_FRAGMENT_UNIFORM_VECTORS ）。

 

12）Attributes（前辍修改）

       Attribute类型的变量只有Vertex Shader才有。Attribute前辍修饰的变量定义的是每个Vertex的属性变量，包括位置，颜色，法线和纹理坐标

       Attribute 类型的变量在Vertex Shader中是只读的，只能由外部主机程序传入值。

       Attribute 类型的变量：是为每个被正在画的顶点所指定的数据。在画图前，每个顶点的属性由应用程序输入。

       与Uniform变量一样，其存储数量也是有限制的。可用glGetIntegerv（GL_MAX_VERTEX_ATTRIBS）进行查询。GPU至少支持8个属性，所以Vertex Shader源码中不要超过8个attributes。 

 

13）Varyings

       Varying变量用于存储Vertex Shader的输出和Fragment Shader的输入。在Vertex Shader和Fragment Shader中必须申明同一个Varying变量。

       与Uniform和Attribute一样，其存储数量也是有限制的，可用glGetIntegerv（GL_MAX_VARYING_VECTORS）进行查询。GPU至少支持8个Varying vector，所以Vertex Shader源码中不要超过8个Varying vector。

     GLint maxVertexAttribs; // n will be >= 8
     glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &maxVertexAttribs);

 

14）预处理 

    

[cpp]  view plain copy
  1. #define  
  2. #undef  
  3. #if  
  4. #ifdef  
  5. #ifndef  
  6. #else  
  7. #elif  
  8. #endif  
  9. __LINE__ // Replaced with the current line number in a shader  
  10. __FILE__ // Always 0 in OpenGL ES 2.0  
  11. __VERSION__ // The OpenGL ES shading language version (e.g., 100)  
  12. GL_ES // This will be defined for ES shaders to a value of 1  


15) Uniform Attribute Varying存储空间最小值

变量类型

GPU必须支持的最小个数

Vertex Uniform Vectors

128

Fragment Uniform Vectors

16

Vertex Attributes

8

Varying Vectors

8


 16) 精度限定(Precision Qualifiers)

       关键词：lowp highp mediump

       （1）指定变量精度（放在数据类型之前）：
 

[cpp]  view plain copy
  1. highp vec4 position;  
  2. varying lowp vec4 color;  
  3. mediump float specularExp;  

               （2）指定默认精度（放在Vertex和Fragment shader源码的开始处）：

[cpp]  view plain copy
  1. precision highp float;  
  2. precision mediump int;  

          在Vertex Shader中，如果没有默认的精度，则float和int精度都为highp；在Fragment Shader中，float没有默认的精度，所以必须在Fragment Shader中为float指定一个默认精度或为每个float变量指定精度。

17）结果一致性

  invariant可被应用于任何Vertex Shader Varying输出变量，其目前是保证相同的操作和相同的输入，其结果一样。因为由于Shader精度不一样，其结果有可能不一样。

[cpp]  view plain copy
  1. uniform mat4 u_viewProjMatrix;  
  2. attribute vec4 a_vertex;  
  3. invariant gl_Position;  
  4. void main  
  5. {  
  6.     // …  
  7.     gl_Position = u_viewProjMatrix * a_vertex; // Will be the same  
  8.                                               // value in all  
  9.                                               // shaders with the  
  10.                                               // same viewProjMatrix  
  11.                                               // and vertex  
  12. }  

也可指定所有的输出变量都为:invariant

[cpp]  view plain copy
  1. #pragma STDGL invariant(all)  

 

四、获取和设置Uniforms

     通过GLint   glGetUniformLocation(GLuint program,const char* name).根据一个Uniform的名称获取其location.

     通过 glUniform***系列函数可以给一个location 设置一个Uniform的值。

[cpp]  view plain copy
  1. void glUniform1f(GLint location, GLfloat x)  
  2. void glUniform1fv(GLint location, GLsizei count,const GLfloat* v)  
  3.   
  4. void glUniform1i(GLint location, GLint x)  
  5. void glUniform1iv(GLint location, GLsizei count,const GLint* v)  
  6.   
  7. void glUniform2f(GLint location, GLfloat x, GLfloat y)  
  8. void glUniform2fv(GLint location, GLsizei count,const GLfloat* v)  
  9.   
  10. void glUniform2i(GLint location, GLint x, GLint y)  
  11. void glUniform2iv(GLint location, GLsizei count,const GLint* v)  
  12.   
  13. void glUniform3f(GLint location, GLfloat x, GLfloat y,GLfloat z)  
  14. void glUniform3fv(GLint location, GLsizei count,const GLfloat* v)  
  15.   
  16. void glUniform3i(GLint location, GLint x, GLint y,GLint z)  
  17. void glUniform3iv(GLint location, GLsizei count,const GLint* v)  
  18.   
  19. void glUniform4f(GLint location, GLfloat x, GLfloat y,GLfloat z, GLfloat w);  
  20. void glUniform4fv(GLint location, GLsizei count,const GLfloat* v)  
  21.   
  22. void glUniform4i(GLint location, GLint x, GLint y,GLint z, GLint w)  
  23. void glUniform4iv(GLint location, GLsizei count,const GLint* v)  
  24.   
  25. void glUniformMatrix2fv(GLint location, GLsizei count,  
  26.                         GLboolean transpose,const GLfloat* value)  
  27. void glUniformMatrix3fv(GLint location, GLsizei count,  
  28.                         GLboolean transpose,const GLfloat* value)  
  29. void glUniformMatrix4fv(GLint location, GLsizei count,  
  30.                        GLboolean transpose,const GLfloat* value)  

       为矩阵uniform变量设置值的函数中的transpose必须为GL_FALSE，它目的为兼容性，但在 OpenGL ES 2.0中并没有工作。

       一旦你设置了一个Program中unifrom变量的值之后，即使你激活了另外一个Program,此uniform的值不变。即uniform变量是Program的局部变量。

五、Vertex Attributes

       Vertex属性即顶点数据，它指定了每个顶点的数据。在OpenGL ES1.1中，顶点属性有四个预定义的名字：position（位置）, normal（法线）, color（颜色）, 和 texture coordinates（纹理坐标）。在OpenGL ES2.0中，用户必须定义“顶点属性的名字”。

1. 常量顶点属性（Constant Vertex Attribute）

     常量顶点属性对所有顶点都是一样的。因此只需要指定一个值就可以应用于所有顶点。一般很少使用。其设置函数有：

  

[cpp]  view plain copy
  1. void glVertexAttrib1f(GLuint index, GLfloat x);  
  2. void glVertexAttrib2f(GLuint index, GLfloat x, GLfloat y);  
  3. void glVertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);  
  4. void glVertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z,GLfloat w);  
  5. void glVertexAttrib1fv(GLuint index, const GLfloat *values);  
  6. void glVertexAttrib2fv(GLuint index, const GLfloat *values);  
  7. void glVertexAttrib3fv(GLuint index, const GLfloat *values);  
  8. void glVertexAttrib4fv(GLuint index, const GLfloat *values);  

 

2. 如何装载顶点数据？（Vertex Arrays）

       Vertex Array（顶点数组）：是一个存储在应用程序空间（Client）中的内存buffer，它存储了每个顶点的属性数据。    

       如何把顶点数据组的数据传递给GPU呢？

        void glVertexAttribPointer(GLuint index,

                                                GLint size,     //每个属性元素个数有效值1-4（x,y,z,w）
                                                GLenum type, //数组中每个元素的数据类型
                                                GLboolean normalized,
                                                GLsizei stride, //如果数据连续存放，则为0或       

                                                                       //size*sizeof(type)
                                                const void *ptr)  //顶点数组指针

       举例如下：

 

[cpp]  view plain copy
  1. GLfloat vVertices[] = {  0.0f,  0.5f, 0.0f,   
  2.                         -0.5f, -0.5f, 0.0f,  
  3.                          0.5f, -0.5f, 0.0f };  
  4.      
  5. // Set the viewport  
  6. glViewport ( 0, 0, esContext->width, esContext->height );  
  7.   
  8. // Clear the color buffer  
  9. glClear ( GL_COLOR_BUFFER_BIT );  
  10.   
  11. // Use the program object  
  12. glUseProgram (programObject );  
  13.   
  14. // Load the vertex data  
  15. glVertexAttribPointer ( 0, 3, GL_FLOAT, GL_FALSE, 0, vVertices );  


2.1 一个顶点的所有属性存储在一起（Array of Structures）

       如下图所示，顶点的位置(x,y,z)、法线(x,y,z)和两个纹理坐标(s,t)存储在一起，如下图所示：

例子代码如下（当然，此代码在CPU上运动）：

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #define VERTEX_POS_SIZE         3 // x, y and z  
  2. #define VERTEX_NORMAL_SIZE      3 // x, y and z  
  3. #define VERTEX_TEXCOORD0_SIZE   2 // s and t  
  4. #define VERTEX_TEXCOORD1_SIZE   2 // s and t  
  5.   
  6. #define VERTEX_POS_INDX         0  
  7. #define VERTEX_NORMAL_INDX      1  
  8. #define VERTEX_TEXCOORD0_INDX   2  
  9. #define VERTEX_TEXCOORD1_INDX   3  
  10.   
  11. // the following 4 defines are used to determine location of various  
  12. // attributes if vertex data is are stored as an array of structures  
  13. #define VERTEX_POS_OFFSET       0  
  14. #define VERTEX_NORMAL_OFFSET    3  
  15. #define VERTEX_TEXCOORD0_OFFSET 6  
  16. #define VERTEX_TEXCOORD1_OFFSET 8  
  17.   
  18. #define VERTEX_ATTRIB_SIZE  VERTEX_POS_SIZE + \  
  19.                             VERTEX_NORMAL_SIZE + \  
  20.                             VERTEX_TEXCOORD0_SIZE + \  
  21.                             VERTEX_TEXCOORD1_SIZE  
  22.                               
  23. float *p = malloc(numVertices * VERTEX_ATTRIB_SIZE  
  24.                   * sizeof(float));  
  25.   
  26. // position is vertex attribute 0  
  27. glVertexAttribPointer(VERTEX_POS_INDX, VERTEX_POS_SIZE,  
  28.                       GL_FLOAT, GL_FALSE,  
  29.                       VERTEX_ATTRIB_SIZE * sizeof(float),  
  30.                       p+VERTEX_POS_OFFSET);  
  31.   
  32. // normal is vertex attribute 1  
  33. glVertexAttribPointer(VERTEX_NORMAL_INDX, VERTEX_NORMAL_SIZE,  
  34.                       GL_FLOAT, GL_FALSE,  
  35.                       VERTEX_ATTRIB_SIZE * sizeof(float),  
  36.                       (p + VERTEX_NORMAL_OFFSET));  
  37.   
  38. // texture coordinate 0 is vertex attribute 2  
  39. glVertexAttribPointer(VERTEX_TEXCOORD0_INDX, VERTEX_TEXCOORD0_SIZE,  
  40.                       GL_FLOAT, GL_FALSE,  
  41.                       VERTEX_ATTRIB_SIZE * sizeof(float),  
  42.                       (p + VERTEX_TEXCOORD0_OFFSET));  
  43.   
  44. // texture coordinate 1 is vertex attribute 3  
  45. glVertexAttribPointer(VERTEX_TEXCOORD1_INDX, VERTEX_TEXCOORD1_SIZE,  
  46.                       GL_FLOAT, GL_FALSE,  
  47.                       VERTEX_ATTRIB_SIZE * sizeof(float),  
  48.                       (p + VERTEX_TEXCOORD1_OFFSET));  

 

2.2 顶点的每个属性单独存储（Structure of Arrays）

例子代码如下（当然，此代码在CPU上运动）：

#define VERTEX_POS_SIZE         3 // x, y and z
#define VERTEX_NORMAL_SIZE      3 // x, y and z
#define VERTEX_TEXCOORD0_SIZE   2 // s and t
#define VERTEX_TEXCOORD1_SIZE   2 // s and t

#define VERTEX_POS_INDX         0
#define VERTEX_NORMAL_INDX      1
#define VERTEX_TEXCOORD0_INDX   2
#define VERTEX_TEXCOORD1_INDX   3


#define VERTEX_ATTRIB_SIZE  VERTEX_POS_SIZE + \
                            VERTEX_NORMAL_SIZE + \
                            VERTEX_TEXCOORD0_SIZE + \
                            VERTEX_TEXCOORD1_SIZE
                            
float *position  = malloc(numVertices * VERTEX_POS_SIZE *
                          sizeof(float));
float *normal    = malloc(numVertices * VERTEX_NORMAL_SIZE *
                          sizeof(float));
float *texcoord0 = malloc(numVertices * VERTEX_TEXCOORD0_SIZE *
                          sizeof(float));
float *texcoord1 = malloc(numVertices * VERTEX_TEXCOORD1_SIZE *
                          sizeof(float));

// position is vertex attribute 0
glVertexAttribPointer(VERTEX_POS_INDX, VERTEX_POS_SIZE,
                      GL_FLOAT, GL_FALSE,
                      VERTEX_POS_SIZE * sizeof(float), position);

// normal is vertex attribute 1
glVertexAttribPointer(VERTEX_NORMAL_INDX, VERTEX_NORMAL_SIZE,
                      GL_FLOAT, GL_FALSE,
                      VERTEX_NORMAL_SIZE * sizeof(float), normal);

// texture coordinate 0 is vertex attribute 2
glVertexAttribPointer(VERTEX_TEXCOORD0_INDX, VERTEX_TEXCOORD0_SIZE,
                      GL_FLOAT, GL_FALSE, VERTEX_TEXCOORD0_SIZE *
                      sizeof(float), texcoord0);

// texture coordinate 1 is vertex attribute 3
glVertexAttribPointer(VERTEX_TEXCOORD1_INDX, VERTEX_TEXCOORD1_SIZE,
                      GL_FLOAT, GL_FALSE,
                      VERTEX_TEXCOORD1_SIZE * sizeof(float),  //也可为0，因为数据是紧接着存放的
                      texcoord1);

2.3. 哪种顶点属性数据存储方式在GPU上性能更好？

       答案是：把一个顶点的所有属性放在一起（array of structures）。其原因是每个顶点的属性数据以连续的方式读取，使内存访问效率更高。其缺点是，如果要修改其中部分属性数据，将导致整个属性buffer全部重新装载，解决此问题的方法是把这些需要动态修改的属性数据放在单独的buffer中。

五、 顶点属性数据类型优化

       顶点属性数据类型不会影响在GPU上每个顶点占用的内存，但在Render a Frame时，它影响CPU与GPU之间的内存带宽。推荐尽量使用GL_HALF_FLOAT_OES。

六、glVertexAttribPointer中的归一化参数

       如果normalized为GL_FALSE：则直接把数据转换为GLfloat，因为Vertex Shader内部把顶点属性当作GLfloat（32位）来进行存储。

       GL_BYTE, GL_SHORT or GL_FIXED被归一化为[-1，1]；GL_UNSIGNED_BYTE or GL_UNSIGNED_SHORT被归一化为[0.0，1.0]。具体转换公式为：

 

 

 3、选择常量或顶点数组Vertex Attribute

可通过以下函数来Enable或Disable顶点数组（Vertex Array）。

void glEnableVertexAttribArray(GLuint index);
void glDisableVertexAttribArray(GLuint index);

其关系如下图所示：

 4、申明attribute变量（在Vertex Shader中）

      Attribute变量的数据类型只能为：float, vec2,vec3, vec4, mat2, mat3, and mat4；Attribute变量不能为数组或结构。如下面的申明是错误的：        

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. attribute foo_t a_A; // foo_t is a structure  
  2. attribute vec4 a_B[10];  

     每个GPU支持GL_MAX_VERTEX_ATTRIBS vec4。float、vec2和vec3也被当作一个vec4来进行存储；mat2、mat3、mat4被分别当作2、3、和4个vec4来进行存储。

5、把“顶点属性索引”绑定到“顶点属性名”

       把“顶点属性索引”绑定到“顶点属性名”有以下两个方法：

       1）OpenGL ES 2.0把“顶点属性索引”绑定到“顶点属性名”，当link program时，OpengGL ES 2.0执行此绑定。然后应用程序通过glGetAttribLocation（失败时返回-1）获取“顶点属性索引”。

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. GLint glGetAttribLocation(GLuint program, const GLchar *name)  

 

       2）应用程序通过glBindAttribLocation把“顶点属性索引”绑定到“顶点属性名”，glBindAttribLocation在program被link之前执行。

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. void glBindAttribLocation(GLuint program, GLuint index,const GLchar *name)  

       在link program时，OpenGL ES 2.0对每个顶点属性执行如下操作：

        （1）首先检查属性变量是否被通过glBindAttribLocation绑定了属性索引，如果是，则使用此绑定的属性索引；否则，为之分配一个属性索引。

             在应用程序中，一般使用函数glBindAttribLocation来绑定每个attribute变量的位置，然后用函数glVertexAttribPointer为每个attribute变量赋值。

6、顶点buffer对象（Vertex Buffer Objects）

       顶点数组（Vertex Array）被保存在客户端内存，当执行glDrawArrays 或 glDrawElements时，才把它们从客户端内存copy到图形内存。这样占用了大量的内存带宽，Vertex Buffer Objects允许OpengGL ES2.0应用在高性能的图形内存中分配并cache顶点数据，然后从此图形内存中执行render，这样避免了每次画一个原语都要重发送数据。

       Vertex Buffer Objects有以下两种类型：

       （1）array buffer objects：通过GL_ARRAY_BUFFER标记创建，并存储vertex data。

       （2）element array buffer objects：通过GL_ELEMENT_ARRAY_BUFFER标记创建，并存储indices of a primitive。

       创建和绑定Vertex Buffer Objects例子代码如下：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. void initVertexBufferObjects(vertex_t *vertexBuffer,  
  2.                              GLushort *indices,  
  3.                              GLuint numVertices, GLuint numIndices  
  4.                              GLuint *vboIds)  
  5. {  
  6.    glGenBuffers(2, vboIds);  
  7.    glBindBuffer(GL_ARRAY_BUFFER, vboIds[0]);  
  8.    glBufferData(GL_ARRAY_BUFFER, numVertices * sizeof(vertex_t),  
  9.                 vertexBuffer, GL_STATIC_DRAW); //save vertex attribute data  
  10.    // bind buffer object for element indices  
  11.    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIds[1]);  
  12.    glBufferData(GL_ELEMENT_ARRAY_BUFFER,  
  13.                 numIndices * sizeof(GLushort),indices,  
  14.                 GL_STATIC_DRAW); // save element indices that make up the primitive  
  15. }  

有无Vertex Buffer Object画图例子： 

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #define VERTEX_POS_SIZE 3 // x, y and z  
  2. #define VERTEX_NORMAL_SIZE 3 // x, y and z  
  3. #define VERTEX_TEXCOORD0_SIZE 2 // s and t  
  4. #define VERTEX_POS_INDX 0  
  5. #define VERTEX_NORMAL_INDX 1  
  6. #define VERTEX_TEXCOORD0_INDX 2  
  7. //  
  8. // vertices – pointer to a buffer that contains vertex attribute  
  9. data  
  10. // vtxStride – stride of attribute data / vertex in bytes  
  11. // numIndices – number of indices that make up primitive  
  12. // drawn as triangles  
  13. // indices - pointer to element index buffer.  
  14. //  
  15. void drawPrimitiveWithoutVBOs(GLfloat *vertices, GLint vtxStride,  
  16.                               GLint numIndices, GLushort *indices)  
  17. {  
  18.    GLfloat *vtxBuf = vertices;  
  19.    glBindBuffer(GL_ARRAY_BUFFER, 0);  
  20.    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);  
  21.    glEnableVertexAttribArray(VERTEX_POS_INDX);  
  22.    glEnableVertexAttribArray(VERTEX_NORMAL_INDX);  
  23.    glEnableVertexAttribArray{VERTEX_TEXCOORD0_INDX);  
  24.    glVertexAttribPointer(VERTEX_POS_INDX, VERTEX_POS_SIZE,  
  25.                          GL_FLOAT, GL_FALSE, vtxStride, vtxBuf);  
  26.    vtxBuf += VERTEX_POS_SIZE;  
  27.    glVertexAttribPointer(VERTEX_NORMAL_INDX, VERTEX_NORMAL_SIZE,  
  28.                          GL_FLOAT, GL_FALSE, vtxStride, vtxBuf);  
  29.    vtxBuf += VERTEX_NORMAL_SIZE;  
  30.    glVertexAttribPointer(VERTEX_TEXCOORD0_INDX,  
  31.                          VERTEX_TEXCOORD0_SIZE, GL_FLOAT,  
  32.                          GL_FALSE, vtxStride, vtxBuf);  
  33.    glBindAttribLocation(program, VERTEX_POS_INDX, "v_position");  
  34.    glBindAttribLocation(program, VERTEX_NORMAL_INDX, "v_normal");  
  35.    glBindAttribLocation(program, VERTEX_TEXCOORD0_INDX,"v_texcoord");  
  36.    glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT,indices);  
  37. }  


 

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. void drawPrimitiveWithVBOs(GLint numVertices, GLfloat *vtxBuf,  
  2.                            GLint vtxStride, GLint numIndices,  
  3.                            GLushort *indices)  
  4. {  
  5.    GLuint offset = 0;  
  6.    GLuint vboIds[2];  
  7.    // vboIds[0] – used to store vertex attribute data  
  8.    // vboIds[1] – used to store element indices  
  9.    glGenBuffers(2, vboIds);  
  10.    glBindBuffer(GL_ARRAY_BUFFER, vboIds[0]);  
  11.    glBufferData(GL_ARRAY_BUFFER, vtxStride * numVertices,  
  12.                 vtxBuf, GL_STATIC_DRAW);  
  13.    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIds[1]);  
  14.    glBufferData(GL_ELEMENT_ARRAY_BUFFER,  
  15.                 sizeof(GLushort) * numIndices,  
  16.                 indices, GL_STATIC_DRAW);  
  17.    glEnableVertexAttribArray(VERTEX_POS_INDX);  
  18.    glEnableVertexAttribArray(VERTEX_NORMAL_INDX);  
  19.    glEnableVertexAttribArray{VERTEX_TEXCOORD0_INDX);  
  20.    glVertexAttribPointer(VERTEX_POS_INDX, VERTEX_POS_SIZE,  
  21.                          GL_FLOAT, GL_FALSE, vtxStride,  
  22.                          (const void*)offset);  
  23.    offset += VERTEX_POS_SIZE * sizeof(GLfloat);  
  24.    glVertexAttribPointer(VERTEX_NORMAL_INDX, VERTEX_NORMAL_SIZE,  
  25.                          GL_FLOAT, GL_FALSE, vtxStride,  
  26.                          (const void*)offset);  
  27.    offset += VERTEX_NORMAL_SIZE * sizeof(GLfloat);  
  28.    glVertexAttribPointer(VERTEX_TEXCOORD0_INDX,  
  29.                          VERTEX_TEXCOORD0_SIZE,  
  30.                          GL_FLOAT, GL_FALSE, vtxStride,  
  31.                          (const void*)offset);  
  32.    glBindAttribLocation(program, VERTEX_POS_INDX, "v_position");  
  33.    glBindAttribLocation(program, VERTEX_NORMAL_INDX, "v_normal");  
  34.    glBindAttribLocation(program, VERTEX_TEXCOORD0_INDX,"v_texcoord");  
  35.    glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, 0);  
  36.    glDeleteBuffers(2, vboIds);  
  37. }  


 


operhero1990
关注
专栏目录
cocos2d-x与着色器设计--入门篇(游云凌天原创)
danjinxiangsi的专栏
02-26 4172
着色器(Shader)应用与计算机图形学领域，指一组提供计算机图形资源在渲染时执行的指令。 随着手机应用以及移动端游戏这几年的发展，着色器设计凭借着自身的灵活性以及适应性，越来越多的被移动端开发者所接受。 本人在App Store上发布了一个原创免费开源无广告的关于着色器的教育型软件，以研究着色器在移动端的设计为目的。 可惜由于时间匆忙，并没有做中文的本地化。所以将写几篇博客，手把手的教一些
【cocos2d-x 源码解析】shader 实现
xingxinmanong的博客
10-13 1875
cocos2d-x 通过 GLProgram，GLProgramCache，GLProgramState 和 GLProgramStateCache 这几个类来管理着色器程序。GLProgram 完成顶点着色器 vertex shader 和 片段着色器 fragment shader 的创建、编译、附加和链接，最后生成一个着色器程序 program；GLPorgramState 是对 GLProgram 的再次封装
cocos2d-x中shader的使用
chenhl1988的专栏
01-06 1526
原文：http://blog.ch-wind.com/cocos2d-x%E4%B8%ADshader%E7%9A%84%E4%BD%BF%E7%94%A8/ 其实最近各种事情都比较乱本来不该研究这个的，但是个人习惯上一旦有什么事挂在那就会心烦，于是最终还是把整个事情搞到自己满意为止了。shader这个东西貌似很高端，其实本质上和其他的语言没有什么差别，而且还是c风格的。所以主要的时间都花在
深度剖析Cocos Creator中的Shader编程：从入门到精通，打造绚丽视觉效果！
最新发布
阿拉丁Mr的博客
08-15 1067
通过本文的详细讲解，相信你已经对Cocos Creator中的Shader编程有了初步的认识和了解。Shader编程是一门既有趣又充满挑战的技术，它能够让你的游戏和应用在视觉上脱颖而出。希望你在未来的开发过程中，能够灵活运用Shader编程，创造出更多令人惊叹的视觉效果！
Cocos2d-X的shader
伯乐伴 --伯乐相伴 帮你发现自我 解剖自我 完善自我 成就自我
03-15 476
 课程概述 “Cocos2d-X的shader”课程概述      从OpenGL ES2.0开始，增加了shader的概念，开始了可编程图形处理，本节课将介绍Cocos2d-X中的shader。 课程笔记 EGL相关      在（Cocos2d-X的渲染系统(1)）一节中，我们讲到了Cocos2dxGLSurfaceView，在Cocos2dxGLSurfaceView
cocos2d-x shader
lijinchao2007的专栏
10-16 1398
CCShaderCache 储存不同的shader CCGLProgram是cocos封装的shader类 包含变量m_uProgram是opengl的shader m_uVertShader是渲染定点的着色器 m_uFragShader是片源着色器 shader程序glCreateProgram-》compileShader-》glAttachShader-》glLinkPro
cocos2d-x3D扩展3DToolKitforcocos2d-x.zip
07-19
3D ToolKit for cocos2dx 是一个简单的cocos2d-x 3D扩展，可以方便地在cocos2dx环境中创建3D图形。 基于cocos2d-x 2.2开发。 已实现功能： 1，向量和矩阵运算。 2，扩展的3D相机。（支持 透视投影 和 ...
Cocos2d-lua 初识shader之二：传值
哎！小本本上八卦羞答答,人生太复杂...
09-15 4430
原理：使用cc.GLProgramState的setUniformXXX("name",value)方法可以设置shader中使用uniform定义的变量
基于cocos2d-lua的shader入门玩转
sun___shine的博客
11-18 623
我这里讲的shader是什么呢，通俗讲就是是获得图片的像素和操作图片的像素 比如我的原本颜色是这样的： wo.png void main() { vec4 mycolor = v_fragmentColor*texture2D(CC_Texture0, v_texCoord); //我的颜色.rgb就是这张图片的每个像素点的值，我的颜色.a就是这张图的透明度 gl_FragColor = mycolor; } 那么cocos2d把我自己变成灰色是怎样呢？在ccS
Cocos2d-x Program笔记
blpnh的博客
02-25 2443
Cocos2d-x与program相关的类有： GLProgram：包含Shader Compile，Uniform Cache，Attrib CacheGLProgramState：每一个GLProgram对象都有一个与之对应的GLProgramState用于Cache所有的State，包括：Uniform和Attrib 。当前版本没有完善此类，因此所有的Cache都还在GLProgr
Cocos2dx--使用Shader
疯狂的程序员
06-23 7050
Cocos2dx的Shader架构 Cocos2dx的Shader由GLProgram、GLProgramState、GLProgramCache、GLProgramStateCache组成。 GLProgram是Cocos2dx对Program的封装，一般提供一些静态方法，被多个节点复用。而GLProgramState是对GLProgram的封装，提供更加便捷的操作接口，内部记录了Unifo...
【cocos2d-x】shader-高斯模糊
01-14
高斯模糊是一种图像模糊滤波器，它用正态分布计算图像中每个像素的变换。
shader cocos2d-x lua实现3D弧边搓牌效果
07-09
shader编写，在lua层实现卡牌搓牌带3D弧边搓牌、翻牌效果。
XShaderCompiler：用于将HLSL（Shader Model 4和5）转换为GLSL的Shader交叉编译器
01-30
XShaderCompiler：用于将HLSL（Shader Model 4和5）转换为GLSL的Shader交叉编译器
Shader编辑器
12-27
强大的Shader编辑器，助力大家从小白到老鸟，希望对大家有帮助。
cocos2dx_Shader简单实例入门
qq_31480839的博客
11-12 800
Shader是图形学方面的知识，不太好入门，下文用一个比较简单的例子来体验下shader。 先看创建的代码 ShaderSprite.hpp #include "CCSprite.h" class ShaderSprite : public cocos2d::Sprite { public: void initWithShader(const char* vertexShader, con...
代码编译【OpenGL】Shader概述代码编译
weixin_34302798的博客
04-21 241
文章结束给大家来个程序员笑话：[M]     这篇文章述讲了Shader是如何编译和链接，终最在OpenGL程序中应用的。当然，不解了这些我们仍然可以畸形作工，但是作为初学者，解了这些会让我更能明确自己在嘛干。。。      综述     哈，鼎鼎名大的Shader终究让我给见到了……之前在习学Unity3D的时候就被群里的大牛耳闻目睹说Shader如何如何要重，在现终究轮到自己领教了。吐...
cocos2d-x shader(1)-基本概念与使用
u012966983的博客
03-16 615
shader简史 在Direct8之前，GPU使用固定方式变换像素和顶点，即所谓的“固定管道”。这使得开发者不可能改变像素和顶点转换和处理的进程，使大多数游戏的图像表现看起来非常相似。 Direct8提出顶点和像素着色器，这让开发者可以在管道中决定如何处理顶点和像素，使它们获得了很强的灵活性。 一开始shader编程使用汇编语言程序使用的着色器，这对s
Cocos2d-X的shader小实例
伯乐伴 --伯乐相伴 帮你发现自我 解剖自我 完善自我 成就自我
03-15 546
 课程概述 “Cocos2d-X的shader小实例”课程概述     shader的一个很重要的用处是实现特效，本节课将实现一个自定义shader，并使用回调函数实时修改shader中的值。 课程笔记 自定义shader      在（Cocos2d-X的shader）一节中，我们讲到了使用GLProgram的createWithFilenames方法创建program，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值