《GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形》的正确版本及源代码

目前，市面上很多人都看到过《GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形》这篇文章，结果发现最后运行结果(图a)跟文章描述的结果（图b）不一样：

今天，经过一下午的研究终于发现了问题所在：

（1）这篇文章主要是参考Tutorial2: VAOs, VBOs, Vertex and Fragment Shaders (C / SDL)，英文好的同学，有兴趣可以仔细读读。我也是读了这篇文章后，才发现《GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形》这篇论文的错误的。

（2）《GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形》在实例代码中，在生成shader program时，忘记加上

glBindAttribLocation(programHandle, 0, "VertexPosition"); //将Vertex Array Index 中的索引0缓存对象与Vertex shader中VertexPosition进行绑定。

glBindAttribLocation(programHandle, 1, "VertexColor"); //将Vertex Array Index 中的索引1缓存对象与Vertex shader中VertexColor进行绑定。

由于没有绑定，导致在vertex shader中VertexPosition根本就不是我们要传入进去的顶点数组，因此绘制出来的图形，结果不正确。

下面是我在《GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形》的基础上修改后的正确版本：

以前都是用Cg的，现在改用GLSL，又要重新学，不过两种语言很多都是相通的。

下面的例子是实现绘制一个三角形的简单程序。采用了VBO（veretx buffer object）、VAO（vertex array object）等OpenGL的一些新特性。越往后发展，可编程管线肯定是大势所趋，OpenGL里原来的一些固定管线的内容肯定会被废弃掉。所以从现在开始写程序就要养成使用新特性、采用可编程管线技术的好习惯。

一、VAO、VBO介绍

随着OpenGL状态和固定管线模式的移除，我们不在用任何glEnable函数调用，而且也不会有glVertex、glColor等函数调用。这就意味着我们需要一种新的方式来将数据传输到图形卡以渲染图形。我们可以采用VBO，或者是在OpenGL3以上版本引入的新的特性，叫做VAO。通过它，我们可以把顶点数据和颜色存储在不同的VBO中，但是在同一个VAO中。对于法线数据或者其他的顶点信息也是一样。

VAO，是这样一种方式：把对象信息直接存储在图形卡中，而不是在当我们需要的时候传输到图形卡。这就是Direct3D所采用得方式，而在OpenGL中只有OpenGL3.X以上的版本中采用。这就意味着我们的应用程序不用将数据传输到图形卡或者是从图形卡输出，这样也就获得了额外的性能提升。

使用VAO并不难。我们不需要大量的glVertex调用，而是把顶点数据存储在数组中，然后放进VBO，最后在VAO中存储相关的状态。记住：VAO中并没有存储顶点的相关属性数据。OpenGL会在后台为我们完成其他的功能。

 

使用VAO的步骤：

1、产生VAO

void glGenVertexArrays(GLsizei n,
  GLuint *arrays);

n：要产生的VAO对象的数量。

arrays：存放产生的VAO对象的名称。

2、绑定VAO

void glBindVertexArray(GLuint array);

array：要绑定的顶点数组的名字。

3、产生VBOs

void glGenBuffers(GLsizei  n,
  GLuint *    buffers);

产生缓冲区对象的名称。

参数含义和glGenVertexArrays类似。

4、绑定VBOs

void glBindBuffer(GLenum  target,
  GLuint    buffer);

绑定一个缓冲区对象。

target可能取值是：GL_ARRAY_BUFFER, GL_ELEMENT_ARRAY_BUFFER, GL_PIXEL_PACK_BUFFER, or GL_PIXEL_UNPACK_BUFFER.

当进行绑定之后，以前的绑定就失效了。

5、给VBO分配数据:

void glBufferData(   GLenum          target,

        GLsizeiptr      size,

        const GLvoid *        data,

        GLenum          usage);

target可能取值为：GL_ARRAY_BUFFER（表示顶点数据）, GL_ELEMENT_ARRAY_BUFFER（表示索引数据）,GL_PIXEL_PACK_BUFFER（表示从OpenGL获取的的像素数据）, or GL_PIXEL_UNPACK_BUFFER（表示传递给OpenGL的像素数据）.

