LearnOpenGL 学习（入门--三角形，着色器，纹理）

你好，三角形

下面，你会看到一个图形渲染管线的每个阶段的抽象展示。要注意蓝色部分代表的是我们可以注入自定义的着色器的部分。

图形渲染管线的第一个部分是顶点着色器(Vertex Shader)，它把一个单独的顶点作为输入。顶点着色器主要的目的是把3D坐标转为另一种3D坐标（后面会解释），同时顶点着色器允许我们对顶点属性进行一些基本处理。

顶点着色器阶段的输出可以选择性地传递给几何着色器(Geometry Shader)。几何着色器将一组顶点作为输入，这些顶点形成图元，并且能够通过发出新的顶点来形成新的(或其他)图元来生成其他形状。在这个例子中，它从给定的形状中生成第二个三角形。

图元装配(Primitive Assembly)阶段将顶点着色器（或几何着色器）输出的所有顶点作为输入（如果是GL_POINTS，那么就是一个顶点），并将所有的点装配成指定图元的形状；本节例子中是两个三角形。

图元装配阶段的输出会被传入光栅化阶段(Rasterization Stage)，这里它会把图元映射为最终屏幕上相应的像素，生成供片段着色器(Fragment Shader)使用的片段(Fragment)。在片段着色器运行之前会执行裁切(Clipping)。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。

OpenGL中的一个片段是OpenGL渲染一个像素所需的所有数据。

片段着色器的主要目的是计算一个像素的最终颜色，这也是所有OpenGL高级效果产生的地方。通常，片段着色器包含3D场景的数据（比如光照、阴影、光的颜色等等），这些数据可以被用来计算最终像素的颜色。

在所有对应颜色值确定以后，最终的对象将会被传到最后一个阶段，我们叫做Alpha测试和混合(Blending)阶段。这个阶段检测片段的对应的深度（和模板(Stencil)）值（后面会讲），用它们来判断这个像素是其它物体的前面还是后面，决定是否应该丢弃。这个阶段也会检查alpha值（alpha值定义了一个物体的透明度）并对物体进行混合(Blend)。所以，即使在片段着色器中计算出来了一个像素输出的颜色，在渲染多个三角形的时候最后的像素颜色也可能完全不同。

顶点输入

OpenGL仅当3D坐标在3个轴（x、y和z）上-1.0到1.0的范围内时才处理它。所有在这个范围内的坐标叫做标准化设备坐标(Normalized Device Coordinates)，此范围内的坐标最终显示在屏幕上（在这个范围以外的坐标则不会显示）。

标准化设备坐标：

一个简单的着色器：

