本节将理解顶点和片段着色器在纹理混合中的应用

一些概念

纹理

• 概述： 纹理是一张二维图像或一组数据，用来给3D模型赋予更多细节，模拟出更为复杂和逼真的外观。比如一块简单的立方体可以通过纹理变得像是由木材、金属或石头制作，而不需要为此增加实际的几何复杂度

纹理映射： 是将纹理图像的坐标（通常是二维UV坐标）映射到3D模型的表面，UV坐标系用于指定纹理在模型表面上的位置，其中：

• U表示横向坐标（从左到右）
• V表示纵向坐标（从上到下）

每个模型顶点都有一个或多个UV坐标，使得纹理能够精确地贴合到模型表面

纹理类型：

• 颜色纹理：最常见的纹理类型，用于赋予物体颜色和图案
• 法线纹理：用于模拟复杂的表面细节，如凹凸感和细小的表面特征，而无需修改几何体
• 位移纹理：用来改变模型的几何结构，实际移动顶点以产生真实的凹凸效果
• 环境贴图：用于模拟反射或折射效果，创建逼真的镜面或水面效果

时间依赖动画

概述： 使用时间变量来控制动画的状态变换，以确保动画帧以固定的速度播放或根据外部条件动态调整。

时间步进和概率： 动画通常分为帧，每一帧代表动画在特定时间点上的状态，为了使动画平滑，必须考虑帧率（每秒显示的帧数）和时间步进，常见方法包括固定时间步进和可变时间步进

插值方法： 时间依赖动画通常使用插值技术，在两个关键帧之间平滑过渡：

• 线性插值：在起始点和结束点之间按线性比例过渡，适合简单的动画
• 贝塞尔曲线和样条插值：用于创建更复杂、平滑的曲线运行，适合有自然过渡需求的动画，如角色行走或物体掉落

实战

简介

怎么在vscode上使用cmake构建项目，具体可以看这篇Windows上如何使用CMake构建项目 - 凌云行者的博客

目的： 本节将理解顶点和片段着色器在纹理混合中的应用

环境：

• 编译工具链：使用msys2安装的mingw-gcc
• 依赖项：glfw3:x64-mingw-static，glad:x64-mingw-static（通过vcpkg安装）

dependencies

shader.fs

// 指定OpenGL着色器语言的版本为3.30
#version 330 core
// 输入变量，表示纹理坐标
in vec2 TexCoord;
// 输出变量，表示片段的最终颜色
out vec4 FragColor;
// uniform变量，表示第一个纹理
uniform sampler2D texture0;
// uniform变量，表示第二个纹理
uniform sampler2D texture1;
// uniform变量，表示混合比例
uniform float blendRatio;void main() {// 使用mix函数根据blendRatio混合两个纹理的颜色，并将结果赋值给输出变量FragColorFragColor = mix(texture(texture0, TexCoord), texture(texture1, TexCoord), blendRatio);
}

shader.vs

#version 330 core
layout (location = 0) in vec2 aPos;
layout (location = 1) in vec2 aTex;out vec2 TexCoord;void main() {gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0);TexCoord = aTex;
}

teenager.png

tex.png

utils

windowFactory.h

#pragma once
#include <glad/glad.h> // gald前面不能包含任何opengl头文件
#include <GLFW/glfw3.h>
#include <functional>
#include <iostream>using std::cout;
using std::endl;class GLFWWindowFactory {
public:// 默认构造函数GLFWWindowFactory() {}// 构造函数，初始化窗口GLFWWindowFactory(int width, int height, const char* title) {// 初始化glfwglfwInit();// 设置opengl版本glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);// 使用核心模式：确保不使用任何被弃用的功能glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);// 创建glfw窗口this->window = glfwCreateWindow(width, height, title, NULL, NULL);if (this->window == NULL) {cout << "Failed to create GLFW window" << endl;glfwTerminate();exit(-1);}// 设置当前窗口的上下文glfwMakeContextCurrent(this->window);// 设置窗口大小改变的回调函数glfwSetFramebufferSizeCallback(this->window, framebuffer_size_callback);// 加载所有opengl函数指针if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {cout << "Failed to initialize GLAD" << endl;}// 再次设置当前窗口的上下文，确保当前上下文仍然是刚刚创建的窗口，是一个安全措施glfwMakeContextCurrent(this->window);// 设置窗口大小改变的回调函数glfwSetFramebufferSizeCallback(this->window, framebuffer_size_callback);}// 获取窗口对象GLFWwindow* getWindow() {return this->window;}// 运行窗口，传入一个自定义的更新函数void run(std::function<void()> updateFunc) {// 启用深度测试，opengl将在绘制每个像素之前比较其深度值，以确定该像素是否应该被绘制glEnable(GL_DEPTH_TEST);// 循环渲染while (!glfwWindowShouldClose(this->window)) { // 检查是否应该关闭窗口// 清空屏幕所用的颜色glClearColor(0.0f, 0.0f, 0.0f, 1.0f);// 清空颜色缓冲，主要目的是为每一帧的渲染准备一个干净的画布glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);// 处理输入GLFWWindowFactory::process_input(this->window);// 执行更新函数updateFunc();// 交换缓冲区glfwSwapBuffers(this->window);// 处理所有待处理事件，去poll所有事件，看看哪个没处理的glfwPollEvents();}// 终止GLFW，清理GLFW分配的资源glfwTerminate();}// 窗口大小改变的回调函数static void framebuffer_size_callback(GLFWwindow* window, int width, int height) {// 确保视口与新窗口尺寸匹配，注意在视网膜显示器上，宽度和高度会显著大于指定值glViewport(0, 0, width, height);}// 处理输入static void process_input(GLFWwindow* window) {// 按下ESC键时进入if块if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)// 关闭窗口glfwSetWindowShouldClose(window, true);}private:// 窗口对象GLFWwindow* window;
};

