OpenGL-2 基础
Dionysen

着色器需要用特定的语言编写,GLSL是一种类C的语言,专门用来写着色器程序。

程序结构:

  1. 声明版本
  2. 输入和输出变量
  3. uniform和main函数

着色器

一个典型的着色器:

#version version_number
in type in_variable_name;
in type in_variable_name;

out type out_variable_name;

uniform type uniform_name;

int main()
{
// 处理输入并进行一些图形操作
...
// 输出处理过的结果到输出变量
out_variable_name = weird_stuff_we_processed;
}

对于顶点着色器,输入变量即顶点属性。

能声明的顶点属性是有上限的,一般由硬件来决定。

你可以查询GL_MAX_VERTEX_ATTRIBS来获取具体的上限:

int nrAttributes;
glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
std::cout << "Maximum nr of vertex attributes supported: " << nrAttributes << std::endl;

通常情况下它至少会返回16个,大部分情况下是够用了。

变量

GLSL中包含C等其它语言大部分的默认基础数据类型:intfloatdoubleuintbool。GLSL也有两种容器类型,分别是向量(Vector)和矩阵(Matrix)。

向量

GLSL中的向量是一个可以包含有2、3或者4个分量的容器,分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式(n代表分量的数量):

类型 含义
vecn 包含n个float分量的默认向量(因为float是默认的数据类型)
bvecn 包含n个bool分量的向量
ivecn 包含n个int分量的向量
uvecn 包含n个unsigned int分量的向量
dvecn 包含n个double分量的向量

多数情况使用vecn,这样已经够用了。

一个向量的分量可以通过vec.x这种方式获取,这里x是指这个向量的第一个分量。你可以分别使用.x.y.z.w来获取它们的第1、2、3、4个分量。GLSL也允许你对颜色使用rgba,或是对纹理坐标使用stpq访问相同的分量。

向量这一数据类型也允许一些有趣而灵活的分量选择方式,叫做重组(Swizzling)。重组允许这样的语法:

vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;

输入与输出

GLSL定义了inout关键字专门来实现输入和输出。

layout (location = 0)定义一个标识,这样才能链接到顶点数据。

你也可以忽略layout (location = 0)标识符,通过在OpenGL代码中使用glGetAttribLocation查询属性位置值(Location),但着色器中设置它们会更容易理解而且节省你(和OpenGL)的工作量。

片段着色器,它需要一个vec4颜色输出变量,因为片段着色器需要生成一个最终输出的颜色。

如果你在片段着色器没有定义输出颜色,OpenGL会把你的物体渲染为黑色(或白色)。

如果我们打算从一个着色器向另一个着色器发送数据,我们必须在发送方着色器中声明一个输出,在接收方着色器中声明一个类似的输入。当类型和名字都一样的时候,OpenGL就会把两个变量链接到一起,它们之间就能发送数据了(这是在链接程序对象时完成的)。

顶点着色器

#version 330 core
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0

out vec4 vertexColor; // 为片段着色器指定一个颜色输出

void main()
{
gl_Position = vec4(aPos, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数
vertexColor = vec4(0.5, 0.0, 0.0, 1.0); // 把输出变量设置为暗红色
}

片段着色器

#version 330 core
out vec4 FragColor;

in vec4 vertexColor; // 从顶点着色器传来的输入变量(名称相同、类型相同)

void main()
{
FragColor = vertexColor;
}

顶点着色器中声明了一个vertexColor变量作为vec4输出,并在片段着色器中声明了一个类似的vertexColor。由于它们名字相同且类型相同,片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了。由于我们在顶点着色器中将颜色设置为深红色,最终的片段也是深红色的。

结果如下:

image

Uniform

Uniform是一种从CPU中的应用向GPU中的着色器发送数据的方式,但uniform和顶点属性有些不同。

uniform是全局的(Global)。

  • uniform变量必须在每个着色器程序对象中都是独一无二的,而且它可以被着色器程序的任意着色器在任意阶段访问。

  • 无论你把uniform值设置成什么,uniform会一直保存它们的数据,直到它们被重置或更新。

#version 330 core
out vec4 FragColor;

uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量

void main()
{
FragColor = ourColor;
}

定义了一个uniform的vec4,即ourColor,并且把片段着色器的输出颜色设置为uniform的值,之后无需再通过顶点着色器修改它,而可以直接在程序中修改:

float timeValue = glfwGetTime(); // 获取运行的秒数
float greenValue = (sin(timeValue) / 2.0f) + 0.5f; // 使用sin函数让颜色从0-1之间变化,结果储存在greenValue中
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor"); // 通过函数glGetUniformLocation查询uniform ourColor的位置值,找不到返回-1
glUseProgram(shaderProgram);
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f); // 设置uniform的值