#include <GL/glew.h>
#include <GLFW/glfw3.h>#include <iostream>static unsigned int CompileShader(unsigned int type, const std::string& source) {unsigned int id = glCreateShader(type);const char* src = source.c_str();glShaderSource(id, 1, &src, nullptr);glCompileShader(id); //Syntax error handlingint result;glGetShaderiv(id, GL_COMPILE_STATUS, &result);if (result == GL_FALSE) {  //编译失败 获取错误信息int length;glGetShaderiv(id, GL_INFO_LOG_LENGTH, &length);char* message = (char*)alloca(length * sizeof(char));glGetShaderInfoLog(id, length, &length, message);std::cout << "Failed to compile" << (type == GL_VERTEX_SHADER ? "vertexShader" : "fragmentShader ") << " shader!" << std::endl;std::cout << message << std::endl;glDeleteShader(id);return 0;}return id;
}//我们向OpenGL提供我们实际的着色器源代码，我的着色器文本。我们想让OpenGL编译那个程序，将这两个链接到一个
//独立的着色器程序，然后给我们一些那个着色器返回的唯一标识符，我们就可以绑定着色器并使用
static unsigned int CreateShader(const std::string& vertexShader, const std::string& fragmentShader) {unsigned int program = glCreateProgram();unsigned int vs = CompileShader(GL_VERTEX_SHADER, vertexShader);unsigned int fs = CompileShader(GL_FRAGMENT_SHADER, fragmentShader);//将这两个着色器附加到我们的程序上glAttachShader(program, vs);glAttachShader(program, fs);//链接程序glLinkProgram(program);glValidateProgram(program);//删除一些无用的中间文件glDeleteShader(vs);glDeleteShader(fs);return program;
}int main(void)
{GLFWwindow* window;/* Initialize the library */if (!glfwInit())return -1;/* Create a windowed mode window and its OpenGL context */window = glfwCreateWindow(640, 480, "Hello World", NULL, NULL);if (!window){glfwTerminate();return -1;}/* Make the window's context current */glfwMakeContextCurrent(window);if (glewInit() != GLEW_OK) {  //should after MakeContextCurrent std::cout << "Error" << std::endl;}std::cout << glGetString(GL_VERSION) << std::endl;float positions[6] = {-0.5f, -0.5f,0.0f, 0.5f,0.5f, -0.5f};unsigned int buffer;  glGenBuffers(1, &buffer);glBindBuffer(GL_ARRAY_BUFFER, buffer);//glBufferData是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数。
//它的第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。第二个参数指定传输
//数据的大小(以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。第三个参数是我们希望发送的
//实际数据。glBufferData(GL_ARRAY_BUFFER, 6 * sizeof(float),positions,GL_STATIC_DRAW);glEnableVertexAttribArray(0);glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 8, 0);std::string vertexShader ="#version 330 core\n""\n""layout(location = 0) in vec4 position;\n""\n""void main()\n""{\n""gl_Position = position;\n""}\n";std::string fragmentShader = "#version 330 core\n""\n""layout(location = 0) out vec4 color;\n""\n""void main()\n""{\n""color = vec4(1.0,0.0,0.0,1.0)\n;""}\n";unsigned int shader = CreateShader(vertexShader, fragmentShader);//绑定着色器glUseProgram(shader);  /* Loop until the user closes the window */while (!glfwWindowShouldClose(window)){/* Render here */glClear(GL_COLOR_BUFFER_BIT);glDrawArrays(GL_TRIANGLES, 0, 3);/* Swap front and back buffers */glfwSwapBuffers(window);/* Poll for and process events */glfwPollEvents();}//删除着色器glDeleteProgram(shader);glfwTerminate();return 0;
}

链接顶点属性

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0); glEnableVertexAttribArray(0);

glVertexAttribPointer函数的参数非常多，所以我会逐一介绍它们：

• 第一个参数指定我们要配置的顶点属性。我们在顶点着色器中有这样的句子：layout(location = 0)定义了一个属性，希望把数据传入这个属性就在这里传入 0 
• 第二个参数指定顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3。
• 第三个参数指定数据的类型，这里是GL_FLOAT(GLSL中vec*都是由浮点数值组成的)。
• 下个参数定义我们是否希望数据被标准化(Normalize)。如果我们设置为GL_TRUE，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE。
• 第五个参数叫做步长(Stride)，它告诉我们在连续的顶点属性组之间的间隔。由于下个组位置数据在3个float之后，我们把步长设置为3 * sizeof(float)。（译注: 这个参数的意思简单说就是从这个属性第二次出现的地方到整个数组0位置之间有多少字节）。
• 最后一个参数的类型是void*，所以需要我们进行这个奇怪的强制类型转换。它表示位置数据在缓冲中起始位置的偏移量(Offset)。由于位置数据在数组的开头，所以这里是0。我们会在后面详细解释这个参数。

顶点数组对象

#include "VertexArray.h"#include "Render.h"
#include "VertexBufferLayout.h"VertexArray::VertexArray() {GLCall(glGenVertexArrays(1, &m_RenderID));GLCall(glBindVertexArray(m_RenderID));
}VertexArray::~VertexArray() {GLCall(glDeleteVertexArrays(1, &m_RenderID));
}void VertexArray::AddBuffer(const VertexBuffer& vb, const VertexBufferLayout& layout) {Bind();vb.Bind();const std::vector<VertexBufferElement>& elements = layout.GetElements();unsigned int offset = 0;for (unsigned int i = 0; i < elements.size();i++) {const auto& element = elements[i];GLCall(glEnableVertexAttribArray(i));GLCall(glVertexAttribPointer(i, element.count, element.type, element.normalized, layout.GetStride(), (const void*)offset));offset += element.count * VertexBufferElement::GetSizeOfType(element.type);}
}void VertexArray::Bind() const {GLCall(glBindVertexArray(m_RenderID));
}
void VertexArray::UnBind() const {GLCall(glBindVertexArray(0));
}

这个顶点数组类可以绑定多个缓冲区，可以使用addbuffer函数添加缓冲区，函数会自动计算glVertexAttribPointer 函数的参数并调用

着色器

一个典型的着色器有下面的结构：