参数含义：

size：缓冲区对象字节数

data：指针：指向用于拷贝到缓冲区对象的数据。或者是NULL，表示暂时不分配数据。

6、定义存放顶点属性数据的数组：

首先需要启用VAO中对应的顶点属性数组：

void glEnableVertexAttribArray(      GLuint    index);

index：指定了需要启用的顶点属性数组的索引

注意：它只在OpenGL2.0及其以上版本才有。

7、给对应的顶点属性数组指定数据：

void glVertexAttribPointer(      GLuint    index,

        GLint      size,

        GLenum          type,

        GLboolean     normalized,

        GLsizei  stride,

        const GLvoid *        pointer);

index：要指定数据的顶点属性数组的索引。

size：每个顶点属性的数据个数。可能的取值是1、2、3或者4.初始值是4.

type：数组中每个数据的类型。可能的取值是：GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_INT, GL_UNSIGNED_INT, GL_FLOAT, or GL_DOUBLE。初始值是GL_FLOAT。

normalized：指定顶点数在被访问的时候是否需要被归一化。

注意：如果有个非零的缓冲对象绑定到GL_ARRAY_BUFFER，那么pointer就是对应的缓冲区对象的偏移量。

 stride：两个连续顶点的属性之间的偏移量。

pointer：指向数组中的第一个顶点属性的第一个数据。

8、绑定VAO中的缓存对象与Vertex Shader中的attribute变量。

        glBindAttribLocation(programHandle, 0, "VertexPosition");
glBindAttribLocation(programHandle, 1, "VertexColor");

9、然后在进行渲染的时候，只需要绑定对应的VAO即可，操作起来十分方便。

glBindVertexArray(vaoHandle);

10、使用完毕之后需要清除绑定。

glBindVertexArray(0);

VAO参考资料：

VAO wiki

关于VAO的一篇博客

VAO

事实上，在这个简单的程序中，不用VAO，只用VBO也一样可以实现。只是采用VAO可以进一步提升性能，而且在较新版本的OpenGL中不用VAO的方式会被逐渐废弃。

二、GLSL入门

关于GLSL，可以参考红宝书的附录，上面介绍了GLSL的入门知识。

这里也有一个很好的入门教程，英文的：

GLSL入门tutorial

三、程序实例

下面贴出源代码（OpenGL，GLSL实现）：

basic.vert：

[cpp] view plain copy

 print?

1. //强制要求支持一个特定版本的GLSL版本  
2. #version 400  
3.   
4. in vec3 VertexPosition;  
5. in vec3 VertexColor;  
6.   
7. out vec3 Color;  
8.   
9. void main()  
10. {  
11.     Color =VertexColor;  
12.     gl_Position = vec4(VertexPosition,1.0);  
13. }  

basic.frag:

[cpp] view plain copy

 print?

1. #version 400  
2.   
3. in vec3 Color;  
4.   
5. out vec4 FragColor;  
6.   
7. void main()  
8. {  
9.     FragColor = vec4(Color,1.0);  
10. }  

主文件：

main.cpp：

[cpp] view plain copy

 print?