注意:查询uniform地址不要求你之前使用过着色器程序,但是更新一个uniform之前你必须先使用程序(调用glUseProgram()),因为它是在当前激活的着色器程序中设置uniform的。

❗如果你声明了一个uniform却在GLSL代码中没用过,编译器会静默移除这个变量,导致最后编译出的版本中并不会包含它,这可能导致几个非常麻烦的错误,记住这点!

修改后的全部源码为:

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include <cmath>

void framebuffer_size_callback(GLFWwindow* window, int width, int height); //回调函数的声明
void processInput(GLFWwindow* window); // 处理对窗口的输入

const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
"gl_Position = vec4(aPos, 1.0);\n"
"}\n\0";


// 创建片段着色器程序的源码,使用c风格的常量字符串存储
const char* fragmentShaderSource =
"#version 330 core\n"
"out vec4 FragColor;\n"
"uniform vec4 ourColor;\n"
"void main() {\n"
//"FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n" // 此处设置片段颜色为黄色
"FragColor = ourColor;\n"
"}\n\0";

int main(void) {
// -------------- 1. glfw的初始化 ----------------

if (!glfwInit()) {
return -1;
}

// --------------- 2. 使用glfw创建窗口 ---------------
GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL);
if (window == NULL) {
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}

glfwMakeContextCurrent(window); // 此函数使指定窗口的 OpenGL 或 OpenGL ES 上下文成为调用线程的当前上下文
glfwSetFramebufferSizeCallback(
window,
framebuffer_size_callback); // 回调函数,保证每次窗口大小调整时,重新绘制
// --------------- 3. glad:加载OpenGL所有的函数指针 ---------------
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
std::cout << "Failed to initialize GLAD" << std::endl;
return -1;
}

// --------------- 4. 创建和编译着色器 ---------------
unsigned int vertexShader; // 创建顶点着色器索引
vertexShader = glCreateShader(GL_VERTEX_SHADER); // 创建顶点着色器
glShaderSource(
vertexShader, 1, &vertexShaderSource,
NULL); // 为顶点着色器添加源码,第二个参数是添加的源码中字符串的数量,第三个先设置为NULL
glCompileShader(vertexShader); // 编译顶点着色器

int success; // 创建编译状态指示变量
char info_log[512]; // 创建用以存储log的数组
glGetShaderiv(vertexShader, GL_COMPILE_STATUS,
&success); // 获取状态和log,输出到变量和数组中
if (!success) { // 如果编译失败,打印错误信息和log
glGetShaderInfoLog(vertexShader, 512, NULL, info_log);
std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n"
<< info_log << std::endl;
}

unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

glGetShaderiv(fragmentShader, GL_COMPILE_STATUS,
&success); // 获取状态和log,输出到变量和数组中
if (!success) { // 如果编译失败,打印错误信息和log
glGetShaderInfoLog(fragmentShader, 512, NULL, info_log);
std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n"
<< info_log << std::endl;
}
// --------------- 5. 链接着色器 ---------------

unsigned int shaderProgram;
shaderProgram = glCreateProgram();

// 把着色器添加到着色器程序中
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram); // 链接着色器程序

glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success); // 异常检测
if (!success) {
glGetProgramInfoLog(shaderProgram, 512, NULL, info_log);
std::cout << "ERROR::SHADER::PROGRAM::LINK_FAILED\n"
<< info_log << std::endl;
}