#version version_number
in type in_variable_name;
in type in_variable_name;out type out_variable_name;uniform type uniform_name;void main()
{// 处理输入并进行一些图形操作...// 输出处理过的结果到输出变量out_variable_name = weird_stuff_we_processed;
}

数据类型

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

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

纹理

纹理环绕方式

当纹理坐标超出默认范围时，每个选项都有不同的视觉效果输出。我们来看看这些纹理图像的例子：

纹理图像是方形数组，纹理坐标通常可定义成一、二、三或四维形式，称为 s，t，r和q坐标

首先，其中的q是一个缩放因子，相当于顶点坐标中的 w 。实际在纹理读取中的坐标应该分别是 s/q、t/q、r/q。默认情况下，q 是1.0。通常情况下貌似没什么用，但是在一些产生纹理坐标的高级算法比如阴影贴图中，比较有用。

纹理过滤

纹理坐标不依赖于分辨率(Resolution)，它可以是任意浮点值，所以OpenGL需要知道怎样将纹理像素(Texture Pixel，也叫Texel，译注1)映射到纹理坐标。当一个物体很大但是纹理的分辨率很低的时候就需要纹理过滤(Texture Filtering)

GL_NEAREST（也叫邻近过滤，Nearest Neighbor Filtering）是OpenGL默认的纹理过滤方式。当设置为GL_NEAREST的时候，OpenGL会选择中心点最接近纹理坐标的那个像素。下图中你可以看到四个像素，加号代表纹理坐标。左上角那个纹理像素的中心距离纹理坐标最近，所以它会被选择为样本颜色：

GL_LINEAR（也叫线性过滤，(Bi)linear Filtering）它会基于纹理坐标附近的纹理像素，计算出一个插值，近似出这些纹理像素之间的颜色。一个纹理像素的中心距离纹理坐标越近，那么这个纹理像素的颜色对最终的样本颜色的贡献越大。下图中你可以看到返回的颜色是邻近像素的混合色：

  对比图：

//设置图片缩小放大，嵌入的采样方式GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE));GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE));

多级渐远纹理（mipmap）

手工为每个纹理图像创建一系列多级渐远纹理很麻烦，OpenGL有一个glGenerateMipmap函数，在创建完一个纹理后调用它OpenGL就会承担接下来的所有工作了。

为了指定不同多级渐远纹理级别之间的过滤方式，你可以使用下面四个选项中的一个代替原有的过滤方式：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

加载于创建纹理

cherno openGL 课程写的 texcure  代码：

#include "Texture.h"
#include "stb_image.h"Texture::Texture(const std::string& path) : m_RenderID(0), m_FilePath(path), m_LocationBuffer(nullptr),m_Width(0), m_Height(0), m_BPP(0) {stbi_set_flip_vertically_on_load(1); //将图片上下翻转m_LocationBuffer = stbi_load(path.c_str(), &m_Width,&m_Height,&m_BPP,4);GLCall(glGenTextures(1, &m_RenderID));GLCall(glBindTexture(GL_TEXTURE_2D, m_RenderID));//设置图片缩小放大，嵌入的采样方式GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE));GLCall(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE));GLCall(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, m_Width, m_Height, 0, GL_RGBA,GL_UNSIGNED_BYTE, m_LocationBuffer));GLCall(glBindTexture(GL_TEXTURE_2D, 0));//生成 mipmapglGenerateMipmap(GL_TEXTURE_2D);//释放图像内存stbi_image_free(m_LocationBuffer);if (m_LocationBuffer) {stbi_image_free(m_LocationBuffer);}
}Texture::~Texture() {GLCall(glDeleteTextures(1, &m_RenderID));
}//slot 是想要绑定纹理的插槽
//一般电脑支持最大32个，手机支持8个，但是具体的还得具体看
void Texture::Bind(unsigned int slot) const {GLCall(glActiveTexture(GL_TEXTURE0 + slot));GLCall(glBindTexture(GL_TEXTURE_2D, m_RenderID));
}void Texture::UnBind() const {GLCall(glBindTexture(GL_TEXTURE_2D, 0));
}

使用载入的图片数据生成一个纹理了。纹理可以通过glTexImage2D来生成：

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

参数解释：