1. #pragma comment(lib,"glew32.lib")  
2.   
3. #include <GL/glew.h>  
4. #include "textfile.h"  
5.   
6. #include <GL/glut.h>  
7. #include <iostream>  
8. using namespace std;  
9.   
10. GLuint vShader,fShader;//顶点着色器对象  
11.   
12. //顶点位置数组  
13. float positionData[] = {  
14.     -0.8f, -0.8f, 0.0f,  
15.     0.8f, -0.8f, 0.0f,  
16.     0.0f,  0.8f, 0.0f };  
17. //颜色数组  
18. float colorData[] = {  
19.         1.0f, 0.0f, 0.0f,  
20.         0.0f, 1.0f, 0.0f,  
21.         0.0f, 0.0f, 1.0f };  
22.   
23. GLuint vaoHandle;//vertex array object  
24.   
25. void initShader(const char *VShaderFile,const char *FShaderFile)  
26. {  
27.     //1、查看GLSL和OpenGL的版本  
28.     const GLubyte *renderer = glGetString( GL_RENDERER );  
29.     const GLubyte *vendor = glGetString( GL_VENDOR );  
30.     const GLubyte *version = glGetString( GL_VERSION );  
31.     const GLubyte *glslVersion =   
32.         glGetString( GL_SHADING_LANGUAGE_VERSION );  
33.     GLint major, minor;  
34.     glGetIntegerv(GL_MAJOR_VERSION, &major);  
35.     glGetIntegerv(GL_MINOR_VERSION, &minor);  
36.     cout << "GL Vendor    :" << vendor << endl;  
37.     cout << "GL Renderer  : " << renderer << endl;  
38.     cout << "GL Version (string)  : " << version << endl;  
39.     cout << "GL Version (integer) : " << major << "." << minor << endl;  
40.     cout << "GLSL Version : " << glslVersion << endl;   
41.   
42.     //2、编译着色器  
43.     //创建着色器对象：顶点着色器  
44.     vShader = glCreateShader(GL_VERTEX_SHADER);  
45.     //错误检测  
46.     if (0 == vShader)  
47.     {  
48.         cerr << "ERROR : Create vertex shader failed" << endl;  
49.         exit(1);  
50.     }  
51.   
52.     //把着色器源代码和着色器对象相关联  
53.     const GLchar *vShaderCode = textFileRead(VShaderFile);  
54.     const GLchar *vCodeArray[1] = {vShaderCode};  
55.     glShaderSource(vShader,1,vCodeArray,NULL);  
56.   
57.     //编译着色器对象  
58.     glCompileShader(vShader);  
59.   
60.   
61.     //检查编译是否成功  
62.     GLint compileResult;  
63.     glGetShaderiv(vShader,GL_COMPILE_STATUS,&compileResult);  
64.     if (GL_FALSE == compileResult)  
65.     {  
66.         GLint logLen;  
67.         //得到编译日志长度  
68.         glGetShaderiv(vShader,GL_INFO_LOG_LENGTH,&logLen);  
69.         if (logLen > 0)  
70.         {  
71.             char *log = (char *)malloc(logLen);  
72.             GLsizei written;  
73.             //得到日志信息并输出  
74.             glGetShaderInfoLog(vShader,logLen,&written,log);  
75.             cerr << "vertex shader compile log : " << endl;  
76.             cerr << log << endl;  
77.             free(log);//释放空间  
78.         }  
79.     }  
80.   
81.     //创建着色器对象：片断着色器  
82.     fShader = glCreateShader(GL_FRAGMENT_SHADER);  
83.     //错误检测  
84.     if (0 == fShader)  
85.     {  
86.         cerr << "ERROR : Create fragment shader failed" << endl;  
87.         exit(1);  
88.     }  
89.   
90.     //把着色器源代码和着色器对象相关联  
91.     const GLchar *fShaderCode = textFileRead(FShaderFile);  
92.     const GLchar *fCodeArray[1] = {fShaderCode};  
93.     glShaderSource(fShader,1,fCodeArray,NULL);  
94.   
95.     //编译着色器对象  
96.     glCompileShader(fShader);  
97.   
98.     //检查编译是否成功  
99.     glGetShaderiv(fShader,GL_COMPILE_STATUS,&compileResult);  
100.     if (GL_FALSE == compileResult)  
101.     {  
102.         GLint logLen;  
103.         //得到编译日志长度  
104.         glGetShaderiv(fShader,GL_INFO_LOG_LENGTH,&logLen);  
105.         if (logLen > 0)  
106.         {  
107.             char *log = (char *)malloc(logLen);  
108.             GLsizei written;  
109.             //得到日志信息并输出  
110.             glGetShaderInfoLog(fShader,logLen,&written,log);  
111.             cerr << "fragment shader compile log : " << endl;  
112.             cerr << log << endl;  
113.             free(log);//释放空间  
114.         }  
115.     }  
116.   
117.     //3、链接着色器对象  
118.     //创建着色器程序  
119.     GLuint programHandle = glCreateProgram();  
120.     if (!programHandle)  
121.     {  
122.         cerr << "ERROR : create program failed" << endl;  
123.         exit(1);  
124.     }  
125.     //将着色器程序链接到所创建的程序中  
126.     glAttachShader(programHandle,vShader);  
127.     glAttachShader(programHandle,fShader); 
128. 
     
129.     glBindAttribLocation(programHandle, 0, "VertexPosition");
         glBindAttribLocation(programHandle, 1, "VertexColor");
130.  
131.     //将这些对象链接成一个可执行程序  
132.     glLinkProgram(programHandle);  
133.     //查询链接的结果  
134.     GLint linkStatus;  
135.     glGetProgramiv(programHandle,GL_LINK_STATUS,&linkStatus);  
136.     if (GL_FALSE == linkStatus)  
137.     {  
138.         cerr << "ERROR : link shader program failed" << endl;  
139.         GLint logLen;  
140.         glGetProgramiv(programHandle,GL_INFO_LOG_LENGTH,  
141.             &logLen);  
142.         if (logLen > 0)  
143.         {  
144.             char *log = (char *)malloc(logLen);  
145.             GLsizei written;  
146.             glGetProgramInfoLog(programHandle,logLen,  
147.                 &written,log);  
148.             cerr << "Program log : " << endl;  
149.             cerr << log << endl;  
150.         }  
151.     }  
152.     else//链接成功，在OpenGL管线中使用渲染程序  
153.     {  
154.         glUseProgram(programHandle);  
155.     }  
156. }  
157.   
158. void initVBO()  
159. {  
160.     // Create and populate the buffer objects  
161.     GLuint vboHandles[2];  
162.     glGenBuffers(2, vboHandles);  
163.     GLuint positionBufferHandle = vboHandles[0];  
164.     GLuint colorBufferHandle = vboHandles[1];  
165.   
166.     //绑定VBO以供使用  
167.     glBindBuffer(GL_ARRAY_BUFFER,positionBufferHandle);  
168.     //加载数据到VBO  
169.     glBufferData(GL_ARRAY_BUFFER,9 * sizeof(float),  
170.         positionData,GL_STATIC_DRAW);  
171.   
172.     //绑定VBO以供使用  
173.     glBindBuffer(GL_ARRAY_BUFFER,colorBufferHandle);  
174.     //加载数据到VBO  
175.     glBufferData(GL_ARRAY_BUFFER,9 * sizeof(float),  
176.         colorData,GL_STATIC_DRAW);  
177.   
178.     glGenVertexArrays(1,&vaoHandle);  
179.     glBindVertexArray(vaoHandle);  
180.   
181.     glEnableVertexAttribArray(0);//顶点坐标  
182.     glEnableVertexAttribArray(1);//顶点颜色  
183.   
184.     //调用glVertexAttribPointer之前需要进行绑定操作  
185.     glBindBuffer(GL_ARRAY_BUFFER, positionBufferHandle);  
186.     glVertexAttribPointer( 0, 3, GL_FLOAT, GL_FALSE, 0, (GLubyte *)NULL );  
187.   
188.     glBindBuffer(GL_ARRAY_BUFFER, colorBufferHandle);  
189.     glVertexAttribPointer( 1, 3, GL_FLOAT, GL_FALSE, 0, (GLubyte *)NULL );  
190. }  
191.   
192. void init()  
193. {  
194.     //初始化glew扩展库  
195.     GLenum err = glewInit();  
196.     if( GLEW_OK != err )  
197.     {  
198.         cout <<"Error initializing GLEW: " << glewGetErrorString(err) << endl;  
199.     }  
200.   
201.     initShader("basic.vert","basic.frag");  
202.   
203.     initVBO();  
204.   
205.     glClearColor(0.0,0.0,0.0,0.0);  
206.     //glShadeModel(GL_SMOOTH);  
207.   
208. }  
209.   
210. void display()  
211. {  
212.     glClear(GL_COLOR_BUFFER_BIT);  
213.   
214.     ////绘制一个三角形(使用普通方法)  
215.     //glBegin(GL_TRIANGLES);  
216.     //glColor3f(0.0f,1.0f,0.0f);  
217.     //glVertex3f(0.0f,1.0f,0.0f);  
218.   
219.     //glColor3f(0.0f,1.0f,0.0f);  
220.     //glVertex3f(-1.0f,-1.0f,0.0f);  
221.   
222.     //glColor3f(0.0f,0.0f,1.0f);  
223.     //glVertex3f(1.0f,-1.0f,0.0f);  
224.     //glEnd();  
225.   
226.     //使用VAO、VBO绘制  
227.     glBindVertexArray(vaoHandle);  
228.     glDrawArrays(GL_TRIANGLES,0,3);  
229.     glBindVertexArray(0);  
230.   
231.     glutSwapBuffers();  
232. }  
233.   
234. void keyboard(unsigned char key,int x,int y)  
235. {  
236.     switch(key)  
237.     {  
238.     case 27:  
239.         glDeleteShader(vShader);  
240.         glUseProgram(0);  
241.         break;  
242.     }  
243. }  
244.   
245. int main(int argc,char** argv)  
246. {  
247.     glutInit(&argc,argv);  
248.     glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);  
249.     glutInitWindowSize(600,600);  
250.     glutInitWindowPosition(100,100);  
251.     glutCreateWindow("GLSL Test : Draw a triangle");  
252.     init();  
253.     glutDisplayFunc(display);  
254.     glutKeyboardFunc(keyboard);  
255.       
256.     glutMainLoop();  
257.     return 0;  
258. }  