glUseProgram(
shaderProgram); // 调用此函数后,渲染和着色器调用都会使用此前所写的着色器了
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader); // 链接完成之后就可以删除着色器了

// --------------- 6. 创建顶点数据缓冲区 ---------------
float vertices[] =
{
-0.5f, -0.5f, 0.0f, // left
0.5f, -0.5f, 0.0f, // right
0.0f, 0.5f, 0.0f
}; // top

unsigned int VBO, VAO;

glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO); // 创建缓冲区
glBindVertexArray(VAO);

glBindBuffer(GL_ARRAY_BUFFER, VBO); // 绑定缓冲区
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// -------- 告诉GPU如何读取顶点数据 ----------
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float),
(void*)0);
glEnableVertexAttribArray(0); // 启用顶点属性

glBindVertexArray(VAO);

// --------------- 7. 窗口绘制循环 ---------------
while (!glfwWindowShouldClose(window)) {
// input
// -----
processInput(window);
// render
// -----
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(shaderProgram);

// 更新uniform颜色
float timeValue = glfwGetTime();
float greenValue = static_cast<float>(sin(timeValue) / 2.0 + 0.5);
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

glDrawArrays(GL_TRIANGLES, 0, 3);

//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glfwSwapBuffers(window);
glfwPollEvents();
}

// glfw: terminate, clearing all previously allocated GLFW resources.
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteProgram(shaderProgram);

glfwTerminate();
return 0;
}
// process all input: query GLFW whether relevant keys are pressed/released this
// frame and react accordingly
// -----------------------
void processInput(GLFWwindow* window) {
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback
// function executes
// ----------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height) {
// make sure the viewport matches the new window dimensions; note that width
// and height will be significantly larger than specified on retina
// displays.
glViewport(0, 0, width, height);
}

运行结果为一个三角形,颜色在绿色和黑色之间周期性变换:

image image

更多属性

把颜色数据添加为3个float值至vertices数组,把三角形的三个角分别指定为红色、绿色和蓝色:

float vertices[] = {
// 位置 // 颜色
0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // 右下
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // 左下
0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f // 顶部
};

由于现在有更多的数据要发送到顶点着色器,有必要去调整一下顶点着色器,使它能够接收颜色值作为一个顶点属性输入。需要注意的是用layout标识符来把aColor属性的位置值设置为1:

#version 330 core
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为 0
layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1

out vec3 ourColor; // 向片段着色器输出一个颜色

void main()
{
gl_Position = vec4(aPos, 1.0);
ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
}

不再使用uniform来传递片段的颜色了,现在使用ourColor输出变量,必须再修改一下片段着色器:

#version 330 core
out vec4 FragColor;
in vec3 ourColor;

void main()
{
FragColor = vec4(ourColor, 1.0);
}

更新一下顶点格式:

unsigned int VBO, VAO;

glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO); // 创建缓冲区
glBindVertexArray(VAO);

glBindBuffer(GL_ARRAY_BUFFER, VBO); // 绑定缓冲区
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// -------- 告诉GPU如何读取顶点数据 ----------
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0); // 启用顶点属性

glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); // 最后一个是偏移量,因为前面的是位置,后面的是颜色
glEnableVertexAttribArray(1);

glUseProgram(shaderProgram);

绘制:

while (!glfwWindowShouldClose(window)) {
// input
// -----
processInput(window);
// render
// -----
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);

//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glfwSwapBuffers(window);
glfwPollEvents();
}

结果为:

image

只给定了三个位置和三个颜色,却出现了一个类似于调色一样的东西,这是因为光栅化阶段会进行插值,生成比给定的顶点多得多的顶点,比如可能由上万个。

着色器类

主要是读取着色器程序的源码,编译,创建着色器程序,链接,有一个使用着色器的函数。

#ifndef SHADER_H
#define SHADER_H

#include <glad/glad.h>

#include <string>
#include <fstream>
#include <sstream>
#include <iostream>