• 第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理（任何绑定到GL_TEXTURE_1D和GL_TEXTURE_3D的纹理不会受到影响）。
• 第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别。
• 第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。
• 第四个和第五个参数设置最终的纹理的宽度和高度。我们之前加载图像的时候储存了它们，所以我们使用对应的变量。
• 下个参数应该总是被设为0（历史遗留的问题）。
• 第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。
• 最后一个参数是真正的图像数据。

将两个图片混合显示，然后有一个滑动条可以调节每个图片混合的权重：

#include "TestTextureBlend.h"#include "Render.h"
#include "imgui/imgui.h"#include "glm/glm.hpp"
#include "glm/gtc/matrix_transform.hpp"namespace test {TestTextureBlend::TestTextureBlend() : m_Proj(glm::ortho(0.0f,960.0f,0.0f,720.0f,-1.0f,1.0f)),m_View(glm::translate(glm::mat4(1.0f), glm::vec3(100, 0, 0))),m_TranslationA(0.5f){float positions[] = {100.0f, 100.0f, 0.0f, 0.0f,  // 0200.0f, 100.0f, 1.0f, 0.0f,  // 1200.0f, 200.0f, 1.0f, 1.0f,  // 2100.0f, 200.0f, 0.0f, 1.0f   // 3};unsigned int indices[] = {0, 1, 2,2, 3, 0};GLCall(glEnable(GL_BLEND));GLCall(glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA));m_VAO = std::make_unique<VertexArray>();m_VertexBuffer = std::make_unique<VertexBuffer>(positions, static_cast<unsigned long long>(4) * 4 * sizeof(float));VertexBufferLayout layout;layout.Push<float>(2);layout.Push<float>(2);m_VAO->AddBuffer(*m_VertexBuffer, layout);m_IndexBuffer = std::make_unique<IndexBuffer>(indices, 6);m_Shader = std::make_unique<Shader>("res/shaders/TestTextureBlend.shader"); m_Shader->Bind();m_Shader->SetUniform4f("u_Color", 0.2f, 0.3f, 0.8f, 1.0f);m_Shader->SetUniform1i("u_Texture", 0);m_Shader->SetUniform1i("u_Texture1", 1);m_Texture0 = std::make_unique<Texture>("res/textures/14fnm.png");m_Texture1 = std::make_unique<Texture>("res/textures/smileface.png");}TestTextureBlend::~TestTextureBlend() {}void TestTextureBlend::OnUpdate(float delteTime) {}void TestTextureBlend::OnRender() {GLCall(glClearColor(0.0f, 0.0f, 0.0f, 1.0f));GLCall(glClear(GL_COLOR_BUFFER_BIT));constexpr Render renderer;m_Texture0->Bind(0);m_Texture1->Bind(1);{const glm::mat4 model = glm::mat4(1.0f);const glm::mat4 mvp = m_Proj * m_View * model;m_Shader->Bind();m_Shader->SetUniformMat4f("u_MVP", mvp);m_Shader->SetUniform1f("u_percent", m_TranslationA);GLCall(renderer.Draw(*m_VAO, *m_IndexBuffer, *m_Shader));}}void TestTextureBlend::OnImGuiRender() {ImGui::SliderFloat("m_TranslationA", &m_TranslationA, 0.0f, 1.0f);ImGui::Text("Application average %.3f ms/frame (%.1f FPS)", static_cast<double>(1000.0f / ImGui::GetIO().Framerate),static_cast<double>(ImGui::GetIO().Framerate));}
}

#shader vertex
#version 330 corelayout(location = 0) in vec4 position;
layout(location = 1) in vec2 texCoord;out vec2 v_TexCoord;
uniform mat4 u_MVP;void main()
{gl_Position = u_MVP * position;v_TexCoord = texCoord;
};#shader fragment
#version 330 corelayout(location = 0) out vec4 color;in vec2 v_TexCoord;uniform vec4 u_Color;
uniform float u_percent;
uniform sampler2D u_Texture0;
uniform sampler2D u_Texture1;void main()
{vec4 texColor = mix(texture(u_Texture0, v_TexCoord), texture(u_Texture1, v_TexCoord), u_percent);color = texColor;
};

出错：忘记了需要把图片的坐标变换到 [ -1,1 ] 的屏幕坐标下，所以没有显示图片，代码中是 proj 矩阵

 这个脸是我自己画的

参考：你好，三角形 - LearnOpenGL CN

纹理 - LearnOpenGL CN

【OpenGL学习笔记④】——纹理贴图【SOIL2的配置 + 绘制木板 + 纹理环绕】-CSDN博客