OpenGL学习脚印: 纹理映射基础篇

OpenGL学习脚印:  纹理映射基础篇

写在前面

              纹理映射是个复杂话题。本节旨在初步认识纹理映射概念，基本原理。同时进行了3个简单纹理映射的实验，熟悉在OpenGL中使用。参考资料列在文章末尾。

1.纹理映射基本概念

       纹理映射使用一个图案或者纹理来确定渲染流水线中片元处理阶段片元的颜色。

     简单来讲，纹理就是矩形的数据数组，例如颜色数据、亮度数据、颜色和alpha数据。纹理数组中的单个值常常称为纹理单元，也叫纹素(texel)，这里让它区别于像素，主要是为了强调它的应用方式。

    OpenGL支持1D、2D、3D以及立方体纹理，现在主要考虑2D纹理。

    纹理映射就是要实现，如何把纹素映射到几何对象的每个点。一个2D的纹理有一个宽度和高度，通过宽度和高度相乘即可得到有多少个纹素。

     那么如何来指定顶点的纹素呢?通过坐标来指定，但是这个坐标不应该是具体纹理的中坐标，而应该是抽象的纹理坐标空间中的坐标；否则通过指定具体纹理的坐标，当更换纹理，例如改变纹理的宽度和高度时，这些坐标值可能变得无意义，而不得不更新所有顶点的坐标值，因此需要使用抽象的纹理坐标空间的坐标。纹理坐标一般都规范化到[0,1]范围内。例如一个纹理宽度为320,高度为200,而纹理坐标(0.5,0.1)则表示纹素的位置在: (320*0.5,200*0.1)=(160,20)。通常使用UV坐标系来表示纹理坐标系:

  

      这里注意，OpenGL中V轴从下往上是正方向，U轴从左往右是正方向。在具体使用时，这与应用中纹理Y方向有关。如果纹理从上到下，则需要将纹理的Y方向翻转来满足这个图形所示的纹理坐标。

           与纹理映射有关的一个特性是，当模型进行变换时，纹理坐标仍然会跟着模型的顶点，他们并不进行变换(当然也有其他方法可以改变纹理坐标)，就好像粘着顶点一样。例如下图所示的三角形，如果在其中应用一个小的纹理：

         

       当对三角形进行变换时，纹理坐标保持不变，这样当模型进行旋转、拉伸和放缩时，纹理也会跟着变化，如下图所示：

      

          与纹理有关的另一个特性是纹理采样。当把纹理坐标映射到纹素数组时，正好得到对应纹素的中心位置的情况很少出现。解决这一问题的一种方法是，从纹素数组中取这样一个纹素，该纹素的位置，最佳逼近通过光栅化模块计算输出的纹理坐标。这样一方法成为点采样(Point sampling),也叫做nearest filtering。例如坐标(152.34,745.14)的纹素，就使用(152,745)来代替。用点采样容易产生走样误差。

       另外一种方法是线性滤波方法(linear filtering)。例如，如果计算出一个纹理坐标位于(152.34,745.14)，那么这个值对应的最近的4个纹理坐标为: ( (152,745), (153,745), (152,744) , (153,744) )。那么我们可以利用这4个纹理坐标的对应的颜色值进行线性插值，例如计算这一组纹素的加权平均值，并把该值作为纹理坐标映射到纹素数组时的纹素值。这种方法计算量要比点菜用大，效果一般比点采样好。

      OpenGL支持多种滤波类型，可以通过设置来进行选择。

       在进行纹理映射时，还需要考虑纹素与屏幕像素之间的对应关系。单个的纹素通常并不与屏幕像素对应，当纹素比单个像素大时，屏幕上多个像素对应于单个像素，称之为放大(manification);当纹素比单个像素小，屏幕上单个像素对应多个纹素，则称之为缩小(minification)。关系如下图所示(来自[2])：

2.纹理映射OpenGL实现

    OpenGL中纹理映射的步骤如下:

