OpenGL学习脚印: 顶点数据传送和着色器处理2

OpenGL学习脚印: 顶点数据传送和着色器处理2

写在前面

               本节内容翻译和整理自《Learning Modern 3D Graphics Programming》Chapter2内容。作为学习目的，本文提炼其主要观点，删除了大部分细节部分的详述内容。另外原文示例代码有它独有的框架组织方式，为了保持自己的一贯风格，这里重写了示例程序代码，如果发现错误，请纠正我。转载需经过作者同意。

通过本节，你可以了解到:

•  通过着色器修改图形颜色
•  在顶点着色器中使用多个属性索引
• 简单的颜色插值
  

1.简单的线性颜色插值

正如《OpenGL学习脚印: 顶点数据传送和着色器处理1》所述，片元着色器中包含片元的屏幕坐标信息。这样我们可以通过这些坐标计算颜色值来指定三角形的颜色。

片元着色器可以这样书写:

[html] view plaincopyprint?

1. #version 330  
2.   
3. out vec4 outputColor;  
4.   
5. void main()  
6. {  
7.     float lerpValue = gl_FragCoord.y / 500.0f;  
8.       
9.     outputColor = mix(vec4(1.0f, 1.0f, 1.0f, 1.0f),  
10.         vec4(0.2f, 0.2f, 0.2f, 1.0f), lerpValue);  
11. }  

这里，gl_FragCoord是一个内置变量，仅仅在片元着色器中可见。它是一个vec3类型变量，其中XY为屏幕坐标，它们的绝对值会随着屏幕分辨率而变化。记得，前面说过，屏幕左下角为(0,0)，因此屏幕下方的点的Y值比上方的点小。这里假定500.0是屏幕宽度(除非你改变窗口大小)，那么lerpValue的值将会在[0,1]之间。

上述代码的第二行，利用lerpValue进行颜色的线性插值，mix函数是GLSL提供了很多个标准函数中的一个。

补充:

线性插值计算颜色很简单，就是C(x)=color1*(1-x)+color2*x  这里x在[0,1]之间,C(x)代表的则是x值处的颜色，这里使用lerpValue作为计算参数。

注意:用于mix的第三个参数必须在[0,1]之间，当然OpenGL不会进行严格检查，如果值不符合规定，函数值将是未定义的，未定义的意味着你将得不到你想要的颜色。

下面给出一个自己整理的示例，示例代码中三角形定义为等腰三角形，它的坐标和插值时计算与上述代码略有差别，但不影响解释结果。关于shader.h头文件，请参看《OpenGL学习脚印: 顶点数据传送和着色器处理1》,其他代码及运行效果如下：

文件一: vertex shader  vertex.glsl

[cpp] view plaincopyprint?

1. #version 330  
2.   
3. layout(location = 0) in vec4 pos;  
4.   
5. void main()  
6. {  
7.    gl_Position = pos;  
8. }  

文件二: fragment shader fragment.glsl

[html] view plaincopyprint?

1. #version 330  
2.   
3. out vec4 outputColor;  
4.   
5. void main()  
6. {  
7.     float lerpValue = (gl_FragCoord.y-256.0f)/128.0f;  
8.     outputColor = mix(vec4(1.0f,0.0f,0.0f,1.0f),  
9.         vec4(0.0f,0.0f,1.0f,1.0f),lerpValue);  
10. }  

文件三:  shaderDemo.cpp

[cpp] view plaincopyprint?