shader.h

#ifndef SHADER_H
#define SHADER_H#include <glad/glad.h>
#include <glm/glm.hpp>#include <string>
#include <fstream>
#include <sstream>
#include <iostream>using std::string;
using std::ifstream;
using std::stringstream;
using std::cout;
using std::endl;class Shader {
public:// 默认构造函数Shader() {}// 着色器程序IDunsigned int ID;// 构造函数Shader(const char* vertexPath, const char* fragmentPath) {string vertexCode;string fragmentCode;ifstream vShaderFile;ifstream fShaderFile;// 确保ifstream对象可以抛出异常vShaderFile.exceptions(ifstream::failbit | ifstream::badbit);fShaderFile.exceptions(ifstream::failbit | ifstream::badbit);try {// 打开文件vShaderFile.open(vertexPath);fShaderFile.open(fragmentPath);// 读取文件缓冲区内容到stream中stringstream vShaderStream, fShaderStream;vShaderStream << vShaderFile.rdbuf();fShaderStream << fShaderFile.rdbuf();// 关闭文件处理器vShaderFile.close();fShaderFile.close();// 将stream转换为字符串vertexCode = vShaderStream.str();fragmentCode = fShaderStream.str();} catch (ifstream::failure& e) {cout << "ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ: " << e.what() << endl;}const char* vShaderCode = vertexCode.c_str();const char* fShaderCode = fragmentCode.c_str();// 编译着色器unsigned int vertex, fragment;// 顶点着色器vertex = glCreateShader(GL_VERTEX_SHADER);glShaderSource(vertex, 1, &vShaderCode, NULL);glCompileShader(vertex);checkCompileErrors(vertex, "VERTEX");// 片段着色器fragment = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(fragment, 1, &fShaderCode, NULL);glCompileShader(fragment);checkCompileErrors(fragment, "FRAGMENT");// 着色器程序ID = glCreateProgram();glAttachShader(ID, vertex);glAttachShader(ID, fragment);glLinkProgram(ID);checkCompileErrors(ID, "PROGRAM");// 删除着色器glDeleteShader(vertex);glDeleteShader(fragment);}// 激活着色器void use() {glUseProgram(ID);}// 实用的uniform工具函数// 用于在着色器程序中设置uniform值// 设置一个布尔类型的uniform变量void setBool(const std::string& name, bool value) const {glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value);}// 设置一个整型的uniform变量void setInt(const std::string& name, int value) const {glUniform1i(glGetUniformLocation(ID, name.c_str()), value);}// 设置一个浮点类型的uniform变量void setFloat(const std::string& name, float value) const {glUniform1f(glGetUniformLocation(ID, name.c_str()), value);}// 设置一个vec2类型的uniform变量void setVec2(const std::string& name, const glm::vec2& value) const {glUniform2fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]);}// 设置一个vec2类型的uniform变量void setVec2(const std::string& name, float x, float y) const {glUniform2f(glGetUniformLocation(ID, name.c_str()), x, y);}// 设置一个vec3类型的uniform变量void setVec3(const std::string& name, const glm::vec3& value) const {glUniform3fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]);}// 设置一个vec3类型的uniform变量void setVec3(const std::string& name, float x, float y, float z) const {glUniform3f(glGetUniformLocation(ID, name.c_str()), x, y, z);}// 设置一个vec4类型的uniform变量void setVec4(const std::string& name, const glm::vec4& value) const {glUniform4fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]);}// 设置一个vec4类型的uniform变量void setVec4(const std::string& name, float x, float y, float z, float w) {glUniform4f(glGetUniformLocation(ID, name.c_str()), x, y, z, w);}// 设置一个mat2类型的uniform变量void setMat2(const std::string& name, const glm::mat2& mat) const {glUniformMatrix2fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);}//  设置一个mat3类型的uniform变量void setMat3(const std::string& name, const glm::mat3& mat) const {glUniformMatrix3fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);}// 设置一个mat4类型的uniform变量void setMat4(const std::string& name, const glm::mat4& mat) const {glUniformMatrix4fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);}private:// 检查着色器编译/链接错误void checkCompileErrors(GLuint shader, string type) {GLint success;GLchar infoLog[1024];if (type != "PROGRAM") {glGetShaderiv(shader, GL_COMPILE_STATUS, &success);if (!success) {glGetShaderInfoLog(shader, 1024, NULL, infoLog);cout << "ERROR::SHADER_COMPILATION_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << endl;}}else {glGetProgramiv(shader, GL_LINK_STATUS, &success);if (!success) {glGetProgramInfoLog(shader, 1024, NULL, infoLog);cout << "ERROR::PROGRAM_LINKING_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << endl;}}}
};
#endif

