OpenGL-贴纹理（含全部代码以及stb_image.h的使用）

最新推荐文章于 2022-04-23 12:00:52 发布

lady_killer9

最新推荐文章于 2022-04-23 12:00:52 发布

阅读量1.4w

点赞数 8

文章标签： opengl 纹理

本文链接：https://blog.csdn.net/lady_killer9/article/details/89244524

版权

现代OpenGL新手入门专栏收录该内容

19 篇文章 62 订阅

订阅专栏

stb_image.h的使用

1.导入stb_image.h

2.加载你的图片

3.创建纹理 glGenTextures函数

4.绑定纹理 glBindTexture函数

5.生成纹理 glTexImage2D函数 glGenerateMipmap函数

参考：LearnOpenGL

stb_image.h的使用

这个图片加载库比Shader.h那个着色器类要大，我没有进行中文注释。大家就从这里下载吧。

1.导入stb_image.h

导入到项目中，在你的.cpp文件中加入下面两行就可以使用了

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

2.加载你的图片

用下面的函数

STBIDEF stbi_uc *stbi_load (char const *filename, int *x, int *y, int *channels_in_file, int desired_channels);

你需要把你的图片路径写对，宽高就不用说了，最后两个参数你可以去看源代码，建议默认就好。

3.创建纹理 glGenTextures函数

glGenTextures函数第一个参数需要输入生成纹理的数量，然后把它们储存在第二个参数的unsigned int数组中

4.绑定纹理 glBindTexture函数

glBindTexture(GL_TEXTURE_2D, texture);

5.生成纹理 glTexImage2D函数 glGenerateMipmap函数

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

第二个函数用于生成多级渐远纹理

6. 最后释放图像

stbi_image_free(data);

7. 利用我们的之前着色器类

GLSL有一个供纹理对象使用的内建数据类型，叫做采样器(Sampler)，它以纹理类型作为后缀，例如sampler2D

我们可以简单声明一个uniform sampler2D把一个纹理添加到片段着色器中，稍后我们会把纹理赋值给这个uniform。

使用GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。

你可以在片段着色器中进行一些运算，来进行纹理和纹理以及颜色的叠加、混合。接下来给出我的案例。

案例

1. 项目结构

是的，你没有看错，就是这么懒直接用的着色器类的那个项目（手动狗头）。

Shader.h、stb_image.h、glad.c以及图片的导入就不说了，在LearnOpenGL里面有。

相对于上篇文章，修改了以下文件的代码。

2. 代码

vertexSource.txt

#version 330 core
layout (location = 6) in vec3 aPos;
layout (location = 7) in vec3 aColor;
layout (location = 8) in vec2 aTexCoord;
out vec4 vertexColor;
out vec2 TexCoord;
void main()
{
   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
   vertexColor = vec4(aColor.x, aColor.y, aColor.z, 1.0);
   TexCoord = aTexCoord;
}

我们加了TexCoord接受向量的后两位，也就是纹理坐标。

fragmentSource.txt

#version 330 core
out vec4 FragColor;
in vec4 vertexColor;
in vec2 TexCoord;
uniform sampler2D ourTexture;
uniform sampler2D ourFace;
void main()
{
   //FragColor = vertexColor;
   FragColor = mix(texture(ourTexture, TexCoord), texture(ourFace, TexCoord), 0.6)*vertexColor;
}

我们用纹理采样器对两个图片进行采样，并且进行运算，这里我还加了色彩。你可以用过调节mix函数的第三个参数，也就是我写的0.6的位置进行透明度的调整。

main.cpp

//头文件
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include "Shader.h"
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"
//函数声明
void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

// 设置窗体宽高
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