class Shader
{
public:
unsigned int ID;
// constructor generates the shader on the fly
// ------------------------------------------------------------------------
Shader(const char* vertexPath, const char* fragmentPath)
{
// 1. retrieve the vertex/fragment source code from filePath
std::string vertexCode;
std::string fragmentCode;
std::ifstream vShaderFile;
std::ifstream fShaderFile;
// ensure ifstream objects can throw exceptions:
vShaderFile.exceptions (std::ifstream::failbit | std::ifstream::badbit);
fShaderFile.exceptions (std::ifstream::failbit | std::ifstream::badbit);
try
{
// open files
vShaderFile.open(vertexPath);
fShaderFile.open(fragmentPath);
std::stringstream vShaderStream, fShaderStream;
// read file's buffer contents into streams
vShaderStream << vShaderFile.rdbuf();
fShaderStream << fShaderFile.rdbuf();
// close file handlers
vShaderFile.close();
fShaderFile.close();
// convert stream into string
vertexCode = vShaderStream.str();
fragmentCode = fShaderStream.str();
}
catch (std::ifstream::failure& e)
{
std::cout << "ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ: " << e.what() << std::endl;
}
const char* vShaderCode = vertexCode.c_str();
const char * fShaderCode = fragmentCode.c_str();
// 2. compile shaders
unsigned int vertex, fragment;
// vertex shader
vertex = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertex, 1, &vShaderCode, NULL);
glCompileShader(vertex);
checkCompileErrors(vertex, "VERTEX");
// fragment Shader
fragment = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragment, 1, &fShaderCode, NULL);
glCompileShader(fragment);
checkCompileErrors(fragment, "FRAGMENT");
// shader Program
ID = glCreateProgram();
glAttachShader(ID, vertex);
glAttachShader(ID, fragment);
glLinkProgram(ID);
checkCompileErrors(ID, "PROGRAM");
// delete the shaders as they're linked into our program now and no longer necessary
glDeleteShader(vertex);
glDeleteShader(fragment);
}
// activate the shader
// ------------------------------------------------------------------------
void use()
{
glUseProgram(ID);
}
// utility uniform functions
// ------------------------------------------------------------------------
void setBool(const std::string &name, bool value) const
{
glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value);
}
// ------------------------------------------------------------------------
void setInt(const std::string &name, int value) const
{
glUniform1i(glGetUniformLocation(ID, name.c_str()), value);
}
// ------------------------------------------------------------------------
void setFloat(const std::string &name, float value) const
{
glUniform1f(glGetUniformLocation(ID, name.c_str()), value);
}

private:
// utility function for checking shader compilation/linking errors.
// ------------------------------------------------------------------------
void checkCompileErrors(unsigned int shader, std::string type)
{
int success;
char infoLog[1024];
if (type != "PROGRAM")
{
glGetShaderiv(shader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(shader, 1024, NULL, infoLog);
std::cout << "ERROR::SHADER_COMPILATION_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << std::endl;
}
}
else
{
glGetProgramiv(shader, GL_LINK_STATUS, &success);
if (!success)
{
glGetProgramInfoLog(shader, 1024, NULL, infoLog);
std::cout << "ERROR::PROGRAM_LINKING_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << std::endl;
}
}
}
};
#endif

使用着色器时,要用绝对路径。

纹理

纹理坐标的范围通常是从(0, 0)到(1, 1),超出部分可以设置环绕方式:

环绕方式 描述
GL_REPEAT 对纹理的默认行为。重复纹理图像。
GL_MIRRORED_REPEAT 和GL_REPEAT一样,但每次重复图片是镜像放置的。
GL_CLAMP_TO_EDGE 纹理坐标会被约束在0到1之间,超出的部分会重复纹理坐标的边缘,产生一种边缘被拉伸的效果。
GL_CLAMP_TO_BORDER 超出的坐标为用户指定的边缘颜色。

image

纹理的生成过程

加载stb_image库

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

添加一个纹理

unsigned int textureID;
glGenTextures(1, &textureID);

int width, height, nrComponents;
unsigned char* data = stbi_load(path, &width, &height, &nrComponents, 0);
if (data)
{
GLenum format = {};
if (nrComponents == 1)
format = GL_RED;
else if (nrComponents == 3)
format = GL_RGB;
else if (nrComponents == 4)
format = GL_RGBA;

glBindTexture(GL_TEXTURE_2D, textureID);
glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

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_image_free(data);
}
else
{
std::cout << "Texture failed to load at path: " << path << std::endl;
stbi_image_free(data);
}