RectangleModel.h

#pragma once
#include <glad/glad.h>
#include "shader.h"
#include <vector>
#include <chrono>
#include <cmath>class RectangleModel {
public:// 构造函数RectangleModel(const Shader& shader);// 析构函数~RectangleModel();// 绘制矩形void draw();private:unsigned int VAO;unsigned int VBO;unsigned int EBO;Shader shader;// 着色器程序unsigned int shaderProgram;// 纹理std::vector<unsigned int>texture;// 编译着色器void compileShaders();// 设置缓冲区void setElements();// 加载纹理void loadTexture();// 绑定纹理void bindTexture(GLuint& textured, const char* path);
};

RectangleModel.cpp

#include "RectangleModel.h"
#include <iostream>
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"using std::cout;
using std::endl;// 构造函数
RectangleModel::RectangleModel(const Shader& shader) : shader(shader) {// 加载纹理loadTexture();// 设置缓冲区setElements();
}// 析构函数
RectangleModel::~RectangleModel() {// 删除VAOglDeleteVertexArrays(1, &this->VAO);// 删除VBOglDeleteBuffers(1, &this->VBO);// 删除EBOglDeleteBuffers(1, &this->EBO);
}/// public
// 绘制矩形
void RectangleModel::draw() {// 使用着色器程序this->shader.use();// 绑定VAOglBindVertexArray(VAO);// 获取当前时间auto now = std::chrono::system_clock::now();// 计算毫秒数auto duration = now.time_since_epoch();double milliseconds = std::chrono::duration_cast<std::chrono::milliseconds>(duration).count();// 计算混合比例float blendRatio = 0.5f * (std::sin(milliseconds / 1000.0) + 1.0f);// 设置uniform变量shader.setFloat("blendRatio", blendRatio);// 绘制矩形，即绘制两个三角形，GL_UNSIGNED_INT表示索引数组中的每个元素都是一个无符号整数// 六个矩形glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);
}/// private
void RectangleModel::setElements() {float vertices[] = {// 矩形1-0.9f, -0.9f, 0.0f, 0.0f,-0.5f, -0.9f, 1.0f, 0.0f,-0.9f, -0.5f, 0.0f, 1.0f,-0.5f, -0.5f, 1.0f, 1.0f,// 矩形2-0.4f, -0.9f, 0.0f, 0.0f,0.0f, -0.9f, 1.0f, 0.0f,-0.4f, -0.5f, 0.0f, 1.0f,0.0f, -0.5f, 1.0f, 1.0f,// 矩形30.1f, -0.9f, 0.0f, 0.0f,0.5f, -0.9f, 1.0f, 0.0f,0.1f, -0.5f, 0.0f, 1.0f,0.5f, -0.5f, 1.0f, 1.0f,// 矩形4-0.9f, 0.1f, 0.0f, 0.0f,-0.5f, 0.1f, 1.0f, 0.0f,-0.9f, 0.5f, 0.0f, 1.0f,-0.5f, 0.5f, 1.0f, 1.0f,// 矩形5-0.4f, 0.1f, 0.0f, 0.0f,0.0f, 0.1f, 1.0f, 0.0f,-0.4f, 0.5f, 0.0f, 1.0f,0.0f, 0.5f, 1.0f, 1.0f,// 矩形60.1f, 0.1f, 0.0f, 0.0f,0.5f, 0.1f, 1.0f, 0.0f,0.1f, 0.5f, 0.0f, 1.0f,0.5f, 0.5f, 1.0f, 1.0f};// 索引数据int indices[] = {// 矩形 10, 1, 2,1, 2, 3,// 矩形 24, 5, 6,5, 6, 7,// 矩形 38, 9, 10,9, 10, 11,// 矩形 412, 13, 14,13, 14, 15,// 矩形516, 17, 18,17, 18, 19,// 矩形620, 21, 22,21, 22, 23};// 生成一个VAOglGenVertexArrays(1, &this->VAO);// 绑定VAO，使其成为当前操作的VAOglBindVertexArray(this->VAO);// 生成一个VBOglGenBuffers(1, &this->VBO);// 绑定VBO, 使其成为当前操作的VBO，GL_ARRAY_BUFFER表示顶点缓冲区glBindBuffer(GL_ARRAY_BUFFER, this->VBO);// 为当前绑定的VBO创建并初始化数据存储，GL_STATIC_DRAW表示数据将一次性提供给缓冲区，并且在之后的绘制过程中不会频繁更改glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);// 生成一个EBOglGenBuffers(1, &this->EBO);// 绑定EBO，使其成为当前操作的EBOglBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);// 传递索引数据glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);// 定义顶点属性的布局// - index：顶点属性的索引// - size：每个顶点属性的数量// - type：数据类型// - normalized：是否将非浮点数值归一化// - stride：连续顶点属性之间的间隔// - pointer：数据在缓冲区中的偏移量// 设置顶点属性指针，位置属性glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)0);// 启用顶点属性glEnableVertexAttribArray(0);// 设置顶点属性指针，颜色属性glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 4 * sizeof(float), (void*)(2 * sizeof(float)));// 启用顶点属性glEnableVertexAttribArray(1);
}// 加载纹理
void RectangleModel::loadTexture() {std::vector<std::string> path = { "teenager.png", "tex.png" };texture.resize(path.size());for (int i = 0; i < path.size(); i++) {bindTexture(texture[i], path[i].c_str());}// 参数传入指定要激活的纹理单元，例如GL_TEXTURE0/1/*glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, texture[0]);glActiveTexture(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, texture[1]);// 使用着色器程序shader.use();// 设置uniform变量shader.setInt("texture0", 0);shader.setInt("texture1", 1);
}// 绑定纹理
void RectangleModel::bindTexture(GLuint& textureId, const char* path) {glGenTextures(1, &textureId);glBindTexture(GL_TEXTURE_2D, textureId);// 设置纹理环绕和过滤方式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_MIPMAP_LINEAR);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);// 加载并生成纹理stbi_set_flip_vertically_on_load(true);int width, height, nrChannels;unsigned char* data = stbi_load(path, &width, &height, &nrChannels, 0);if (data) {GLenum format;if (nrChannels == 4)format = GL_RGBA;else if (nrChannels == 3)format = GL_RGB;elseformat = GL_RED;glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);glGenerateMipmap(GL_TEXTURE_2D);}else {std::cout << "Failed to load texture" << std::endl;}stbi_image_free(data);
}

main.cpp

#include "utils/RectangleModel.h"
#include "utils/windowFactory.h"int main() {// 创建一个窗口Factory对象GLFWWindowFactory myWindow(800, 600, "This is Title");// 创建一个着色器对象Shader shader("shader.vs", "shader.fs");// 创建一个矩形模型对象RectangleModel rectangle(shader);// 运行窗口，传入一个lambda表达式，用于自定义渲染逻辑myWindow.run([&]() {// 绘制矩形rectangle.draw();});return 0;
}