1.    创建纹理对象，并为他指定一个纹理
2.   确定纹理如何应用到每个像素上
3.   启用纹理贴图功能
4.   绘制场景，提供纹理坐标和几何图形坐标

     这里参考的是红宝书的步骤，实际上采用着色器方式的话流程稍微有所不同，主要是纹理坐标和几何图形坐标，可能在绘制场景之前在着色器中已经提供了。

      实现纹理映射主要关系到4个概念:纹理对象(the texture object), 纹理单元(the texture unit), 采样器对象(the sampler object )采样器变量(sampler uniform in the shader).他们的关系如下图所示：

       

          纹理对象包含了纹理数据，它可以是1D、2D、3D的，底层数据可以是RGB、RGBA格式的。

       纹理对象并不直接绑定到着色器，而是绑定到一个纹理单元，纹理单元的索引将会传递给着色器。要绑定到一个纹理单元，先要将其激活,可以使用glActiveTexture函数，例如glActiveTexture(GL_TEXTURE0)将激活单元0。可以使用多个纹理单元，每个纹理单元可以绑定到相同或者不同的纹理对象。有一点值得注意，只要纹理对象的类型不同，一个纹理单元可以绑定多个纹理对象。例如你可以分别将两个纹理对象绑定到同一个纹理单元的1D和 2D不同的目标上。

        你可以通过采样器变量来使用多个纹理，这个uniform变量有'sampler1D', 'sampler2D', 'sampler3D', 'samplerCube'等不同形式。在片元着色器中，采样函数需要通过采样器变量来访问多个纹理单元。

       采样器对象与纹理对象不相同。纹理对象中包含了纹理数据，以及配置采样操作的参数，这些参数是采样状态的一部分。然而，你也可以创建一个采样对象，用采样状态参数配置它，并把它绑定到纹理单元中。这样，采样器对象会覆盖纹理对象中定义的采样状态。目前我们并不使用这一对象。

3.纹理映射实验

     这里通过3个实验来认识OpenGL中纹理映射的实现。实验中使用的着色器是自己封装的类Shader，可以从《OpenGL学习脚印: 顶点数据传送和着色器处理1》一文中着色器的生成部分获取。当然这里的重点并不是理解如何构造着色器，使用其他替代库也可以。另外程序依赖于freeglut和glew库,加载图片时使用的是SOIL库。

3.1 在程序中生成纹理

纹理不一定都得从图片加载，也可以是程序中生成的纹理。参看[3]实现的程序中生成纹理，并映射到一个正方形的例子。

程序运行效果如下：

参考代码如下：

square.cpp

[cpp] view plaincopyprint?

