矩阵框画完，正式开始讲解纹理。
一、代码
- 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, HEIGHT = 600; // 新建窗口
int main()
{
glfwInit();
//OpenGL 版本
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
// 窗口设置
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 用的是新版的 OpenGL 3.3
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // must for Mac
glfwWindowHint(GLFW_RESIZABLE, GL_FALSE); // 改为 GL_TRUE，改变窗口，纵横比会变
GLFWwindow *window = glfwCreateWindow(WIDTH, HEIGHT, "Learn OpenGL B16xxxxxx", nullptr,
nullptr); // 窗口名字改成自己的学号
if (nullptr == window)
{
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
// next two lines are for mac retina display
int screenWidth, screenHeight;
glfwGetFramebufferSize(window, &screenWidth, &screenHeight); // 获取窗口大小
glfwMakeContextCurrent(window); // 可以新建很多 window
glewExperimental = GL_TRUE;
if (GLEW_OK != glewInit())
{
std::cout << "Failed to initialise GLEW" << std::endl;
return -1;
}
glViewport(0, 0, screenWidth, screenHeight); // 从（0,0）开始画点，直到 WIDTH 和 HEIGHT
//vs 是顶点调色器，frag 是边缘调色器
Shader ourShader = Shader("core1.vs", "core1.frag"); // 文件相对路径
//now the verte information comes below
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
};
//the date should be transfered to the memory on the Graphics Card, 传到显存
GLuint VAO, VBO; //VAO:Vertex Array Object VBO:Vertex Buffer Object 传数据
glGenVertexArrays(1, &VAO); // 创建 VAO
glGenBuffers(1, &VBO);
glBindVertexArray(VAO); // 设当前直线
glBindBuffer(GL_ARRAY_BUFFER, VBO); //VAO 和 VBO 成对出现
// transfer the data：传数据
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); // 静态访问，几乎不修改
//set the attribute
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)): 从第 0 个位置开始
glEnableVertexAttribArray(1);
//transfer the index
GLuint EBO;
glGenBuffers(1, &EBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);
GLuint texture; // 生成纹理
int width, height;
glGenTextures(1, &texture); // 生成
glBindTexture(GL_TEXTURE_2D, texture); // 绑定 2D 纹理
// 二维: S T 三维: S T R
//i: 整型 f: 浮点型
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_MIN_FILTER, GL_LINEAR); //FILTER: 滤波器
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); //GL_NEAREST: 选取靠的最近的点, 关注点清晰度可以, 但边缘会模糊 GL_LINEAR: 整体看效果稍微模糊
unsigned char* image = SOIL_load_image("2.jpg",
&width, &height, 0, SOIL_LOAD_RGBA); // 读取它的 RGBA 信息
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: 图片金字塔
glBindTexture(GL_TEXTURE_2D, 0);
// 画图
while (!glfwWindowShouldClose(window))
{
glfwPollEvents(); // 把所有事件系统都取过来：键盘 / 鼠标等操作
glClearColor(0.2f, 0.3f, 0.3f, 1.0f); // 窗口背景颜色，RGB，最后一个是透明度
glClear(GL_COLOR_BUFFER_BIT);
//Bind the shader
//glUseProgram(shaderProgram); // 使用调色器, 不注释
ourShader.Use();
glActiveTexture(GL_TEXTURE0); // 第 0 个位置, 对应的就是 frag 里面的 uniform, 运行过程中传
glBindTexture(GL_TEXTURE_2D, texture); // 需要
glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture0"), 0); // 对应 frag 里面的 ourTexture0, 在 Program 中找 ourTexture0
//Draw the triangle
glBindVertexArray(VAO); // 使用 VAO，直接绑定
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
//glDrawArrays(GL_TRIANGLES, 0, 3); // 画三角形，从第 0 个数据开始画，到最后一个数据（第 3 个）结束
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0); // 解绑定
glBindVertexArray(0);
glfwSwapBuffers(window); // 调用双面进行画，显示一个，另一个在画，画面更流畅
}
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glDeleteTextures(1, &texture);
glfwTerminate();
return 0;
}
- 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
京公网安备 11010502036488号