CMakeLists.txt

# 设置CMake的最低版本要求
cmake_minimum_required(VERSION 3.10)
# 设置项目名称
project(Shader)# vcpkg集成, 这里要换成你自己的vcpkg工具链文件和共享库路径
set(VCPKG_ROOT D:/software6/vcpkg/)
set(CMAKE_TOOLCHAIN_FILE ${VCPKG_ROOT}/scripts/buildsystems/vcpkg.cmake)
set(CMAKE_PREFIX_PATH ${VCPKG_ROOT}/installed/x64-mingw-static/share)# 查找所需的包
find_package(glad CONFIG REQUIRED)
find_package(glfw3 CONFIG REQUIRED)
find_package(glm CONFIG REQUIRED)# 搜索并收集utils文件夹下的所有源文件
file(GLOB UTILS "utils/*.cpp", "utils/*.h")# 添加可执行文件（还要加入utils文件夹下的源文件）
add_executable(Shader main.cpp ${UTILS})# 链接所需的库
target_link_libraries(Shader PRIVATE glad::glad glfw glm::glm)# 检查项目是否有dependeicies目录，如果存在，则在使用add_custom_command命令在构建后将dependencies目录中的文件复制到项目的输出目录
set(SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/dependencies")
if(EXISTS ${SOURCE_DIR})add_custom_command(TARGET Shader POST_BUILDCOMMAND ${CMAKE_COMMAND} -E copy_directory${SOURCE_DIR} $<TARGET_FILE_DIR:Shader>)
endif()

最终效果