1. //依赖库glew32.lib freeglut.lib  
2. //使用着色器颜色插值绘制三角形  
3. #include <string>  
4. #include <vector>  
5. #include <GL/glew.h>  
6. #include <GL/freeglut.h>  
7. #include "shader.h"  
8. using namespace std;  
9.   
10. void userInit();  
11. void reshape(int w,int h);  
12. void display( void );  
13. void keyboardAction( unsigned char key, int x, int y );  
14.   
15.   
16. GLuint vboId;//vertex buffer object句柄  
17. GLuint vaoId;//vertext array object句柄  
18. GLuint programId;//shader program 句柄  
19.   
20. int main( int argc, char **argv )  
21. {  
22.     glutInit(&argc, argv);  
23.     glutInitDisplayMode( GLUT_RGBA|GLUT_DOUBLE);  
24.     glutInitWindowPosition(100,100);  
25.     glutInitWindowSize( 512, 512 );  
26.     glutCreateWindow( "Triangle demo" );  
27.   
28.     glewInit();  
29.     userInit();  
30.     glutReshapeFunc(reshape);  
31.     glutDisplayFunc( display );  
32.     glutKeyboardFunc( keyboardAction );  
33.     glutMainLoop();  
34.     return 0;  
35. }  
36. //自定义初始化函数  
37. void userInit()  
38. {  
39.      glClearColor( 0.0, 0.0, 0.0, 0.0 );  
40.      //顶点位置和颜色数据  
41.      const GLfloat vertices[] = {  
42.         -0.5f,0.0f,0.0f,1.0f,  
43.         0.5f,0.0f,0.0f,1.0f,  
44.         0.0f,0.5f,0.0f,1.0f  
45.      };  
46.      //创建vertex array object对象  
47.      glGenVertexArrays(1,&vaoId);  
48.      glBindVertexArray(vaoId);  
49.      //创建vertex buffer object对象  
50.      glGenBuffers(1,&vboId);  
51.      glBindBuffer(GL_ARRAY_BUFFER,vboId);  
52.      glBufferData(GL_ARRAY_BUFFER,sizeof(vertices),vertices,GL_STATIC_DRAW);  
53.      glBindBuffer(GL_ARRAY_BUFFER,0);  
54.      //从文件创建着色器  
55.     std::vector<GLuint> idVector;  
56.     idVector.push_back(Shader::createShader(GL_VERTEX_SHADER,"data\\vertex.glsl"));  
57.     idVector.push_back(Shader::createShader(GL_FRAGMENT_SHADER,"data\\fragment.glsl"));  
58.     programId = Shader::createProgram(idVector);  
59. }  
60. //调整窗口大小回调函数  
61. void reshape(int w,int h)  
62. {  
63.     glViewport(0,0,(GLsizei)w,(GLsizei)h);  
64. }  
65. //绘制回调函数  
66. void display( void )  
67. {     
68.   
69.     glClear(GL_COLOR_BUFFER_BIT);  
70.     glUseProgram(programId);  
71.     glBindBuffer(GL_ARRAY_BUFFER,vboId);  
72.     //启用顶点位置属性索引  
73.     glEnableVertexAttribArray(0);  
74.     glVertexAttribPointer(0,4,GL_FLOAT,GL_FALSE,0,0);  
75.     //绘制三角形  
76.     glDrawArrays(GL_TRIANGLES, 0, 3);  
77.   
78.     glBindBuffer(GL_ARRAY_BUFFER,0);  
79.     glUseProgram(0);  
80.     glDisableVertexAttribArray(0);  
81.     glutSwapBuffers();  
82. }  
83. //键盘按键回调函数  
84. void keyboardAction( unsigned char key, int x, int y )  
85. {  
86.     switch( key )   
87.     {  
88.         case 033:  // Escape key  
89.             exit( EXIT_SUCCESS );  
90.             break;  
91.     }  
92. }  

运行效果如下图:

可以看到位于512屏幕中心x轴处颜色为红色，而顶部的顶点的颜色为蓝色，符合线性插值的预期效果。

2.使用多个属性索引来指定顶点位置和颜色

使用插值计算颜色很方便，但是更好的控制是允许显示指定各个顶点的颜色。我们的想法是:

• 对传递给顶点着色器的位置，我们想同时传递一个对应的颜色值
• 对每个顶点着色器输出的位置，我们想同时输出同它接收的那个颜色值相同的颜色
  
• 在片元着色器中，我们想接收顶点着色器输入的颜色，并将其作为片元的输出颜色

为了完成第一项任务我们将顶点数据修改为:

[cpp] view plaincopyprint?

1. //顶点位置和颜色数据  
2.      const GLfloat vertexData[] = {  
3.         -0.5f,0.0f,0.0f,1.0f,  
4.         0.5f,0.0f,0.0f,1.0f,  
5.         0.0f,0.5f,0.0f,1.0f,  
6.         1.0f,0.0f,0.0f,1.0f,  
7.         0.0f,1.0f,0.0f,1.0f,  
8.         0.0f,0.0f,1.0f,1.0f  
9.      };  

它的内存结构如下图所示:

原文讲得太详细，就不再细细赘述，这里我们需要清楚的就是:

