OpenGL 入门基础教程 —— 添加纹理

电玩女神 2023-10-17 13:38 136阅读 0赞

参考资料：http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-5-a-textured-cube/

**知识点1：UV坐标**

给模型贴纹理时，我们需要通过UV坐标来告诉OpenGL用哪块图像填充三角形。  
  
每个顶点除了位置坐标外还有两个浮点数坐标：U和V。这两个坐标用于访问纹理，UV坐标是指所有的图象文件都是二维的一个平面。水平方向是U，垂直方向是V，通过这个平面的，二维的UV坐标系。我们可以定位图象上的任意一个象素。如下图所示：

![20170606201516155][]

UV坐标和顶点、颜色一样也是一种属性，方法相同：定义、创建、绑定、填充、配置

**UV坐标预设**：这里需要注意一点，反转UV坐标，DXT压缩源自DirectX，和OpenGL相比，DirectX中的V纹理坐标是反过来的。所以使用压缩纹理时，得用(coord.v, 1.0-coord.v)来获取正确的纹理。可以在导出脚本、加载器、着色器等环节中执行这步操作

static GLfloat g_uv_buffer_data[] = { 
    		0.000059f, 1.0f-0.000004f, 
    		0.000103f, 1.0f-0.336048f, 
    		0.335973f, 1.0f-0.335903f, 
    		1.000023f, 1.0f-0.000013f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.999958f, 1.0f-0.336064f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.336024f, 1.0f-0.671877f, 
    		0.667969f, 1.0f-0.671889f, 
    		1.000023f, 1.0f-0.000013f, 
    		0.668104f, 1.0f-0.000013f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.000059f, 1.0f-0.000004f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.336098f, 1.0f-0.000071f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.336024f, 1.0f-0.671877f, 
    		1.000004f, 1.0f-0.671847f, 
    		0.999958f, 1.0f-0.336064f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.668104f, 1.0f-0.000013f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.668104f, 1.0f-0.000013f, 
    		0.336098f, 1.0f-0.000071f, 
    		0.000103f, 1.0f-0.336048f, 
    		0.000004f, 1.0f-0.671870f, 
    		0.336024f, 1.0f-0.671877f, 
    		0.000103f, 1.0f-0.336048f, 
    		0.336024f, 1.0f-0.671877f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.667969f, 1.0f-0.671889f, 
    		1.000004f, 1.0f-0.671847f, 
    		0.667979f, 1.0f-0.335851f
    	};
    
    	//纹理坐标的改动
    	for (int i = 0; i < 36; ++i)
    	{
    		g_uv_buffer_data[i*2+1] = 1 - g_uv_buffer_data[i*2+1];
    	}

**UV缓冲区**：

GLuint uvbuffer;
    	glGenBuffers(1, &uvbuffer);
    	glBindBuffer(GL_ARRAY_BUFFER, uvbuffer);
    	glBufferData(GL_ARRAY_BUFFER, sizeof(g_uv_buffer_data), g_uv_buffer_data, GL_STATIC_DRAW);

**主循环中的配置**：

glEnableVertexAttribArray(1);
    		glBindBuffer(GL_ARRAY_BUFFER, uvbuffer);
    		glVertexAttribPointer(
    			1,                                // attribute. No particular reason for 1, but must match the layout in the shader.
    			2,                                // size : U+V => 2
    			GL_FLOAT,                         // type
    			GL_FALSE,                         // normalized?
    			0,                                // stride
    			(void*)0                          // array buffer offset
    		);

**知识点2：纹理加载函数**

这里需要对bmp等图片的格式进行了解，或是DDS格式的贴图，这里不再赘述