1. //用程序生成纹理 映射正方形  
2. #include <string>  
3. #include <vector>  
4. #include <GL/glew.h>  
5. #include <GL/freeglut.h>  
6. #include <math.h>  
7. #include "shader.h"  
8. using namespace std;  
9.   
10. //依赖库  
11. #pragma comment(lib, "opengl32.lib")   
12. #pragma comment(lib, "glew32.lib")  
13. #pragma comment(lib, "freeglut.lib")  
14.   
15.   
16.   
17. void userInit();  
18. void reshape(int w,int h);  
19. void display( void );  
20. void keyboardAction( unsigned char key, int x, int y );  
21.   
22.   
23. GLuint vboId;//vertex buffer object句柄  
24. GLuint vaoId;//vertext array object句柄  
25. GLuint programId;//shader program 句柄  
26. GLuint textureId;//texture 句柄  
27. GLuint samplerId;//sampler变量句柄  
28. const int verticesNum = 6;  
29. //2个三角形的顶点及纹理坐标  
30. const float verticesData[] = {  
31.      -0.5,-0.5,0.0,  
32.      0.5,-0.5,0.0,  
33.      0.5,0.5,0.0,  
34.   
35.      0.5,0.5,0.0,  
36.      -0.5,0.5,0.0,  
37.      -0.5,-0.5,0.0,  
38.   
39.      0.0,0.0,0.0,  
40.      1.0,0.0,0.0,  
41.      1.0,1.0,0.0,  
42.        
43.      1.0,1.0,0.0,  
44.      0.0,1.0,0.0,  
45.      0.0,0.0,0.0  
46. };  
47. int main( int argc, char **argv )  
48. {  
49.     glutInit(&argc, argv);  
50.     glutInitDisplayMode( GLUT_RGBA|GLUT_DOUBLE);  
51.     glutInitWindowPosition(100,100);  
52.     glutInitWindowSize( 512, 512 );  
53.     glutCreateWindow( "Simple Texture Demo" );  
54.   
55.     glewInit();  
56.     userInit();  
57.     glutReshapeFunc(reshape);  
58.     glutDisplayFunc( display );  
59.     glutKeyboardFunc( keyboardAction );  
60.     glutMainLoop();  
61.     return 0;  
62. }  
63. void InitializeProgram()  
64. {  
65.     //从文件创建着色器  
66.     std::vector<GLuint> idVector;  
67.     idVector.push_back(Shader::createShader(GL_VERTEX_SHADER,"vertex.glsl"));  
68.     idVector.push_back(Shader::createShader(GL_FRAGMENT_SHADER,"fragment.glsl"));  
69.     programId = Shader::createProgram(idVector);  
70.     //获取offset uniform变量句柄  
71.     samplerId = glGetUniformLocation(programId,"gSampler");  
72. }  
73. //初始化VBO  
74. void InitializeVBO()  
75. {  
76.     //创建vertex buffer object对象  
77.      glGenBuffers(1,&vboId);  
78.      glBindBuffer(GL_ARRAY_BUFFER,vboId);  
79.      glBufferData(GL_ARRAY_BUFFER,sizeof(verticesData),verticesData,GL_STATIC_DRAW);  
80.       glBindBuffer(GL_ARRAY_BUFFER,0);  
81. }  
82. //初始化VAO  
83. void InitializeVAO()  
84. {  
85.      //创建vertex array object对象  
86.      glGenVertexArrays(1,&vaoId);  
87.      glBindVertexArray(vaoId);  
88.   
89.      glBindBuffer(GL_ARRAY_BUFFER,vboId);  
90.      //启用顶点着色器顶点坐标属性索引  
91.      glEnableVertexAttribArray(0);  
92.      glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,0,0);  
93.     //启用顶点着色器纹理坐标属性索引  
94.     glEnableVertexAttribArray(1);  
95.     size_t textCoordOffset = 3*sizeof(float) * verticesNum;  
96.     glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 0, (void*)textCoordOffset);  
97.   
98.     glBindBuffer(GL_ARRAY_BUFFER,0);  
99.     glBindVertexArray(0);  
100. }  
101. void InitializeTexture()  
102. {  
103.     //创建纹理对象  
104.     glGenTextures(1,&textureId);  
105.     glBindTexture(GL_TEXTURE_2D,textureId);  
106.   
107.     //设置采样参数  
108.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);  
109.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);  
110.     glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);  
111.     glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);  
112.   
113.     //定义纹理  
114.     float pixels[] = {  
115.         0.0f, 0.0f, 0.0f,   1.0f, 1.0f, 1.0f,  
116.         1.0f, 1.0f, 1.0f,   0.0f, 0.0f, 0.0f  
117.     };  
118.     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 2, 2, 0, GL_RGB, GL_FLOAT, pixels);  
119. }  
120. //自定义初始化函数  
121. void userInit()  
122. {  
123.      glClearColor( 0.0f, 0.2f, 0.1f, 0.0f );  
124.      glEnable(GL_TEXTURE_2D);  
125.      InitializeProgram();  
126.      InitializeVBO();  
127.      InitializeVAO();  
128.      InitializeTexture();  
129. }  
130. //绘制回调函数  
131. void display( void )  
132. {     
133.     glClear(GL_COLOR_BUFFER_BIT);  
134.     glUseProgram(programId);  
135.     glBindVertexArray(vaoId);  
136.     glActiveTexture(GL_TEXTURE0);  
137.     glBindTexture(GL_TEXTURE0,textureId);  
138.     glUniform1i(samplerId, 0);  
139.     //绘制三角形  
140.     glDrawArrays(GL_TRIANGLES, 0, verticesNum);  
141.     glUseProgram(0);  
142.     glBindVertexArray(0);  
143.     glutSwapBuffers();  
144. }  
145. //调整窗口大小回调函数  
146. void reshape(int w,int h)  
147. {  
148.     glViewport(0,0,(GLsizei)w,(GLsizei)h);  
149. }  
150. //键盘按键回调函数  
151. void keyboardAction( unsigned char key, int x, int y )  
152. {  
153.     switch( key )   
154.     {  
155.         case 033:  // Escape key  
156.             exit( EXIT_SUCCESS );  
157.             break;  
158.     }  
159. }  

vertex.glsl

[plain] view plaincopyprint?

1. #version 330  
2.   
3. layout(location = 0) in vec3 position;  
4. layout(location = 1) in vec3 textCoord;  
5.   
6. out vec3 textCoord0;  
7.   
8. void main()  
9. {  
10.     gl_Position = vec4(position,1.0);  
11.     textCoord0 = textCoord;  
12. }  