• float类型由4个字节构成，vec4由4个float构成共16字节；vertexData中前3个vec4是顶点数据，后3个vec4是颜色数据。
• 顶点数据在数组中首地址为&vertexData[0]；颜色数据在数组中的首地址为&vertexData[12]，偏移量为3*4*4共48字节。

我们创建VBO对象如下:

[cpp] view plaincopyprint?

1. glGenBuffers(1,&vboId);  
2. glBindBuffer(GL_ARRAY_BUFFER,vboId);  
3. glBufferData(GL_ARRAY_BUFFER,sizeof(vertexData),vertexData,GL_STATIC_DRAW);  
4.  glBindBuffer(GL_ARRAY_BUFFER,0);  

利用glVertexAttribPointer向着色器传递数据代码如下:

[cpp] view plaincopyprint?

1. glBindBuffer(GL_ARRAY_BUFFER,vboId);  
2.     //启用顶点位置属性索引  
3.     glEnableVertexAttribArray(0);  
4.     glVertexAttribPointer(0,4,GL_FLOAT,GL_FALSE,0,0);  
5.     //启用顶点颜色属性索引  
6.     glEnableVertexAttribArray(1);  
7.     glVertexAttribPointer(1,4,GL_FLOAT,GL_FALSE,0,(void*)48);  

需要在顶点着色器中开启两个属性索引，一个用于顶点位置，一个用于颜色，vertex shader书写如下：

文件一  vertex.glsl

[cpp] view plaincopyprint?

1. #version 330  
2.   
3. layout (location = 0) in vec4 pos;  
4. layout (location = 1) in vec4 incolor;  
5.   
6. smooth out vec4 thecolor;  
7.   
8. void main()  
9. {  
10.     gl_Position = pos;  
11.     thecolor = incolor;  
12. }  

绘制三角形时，每次取顶点数据和颜色数据，都由着色器计算。例如顶点着色器第一次运行时取顶点位置属性从bufferObject[0 + (0 * 4 * sizeof(float))]，颜色属性从bufferObject[48 + (0 * 4 * sizeof(float))]取；第二次位置属性从bufferObject[0 + (1 * 4 * sizeof(float))],颜色属性从bufferObject[48 + (1 * 4 * sizeof(float))]取，依次类推。对应的数据获取方式如下图所示:

片元着色器则定义如下:

文件二  fragment.glsl

[html] view plaincopyprint?

1. #version 330  
2.   
3. smooth in vec4 thecolor;  
4.   
5. out vec4 outputColor;  
6.   
7. void main()  
8. {  
9.     outputColor = thecolor;  
10. }  

这里thecolor名字不是偶然。OpenGL要求，前一阶段的输出变量和下一阶段的输入变量必须名称和类型相同，这里使用了smooth限定符，那么两者也必须相同。

颜色插值

这里顶点着色器仅运行了3次,产生3个输出顶点位置和颜色属性，用来绘制一个三角形,产生了多个片元。

片元着色器却不止运行3次。在光栅化产生这个三角形时，每产生一个片元就运行一次。绘制这个三角形产生的片元数目取决于显示器分辨率和这个三角形覆盖的区域有多大。假设一个边长为1的等边三角形，其面积为sqrt(3)/4，整个屏幕区域中XY范围均为[-1,1]因此面积为4，则三角形所占面积为屏幕面积的十分之一。假设屏幕像素为500x500，则共有250，000个像素，而三角形所占像素为10分之1则有25,000个，因此片元着色器大概执行了25,000次。

这个理解见下图:

这有点令人失望。如果顶点着色器直接和片元着色器通信，而顶点着色器仅仅输出3个颜色值，

那么剩下的24,997个值从哪里来呢?

答案就是: 使用片元插值。
通过使用插值限定符smooth，我们告诉了OpenGL对这个颜色值进行特殊处理。每个片元不是从单个顶点获取一个值，而是获取三个顶点颜色属性值在三角形表面的混合值。片元越接近一个顶点，那么顶点颜色值贡献到该点的颜色值越多。

插值在顶点和片元着色器之间是最常见模式，因此如果你在顶点和片元着色器之间不提供插值关键字，那么smooth将是默认设置。还有其他的插值方式如noperspective 和flat。(这里不做介绍了,你可以自己尝试)。

shaderDemo2.cpp文件如下:

[cpp] view plaincopyprint?