读取shader文件的程序：

textfile.h：

[cpp] view plain copy

 print?

1. // textfile.h: interface for reading and writing text files  
2. #ifndef TEXTFILE_H  
3. #define TEXTFILE_H  
4.   
5. #include <stdio.h>  
6. #include <stdlib.h>  
7. #include <string.h>  
8.   
9. char *textFileRead(const char *fn);  
10. int textFileWrite(char *fn, char *s);  
11. unsigned char *readDataFromFile(char *fn);  
12.   
13. #endif  

textfile.cpp：

[cpp] view plain copy

 print?

1. // textfile.cpp  
2. // simple reading and writing for text files  
3. #include "textfile.h"  
4.   
5. unsigned char * readDataFromFile(char *fn)  
6. {  
7.     FILE *fp;  
8.     unsigned char *content = NULL;  
9.   
10.     int count=0;  
11.   
12.     if (fn != NULL) {  
13.         fp = fopen(fn,"rb");  
14.   
15.         if (fp != NULL) {  
16.   
17.             fseek(fp, 0, SEEK_END);  
18.             count = ftell(fp);  
19.             rewind(fp);  
20.   
21.             if (count > 0) {  
22.                 content = (unsigned char *)malloc(sizeof(unsigned char) * (count+1));  
23.                 count = fread(content,sizeof(unsigned char),count,fp);  
24.                 content[count] = '\0';  
25.             }  
26.             fclose(fp);  
27.         }  
28.     }  
29.     return content;  
30.   
31. }  
32. char *textFileRead(const char *fn) {  
33.   
34.   
35.     FILE *fp;  
36.     char *content = NULL;  
37.   
38.     int count=0;  
39.   
40.     if (fn != NULL) {  
41.         fp = fopen(fn,"rt");  
42.   
43.         if (fp != NULL) {  
44.   
45.             fseek(fp, 0, SEEK_END);  
46.             count = ftell(fp);  
47.             rewind(fp);  
48.   
49.             if (count > 0) {  
50.                 content = (char *)malloc(sizeof(char) * (count+1));  
51.                 count = fread(content,sizeof(char),count,fp);  
52.                 content[count] = '\0';  
53.             }  
54.             fclose(fp);  
55.         }  
56.     }  
57.     return content;  
58. }  
59.   
60. int textFileWrite(char *fn, char *s) {  
61.   
62.     FILE *fp;  
63.     int status = 0;  
64.   
65.     if (fn != NULL) {  
66.         fp = fopen(fn,"w");  
67.   
68.         if (fp != NULL) {  
69.   
70.             if (fwrite(s,sizeof(char),strlen(s),fp) == strlen(s))  
71.                 status = 1;  
72.             fclose(fp);  
73.         }  
74.     }  
75.     return(status);  
76. }  

运行结果：