图形学笔记(五)给矩形框加上纹理

矩阵框画完,正式开始讲解纹理。

一、代码

  • 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

三、致谢

纹理

从 0 开始的 OpenGL 学习(五)- 纹理

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页