#include <stdio.h>
    #include <stdlib.h>
    #include <string.h>
    
    #include <GL/glew.h>
    
    #include <glfw3.h>
    
    
    GLuint loadBMP_custom(const char * imagepath){
    
    	printf("Reading image %s\n", imagepath);
    
    	// Data read from the header of the BMP file
    	unsigned char header[54];
    	unsigned int dataPos;
    	unsigned int imageSize;
    	unsigned int width, height;
    	// Actual RGB data
    	unsigned char * data;
    
    	// Open the file
    	FILE * file = fopen(imagepath,"rb");
    	if (!file)							    {printf("%s could not be opened. Are you in the right directory ? Don't forget to read the FAQ !\n", imagepath); getchar(); return 0;}
    
    	// Read the header, i.e. the 54 first bytes
    
    	// If less than 54 bytes are read, problem
    	if ( fread(header, 1, 54, file)!=54 ){ 
    		printf("Not a correct BMP file\n");
    		return 0;
    	}
    	// A BMP files always begins with "BM"
    	if ( header[0]!='B' || header[1]!='M' ){
    		printf("Not a correct BMP file\n");
    		return 0;
    	}
    	// Make sure this is a 24bpp file
    	if ( *(int*)&(header[0x1E])!=0  )         {printf("Not a correct BMP file\n");    return 0;}
    	if ( *(int*)&(header[0x1C])!=24 )         {printf("Not a correct BMP file\n");    return 0;}
    
    	// Read the information about the image
    	dataPos    = *(int*)&(header[0x0A]);
    	imageSize  = *(int*)&(header[0x22]);
    	width      = *(int*)&(header[0x12]);
    	height     = *(int*)&(header[0x16]);
    
    	// Some BMP files are misformatted, guess missing information
    	if (imageSize==0)    imageSize=width*height*3; // 3 : one byte for each Red, Green and Blue component
    	if (dataPos==0)      dataPos=54; // The BMP header is done that way
    
    	// Create a buffer
    	data = new unsigned char [imageSize];
    
    	// Read the actual data from the file into the buffer
    	fread(data,1,imageSize,file);
    
    	// Everything is in memory now, the file wan be closed
    	fclose (file);
    
    	// Create one OpenGL texture
    	GLuint textureID;
    	glGenTextures(1, &textureID);
    	
    	// "Bind" the newly created texture : all future texture functions will modify this texture
    	glBindTexture(GL_TEXTURE_2D, textureID);
    
    	// Give the image to OpenGL
    	glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, data);
    
    	// OpenGL has now copied the data. Free our own version
    	delete [] data;
    
    	// Poor filtering, or ...
    	//glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    	//glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); 
    
    	// ... nice trilinear filtering.
    	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); 
    	glGenerateMipmap(GL_TEXTURE_2D);
    
    	// Return the ID of the texture we just created
    	return textureID;
    }
    
    // Since GLFW 3, glfwLoadTexture2D() has been removed. You have to use another texture loading library, 
    // or do it yourself (just like loadBMP_custom and loadDDS)
    //GLuint loadTGA_glfw(const char * imagepath){
    //
    //	// Create one OpenGL texture
    //	GLuint textureID;
    //	glGenTextures(1, &textureID);
    //
    //	// "Bind" the newly created texture : all future texture functions will modify this texture
    //	glBindTexture(GL_TEXTURE_2D, textureID);
    //
    //	// Read the file, call glTexImage2D with the right parameters
    //	glfwLoadTexture2D(imagepath, 0);
    //
    //	// Nice trilinear filtering.
    //	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    //	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    //	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    //	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); 
    //	glGenerateMipmap(GL_TEXTURE_2D);
    //
    //	// Return the ID of the texture we just created
    //	return textureID;
    //}
    
    
    
    #define FOURCC_DXT1 0x31545844 // Equivalent to "DXT1" in ASCII
    #define FOURCC_DXT3 0x33545844 // Equivalent to "DXT3" in ASCII
    #define FOURCC_DXT5 0x35545844 // Equivalent to "DXT5" in ASCII
    
    GLuint loadDDS(const char * imagepath){
    
    	unsigned char header[124];
    
    	FILE *fp; 
     
    	/* try to open the file */ 
    	fp = fopen(imagepath, "rb"); 
    	if (fp == NULL){
    		printf("%s could not be opened. Are you in the right directory ? Don't forget to read the FAQ !\n", imagepath); getchar(); 
    		return 0;
    	}
       
    	/* verify the type of file */ 
    	char filecode[4]; 
    	fread(filecode, 1, 4, fp); 
    	if (strncmp(filecode, "DDS ", 4) != 0) { 
    		fclose(fp); 
    		return 0; 
    	}
    	
    	/* get the surface desc */ 
    	fread(&header, 124, 1, fp); 
    
    	unsigned int height      = *(unsigned int*)&(header[8 ]);
    	unsigned int width	     = *(unsigned int*)&(header[12]);
    	unsigned int linearSize	 = *(unsigned int*)&(header[16]);
    	unsigned int mipMapCount = *(unsigned int*)&(header[24]);
    	unsigned int fourCC      = *(unsigned int*)&(header[80]);
    
     
    	unsigned char * buffer;
    	unsigned int bufsize;
    	/* how big is it going to be including all mipmaps? */ 
    	bufsize = mipMapCount > 1 ? linearSize * 2 : linearSize; 
    	buffer = (unsigned char*)malloc(bufsize * sizeof(unsigned char)); 
    	fread(buffer, 1, bufsize, fp); 
    	/* close the file pointer */ 
    	fclose(fp);
    
    	unsigned int components  = (fourCC == FOURCC_DXT1) ? 3 : 4; 
    	unsigned int format;
    	switch(fourCC) 
    	{ 
    	case FOURCC_DXT1: 
    		format = GL_COMPRESSED_RGBA_S3TC_DXT1_EXT; 
    		break; 
    	case FOURCC_DXT3: 
    		format = GL_COMPRESSED_RGBA_S3TC_DXT3_EXT; 
    		break; 
    	case FOURCC_DXT5: 
    		format = GL_COMPRESSED_RGBA_S3TC_DXT5_EXT; 
    		break; 
    	default: 
    		free(buffer); 
    		return 0; 
    	}
    
    	// Create one OpenGL texture
    	GLuint textureID;
    	glGenTextures(1, &textureID);
    
    	// "Bind" the newly created texture : all future texture functions will modify this texture
    	glBindTexture(GL_TEXTURE_2D, textureID);
    	glPixelStorei(GL_UNPACK_ALIGNMENT,1);	
    	
    	unsigned int blockSize = (format == GL_COMPRESSED_RGBA_S3TC_DXT1_EXT) ? 8 : 16; 
    	unsigned int offset = 0;
    
    	/* load the mipmaps */ 
    	for (unsigned int level = 0; level < mipMapCount && (width || height); ++level) 
    	{ 
    		unsigned int size = ((width+3)/4)*((height+3)/4)*blockSize; 
    		glCompressedTexImage2D(GL_TEXTURE_2D, level, format, width, height,  
    			0, size, buffer + offset); 
    	 
    		offset += size; 
    		width  /= 2; 
    		height /= 2; 
    
    		// Deal with Non-Power-Of-Two textures. This code is not included in the webpage to reduce clutter.
    		if(width < 1) width = 1;
    		if(height < 1) height = 1;
    
    	} 
    
    	free(buffer); 
    
    	return textureID;
    
    
    }

