紋理

紋理是一個2D圖片（甚至也有1D和3D的紋理），它可以用來添加物體的細節。
這是兩張照片疊加的效果

由下面兩張疊加而成

源代碼

shaders類在自定義著色器 中有完整的源代碼。
下邊我們使用stb_image.h來解析圖片。

#define GLEW_STATIC // 這個一定要加不然報錯 靜態鏈接庫#include<GL/glew.h> #include<GLFW/glfw3.h> #include<iostream> #include "Shaders.h"#define STB_IMAGE_IMPLEMENTATION#include "stb_image.h"using namespace std;void processInput(GLFWwindow);void processInput(GLFWwindow *window) {//如果鍵盤輸入esc 則觸發 退出if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {// 設置 要求退出glfwSetWindowShouldClose(window, true);} }// 逆時針方向繪制 默認情況下，逆時針的頂點連接順序被定義為三角形的正 // 逆時針或順時針都是相對于觀察者方向的 // uv(st)坐標 u(s)為x軸 v(t)為y軸 是給圖片定義的 范圍都是0 - 1 float vertices[]{// ---- 位置 ---- ---- 顏色 ---- - 紋理坐標 -0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, // 右上0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // 右下-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // 左下-0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f // 左上 }; // 使用索引來減小畫點的開銷 (未用索引緩沖對象時,每個點都需要畫一次(即使重復了)) unsigned int indices[]{0, 1, 2, //第一個三角形的索引2, 3, 0 //第二個三角形的索引 };int main() {// 初始化GLFWglfwInit();// 提示 我們使用的版本是3.3// 主版本glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);// 次版本glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);// 簡介glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);// 創建一個窗口對象GLFWwindow *window = glfwCreateWindow(800, 600, "Test window", NULL, NULL);if (window == NULL) {cout << "open window failed." << endl;// 終止 glfwglfwTerminate();}// 綁定window到上下文對象 創建完窗口我們就可以通知GLFW將我們窗口的上下文設置為當前線程的主上下文了glfwMakeContextCurrent(window);glewExperimental = true;// GLEW_OK 0//init GLEWif (glewInit() != GLEW_OK) {cout << "glew init failed." << endl;// 終止 glfwglfwTerminate();return -1;}// OpenGL渲染窗口的尺寸大小// glViewport函數前兩個參數控制窗口左下角的位置。第三個和第四個參數控制渲染窗口的寬度和高度（像素）glViewport(0, 0, 800, 600);// 設置剔除 （opegl默認正面背面都顯示（不剔除））//glEnable(GL_CULL_FACE);// 剔除背面 GL_BACK 剔除正面 GL_FRONT//glCullFace(GL_BACK);// 線框模式//第一個參數表示我們打算將其應用到所有的三角形的正面和背面，第二個參數告訴我們用線來繪制//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);//VAO對象unsigned int VAO;// 生成一個VAO對象 這個方法可以生成多個 由第一個參數決定glGenVertexArrays(1, &VAO);// 綁定 VAOglBindVertexArray(VAO);unsigned int VBO; //如果多個可以用 VBO[]數組 這個方法可以生成多個 由第一個參數決定glGenBuffers(1, &VBO);//將新創建的緩沖綁定到 GL_ARRAY_BUFFER目標上glBindBuffer(GL_ARRAY_BUFFER, VBO);// glBufferData 是一個專門用來把用戶定義的數據復制到當前綁定緩沖的函數// GL_STATIC_DRAW 數據不會或幾乎不會改變。glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);unsigned int EBO;glGenBuffers(1, &EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);Shaders *shaders = new Shaders("./shaders/vertexSource.txt", "./shaders/fragmentSource.txt");// glVertexAttribPointer函數告訴OpenGL該如何解析頂點數據（應用到逐個頂點屬性上）// 從 0號欄位 開始 將數據每三個為一組 單位為float 每次跳6*float字節 偏移為0glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *) 0);// 以頂點屬性位置值作為參數，啟用頂點屬性；頂點屬性默認是禁用的//讀取到0號欄位上glEnableVertexAttribArray(0);// 讀取顏色屬性 從 1號欄位 開始 將數據每三個為一組 單位為float 每次跳6*float字節 偏移為3個floatglVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *) (3 * sizeof(float)));// 讀取到1號欄位上glEnableVertexAttribArray(1);// 讀取紋理坐標glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void *) (6 * sizeof(float)));glEnableVertexAttribArray(2);// 紋理緩沖對象unsigned int TexBufferA;unsigned int TexBufferB;//創建紋理緩沖對象glGenTextures(1, &TexBufferA);// 綁定//glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, TexBufferA);//glActiveTexture(GL_TEXTURE3);// stb_image.h 使用int width, height, nrchannels;// 在OpenGl中 y軸的讀取是與正常圖片相反了 所以需要 設置 翻轉(flip)垂直(vertically)加載(load) 為truestbi_set_flip_vertically_on_load(true);//獲取圖片的rgbunsigned char *data1 = stbi_load("container.jpg", &width, &height, &nrchannels, 0);cout<<width<<" "<<height<<endl;if (data1) {// 紋理可以通過glTexImage2D來生成glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data1);//直接在生成紋理之后調用glGenerateMipmap。這會為當前綁定的紋理自動生成所有需要的多級漸遠紋理。 必須要有 glGenerateMipmap 否則無法顯示紋理 glGenerateMipmap(GL_TEXTURE_2D);} else {cout << "load image failed." << endl;}//釋放圖像的內存stbi_image_free(data1);glBindTexture(GL_TEXTURE_2D,0);glGenTextures(1, &TexBufferB);glBindTexture(GL_TEXTURE_2D, TexBufferB);unsigned char *data2 = stbi_load("ground-texture.jpg", &width, &height, &nrchannels, 0);cout<<width<<" "<<height<<endl;if (data2) {// 紋理可以通過glTexImage2D來生成glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data2);//直接在生成紋理之后調用glGenerateMipmap。這會為當前綁定的紋理自動生成所有需要的多級漸遠紋理。glGenerateMipmap(GL_TEXTURE_2D);} else {cout << "load image failed." << endl;}stbi_image_free(data2);glBindTexture(GL_TEXTURE_2D,0);//渲染循環 ，它能在我們讓GLFW退出前一直保持運行。下面幾行的代碼就實現了一個簡單的渲染循環：//glfwWindowShouldClose 我們每次循環的開始前檢查一次GLFW是否被要求退出while (!glfwWindowShouldClose(window)) {//自定義事件 當鍵盤觸發esc 退出processInput(window);glClearColor(0.2, 0.3, 0.3, 1.0);// GL_COLOR_BUFFER_BIT 顏色，GL_DEPTH_BUFFER_BIT 深度 和 GL_STENCIL_BUFFER_BIT 模板// 清除前面的那一幀的顏色glClear(GL_COLOR_BUFFER_BIT);// 綁定 TextureBufferglActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, TexBufferA);glActiveTexture(GL_TEXTURE3);glBindTexture(GL_TEXTURE_2D, TexBufferB);// 綁定 VAOglBindVertexArray(VAO);shaders->use();// 如果只有單個紋理，則不需要以下操作，OpenGL會自動綁定glUniform1i(glGetUniformLocation(shaders->ID, "ourTexture1"), 0);glUniform1i(glGetUniformLocation(shaders->ID, "ourTexture3"), 3);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);//可以不需要這個 綁定VAO的同時也會自動綁定EBO//glDrawElements函數從當前綁定到GL_ELEMENT_ARRAY_BUFFER目標的EBO中獲取索引glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);//解綁VAOglBindVertexArray(0);glfwSwapBuffers(window);glfwPollEvents();}// 最后終止 glfwglfwTerminate();return 0; }

shaders

頂點著色器

#version 330 core // 0號欄位讀取頂點坐標 layout (location = 0) in vec3 aPos; //1號欄位讀取顏色顏色 layout (location = 1) in vec3 aColor; // 2號欄位讀取 紋理坐標 layout (location = 2) in vec2 aTexCoord; out vec4 vertexColor; out vec2 TexCoord; void main() { // gl_Position 是固定的名稱 用來保存 頂點坐標的gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);vertexColor = vec4(aColor.x,aColor.y,aColor.z,1.0);TexCoord = aTexCoord; }

片元著色器

#version 330 core out vec4 FragColor; //uniform vec4 outColor; in vec4 vertexColor; // 獲取頂底著色器過來的紋理坐標 in vec2 TexCoord; uniform sampler2D ourTexture1; uniform sampler2D ourTexture3; void main() { //FragColor = vertexColor;// 采樣紋理的顏色 第一個參數是紋理采樣器 是cpu傳過來的 第二個參數的對應的紋理坐標FragColor = mix(texture(ourTexture1,TexCoord) , texture(ourTexture3,TexCoord),0.55); }

stb_image.h 代碼

總結

以上是生活随笔為你收集整理的texture 纹理(贴图)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。