fragment.glsl

[plain] view plaincopyprint?

1. #version 330  
2.   
3. in vec3 textCoord0;  
4. uniform sampler2D gSampler;  
5.   
6. out vec4 fragColor;  
7.   
8. void main()  
9. {  
10.     fragColor = texture2D(gSampler,textCoord0.st);  
11. }  

3.2 从图片文件读取纹理

这个例子参考自[1] 。从图片中读取纹理，映射到四面体上。这里使用索引绘图方式实现，加载图形的库使用SOIL。

程序运行效果如下：

着色器代码同上，其余参考实现代码如下：

bricks.cpp

[cpp] view plaincopyprint?

1. //利用SOIL加载图片纹理 实现纹理映射  
2. #include <string>  
3. #include <vector>  
4. #include <GL/glew.h>  
5. #include <GL/freeglut.h>  
6. #include <math.h>  
7. #include "shader.h"  
8. #include "SOIL.h"  
9. #define ARRAY_COUNT( array ) (sizeof( array ) / (sizeof( array[0] ) * (sizeof( array ) != sizeof(void*) || sizeof( array[0] ) <= sizeof(void*))))  
10. using namespace std;  
11.   
12. //依赖库  
13. #pragma comment(lib, "opengl32.lib")   
14. #pragma comment(lib, "glew32.lib")  
15. #pragma comment(lib, "freeglut.lib")  
16. #pragma comment(lib, "SOIL.lib")  
17.   
18.   
19. void userInit();  
20. void reshape(int w,int h);  
21. void display( void );  
22. void keyboardAction( unsigned char key, int x, int y );  
23.   
24.   
25. GLuint vboId;//vertex buffer object句柄  
26. GLuint vaoId;//vertext array object句柄  
27. GLuint indexboId;//index buffer object句柄  
28. GLuint programId;//shader program 句柄  
29. GLuint textureId;//texture 句柄  
30. GLuint samplerId;//sampler变量句柄  
31. const int verticesNum = 4;  
32. //三角形的顶点及纹理坐标  
33. const float verticesData[] = {  
34.     -0.8f, 0.0f, 0.0f,  
35.     0.0f, -0.5f, 0.5,  
36.     0.8f, 0.0f, 0.0f,  
37.     0.0f, 0.8f, 0.0f,  
38.   
39.      0.0f, 0.0f,0.0f,  
40.      0.5f, 0.0f,0.0f,  
41.      1.0f, 0.0f,0.0f,  
42.      0.5f, 1.0f,0.0f  
43. };  
44. const GLshort indices[] = {  
45.     0,1,3,  
46.     1,2,3,  
47.     0,2,1,  
48.     0,3,2  
49. };  
50. int main( int argc, char **argv )  
51. {  
52.     glutInit(&argc, argv);  
53.     glutInitDisplayMode( GLUT_RGBA|GLUT_DOUBLE);  
54.     glutInitWindowPosition(100,100);  
55.     glutInitWindowSize( 512, 512 );  
56.     glutCreateWindow( "Simple Texture Demo" );  
57.   
58.     glewInit();  
59.     userInit();  
60.     glutReshapeFunc(reshape);  
61.     glutDisplayFunc( display );  
62.     glutKeyboardFunc( keyboardAction );  
63.     glutMainLoop();  
64.     return 0;  
65. }  
66. void InitializeProgram()  
67. {  
68.     //从文件创建着色器  
69.     std::vector<GLuint> idVector;  
70.     idVector.push_back(Shader::createShader(GL_VERTEX_SHADER,"vertex.glsl"));  
71.     idVector.push_back(Shader::createShader(GL_FRAGMENT_SHADER,"fragment.glsl"));  
72.     programId = Shader::createProgram(idVector);  
73.     //获取offset uniform变量句柄  
74.     samplerId = glGetUniformLocation(programId,"gSampler");  
75. }  
76. //初始化VBO   
77. void initializeVBO()  
78. {  
79.     glGenBuffers(1,&vboId);  
80.     glBindBuffer(GL_ARRAY_BUFFER,vboId);  
81.     glBufferData(GL_ARRAY_BUFFER,sizeof(verticesData),verticesData,GL_STATIC_DRAW);  
82.     glBindBuffer(GL_ARRAY_BUFFER,0);  
83.   
84.     glGenBuffers(1,&indexboId);  
85.     //绑定到GL_ELEMENT_ARRAY_BUFFER才能支持索引绘图  
86.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,indexboId);  
87.     glBufferData(GL_ELEMENT_ARRAY_BUFFER,sizeof(indices),indices,GL_STATIC_DRAW);  
88.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,0);  
89.   
90.   
91. }  
92. //初始化VAO  
93. void initializeVAO()  
94. {      
95.      //创建vertex array object对象  
96.      glGenVertexArrays(1,&vaoId);  
97.      glBindVertexArray(vaoId);  
98.      glBindBuffer(GL_ARRAY_BUFFER,vboId);  
99.      //启用顶点着色器顶点坐标属性索引  
100.      glEnableVertexAttribArray(0);  
101.      glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,0,0);  
102.     //启用顶点着色器纹理坐标属性索引  
103.     glEnableVertexAttribArray(1);  
104.     size_t textCoordOffset = 3*sizeof(float) * verticesNum;  
105.     glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 0, (void*)textCoordOffset);  
106.       
107.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,indexboId);  
108. }  
109. void InitializeTexture()  
110. {  
111.     //创建纹理对象  
112.     glGenTextures(1,&textureId);  
113.     glBindTexture(GL_TEXTURE_2D,textureId);  
114.   
115.     //设置采样参数  
116.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);  
117.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);  
118.     glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);  
119.     glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);  
120.   
121.     //利用SOIL加载图片纹理  
122.     int width,height;  
123.     unsigned char* image = SOIL_load_image("bricks.png",&width,&height,0,SOIL_LOAD_RGBA);  
124.     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image);  
125.     SOIL_free_image_data(image);  
126. }  
127. //自定义初始化函数  
128. void userInit()  
129. {  
130.      glClearColor( 0.0f, 0.0f, 0.0f, 0.0f );  
131.      InitializeProgram();  
132.      initializeVBO();  
133.      initializeVAO();  
134.      InitializeTexture();  
135.      glEnable(GL_TEXTURE_2D);  
136.      glEnable(GL_CULL_FACE);  
137.      glFrontFace(GL_CCW);  
138.      glCullFace(GL_BACK);  
139. }  
140. //绘制回调函数  
141. void display( void )  
142. {     
143.     glClear(GL_COLOR_BUFFER_BIT);  
144.     glUseProgram(programId);  
145.     glBindVertexArray(vaoId);  
146.     glActiveTexture(GL_TEXTURE0);  
147.     glBindTexture(GL_TEXTURE0,textureId);  
148.     glUniform1i(samplerId, 0);  
149.     //使用索引绘制四面体  
150.     glDrawElements(GL_TRIANGLES,ARRAY_COUNT(indices),GL_UNSIGNED_SHORT,0);  
151.     glUseProgram(0);  
152.     glBindVertexArray(0);  
153.     glutSwapBuffers();  
154. }  
155. //调整窗口大小回调函数  
156. void reshape(int w,int h)  
157. {  
158.     glViewport(0,0,(GLsizei)w,(GLsizei)h);  
159.     glMatrixMode(GL_PROJECTION);  
160.     glLoadIdentity();  
161.     gluPerspective(60.0,(GLfloat)w/(GLfloat)h,1.0,10.0);  
162.     glMatrixMode(GL_MODELVIEW);  
163.     glLoadIdentity();  
164.     gluLookAt(0.0,0.0,10.0,0.0,0.5,0.0,0.0,1.0,0.0);  
165. }  
166. //键盘按键回调函数  
167. void keyboardAction( unsigned char key, int x, int y )  
168. {  
169.     switch( key )   
170.     {  
171.         case 033:  // Escape key  
172.             exit( EXIT_SUCCESS );  
173.             break;  
174.     }  
175. }  