**知识点3：提高纹理质量**

在loadBMP\_custom函数中，有如下两行代码：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

这意味着在片段着色器中，texture()将直接提取位于(U,V)坐标的纹素（texel）。造成一下的效果：

![20170606203109989][]

有几种方法可以改善这一状况。

**线性过滤（Linear filtering）**  
  
若采用线性过滤。texture()会查看周围的纹素，然后根据UV坐标距离各纹素中心的距离来混合颜色。这就避免了前面看到的锯齿状边缘。  
![20170606203017897][]  
  
  
线性过滤可以显著改善纹理质量，应用的也很多。但若想获得更高质量的纹理，可以采用各向异性过滤，不过速度有些慢。  
  
**各向异性过滤（Anisotropic filtering）**  
  
这种方法逼近了真正片断中的纹素区块。例如下图中稍稍旋转了的纹理，各向异性过滤将沿蓝色矩形框的主方向，作一定数量的采样（即所谓的”各向异性层级”），计算出其内的颜色。  
![20170606203124864][]  
  
  
**Mipmaps**  
  
线性过滤和各向异性过滤都存在一个共同的问题。那就是如果从远处观察纹理，只对4个纹素作混合显得不够。实际上，如果3D模型位于很远的地方，屏幕上只看得见一个片断（像素），那计算平均值得出最终颜色值时，图像所有的纹素都应该考虑在内。很显然，这种做法没有考虑性能问题。撇开两种过滤方法不谈，这里要介绍的是mipmap技术：  
![20170606203157366][]  
  