//主函数
int main()
{
	// glfw: 初始化和配置
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
#ifdef __APPLE__
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); 
#endif
	// glfw 窗体生成
	GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "rectwithtex", NULL, NULL);//设置标题
	//判断窗体是否生成
	if (window == NULL)
	{
		std::cout << "生成GLFW窗口失败" << std::endl;
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);
	glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

	// glad: 加载所有的OpenGL功能指针----------------------------------------------------------
	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "初始化GLAD失败" << std::endl;
		return -1;
	}

	// 建立并编译着色器--------------------------------------------------------------------
	Shader* myShader = new Shader("vertexSource.txt", "fragmentSource.txt");

	// 设置点数据 (还有缓冲) 配置点的属性（包含点坐标等） 这里设置了4个，将以索引的方式选择点来画三角形
	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,  // 第一个三角形选择索引为 0 1 3的三个点
		2, 3, 0,  // 第一个三角形选择索引为 1 2 3的三个点
	};
	unsigned int VBO, VAO, EBO;
	glGenVertexArrays(1, &VAO);
	glGenBuffers(1, &VBO);
	glGenBuffers(1, &EBO);  //注意，这里使用EBO作为缓冲对象
	// 绑定顶点数组, 然后绑定并设置缓冲, 最后配置顶点属性-------------------------------
	glBindVertexArray(VAO);
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
	//修改属性-----------------------------------------------------------------------------
	glVertexAttribPointer(6, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
	glEnableVertexAttribArray(6);
	glVertexAttribPointer(7, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
	glEnableVertexAttribArray(7);
	glVertexAttribPointer(8, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
	glEnableVertexAttribArray(8);
	//纹理-------------------------------------------------------------------------------
	unsigned int TexBufferA, TexBufferB;
	stbi_set_flip_vertically_on_load(true);//y轴翻转
	//木箱部分
	glGenTextures(1, &TexBufferA);
	//激活
	glActiveTexture(GL_TEXTURE0);
	glBindTexture(GL_TEXTURE_2D, TexBufferA);
	glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
	glBindTexture(GL_TEXTURE_2D, TexBufferA);//绑定
	int width, height, nrChannels;
	unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
	if (data)
	{
		glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
		glGenerateMipmap(GL_TEXTURE_2D);//生成多级渐远纹理
	}
	else
	{
		std::cout << "加载纹理失败" << std::endl;
	}
	stbi_image_free(data);//释放
	//笑脸部分
	glGenTextures(1, &TexBufferB);
	glActiveTexture(GL_TEXTURE3);
	glBindTexture(GL_TEXTURE_2D, TexBufferB);
	glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
	glBindTexture(GL_TEXTURE_2D, TexBufferB);//绑定
	unsigned char *data2 = stbi_load("awesomeface.png", &width, &height, &nrChannels, 0);
	if (data)
	{
		glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data2);//注意，有Alpha通道
		glGenerateMipmap(GL_TEXTURE_2D);//生成多级渐远纹理
	}
	else
	{
		std::cout << "加载纹理失败" << std::endl;
	}
	stbi_image_free(data2);

	//注意这是允许的，对glVertexAttribPointer的调用将VBO注册为顶点属性的绑定顶点缓冲区对象，所以之后我们可以安全地解除绑定
	glBindBuffer(GL_ARRAY_BUFFER, 0);

	// 记住：当VAO处于活动状态时，不要取消绑定EBO，因为绑定元素缓冲对象IS存储在VAO中; 保持EBO的约束力。
	//glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);

	// 您可以在之后取消绑定VAO，以便其他VAO调用不会意外地修改此VAO，但这种情况很少发生。无论如何， 
	// 修改其他VAO需要调用glBindVertexArray，因此我们通常不会在不直接需要时解除VAO（VBO同样）的绑定。
	glBindVertexArray(0);

	// 取消注释此调用会绘制线框多边形。
	//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

	while (!glfwWindowShouldClose(window))
	{
		// 输入
		processInput(window);

		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		//绑定纹理
		glActiveTexture(GL_TEXTURE0); // 在绑定纹理之前先激活纹理单元
		glBindTexture(GL_TEXTURE_2D, TexBufferA);
		glActiveTexture(GL_TEXTURE3); // 在绑定纹理之前先激活纹理单元
		glBindTexture(GL_TEXTURE_2D, TexBufferB);
		glBindVertexArray(VAO);
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

		//使用着色器
		myShader->use();
		glUniform1i(glGetUniformLocation(myShader->ID, "ourTexture"), 0); // 手动设置
		//glUniform1i(glGetUniformLocation(myShader->ID, "ourFace"), 3); // 手动设置
		myShader->setInt("ourFace", 3); // 或者使用着色器类设置

		// 画矩形--------------------------------------------------------------------------
		//可以知道我们只有一个三角形VAO，没必要每次都绑定它，但是我们这么做会让代码有一点组织性
		glBindVertexArray(VAO);
		//glDrawArrays(GL_TRIANGLES, 0, 6);
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
		// glBindVertexArray(0); //没必要每次都解绑 
		// 交换buffers和poll的IO事件 (按键按下/释放，鼠标移动等.)
		glfwSwapBuffers(window);
		glfwPollEvents();
	}
	// 一旦他们超出已有的资源，就取消所有资源的分配：
	glDeleteVertexArrays(1, &VAO);
	glDeleteBuffers(1, &VBO);
	glDeleteBuffers(1, &EBO);
	// glfw:终止，清空之前所有的GLFW的预分配资源
	glfwTerminate();
	return 0;
}
//查询GLFW相关按键是否被按下/释放，根据情况作出反应
void processInput(GLFWwindow *window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
		glfwSetWindowShouldClose(window, true);
}
// glfw:无论窗口大小何时改变（由操作系统或用户自己）这个回调函数将会被执行
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
	//确定viewport与新的窗口尺寸匹配; 请注意，宽度和高度将明显大于显示器上指定的宽度和高度。
	glViewport(0, 0, width, height);
}

加入了stb_image.h的使用，将两张图片贴到了矩形上面。

3. 结果截图

我没有用learnOpenGL的笑脸图片，找了张更可爱的:)

更多OpenGL知识：现代OpenGL入门教程

有问题请下方评论，转载请注明出处，并附有原文链接，谢谢！如有侵权，请及时联系。

lady_killer9

关注

8
点赞
踩
56

收藏

觉得还不错? 一键收藏
打赏
11
评论
OpenGL-贴纹理（含全部代码以及stb_image.h的使用）

目录stb_image.h的使用1.导入stb_image.h2.加载你的图片3.创建纹理 glGenTextures函数4.绑定纹理 glBindTexture函数5.生成纹理 glTexImage2D函数 glGenerateMipmap函数6. 最后释放图像7. 利用我们的之前着色器类案例1. 项目结构2. 代码3. 结果截图参考：Lea...
复制链接

扫一扫