此时纹理对象储存在一个可以通过textureID找到的地方。在顶点着色器中传入纹理桌标,再传给片段着色器:

#version 330 core
out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D ourTexture;

void main()
{
FragColor = texture(ourTexture, TexCoord);
}

片段着色器是通过采样器访问纹理对象的。

采样器(Sampler) :它以纹理类型作为后缀,比如sampler1Dsampler3D,或在我们的例子中的sampler2D。我们可以简单声明一个uniform sampler2D把一个纹理添加到片段着色器中,稍后我们会把纹理赋值给这个uniform。

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

glBindTexture(GL_TEXTURE_2D, texture);

绘制图形前,绑定纹理,就会自动地把纹理赋值给片段着色器的采样器。

在一些驱动中,必须要对每个采样器uniform都附加上纹理单元才可以。

纹理单元

一个片段着色器可以有多个纹理,一个纹理的位置通常称为一个纹理单元。默认的纹理单元是0,是默认激活的,因此只有一个时不需要手动分配位置和激活。

glActiveTexture(GL_TEXTURE0); // 在绑定纹理之前先激活纹理单元
glBindTexture(GL_TEXTURE_2D, texture);

激活纹理单元之后,接下来的glBindTexture函数调用会绑定这个纹理到当前激活的纹理单元,纹理单元GL_TEXTURE0默认总是被激活,所以我们在前面的例子里当我们使用glBindTexture的时候,无需激活任何纹理单元。

OpenGL至少保证有16个纹理单元供你使用,也就是说你可以激活从GL_TEXTURE0到GL_TEXTRUE15。它们都是按顺序定义的,所以我们也可以通过GL_TEXTURE0 + 8的方式获得GL_TEXTURE8,这在当我们需要循环一些纹理单元的时候会很有用。

如果一个片段着色器绑定多个纹理单元,应该这样做:

unsigned int texture1;
glGenTextures(1, &texture1);
... // 创建纹理1
unsigned int texture2;
glGenTextures(1, &texture2);
... // 创建纹理2

在片段着色器中创建两个采样器

uniform sampler2D sampler_texture1;
uniform sampler2D sampler_texture2;

告诉OpenGL采样器对应的纹理单元

ourShader.use(); // 不要忘记在设置uniform变量之前激活着色器程序!
ourShader.setInt("sampler_texture1", 0); // 使用着色器类设置
ourShader.setInt("sampler_texture2", 1);
// 也可以手动设置
glUniform1i(glGetUniformLocation(ourShader.ID, "sampler_texture1"), 0);
glUniform1i(glGetUniformLocation(ourShader.ID, "sampler_texture2"), 1);

然后再渲染循环中分别激活并绑定纹理到对应的纹理单元

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);

最后片段着色器可以使用纹理了

FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);

所以总体的连接在于,创建的纹理可以通过ID绑定到对应的纹理单元上,设置采样器分配纹理单元,最后通过texture函数采样纹理,赋值给片段。

变换

理论上,变换共有三种:旋转,位移,缩放。

矩阵求逆是一项对于着色器开销很大的运算,因为它必须在场景中的每一个顶点上进行,所以应该尽可能地避免在着色器中进行求逆运算。以学习为目的的话这样做还好,但是对于一个高效的应用来说,你最好先在CPU上计算出法线矩阵,再通过uniform把它传递给着色器(就像模型矩阵一样)。

#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
// ---------------
glm::vec4 vec(1.0f, 0.0f, 0.0f, 1.0f);
glm::mat4 trans = glm::mat4(1.0f); // 矩阵的初始化是必要的
trans = glm::translate(trans, glm::vec3(1.0f, 1.0f, 0.0f));
vec = trans * vec;
std::cout << vec.x << vec.y << vec.z << std::endl;
// 以上代码是创建一个向量,然后用一个变换矩阵乘以此向量,达到变换向量的目的,输出结果为210