一开始，把图像缩小到原来的1/2，然后依次缩小，直到图像只有1x1大小（应该是图像所有纹素的平均值）  
绘制模型时，根据纹素大小选择合适的mipmap。  
可以选用nearest、linear、anisotropic等任意一种滤波方式来对mipmap采样。  
要想效果更好，可以对两个mipmap采样然后混合，得出结果。

好在这个比较简单，OpenGL都帮我们做好了，只需一个简单的调用：

// When MAGnifying the image (no bigger mipmap available), use LINEAR filtering
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// When MINifying the image, use a LINEAR blend of two mipmaps, each filtered LINEARLY too
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);

// Generate mipmaps, by the way.
    glGenerateMipmap(GL_TEXTURE_2D);

**知识点4：使用DDS文件加载纹理**

DDS图像已压缩为可被GPU直接使用的格式。在着色中随时调用texture()均可以实时解压。这一过程看似很慢，但由于它节省了很多内存空间，传输的数据量就少了。传输内存数据开销很大；纹理解压缩却几乎不耗时（有专门的硬件负责此事）。一般情况下，采用压缩纹理可使性能提升20%。

dds是DirectDraw Surface的缩写，实际上，它是DirectX纹理压缩（DirectX Texture Compression，简称DXTC）的产物。DXTC减少了纹理内存消耗的50%甚至更多，有3种DXTC的格式可供使用，它们分别是DXT1，DXT3和DXT5。

**知识点5：十分重要的一点：\*\* 使用2次幂（power-of-two）的纹理！\*\***  
  
优质纹理： 128128, 256256, 10241024, 2\*2…  
劣质纹理： 127128, 35, …  
勉强可以但很怪异的纹理： 128\*256

**代码的特别之处**：

1：翻转了UV坐标，适应于OpenGL

2：使用了自己的bmp纹理：注意添加自己的文件时，需要放在源文件中，不是生成的工程文件中。

