五、給矩形框加上紋理
阿新 • • 發佈：2018-11-10
矩陣框畫完，正式開始講解紋理。
一、程式碼
- main.cpp
#include <iostream>
//GLEW
#define GLEW_STATIC
#include <GL/glew.h>
//GLFW
#include <GLFW/glfw3.h>
//
#include "Shader.h"
// SOIL2
//Linux 用的是 \, 但是 / 都可以用
#include "SOIL2/SOIL2.h"
#include "SOIL2/stb_image.h"
const GLint WIDTH = 800 - Shader.h
#pragma once
//#ifndef shader_hpp
//#define shader_hpp
//#endif /* shader_hpp */
#include<string>
#include<fstream> // 可以開啟檔案
#include<sstream>
#include<iostream>
#include<GL/glew.h>
class Shader {
GLuint vertex, fragment;
public:
GLuint Program;
Shader(const GLchar * vertexPath, const GLchar * fragmentPath)
{
std::string vertexCode;
std::string fragmentCode;
std::ifstream vShaderFile;
std::ifstream fShaderFile;
vShaderFile.exceptions(std::ifstream::badbit);
fShaderFile.exceptions(std::ifstream::badbit);
try {
vShaderFile.open(vertexPath);
fShaderFile.open(fragmentPath);
std::stringstream vShaderStream, fShaderStream;
vShaderStream << vShaderFile.rdbuf();
fShaderStream << fShaderFile.rdbuf();
// 檔案關閉順序，先 v 再 f
vShaderFile.close();
fShaderFile.close();
vertexCode = vShaderStream.str();
fragmentCode = fShaderStream.str();
}
catch (std::ifstream::failure a) {
std::cout <<
"ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ"
<< std::endl;
}
// 型別轉換
const GLchar *vShaderCode = vertexCode.c_str();
const GLchar *fShaderCode = fragmentCode.c_str();
//import and compile the shader
vertex = glCreateShader(GL_VERTEX_SHADER); // 不用重新定義
glShaderSource(vertex, 1, &vShaderCode, NULL);
glCompileShader(vertex); // 編譯
GLint success;
GLchar infoLog[512];
glGetShaderiv(vertex, GL_COMPILE_STATUS, &success); // 編譯是否完成的位置
if (!success) {
glGetShaderInfoLog(vertex, 512, NULL, infoLog);
std::cout <<
"ERROR::SHADER::VERTEX::COMPILATION_FAILED\n"
<< infoLog << std::endl;
}
// 邊緣調色器
fragment = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragment, 1, &fShaderCode, NULL);
glCompileShader(fragment); // 編譯
glGetShaderiv(fragment, GL_COMPILE_STATUS, &success); // 編譯是否完成的位置
if (!success) {
glGetShaderInfoLog(fragment, 512, NULL, infoLog);
std::cout <<
"ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n"
<< infoLog << std::endl;
}
//create the program and link the program
this->Program = glCreateProgram(); // 建立著色器程式
glAttachShader(this->Program, vertex);
glAttachShader(this->Program, fragment);
glLinkProgram(this->Program); // 連結
glValidateProgram(this->Program); // 可省略
glGetProgramiv(this->Program, GL_LINK_STATUS, &success);
if (!success) {
glGetProgramInfoLog(this->Program, 512, NULL, infoLog); // 獲取連結情況
std::cout <<
"ERROR::SHADER::PROGRAM::LINKING_FAILED\n" <<
infoLog << std::endl;
}
}
~Shader() {
glDetachShader(this->Program, vertex);
glDetachShader(this->Program, fragment);
glDeleteShader(vertex);
glDeleteShader(fragment);
glDeleteProgram(this->Program);
}
void Use() {
glUseProgram(this->Program);
}
};
- core1.vs
#version 330 core
layout(location = 0) in vec3 position;
layout(location = 1) in vec2 texCoords;
out vec2 TexCoords;
void main(){
gl_Position = vec4(position, 1.0f);
TexCoords = vec2(texCoords.x, 1.0f-texCoords.y);
};
- core1.frag
#version 330 core
in vec2 TexCoords;
out vec4 color;
uniform sampler2D ourTexture0;
void main(){
color = vec4(texture(ourTexture0, TexCoords).rgb, 1.0f);
};
程式正常執行的話，會顯示當前路徑下的名為 2.jpg 的圖片。
二、開始講解
頂點陣列和索引陣列。
GLfloat vertices[] = {
0.5f, 0.5f, 0.0f, 1.0f, 1.0f, //右上角
0.5f, -0.5f, 0.0f, 1.0f, 0.0f, //右下角
-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, //左下角
-0.5f, 0.5f, 0.0f, 0.0f, 1.0f //左上角
};
unsigned int indices[] = {
0,1,3,
1,2,3
};
設定頂點屬性指標。
//set the attribute
//設定頂點屬性指標
//第一個引數指定我們要配置的頂點屬性。location 的值。
//第二個引數指定頂點屬性的大小。
//第三個引數指定資料的型別，這裡是 GL_FLOAT。
//第四個引數：是否希望資料被標準化，即所有資料都會被對映到 0 到 1 之間。
//第五個引數叫做步長，即連續的頂點屬性組之間的間隔。
//最後一個引數：位置資料在緩衝中起始位置的偏移量。
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
5 * sizeof(GLfloat), (GLvoid *)0); //0:對應調色器裡 location 的值；3:對應 vec3 三個量；GL_FLOAT:浮點型；GL_FALSE:；5*sizeof(GLfloat):對應 Buffer 裡傳的資料；(GLvoid*)0:從第 0 個位置開始
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE,
5 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat))); //1:對應調色器裡 color 的值；2:對應紋理 vec2 兩個量；GL_FLOAT:浮點型；GL_FALSE:；5*sizeof(GLfloat):每次跨越 5 個；(GLvoid*) (3 * sizeof(GLfloat)):從第 3 個位置開始
glEnableVertexAttribArray(1);
生成紋理。
GLuint texture; //定義紋理
int width, height;
glGenTextures(1, &texture); //生成紋理
glBindTexture(GL_TEXTURE_2D, texture); //繫結 2D 紋理
紋理環繞方式。
//第一個引數指定了紋理目標：我們使用的是 2D 紋理，因此紋理目標是 GL_TEXTURE_2D。
//第二個引數需要我們指定設定的選項與應用的紋理軸。我們打算配置的是WRAP選項，並且指定S和T軸。
//最後一個引數需要我們傳遞一個環繞方式。
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); //2D 紋理，橫向座標，環繞方式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); //2D 紋理，縱向座標，環繞方式
//紋理過濾
//GL_NEAREST:選取靠的最近的點，關注點清晰度可以，但邊緣會模糊。
//GL_LINEAR:整體看效果稍微模糊。
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); //縮小的情況指定紋理
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); //放大的情況指定紋理
傳圖片資料。
unsigned char* image = SOIL_load_image("2.jpg",
&width, &height, 0, SOIL_LOAD_RGBA); //讀取它的 RGBA 資訊
//第一個引數指定了紋理目標。
//第二個引數為紋理指定多級漸遠紋理的級別。第 0 層。
//第三個引數告訴 OpenGL 我們希望把紋理儲存為何種格式。
//第四個和第五個引數設定最終的紋理的寬度和高度。
//下個引數應該總是被設為 0 。
//第七第八個引數定義了源圖的格式和資料型別。
//最後一個引數是真正的影象資料。
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA,
GL_UNSIGNED_BYTE, image); //專門貼紋理, 指定傳多大的檔案空間, 第一個 0 表示第 0 層, 按照 RGBA 的順序, 第二個 0 不用管, 存成 unsigned_byte 的格式
glGenerateMipmap(GL_TEXTURE_2D); //Mipmap:圖片金字塔，1/4。
glBindTexture(GL_TEXTURE_2D, 0); //解綁紋理
啟用紋理。
glActiveTexture(GL_TEXTURE0); //第 0 個位置,對應的就是 frag 裡面的 uniform, 執行過程中傳
glBindTexture(GL_TEXTURE_2D, texture); //繫結紋理
glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture0"), 0); //對應 frag 裡面的 ourTexture0, 在 Program 中找 ourTexture0
三、致謝
本文首發於個人部落格：Wonz の Blog 。