实现3D

// create transformations
glm::mat4 model = glm::mat4(1.0f);
glm::mat4 view = glm::mat4(1.0f);
glm::mat4 projection = glm::mat4(1.0f);
model = glm::rotate(model, (float)glfwGetTime() * glm::radians(50.0f), glm::vec3(0.5f, 1.0f, 0.0f));
// 注意,我们将矩阵向我们要进行移动场景的反方向移动。
view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));
projection = glm::perspective(glm::radians(45.0f), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);

ourShader.setMat4("model", model);
ourShader.setMat4("view", view);
ourShader.setMat4("projection", projection);

注意,矩阵的运算是从右向左的,因此顶点着色器中相乘时应为:

gl_Position = projection * view * model * vec4(aPos, 1.0);

摄像机类

代码实现:

#ifndef CAMERA_H
#define CAMERA_H

#include <glad/glad.h>
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>

#include <vector>

// 定义一些可能用到的常量
enum Camera_Movement { FORWARD, BACKWARD, LEFT, RIGHT, UP, DOWN, FASTER_FORWARD, FASTER_BACKWARD, FASTER_LEFT, FASTER_RIGHT };

// 摄像机默认值
const float YAW = -90.0f; // 偏航角度
const float PITCH = 0.0f; // 上仰角度
const float SPEED = 5.0f; // 摄像机移动速度,虽然实际是整个空间的物体同时在移动
const float SENSITIVITY = 0.1f; // 鼠标灵敏度,用以计算镜头转向
const float ZOOM = 45.0f; // 视野,观察空间的大小