1. //依赖库glew32.lib freeglut.lib  
2. //使用着色器颜色插值绘制三角形  
3. #include <string>  
4. #include <vector>  
5. #include <GL/glew.h>  
6. #include <GL/freeglut.h>  
7. #include "shader.h"  
8. using namespace std;  
9.   
10. void userInit();  
11. void reshape(int w,int h);  
12. void display( void );  
13. void keyboardAction( unsigned char key, int x, int y );  
14.   
15.   
16. GLuint vboId;//vertex buffer object句柄  
17. GLuint vaoId;//vertext array object句柄  
18. GLuint programId;//shader program 句柄  
19.   
20. int main( int argc, char **argv )  
21. {  
22.     glutInit(&argc, argv);  
23.     glutInitDisplayMode( GLUT_RGBA|GLUT_DOUBLE);  
24.     glutInitWindowPosition(100,100);  
25.     glutInitWindowSize( 512, 512 );  
26.     glutCreateWindow( "Triangle demo" );  
27.   
28.     glewInit();  
29.     userInit();  
30.     glutReshapeFunc(reshape);  
31.     glutDisplayFunc( display );  
32.     glutKeyboardFunc( keyboardAction );  
33.     glutMainLoop();  
34.     return 0;  
35. }  
36. //自定义初始化函数  
37. void userInit()  
38. {  
39.      glClearColor( 0.0, 0.0, 0.0, 0.0 );  
40.      //顶点位置和颜色数据  
41.      const GLfloat vertexData[] = {  
42.         -0.5f,0.0f,0.0f,1.0f,  
43.         0.5f,0.0f,0.0f,1.0f,  
44.         0.0f,0.5f,0.0f,1.0f,  
45.         1.0f,0.0f,0.0f,1.0f,  
46.         0.0f,1.0f,0.0f,1.0f,  
47.         0.0f,0.0f,1.0f,1.0f  
48.      };  
49.      //创建vertex array object对象  
50.      glGenVertexArrays(1,&vaoId);  
51.      glBindVertexArray(vaoId);  
52.      //创建vertex buffer object对象  
53.      glGenBuffers(1,&vboId);  
54.      glBindBuffer(GL_ARRAY_BUFFER,vboId);  
55.      glBufferData(GL_ARRAY_BUFFER,sizeof(vertexData),vertexData,GL_STATIC_DRAW);  
56.      glBindBuffer(GL_ARRAY_BUFFER,0);  
57.      //从文件创建着色器  
58.     std::vector<GLuint> idVector;  
59.     idVector.push_back(Shader::createShader(GL_VERTEX_SHADER,"data\\vertex.glsl"));  
60.     idVector.push_back(Shader::createShader(GL_FRAGMENT_SHADER,"data\\fragment.glsl"));  
61.     programId = Shader::createProgram(idVector);  
62. }  
63. //调整窗口大小回调函数  
64. void reshape(int w,int h)  
65. {  
66.     glViewport(0,0,(GLsizei)w,(GLsizei)h);  
67. }  
68. //绘制回调函数  
69. void display( void )  
70. {     
71.   
72.     glClear(GL_COLOR_BUFFER_BIT);  
73.     glUseProgram(programId);  
74.     glBindBuffer(GL_ARRAY_BUFFER,vboId);  
75.     //启用顶点位置属性索引  
76.     glEnableVertexAttribArray(0);  
77.     glVertexAttribPointer(0,4,GL_FLOAT,GL_FALSE,0,0);  
78.     //启用顶点颜色属性索引  
79.     glEnableVertexAttribArray(1);  
80.     glVertexAttribPointer(1,4,GL_FLOAT,GL_FALSE,0,(void*)48);  
81.     //绘制三角形  
82.     glDrawArrays(GL_TRIANGLES, 0, 3);  
83.   
84.     glBindBuffer(GL_ARRAY_BUFFER,0);  
85.     glUseProgram(0);  
86.     glDisableVertexAttribArray(0);  
87.     glDisableVertexAttribArray(1);  
88.   
89.     glutSwapBuffers();  
90. }  
91. //键盘按键回调函数  
92. void keyboardAction( unsigned char key, int x, int y )  
93. {  
94.     switch( key )   
95.     {  
96.         case 033:  // Escape key  
97.             exit( EXIT_SUCCESS );  
98.             break;  
99.     }  
100. }  

程序运行效果如下图:

这里三个顶点的颜色分别是红绿蓝，其中间的属于插值产生的颜色，符合插值效果。