3.3 使用多个纹理

使用多个纹理对象，并对两个纹理进行线性插值。参考[3]实现的效果如下：

参考代码如下:

textureUnits.cpp

[cpp] view plaincopyprint?

1. //绑定多个texture unit   
2. #include <string>  
3. #include <vector>  
4. #include <GL/glew.h>  
5. #include <GL/freeglut.h>  
6. #include <math.h>  
7. #include "shader.h"  
8. #include "SOIL.h"  
9. #define ARRAY_COUNT( array ) (sizeof( array ) / (sizeof( array[0] ) * (sizeof( array ) != sizeof(void*) || sizeof( array[0] ) <= sizeof(void*))))  
10. using namespace std;  
11.   
12. //依赖库  
13. #pragma comment(lib, "opengl32.lib")   
14. #pragma comment(lib, "glew32.lib")  
15. #pragma comment(lib, "freeglut.lib")  
16. #pragma comment(lib, "SOIL.lib")  
17.   
18.   
19. void userInit();  
20. void reshape(int w,int h);  
21. void display( void );  
22. void keyboardAction( unsigned char key, int x, int y );  
23.   
24.   
25. GLuint vboId;//vertex buffer object句柄  
26. GLuint vaoId;//vertext array object句柄  
27. GLuint indexboId;//index buffer object句柄  
28. GLuint programId;//shader program 句柄  
29. GLuint textureIds[2];//texture 句柄  
30. GLuint samplerIds[2];//sampler变量句柄  
31. const int verticesNum = 4;  
32. //三角形的顶点及纹理坐标  
33. const float verticesData[] = {  
34.     -0.5f,-0.5f,0.0f, //bottom left  
35.      0.5f,-0.5f,0.0f, //bottom right  
36.      0.5f,0.5,0.0f,  //top right  
37.      -0.5f,0.5,0.0f, //top left  
38.   
39.      0.0f,0.0f,0.0f,  
40.      1.0f,0.0f,0.0f,  
41.      1.0f,1.0f,0.0f,  
42.      0.0f,1.0f,0.0f,  
43. };  
44. const GLshort indices[] = {  
45.     0,1,2,  
46.     2,3,0  
47. };  
48. int main( int argc, char **argv )  
49. {  
50.     glutInit(&argc, argv);  
51.     glutInitDisplayMode( GLUT_RGBA|GLUT_DOUBLE);  
52.     glutInitWindowPosition(100,100);  
53.     glutInitWindowSize( 512, 512 );  
54.     glutCreateWindow( "Simple Texture Demo" );  
55.   
56.     glewInit();  
57.     userInit();  
58.     glutReshapeFunc(reshape);  
59.     glutDisplayFunc( display );  
60.     glutKeyboardFunc( keyboardAction );  
61.     glutMainLoop();  
62.     return 0;  
63. }  
64. void InitializeProgram()  
65. {  
66.     //从文件创建着色器  
67.     std::vector<GLuint> idVector;  
68.     idVector.push_back(Shader::createShader(GL_VERTEX_SHADER,"vertex.glsl"));  
69.     idVector.push_back(Shader::createShader(GL_FRAGMENT_SHADER,"fragment.glsl"));  
70.     programId = Shader::createProgram(idVector);  
71.     //获取offset uniform变量句柄  
72.     samplerIds[0]= glGetUniformLocation(programId,"catSampler");  
73.     samplerIds[1]= glGetUniformLocation(programId,"dogSampler");  
74. }  
75. //初始化VBO   
76. void initializeVBO()  
77. {  
78.     glGenBuffers(1,&vboId);  
79.     glBindBuffer(GL_ARRAY_BUFFER,vboId);  
80.     glBufferData(GL_ARRAY_BUFFER,sizeof(verticesData),verticesData,GL_STATIC_DRAW);  
81.     glBindBuffer(GL_ARRAY_BUFFER,0);  
82.   
83.     glGenBuffers(1,&indexboId);  
84.     //绑定到GL_ELEMENT_ARRAY_BUFFER才能支持索引绘图  
85.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,indexboId);  
86.     glBufferData(GL_ELEMENT_ARRAY_BUFFER,sizeof(indices),indices,GL_STATIC_DRAW);  
87.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,0);  
88.   
89.   
90. }  
91. //初始化VAO  
92. void initializeVAO()  
93. {      
94.      //创建vertex array object对象  
95.      glGenVertexArrays(1,&vaoId);  
96.      glBindVertexArray(vaoId);  
97.      glBindBuffer(GL_ARRAY_BUFFER,vboId);  
98.      //启用顶点着色器顶点坐标属性索引  
99.      glEnableVertexAttribArray(0);  
100.      glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,0,0);  
101.     //启用顶点着色器纹理坐标属性索引  
102.     glEnableVertexAttribArray(1);  
103.     size_t textCoordOffset = 3*sizeof(float) * verticesNum;  
104.     glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 0, (void*)textCoordOffset);  
105.       
106.     glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,indexboId);  
107. }  
108. //初始化多个纹理对象  
109. void InitializeTexture()  
110. {  
111.     int width,height;  
112.     unsigned char* image;  
113.   
114.     glGenTextures(2,textureIds);  
115.   
116.     //创建纹理对象1  
117.     glActiveTexture(GL_TEXTURE0);  
118.     glBindTexture(GL_TEXTURE_2D,textureIds[0]);  
119.     image = SOIL_load_image("cat.png",&width,&height,0,SOIL_LOAD_RGBA);  
120.     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image);  
121.     SOIL_free_image_data(image);  
122.     //设置采样参数  
123.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);  
124.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);  
125.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  
126.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  
127.   
128.     //创建纹理对象2  
129.     glActiveTexture(GL_TEXTURE1);  
130.     glBindTexture(GL_TEXTURE_2D,textureIds[1]);  
131.     image = SOIL_load_image("dog.png",&width,&height,0,SOIL_LOAD_RGBA);  
132.     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image);  
133.     SOIL_free_image_data(image);  
134.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);  
135.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);  
136.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  
137.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  
138. }  
139. //自定义初始化函数  
140. void userInit()  
141. {  
142.      glClearColor( 0.0f, 0.0f, 0.0f, 0.0f );  
143.      InitializeProgram();  
144.      initializeVBO();  
145.      initializeVAO();  
146.      InitializeTexture();  
147.      glEnable(GL_TEXTURE_2D);  
148.      glEnable(GL_CULL_FACE);  
149.      glFrontFace(GL_CCW);  
150.      glCullFace(GL_BACK);  
151. }  
152. //绘制回调函数  
153. void display( void )  
154. {     
155.     glClear(GL_COLOR_BUFFER_BIT);  
156.     glUseProgram(programId);  
157.     glBindVertexArray(vaoId);  
158.   
159.     glActiveTexture(GL_TEXTURE0);  
160.     glBindTexture(GL_TEXTURE0,textureIds[0]);  
161.     glUniform1i(samplerIds[0], 0);  
162.   
163.     glActiveTexture(GL_TEXTURE1);  
164.     glBindTexture(GL_TEXTURE0,textureIds[1]);  
165.     glUniform1i(samplerIds[1], 1);  
166.   
167.     //使用索引绘制四面体  
168.     glDrawElements(GL_TRIANGLES,ARRAY_COUNT(indices),GL_UNSIGNED_SHORT,0);  
169.     glUseProgram(0);  
170.     glBindVertexArray(0);  
171.     glutSwapBuffers();  
172. }  
173. //调整窗口大小回调函数  
174. void reshape(int w,int h)  
175. {  
176.     glViewport(0,0,(GLsizei)w,(GLsizei)h);  
177.     glMatrixMode(GL_PROJECTION);  
178.     glLoadIdentity();  
179.     gluPerspective(60.0,(GLfloat)w/(GLfloat)h,1.0,10.0);  
180.     glMatrixMode(GL_MODELVIEW);  
181.     glLoadIdentity();  
182.     gluLookAt(0.0,0.0,10.0,0.0,0.5,0.0,0.0,1.0,0.0);  
183. }  
184. //键盘按键回调函数  
185. void keyboardAction( unsigned char key, int x, int y )  
186. {  
187.     switch( key )   
188.     {  
189.         case 033:  // Escape key  
190.             exit( EXIT_SUCCESS );  
191.             break;  
192.     }  
193. }  

vertex.glsl

[plain] view plaincopyprint?

1. #version 330  
2.   
3. layout(location = 0) in vec3 position;  
4. layout(location = 1) in vec3 tc;  
5.   
6. out vec3 textCoord;  
7.   
8. void main()  
9. {  
10.     gl_Position = vec4(position,1.0);  
11.     textCoord = vec3(tc.s,1.0-tc.t,0.0);  
12. }  

注意这里使用1.0-tc.t的作用是实现图片纹理的Y翻转。

fragment.glsl

[plain] view plaincopyprint?

1. #version 330  
2.   
3. in vec3 textCoord;  
4. uniform sampler2D catSampler;  
5. uniform sampler2D dogSampler;  
6. out vec4 fragColor;  
7.   
8. void main()  
9. {     
10.     fragColor = mix(texture2D(catSampler,textCoord.st),texture2D(dogSampler,textCoord.st),0.6);  
11. }  

使用mix函数对两个纹理进行线性插值。

参考资料:

[1]  Basic Texture Mapping

[2] Texture Parameter and Filtering

[3] Textures objects and parameters