// Include standard headers
    #include <stdio.h>
    #include <stdlib.h>
    
    // Include GLEW
    #include <GL/glew.h>
    
    // Include GLFW
    #include <glfw3.h>
    GLFWwindow* window;
    
    // Include GLM
    #include <glm/glm.hpp>
    #include <glm/gtc/matrix_transform.hpp>
    using namespace glm;
    
    #include <common/shader.hpp>
    #include <common/texture.hpp>
    
    int main( void )
    {
    	// Initialise GLFW
    	if( !glfwInit() )
    	{
    		fprintf( stderr, "Failed to initialize GLFW\n" );
    		return -1;
    	}
    
    	glfwWindowHint(GLFW_SAMPLES, 4);
    	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // To make MacOS happy; should not be needed
    	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    
    	// Open a window and create its OpenGL context
    	window = glfwCreateWindow( 1024, 768, "Tutorial 05 - Textured Cube", NULL, NULL);
    	if( window == NULL ){
    		fprintf( stderr, "Failed to open GLFW window. If you have an Intel GPU, they are not 3.3 compatible. Try the 2.1 version of the tutorials.\n" );
    		glfwTerminate();
    		return -1;
    	}
    	glfwMakeContextCurrent(window);
    
    	// Initialize GLEW
    	glewExperimental = true; // Needed for core profile
    	if (glewInit() != GLEW_OK) {
    		fprintf(stderr, "Failed to initialize GLEW\n");
    		return -1;
    	}
    
    	// Ensure we can capture the escape key being pressed below
    	glfwSetInputMode(window, GLFW_STICKY_KEYS, GL_TRUE);
    
    	// Dark blue background
    	glClearColor(0.0f, 0.0f, 0.4f, 0.0f);
    
    	// Enable depth test
    	glEnable(GL_DEPTH_TEST);
    	// Accept fragment if it closer to the camera than the former one
    	glDepthFunc(GL_LESS); 
    
    	GLuint VertexArrayID;
    	glGenVertexArrays(1, &VertexArrayID);
    	glBindVertexArray(VertexArrayID);
    
    	// Create and compile our GLSL program from the shaders
    	GLuint programID = LoadShaders( "TransformVertexShader.vertexshader", "TextureFragmentShader.fragmentshader" );
    
    	// Get a handle for our "MVP" uniform
    	GLuint MatrixID = glGetUniformLocation(programID, "MVP");
    
    	// Projection matrix : 45?Field of View, 4:3 ratio, display range : 0.1 unit <-> 100 units
    	glm::mat4 Projection = glm::perspective(45.0f, 4.0f / 3.0f, 0.1f, 100.0f);
    	// Camera matrix
    	glm::mat4 View       = glm::lookAt(
    								glm::vec3(4,3,3), // Camera is at (4,3,3), in World Space
    								glm::vec3(0,0,0), // and looks at the origin
    								glm::vec3(0,1,0)  // Head is up (set to 0,-1,0 to look upside-down)
    						   );
    	// Model matrix : an identity matrix (model will be at the origin)
    	glm::mat4 Model      = glm::mat4(1.0f);
    	// Our ModelViewProjection : multiplication of our 3 matrices
    	glm::mat4 MVP        = Projection * View * Model; // Remember, matrix multiplication is the other way around
    
    	// Load the texture using any two methods
    	GLuint Texture = loadBMP_custom("47.bmp");
    	/*GLuint Texture = loadDDS("uvtemplate.DDS");*/
    	
    	// Get a handle for our "myTextureSampler" uniform
    	GLuint TextureID  = glGetUniformLocation(programID, "myTextureSampler");
    
    	// Our vertices. Tree consecutive floats give a 3D vertex; Three consecutive vertices give a triangle.
    	// A cube has 6 faces with 2 triangles each, so this makes 6*2=12 triangles, and 12*3 vertices
    	static const GLfloat g_vertex_buffer_data[] = { 
    		-1.0f,-1.0f,-1.0f,
    		-1.0f,-1.0f, 1.0f,
    		-1.0f, 1.0f, 1.0f,
    		 1.0f, 1.0f,-1.0f,
    		-1.0f,-1.0f,-1.0f,
    		-1.0f, 1.0f,-1.0f,
    		 1.0f,-1.0f, 1.0f,
    		-1.0f,-1.0f,-1.0f,
    		 1.0f,-1.0f,-1.0f,
    		 1.0f, 1.0f,-1.0f,
    		 1.0f,-1.0f,-1.0f,
    		-1.0f,-1.0f,-1.0f,
    		-1.0f,-1.0f,-1.0f,
    		-1.0f, 1.0f, 1.0f,
    		-1.0f, 1.0f,-1.0f,
    		 1.0f,-1.0f, 1.0f,
    		-1.0f,-1.0f, 1.0f,
    		-1.0f,-1.0f,-1.0f,
    		-1.0f, 1.0f, 1.0f,
    		-1.0f,-1.0f, 1.0f,
    		 1.0f,-1.0f, 1.0f,
    		 1.0f, 1.0f, 1.0f,
    		 1.0f,-1.0f,-1.0f,
    		 1.0f, 1.0f,-1.0f,
    		 1.0f,-1.0f,-1.0f,
    		 1.0f, 1.0f, 1.0f,
    		 1.0f,-1.0f, 1.0f,
    		 1.0f, 1.0f, 1.0f,
    		 1.0f, 1.0f,-1.0f,
    		-1.0f, 1.0f,-1.0f,
    		 1.0f, 1.0f, 1.0f,
    		-1.0f, 1.0f,-1.0f,
    		-1.0f, 1.0f, 1.0f,
    		 1.0f, 1.0f, 1.0f,
    		-1.0f, 1.0f, 1.0f,
    		 1.0f,-1.0f, 1.0f
    	};
    
    	// Two UV coordinatesfor each vertex. They were created withe Blender.
    	static GLfloat g_uv_buffer_data[] = { 
    		0.000059f, 1.0f-0.000004f, 
    		0.000103f, 1.0f-0.336048f, 
    		0.335973f, 1.0f-0.335903f, 
    		1.000023f, 1.0f-0.000013f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.999958f, 1.0f-0.336064f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.336024f, 1.0f-0.671877f, 
    		0.667969f, 1.0f-0.671889f, 
    		1.000023f, 1.0f-0.000013f, 
    		0.668104f, 1.0f-0.000013f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.000059f, 1.0f-0.000004f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.336098f, 1.0f-0.000071f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.336024f, 1.0f-0.671877f, 
    		1.000004f, 1.0f-0.671847f, 
    		0.999958f, 1.0f-0.336064f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.668104f, 1.0f-0.000013f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.667979f, 1.0f-0.335851f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.668104f, 1.0f-0.000013f, 
    		0.336098f, 1.0f-0.000071f, 
    		0.000103f, 1.0f-0.336048f, 
    		0.000004f, 1.0f-0.671870f, 
    		0.336024f, 1.0f-0.671877f, 
    		0.000103f, 1.0f-0.336048f, 
    		0.336024f, 1.0f-0.671877f, 
    		0.335973f, 1.0f-0.335903f, 
    		0.667969f, 1.0f-0.671889f, 
    		1.000004f, 1.0f-0.671847f, 
    		0.667979f, 1.0f-0.335851f
    	};
    
    	//纹理坐标的改动
    	for (int i = 0; i < 36; ++i)
    	{
    		g_uv_buffer_data[i*2+1] = 1 - g_uv_buffer_data[i*2+1];
    	}
    
    	GLuint vertexbuffer;
    	glGenBuffers(1, &vertexbuffer);
    	glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
    	glBufferData(GL_ARRAY_BUFFER, sizeof(g_vertex_buffer_data), g_vertex_buffer_data, GL_STATIC_DRAW);
    
    	GLuint uvbuffer;
    	glGenBuffers(1, &uvbuffer);
    	glBindBuffer(GL_ARRAY_BUFFER, uvbuffer);
    	glBufferData(GL_ARRAY_BUFFER, sizeof(g_uv_buffer_data), g_uv_buffer_data, GL_STATIC_DRAW);
    
    	do{
    
    		// Clear the screen
    		glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    		// Use our shader
    		glUseProgram(programID);
    
    		// Send our transformation to the currently bound shader, 
    		// in the "MVP" uniform
    		glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP[0][0]);
    
    		// Bind our texture in Texture Unit 0
    		glActiveTexture(GL_TEXTURE0);
    		glBindTexture(GL_TEXTURE_2D, Texture);
    		// Set our "myTextureSampler" sampler to user Texture Unit 0
    		glUniform1i(TextureID, 0);
    
    		// 1rst attribute buffer : vertices
    		glEnableVertexAttribArray(0);
    		glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
    		glVertexAttribPointer(
    			0,                  // attribute. No particular reason for 0, but must match the layout in the shader.
    			3,                  // size
    			GL_FLOAT,           // type
    			GL_FALSE,           // normalized?
    			0,                  // stride
    			(void*)0            // array buffer offset
    		);
    
    		// 2nd attribute buffer : UVs
    		glEnableVertexAttribArray(1);
    		glBindBuffer(GL_ARRAY_BUFFER, uvbuffer);
    		glVertexAttribPointer(
    			1,                                // attribute. No particular reason for 1, but must match the layout in the shader.
    			2,                                // size : U+V => 2
    			GL_FLOAT,                         // type
    			GL_FALSE,                         // normalized?
    			0,                                // stride
    			(void*)0                          // array buffer offset
    		);
    
    		// Draw the triangle !
    		glDrawArrays(GL_TRIANGLES, 0, 12*3); // 12*3 indices starting at 0 -> 12 triangles
    
    		glDisableVertexAttribArray(0);
    		glDisableVertexAttribArray(1);
    
    		// Swap buffers
    		glfwSwapBuffers(window);
    		glfwPollEvents();
    
    	} // Check if the ESC key was pressed or the window was closed
    	while( glfwGetKey(window, GLFW_KEY_ESCAPE ) != GLFW_PRESS &&
    		   glfwWindowShouldClose(window) == 0 );
    
    	// Cleanup VBO and shader
    	glDeleteBuffers(1, &vertexbuffer);
    	glDeleteBuffers(1, &uvbuffer);
    	glDeleteProgram(programID);
    	glDeleteTextures(1, &TextureID);
    	glDeleteVertexArrays(1, &VertexArrayID);
    
    	// Close OpenGL window and terminate GLFW
    	glfwTerminate();
    
    	return 0;
    }

[20170606201516155]: https://img-blog.csdn.net/20170606201516155
[20170606203109989]: https://img-blog.csdn.net/20170606203109989
[20170606203017897]: https://img-blog.csdn.net/20170606203017897
[20170606203124864]: https://img-blog.csdn.net/20170606203124864
[20170606203157366]: https://img-blog.csdn.net/20170606203157366