// An abstract camera class that processes input and calculates the
// corresponding Euler Angles, Vectors and Matrices for use in OpenGL
class Camera {
public:
// 摄像机属性
glm::vec3 Position; // 摄像机位置向量
glm::vec3 Front; // 方向向量,摄像机指向的目标的方向
glm::vec3 Up; // 上向量,也即y轴正方向,叉乘方向向量可得右向量
glm::vec3 Right; // 右向量,摄像机空间x轴的正方向
glm::vec3 WorldUp; // 上向量
// 有了三个互相垂直的轴,外加一个平移向量,即可创建一个矩阵,可以用这个矩阵乘以任何向量来将其变换到那个空间

// euler Angles
float Yaw;
float Pitch;
// camera options
float MovementSpeed;
float MouseSensitivity;
float Zoom;

// 使用一个向量创建摄像机:
// 主要参数为:位置,默认为原点;上向量,默认为010;方向向量为00-1,
// 其他均可以为默认
Camera(glm::vec3 position = glm::vec3(0.0f, 0.0f, 0.0f),
glm::vec3 up = glm::vec3(0.0f, 1.0f, 0.0f), float yaw = YAW,
float pitch = PITCH)
: Front(glm::vec3(0.0f, 0.0f, -1.0f)), MovementSpeed(SPEED),
MouseSensitivity(SENSITIVITY), Zoom(ZOOM) {
Position = position;
WorldUp = up;
Yaw = yaw;
Pitch = pitch;
updateCameraVectors();
}
// 使用标量创建摄像机
// 主要参数为:位置,默认为原点;上向量,默认为010;方向向量为00-1,
// 其他均可以为默认
Camera(float posX, float posY, float posZ, float upX, float upY, float upZ,
float yaw, float pitch)
: Front(glm::vec3(0.0f, 0.0f, -1.0f)), MovementSpeed(SPEED),
MouseSensitivity(SENSITIVITY), Zoom(ZOOM) {
Position = glm::vec3(posX, posY, posZ);
WorldUp = glm::vec3(upX, upY, upZ);
Yaw = yaw;
Pitch = pitch;
updateCameraVectors();
}

// returns the view matrix calculated using Euler Angles and the LookAt
// Matrix
glm::mat4 GetViewMatrix() // 生成观察矩阵
{
// return glm::lookAt(Position, Position + Front, Up);
// //
// lookat函数只需要一个位置,一个目标,和一个上向量,它会自己创建一个观察矩阵,此观察矩阵点乘空间中的物体,即可将物体变换到此观察空间中

// ------------ 以下为自己的lookat:
// 1. Position = known
// 2. Calculate cameraDirection
glm::vec3 zaxis = glm::normalize(-Front);
// 3. Get positive right axis vector
glm::vec3 xaxis =
glm::normalize(glm::cross(glm::normalize(WorldUp), zaxis));
// 4. Calculate camera up vector
glm::vec3 yaxis = glm::cross(zaxis, xaxis);

// Create translation and rotation matrix
// In glm we access elements as mat[col][row] due to column-major layout
glm::mat4 translation = glm::mat4(1.0f); // Identity matrix by default
translation[3][0] = -Position.x; // Third column, first row
translation[3][1] = -Position.y;
translation[3][2] = -Position.z;
glm::mat4 rotation = glm::mat4(1.0f);
rotation[0][0] = xaxis.x; // First column, first row
rotation[1][0] = xaxis.y;
rotation[2][0] = xaxis.z;
rotation[0][1] = yaxis.x; // First column, second row
rotation[1][1] = yaxis.y;
rotation[2][1] = yaxis.z;
rotation[0][2] = zaxis.x; // First column, third row
rotation[1][2] = zaxis.y;
rotation[2][2] = zaxis.z;
return rotation * translation;
}

// processes input received from any keyboard-like input system. Accepts
// input parameter in the form of camera defined ENUM (to abstract it from
// windowing systems)
void ProcessKeyboard(Camera_Movement direction, float deltaTime) {
float velocity = MovementSpeed * deltaTime; // 设定速度
// 根据方向调整方向向量
if (direction == FORWARD)
Position += Front * velocity;
if (direction == BACKWARD)
Position -= Front * velocity;
if (direction == LEFT)
Position -= Right * velocity;
if (direction == RIGHT)
Position += Right * velocity;
if (direction == UP)
Position.y += velocity;
if (direction == DOWN)
Position.y -= velocity;
// Position.y = 0.0f; // 确保不会偏离xz平面

// Setting faster
if (direction == FASTER_FORWARD)
Position += Front * (velocity * 10);
if (direction == FASTER_BACKWARD)
Position -= Front * (velocity * 10);
if (direction == FASTER_LEFT)
Position -= Right * (velocity * 10);
if (direction == FASTER_RIGHT)
Position += Right * (velocity * 10);
}

// processes input received from a mouse input system. Expects the offset
// value in both the x and y direction.
void ProcessMouseMovement(float xoffset, float yoffset,
GLboolean constrainPitch = true) {
xoffset *= MouseSensitivity; // x方向的鼠标偏离
yoffset *= MouseSensitivity; // y方向的鼠标偏离

Yaw += xoffset; // 偏航
Pitch += yoffset; // 仰角

if (constrainPitch) // 确保仰角足够大时屏幕不会被翻转
{
if (Pitch > 89.0f)
Pitch = 89.0f;
if (Pitch < -89.0f)
Pitch = -89.0f;
}

// update Front, Right and Up Vectors using the updated Euler angles
updateCameraVectors();
}

// processes input received from a mouse scroll-wheel event. Only requires
// input on the vertical wheel-axis
void ProcessMouseScroll(float yoffset) // 处理缩放
{
Zoom -= (float)yoffset;
if (Zoom < 1.0f)
Zoom = 1.0f;
if (Zoom > 45.0f)
Zoom = 45.0f;
}

private:
// 从更新后的相机的欧拉角计算方向向量
void updateCameraVectors() {
// calculate the new Front vector
glm::vec3 front;
front.x = cos(glm::radians(Yaw)) * cos(glm::radians(Pitch));
front.y = sin(glm::radians(Pitch));
front.z = sin(glm::radians(Yaw)) * cos(glm::radians(Pitch));
Front = glm::normalize(front);
// 同时重新计算了右向量和上向量
Right = glm::normalize(glm::cross(Front, WorldUp));
// 将向量归一化,因为你向上或向下看的次数越多,它们的长度就越接近0,这会导致移动速度变慢。
Up = glm::normalize(glm::cross(Right, Front));
}
};
#endif
显示评论