Opengl on 随记

01颜色

Thu, 07 May 2026 11:30:58 +0800

颜色#

我们在前几章中简单地使用和处理了颜色，但从未对它们进行过正式的定义。在这里，我们将讨论颜色的概念，并为接下来的光照章节构建场景。

在现实世界中，颜色可以取任何已知的颜色值，每个物体都有其独特的颜色。而在数字世界中，我们需要将（无限的）真实颜色映射到（有限的）数字值，因此并非所有现实世界的颜色都能用数字方式表示。颜色通常使用 red 、 green 、 blue 三个分量进行数字表示，简写为 RGB 。通过对这三个值在 [0,1] 范围内进行不同的组合，我们几乎可以表示任何颜色。例如，要得到_珊瑚色_ ，我们可以定义一个颜色向量：

glm::vec3 coral(1.0f, 0.5f, 0.31f);

我们在现实生活中看到的物体颜色并非它本身的颜色，而是物体反射的颜色。物体未吸收（反射）的颜色就是我们感知到的颜色。例如，太阳光被感知为白光，它是多种不同颜色混合而成的（如图所示）。如果我们用这种白光照射一个蓝色的玩具，它会吸收除蓝色以外的所有白色光。由于玩具不吸收蓝色光，所以蓝色光会被反射。这些反射光进入我们的眼睛，使我们觉得玩具是蓝色的。下图展示了一个珊瑚色玩具反射多种不同强度颜色的光：

你可以看到，白色的阳光是由所有可见颜色组成的，物体吸收了其中的大部分颜色。它只反射那些代表物体颜色的颜色，而这些颜色的组合就构成了我们所感知到的颜色（在本例中是珊瑚色）。

从技术上讲，这有点复杂，但我们会在 PBR 章节中讨论这个问题。

这些颜色反射规则直接适用于图形领域。在 OpenGL 中定义光源时，我们需要给它赋予颜色。上一段中我们用了白色，所以光源也用白色。如果我们把光源的颜色值乘以物体的颜色值，得到的颜色就是物体的反射颜色（也就是它的感知颜色）。让我们再来看看之前的例子（这次用珊瑚色），看看如何在图形领域计算它的感知颜色。我们通过将光源颜色向量和物体颜色向量逐个分量相乘来得到结果颜色向量：

glm::vec3 lightColor(1.0f, 1.0f, 1.0f);
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);
glm::vec3 result = lightColor * toyColor; // = (1.0f, 0.5f, 0.31f);

我们可以看到，玩具的颜色吸收了_大部分白光，但根据其自身的色值，反射出几种红色、绿色和蓝色光。这模拟了现实生活中颜色的运作方式。因此，我们可以将物体的颜色定义为_它从光源反射的各种颜色分量的量。那么，如果我们使用绿光会发生什么呢？

glm::vec3 lightColor(0.0f, 1.0f, 0.0f);
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);
glm::vec3 result = lightColor * toyColor; // = (0.0f, 0.5f, 0.0f);

正如我们所见，这个玩具本身不吸收或反射红光和蓝光。它吸收了光线中一半的绿色成分，但也反射了另一半绿色成分。因此，我们感知到的玩具颜色是深绿色。我们可以看到，如果使用绿光，只有绿色成分会被反射并被感知；红色和蓝色成分则无法被感知。结果，珊瑚物体突然变成了深绿色。让我们再用深橄榄绿色的光来做一个例子：

glm::vec3 lightColor(0.33f, 0.42f, 0.18f);
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);
glm::vec3 result = lightColor * toyColor; // = (0.33f, 0.21f, 0.06f);

正如你所看到的，我们可以使用不同的光色来给物体赋予有趣的颜色。玩转色彩并不难，可以尽情发挥创意。

好了，关于颜色就说到这里，让我们开始搭建一个可以进行实验的场景吧。

灯光场景#

在接下来的章节中，我们将通过模拟真实世界的光照并大量运用色彩来创建有趣的视觉效果。由于现在我们将使用光源，因此我们需要将它们显示为场景中的视觉对象，并添加至少一个对象来模拟光照。

首先，我们需要一个用来照射物体的模型，我们将使用前几章中提到的那个著名的容器立方体。我们还需要一个光源模型来表示光源在 3D 场景中的位置。为了简单起见，我们也用一个立方体来表示光源（我们已经有了顶点数据，对吧？）。

23批量渲染对象

Tue, 05 May 2026 23:13:37 +0800

核心内容是如何通过修改 MVP（模型-视图-投影）矩阵在不同位置多次绘制同一个物体，并初步探讨了性能优化的思路。

第 23 集：在 OpenGL 中渲染多个物体#

[00:00:00 - 01:25] 核心目标与现状回顾
- 回顾之前只能在屏幕上渲染一个 Logo。
- 目标：在不同位置渲染两个或多个相同的物体。
- 解决 ImGui 鼠标位置偏移的小技巧：切换 GPU 驱动（由 Intel 切换至 Nvidia）解决了一些驱动层面的显示问题。
渲染原理深究：Shader、VAO 与 Draw Call
- Shader (Program)：告诉 GPU “如何”绘制数据，而不仅仅是光照。
- Vertex Array (VAO)：包含实际的顶点数据（位置、纹理坐标等）。
- Index Buffer：决定顶点的组合顺序。
- Draw Call：调用 glDrawElements，结合 Shader 和数据完成最终的光栅化。
如何改变物体位置？（两种方案）
- 方案 A（低效）：为每个物体创建独立的顶点缓冲区（Vertex Buffer）。缺点：浪费显存，频繁切换 Buffer 速度慢。
- 方案 B（推荐）：保持顶点数据不变，但在每次绘制前修改 Uniform 变量（即 Model 矩阵）。通过矩阵变换将同一组顶点映射到屏幕的不同位置。
顶点坐标的标准化归零
- 为了方便平移，将顶点的原始坐标从 [100, 200] 修改为以原点为中心的 [-50, 50]。
- 这样做的好处是物体的 Origin（原点）位于其中心，应用平移矩阵时坐标计算更直观。

		// 定义三角形的顶点坐标（CPU 内存）
		float positions[] = {
			-50.0f, -50.0f,0.0f,0.0f,//0
			50.0f, -50.0f,1.0f,0.0f,//1
			50.0f, 50.0f,1.0f,1.0f,//2

			//0.5f, 0.5f,
			-50.0f, 50.0f,0.0f,1.0f,//3
			//-0.5f, -0.5f,
		};
		
		//while之前的代码
		glm::vec3 translationA(200, 200, 0);
		glm::vec3 translationB(400, 200, 0);
		
		//while代码块内的代码
		
			if (r > 1.0f)
				increment = -0.05f;
			else if (r < 0.0f)
				increment = 0.05f;

			r += increment;
			//绘图前重新绑定
			shader.Bind();

			{
				//=======imgui添加============
				//imgui:这里吧mvp相关代码移到while循环中
				//向右向上移动200
				glm::mat4 model = glm::translate(glm::mat4(1.0f), translationA);

				glm::mat4 mvp = proj * view * model;
				shader.SetUniformMat4f("u_MVP", mvp);

				//=======imgui添加============
				//在u_Color的位置上设置数值
				//shader.SetUniform4f("u_Color", r, 0.3f, 0.0f, 1.0f);
				//========设置uniform========

				renderer.Draw(va, ib, shader);
			}

			{
				//批量渲染对象
				glm::mat4 model = glm::translate(glm::mat4(1.0f), translationB);
				glm::mat4 mvp = proj * view * model;
				shader.SetUniformMat4f("u_MVP", mvp);
				renderer.Draw(va, ib, shader);
			}

			//=======imgui添加============
			//{}//小窗口前面的代码

22关于ImGui

Tue, 28 Apr 2026 22:49:11 +0800

第 22 集是 Cherno 系列中非常爽的一集，因为它让你告别了“硬编码”坐标的痛苦，转而使用可视化 UI 来直接操控显卡里的数据。

代码#

https://github.com/ocornut/imgui 下载1.6版本，和视频中保持一致

根目录下所有.h和.cpp文件，以及examples\opengl3_example文件夹中的.h和.cpp文件都复制到项目中 ~~不要include main.cpp文件~~ 。

修改imgui_impl_glfw_gl3.cpp中开头的 #include <GL/gl3w.h> 为#include <GL/glew.h>

添加头文件#


#include "imgui_1.60/imgui.h"
#include "imgui_1.60/imgui_impl_glfw_gl3.h"

shader后的修改#


		
		//=======imgui添加============
		//imGui创建上下文
		// Setup ImGui binding
		ImGui::CreateContext();
		//windows ,告诉 ImGui 你的程序窗口在哪里
		//允许 ImGui 自动接管窗口的回调函数（比如鼠标点击、滚轮滚动）
		ImGui_ImplGlfwGL3_Init(window, true);
		//设置 UI 的主题配色
		ImGui::StyleColorsDark();

		//解决白屏问题2：在进入 while 循环前，手动清一次屏并交换缓冲
		//设置“清除颜色”
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		//用上面选好的“油漆”填满整个颜色缓冲区（Color Buffer）
		glClear(GL_COLOR_BUFFER_BIT);
		//交换缓冲区
		glfwSwapBuffers(window); // 这一步把“深绿色”推送到显卡
		//解决白屏问题3：最后才显示窗口
		glfwShowWindow(window);


		//=======imgui添加============
		bool show_demo_window = true;
		bool show_another_window = false;
		ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f);

		glm::vec3 translation(200, 200, 0);

		
		// 游戏/渲染主循环
		while (!glfwWindowShouldClose(window))
		{
			// 清理屏幕颜色缓冲区
			renderer.Clear();

			//=======imgui添加============
			ImGui_ImplGlfwGL3_NewFrame();


			//必须先绑定program，因为vao不负责着色器程序的切换
			//va.Bind();

			if (r > 1.0f)
				increment = -0.05f;
			else if (r < 0.0f)
				increment = 0.05f;

			r += increment;

			//=======imgui添加============
			//绘图前重新绑定
			shader.Bind();
			//imgui:这里吧mvp相关代码移到while循环中
			//向右向上移动200
			glm::mat4 model = glm::translate(glm::mat4(1.0f), translation);

			glm::mat4 mvp = proj * view * model;
			shader.SetUniformMat4f("u_MVP", mvp);

			//=======imgui添加============
			//在u_Color的位置上设置数值
			//shader.SetUniform4f("u_Color", r, 0.3f, 0.0f, 1.0f);
			//========设置uniform========

			renderer.Draw(va, ib, shader);

			//=======imgui添加============
			//小窗口
			{
				static float f = 0.0f;
				static int counter = 0;
				ImGui::Text("Hello, world!"); // Display some text (you can use a format string too)
				//这里传入translation.x的地址，imgui会在这个地址上修改值
				//第一个参数是标签，表示在imgui界面上显示的名字，第二个参数是要修改的值的地址，后面是这个值的范围
				ImGui::SliderFloat3("Translation", &translation.x, 0.0f, 960.0f); // Edit 1 float using a slider from 0.0f to 1.0f 
				ImGui::SliderFloat("float", &f, 0.0f, 1.0f); // Edit 1 float using a slider from 0.0f to 1.0f 
				ImGui::ColorEdit3("clear color", (float*)&clear_color); // Edit 3 floats representing a color

				ImGui::Checkbox("Demo Window", &show_demo_window); // Edit bools storing our windows open/close state
				ImGui::Checkbox("Another Window", &show_another_window);

				if (ImGui::Button("Button")) // Buttons return true when clicked (NB: most widgets return true when edited/activated)
					counter++;
				ImGui::SameLine();
				ImGui::Text("counter = %d", counter);

				ImGui::Text("Application average %.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate);
			}

			//imgui:这里吧mvp相关代码移到while循环中
			//向右向上移动200
			glm::mat4 model = glm::translate(glm::mat4(1.0f), translation);

			glm::mat4 mvp = proj * view * model;
			shader.SetUniformMat4f("u_MVP", mvp);


			//=======imgui添加============
			ImGui::Render();

			ImGui_ImplGlfwGL3_RenderDrawData(ImGui::GetDrawData());

			// 交换前后缓冲区以刷新画面
			glfwSwapBuffers(window);

			// 轮询并处理窗口事件（如键盘输入、关闭动作）
			glfwPollEvents();
		}

		//最后解绑vao
		//glBindVertexArray(0);
	}

	//=======imgui添加============
	ImGui_ImplGlfwGL3_Shutdown();

	// 退出前清理资源
	//glfwTerminate会破坏Context，导致析构函数中的glGetError()
	//返回一个OpenGL错误
	glfwTerminate();
	return 0;

21关于模型视图投影矩阵

Mon, 27 Apr 2026 22:05:18 +0800

第 21 集通常是 Cherno 教程中从“固定画面”转向“动态交互”的关键点，也是将 M、V、P 三者真正融合进代码的时刻。

按照程序运行的时间线，我们可以把这套复杂的逻辑分为以下阶段：

1. 初始化阶段：建立“尺子” (P)#

在程序启动时，你先定义了投影矩阵 (Projection Matrix)。

动作：glm::ortho(0.0f, 960.0f, 0.0f, 540.0f, -1.0f, 1.0f)。
目的：建立一套“像素坐标系”。它就像一把尺子，告诉 GPU：“以后我给你这个数，你就把它当成屏幕的最右边。”
状态：此时你还没决定看哪，也没决定物体在哪。

2. 空间布局阶段：摆放相机与物体 (V & M)#

在每一帧渲染开始前，你需要在 CPU 中计算当前的位置。

视图矩阵 (View Matrix)：
- 动作：glm::translate(glm::mat4(1.0f), glm::vec3(x, y, z))（通常是反向平移）。
- 目的：模拟摄像机的移动。如果你想让相机往右移，代码里其实是把整个世界往左拽。
模型矩阵 (Model Matrix)：
- 动作：glm::translate 或 glm::rotate。
- 目的：决定这个特定的物体（比如那个 logo）在世界里的具体坐标、旋转角度和缩放比例。

分工#

旋转、缩放、平移，这“三兄弟”通常全部都在 M（Model 矩阵）里完成。

虽然在数学上，你可以把它们放进任何矩阵，但在图形学的标准逻辑（即第 21 集所讲的逻辑）中，它们分工非常明确：

1. M (Model 矩阵) —— 物体自己的“属性”#

适用范围：旋转、缩放、平移（全占了）。

平移 (Translation)：你想把方块放到屏幕左边还是右边？
旋转 (Rotation)：你想让方块站着还是躺着？
缩放 (Scaling)：你想让方块变大还是变小？

核心逻辑：Model 矩阵负责定义物体在世界里的样子。一个 logo 无论它怎么转、怎么挪，那都是它作为一个“物体”的行为。

20关于投影矩阵

Fri, 24 Apr 2026 16:44:10 +0800

既然已经学到了第 20 集（通常是 MVP 矩阵的收尾和调试），我们可以把这套复杂的“坐标变换流水线”按时间顺序梳理一遍。

这不仅是代码的运行顺序，也是你大脑中理解 OpenGL 坐标变换的“心路历程”：

诞生：模型空间 (Model Space)#

时间点：你在 main 函数里定义 float positions[] 的那一刻。
状态：此时的坐标是纯粹的几何数据。比如矩形宽 100，高 100。
你的认知：这些数字没有单位，它们只是相对于物体中心（原点）的位置。

变换：世界空间 (World Space) —— M (Model Matrix)#

时间点：在渲染循环中，当你想要移动、旋转这个矩形时。
动作：给模型乘以一个 Model 矩阵。
结果：矩形被“摆放”到了虚拟世界里的某个位置（比如）。

观察：摄像机空间 (View Space) —— V (View Matrix)#

时间点：你想决定从哪个角度看这个世界。
动作：乘以 View 矩阵（就像把摄像机架好）。
结果：所有物体的坐标现在变成了“相对于摄像机”的位置。如果摄像机向右移，物体在坐标系中就向左移。

关键：投影变换 (Projection Space) —— P (Projection Matrix)#

时间点：这就是你在第 19-20 集重点攻克的部分。
动作：乘以你定义的 glm::ortho（正交投影）矩阵。
核心逻辑：
- 矩阵的工作：它把你在正交矩阵里定义的范围（比如 $0 \sim 800$ ）强行压缩到 $[-1.0, 1.0]$ 。
- Shader 执行：在 Vertex Shader 里执行 u_MVP * position。
- 赋值：结果存入 gl_Position。

正交投影和透视投影#

正交投影：渲染UI（用户界面），2D游戏（通常）等
透视投影：3D，第一视角

19关于数学库

Tue, 07 Apr 2026 23:00:29 +0800

总结#

引入数学库 (Math Library)，特别是处理向量（Vector）和矩阵（Matrix）运算。对于图形学来说，数学就是“画笔”，而矩阵就是“坐标转换器”。

以下是按时间线整理的核心知识点总结：

为什么需要第三方数学库？#

原生局限：C++ 标准库没有提供专门针对图形学的向量（如 vec3）和矩阵（如 mat4）运算。
GLSL 同步：我们需要在 CPU 端计算好矩阵，然后传递给 Shader。如果 CPU 端的数学库逻辑（比如数据排布）能与 Shader 中的 GLSL 保持一致，开发效率会极高。
GLM 的选择：Cherno 选择了 GLM (OpenGL Mathematics)。它是一个 Header-only（仅头文件）的库，设计思路完全模仿 GLSL，且与 OpenGL 兼容性完美。

https://github.com/g-truc/glm/releases/tag/1.0.3

项目属性中设置：

之后这里把Texture.cpp的头文件前几行改为

#include "Texture.h"
#include "Renderer.h"
#include <iostream>

#include "stb_image/stb_image.h" //去除了vendor/

把 glm这个文件夹 (ui-右键)include
把 glm/detail/glm.cpp 和 glm/glm.cppm (ui-右键)exclude project

向量与矩阵的基本概念#

向量 (Vector)：不仅代表位置，还代表方向。在 2D 中是 vec2，3D 中是 vec3，带上齐次坐标则是 vec4。
矩阵 (Matrix)：图形学中的“魔法方阵”。mat4（4x4 矩阵）可以同时包含旋转 (Rotation)、平移 (Translation) 和缩放 (Scale) 信息。

正交投影矩阵 (Orthographic Projection)#

这是本集的实战重点。Cherno 引入了 glm::ortho 函数：

18关于混合

Mon, 06 Apr 2026 23:21:41 +0800

这一集是关于如何处理==透明度（Alpha Channel）==的关键。当两个物体重叠时，GPU 如何决定最终像素的颜色？这就是“混合”要解决的问题。

问题的引入：为什么我的图片有“黑边”？#

在加载带透明通道的 .png 纹理时，如果不开启混合，透明区域通常会显示为纯黑色或纯白色。这是因为：

默认情况下，OpenGL 只是简单地用新像素 ==覆盖（Overwrite）==旧像素。
即使你的纹理有 Alpha 值（例如 $0.0$ ），如果不告诉 OpenGL 如何处理它，它依然会把这个“透明”的像素颜色画上去。

开启混合 (Enable Blending)#

OpenGL 是一个状态机，混合功能默认是关闭的。你必须手动开启：

GLCall(glEnable(GL_BLEND));

开启后，你需要定义混合函数（Blend Function），即告诉 OpenGL：“拿新颜色（源）和旧颜色（目标）怎么算？”

核心公式：混合方程式#

这是这一集最硬核的数学部分。OpenGL 计算最终像素颜色的公式如下：

C_{result} = (C_{src} * F_{src}) + (C_{dest} * F_{dest})

(Source Color)：即将画上去的颜色（来自 Fragment Shader）。
(Source Factor)：源颜色的权重。
(Destination Color)：已经在颜色缓冲区里的颜色（背景色）。
(Destination Factor)：目标颜色的权重。

最常用的配置：实现透明效果#

为了实现自然的透明（即：新物体的透明度越高，透出的背景越多），Cherno 给出了最经典的配置方案：

GLCall(glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA));
//函数glBlendFunc第一个参数默认值为：GL_ONE，第二个参数默认值为：GL_ZERO

逻辑拆解：

$F_{src} = GL\_SRC\_ALPHA$ 源颜色的权重是它自己的 $Alpha$ 值。
$F_{dest} = GL\_ONE\_MINUS\_SRC\_ALPHA$ 背景颜色的权重是 $1 - Alpha$ 。

举个例子：如果你画一个 Alpha 为 $0.3$ （ $30\%$ 不透明）的红色方块在黑色背景上：

17关于纹理

Sun, 29 Mar 2026 23:43:31 +0800

第 17 集是 OpenGL 系列中视觉效果实现飞跃的一集。在此之前，你只能画出单色的三角形；学完纹理后，你就能把图片贴在你的几何图形上。

即便你现在还不学习具体的 API，了解其背后的“映射逻辑”对你理解未来的 3D 渲染至关重要。

简述#

纹理的基本原理：坐标映射#

核心概念：纹理坐标（UV 坐标）。
UV 坐标系：
- 它是归一化的， $u$ 和 $v$ 的范围都是 $0.0$ 到 $1.0$ 。
- 左下角是 $(0, 0)$ ，右上角是 $(1, 1)$ 。
映射逻辑：你在顶点数据中多加两个 float（），告诉 GPU：“这个顶点对应图片上的哪个点”。GPU 会自动在顶点之间进行插值，算出中间每个像素该涂什么颜色。

图像加载与 stb_image#

痛点：OpenGL 本身不认识 .png 或 .jpg 这种压缩格式。
解决方案：引入一个极简的开源库 stb_image。
- 这是一个单头文件库，非常符合 Cherno 的极简风格。
- 它的作用是将磁盘上的图片文件解码成内存中的 RGBA 字节数组（即一串 unsigned char）。

OpenGL 纹理对象 (Texture Object)#

创建与绑定：
- 类似于 VertexBuffer，你需要 glGenTextures 生成一个 ID，然后 glBindTexture。
关键参数设置 (Parameters)：
- 过滤 (Filtering)：当图片被放大或缩小时，像素该怎么补全？（GL_LINEAR 线性平滑，或 GL_NEAREST 像素风）。
- 包装 (Wrapping)：当 UV 坐标超过 $1.0$ 时，图片是重复（Repeat）还是拉伸（Clamp）？
数据上传：使用 glTexImage2D 将 CPU 内存中的像素数组发送到 GPU 显存。

13-16抽象OpenGL成类

Wed, 25 Mar 2026 18:01:15 +0800

将零散的 OpenGL 原生 API 封装成 C++ 类。这不仅是为了让 main 函数变干净，更是为了构建一个可复用的渲染引擎底层。

13-16抽象OpenGL成类#

为什么要抽象？（工程思维）#

现状：main.cpp 已经膨胀到几百行，充斥着大量的 glGen、glBind。
目标：我们不希望在业务逻辑里看到底层的 unsigned int ID。我们要操作的是“对象”（Object）。
类划分预想：
- VertexBuffer：管理 GL_ARRAY_BUFFER。
- IndexBuffer：管理 GL_ELEMENT_ARRAY_BUFFER。
- VertexArray：管理属性布局（Layout）和 VAO。

封装 VertexBuffer 类#

这是最基础的一步。将 VBO 的创建、绑定和销毁封装起来。

构造函数：接收数据和大小，直接 glGen 并 glBufferData。
析构函数：调用 glDeleteBuffers，实现 RAII（资源获取即初始化）机制，防止内存泄漏。
关键方法：Bind() 和 Unbind()。

// 你的博客可以展示这个极简结构
class VertexBuffer {
private:
 unsigned int m_RendererID; // Cherno 喜欢用 m_ 前缀表示成员变量
public:
 VertexBuffer(const void* data, unsigned int size);
 ~VertexBuffer();
 void Bind() const;
 void Unbind() const;
};

封装 IndexBuffer 类#

与 VertexBuffer 几乎一模一样，但有两点不同：

目标类型：固定为 GL_ELEMENT_ARRAY_BUFFER。
计数器：增加一个 m_Count 变量，记录有多少个索引（Indices），因为 glDrawElements 绘图时需要这个数字。

代码#

Render 渲染器#

//Renderer.h
//编译器第一次遇到这个文件，正常读取内容。
//编译器会记下这个文件的物理路径。
//当后续代码再次尝试 #include 这个路径的文件时，编译器直接跳过，不再读取。
#pragma once

#include <GL/glew.h> 
#include "VertexArray.h"
#include "IndexBuffer.h"
#include "Shader.h"

//_debugbreak() 是msvc特有的
//__FILE__和__LINE__ 是所有编译器都支持的
//#x：字符串化操作符。它会将你传入的代码直接转成字符串
//__FILE__ 和 __LINE__：编译器内置宏，自动获取当前代码所在的文件名和行号
#define ASSERT(x) if(!(x)) __debugbreak();
#define GLCall(x) GLClearError();\
	x;\
	ASSERT(GLLogCall(#x,__FILE__,__LINE__));

void GLClearError();

bool GLLogCall(const char* function,
	const char* file, int line);

class Renderer
{
public:
	void Clear() const;
	void Draw(const VertexArray& va, const IndexBuffer& ib, const Shader& shader) const;
};

//Renderer.cpp
#include "Renderer.h"
#include <iostream>

void GLClearError()
{
	//直到不是GL_NO_ERROR，就退出while循环
	while (glGetError() != GL_NO_ERROR);
}

bool GLLogCall(const char* function,
	const char* file, int line)
{
	while (GLenum error = glGetError())
	{
		std::cout << "[OpenGL Error](" << error << "): "
			<< function << " " << file << ":" << line << std::endl;
		return false;
	}

	return true;
}

void Renderer::Clear() const
{
	GLCall(glClear(GL_COLOR_BUFFER_BIT));
}

void Renderer::Draw(const VertexArray& va, const IndexBuffer& ib, const Shader& shader) const
{

	//绘图前重新绑定
	shader.Bind();

	//必须先绑定program，因为vao不负责着色器程序的切换
	va.Bind();

	//这个可以不用，已经在va中录制了
	//ib.Bind();

	GLCall(glDrawElements(GL_TRIANGLES, ib.GetCount(), GL_UNSIGNED_INT, nullptr));

	//绘制后经常不需要再解绑，因为这会消耗性能，而且
	//我们经常会在下一帧继续使用它们并覆盖 
}

VertextBuffer 顶点缓冲区#

//VertextBuffer.h

#pragma once

//专门处理顶点缓冲区的生成、绑定、解绑及内存释放
class VertexBuffer
{
private:
	//一个相关的渲染器id
	unsigned int m_RendererID;
public:
	//size：大小
	VertexBuffer(const void* data, unsigned int size);
	~VertexBuffer();

	void Bind() const;
	void Unbind() const;

};

//VertexBuffer.cpp
#include "VertexBuffer.h"
#include "Render.h"


VertexBuffer::VertexBuffer(const void* data, unsigned int size)
{ 
	// 生成一个缓冲区 ID
	GLCall(glGenBuffers(1, &m_RendererID));
	// 绑定该 ID 到顶点缓冲区插槽
	GLCall(glBindBuffer(GL_ARRAY_BUFFER, m_RendererID));
	// 将顶点数据从 CPU 内存拷贝到 GPU 显存，设为静态读取模式
	GLCall(glBufferData(GL_ARRAY_BUFFER, size,
		data, GL_STATIC_DRAW));
}

VertexBuffer::~VertexBuffer()
{
	GLCall(glDeleteBuffers(1, &m_RendererID));
}

void VertexBuffer::Bind() const
{
	// 绑定该 ID 到顶点缓冲区插槽
	GLCall(glBindBuffer(GL_ARRAY_BUFFER, m_RendererID));
}

void VertexBuffer::Unbind() const
{
	// 绑定该 ID 到顶点缓冲区插槽
	GLCall(glBindBuffer(GL_ARRAY_BUFFER, 0));
}

IndexBuffer 索引缓冲区#

//IndexBuffer.h
#pragma once

//专门处理索引缓冲区的生成、绑定、解绑及内存释放
//索引缓冲区：可以用来只绘制某个面（如果顶点缓冲区
//包括了很多顶点的话）
class IndexBuffer
{
private:
	//一个相关的渲染器id
	unsigned int m_RendererID;
	unsigned int m_Count;
public:
	//count：个数
	IndexBuffer(const unsigned int* data, unsigned int count);
	~IndexBuffer();

	void Bind() const;
	void Unbind() const;

	inline unsigned int GetCount() const { return m_Count; }

};

//IndexBuffer.cpp
#include "IndexBuffer.h"
#include "Render.h"

IndexBuffer::IndexBuffer(const unsigned int* data, unsigned int count)
	:m_Count(count)
{ 
	ASSERT(sizeof(unsigned int) == sizeof(GLuint));
	// 生成一个缓冲区 ID
	GLCall(glGenBuffers(1, &m_RendererID));
	// 绑定该 ID 到元素数组缓冲区 (Element Array Buffer)插槽，
	//也称索引缓冲区对象
	GLCall(glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_RendererID));
	// 将顶点数据从 CPU 内存拷贝到 GPU 显存，设为静态读取模式
	GLCall(glBufferData(GL_ELEMENT_ARRAY_BUFFER, count * sizeof(unsigned int),
		data, GL_STATIC_DRAW));
}

IndexBuffer::~IndexBuffer()
{
	GLCall(glDeleteBuffers(1, &m_RendererID));
}

void IndexBuffer::Bind() const
{
	// 绑定该 ID 到元素数组缓冲区插槽
	GLCall(glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_RendererID));
}

void IndexBuffer::Unbind() const
{
	// 绑定该 ID 到元素数组缓冲区插槽
	GLCall(glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0));
}

VertexBufferLayout 顶点缓冲区布局设置#

//VertexBufferLayout.h
#pragma once
#include <vector>
#include <GL/glew.h>
#include "Renderer.h"

struct VertexBufferElement
{
	unsigned int type;
	int count;
	unsigned char normalized;

	static unsigned int GetSizeOfType(unsigned int type)
	{
		switch (type)
		{
		case GL_FLOAT: return 4;
		case GL_UNSIGNED_INT: return 4;
		case GL_UNSIGNED_BYTE: return 1;

		}
		ASSERT(false);
		return 0;
	}
};

class VertexBufferLayout
{
private:
	std::vector<VertexBufferElement> m_Elements;
	unsigned int m_Stride;//步长
public :
	VertexBufferLayout()
		:m_Stride(0) {}

	//解释一下，第n个push的就是第n组属性的布局
	template<typename T>
	void Push(int cout)
	{
		static_assert(false);
	}

	//位置 ($x, y, z$)
	template<>
	void Push<float>(int count)
	{
		m_Elements.push_back({ GL_FLOAT,count,GL_FALSE });
		m_Stride += count * VertexBufferElement::GetSizeOfType(GL_FLOAT);
	}

	//ID、索引
	template<>
	void Push<unsigned int >(int count)
	{
		m_Elements.push_back({ GL_UNSIGNED_INT,count,GL_FALSE });
		m_Stride += count * VertexBufferElement::GetSizeOfType(GL_UNSIGNED_INT);
	}

	//颜色 (R, G, B, A)
	//如果你设置 GL_TRUE (归一化)：OpenGL 会自动帮你做除法。比如你传 255，Shader 拿到的是 $255 / 255 = 1.0$；你传 128，Shader 拿到的是 $0.5$
	template<>
	void Push<unsigned char>(int count)
	{
		m_Elements.push_back({ GL_UNSIGNED_BYTE,count,GL_TRUE });
		m_Stride += count * VertexBufferElement::GetSizeOfType(GL_UNSIGNED_BYTE);
	}

	inline const std::vector<VertexBufferElement> GetElements() const { return m_Elements; }
	inline unsigned int GetStrde() const { return m_Stride; }
};

VertexArray 顶点数组（属性）绑定#

//VertexArray.h
#pragma once
#include "VertexBuffer.h" 
//#include "VertexBufferLayout.h"

//它告诉编译器：“哥们，后面会有一个类叫 VertexBufferLayout，我现在先提一嘴，你先别管它长啥样，只要知道它是个‘类’就行。”
class VertexBufferLayout;

class VertexArray
{
private:
	unsigned int m_RendererID;
public:
	VertexArray();
	~VertexArray();

	void AddBuffer(const VertexBuffer& vb, const VertexBufferLayout& layout);

	void Bind() const;
	void Unbind() const;
};

//VertexArray.cpp

#include "VertexArray.h"
//这里要真正调用 layout.GetElements()。这时候编译器必须看到具体的类定义，才能知道 GetElements() 函数长什么样。
#include "VertexBufferLayout.h"

VertexArray::VertexArray()
{ 
	glGenVertexArrays(1, &m_RendererID);

}

VertexArray::~VertexArray()
{
	glDeleteVertexArrays(1, &m_RendererID);

}

void VertexArray::AddBuffer(const VertexBuffer& vb, const VertexBufferLayout& layout)
{
	Bind();
	vb.Bind();
	const auto& elements = layout.GetElements();
	unsigned int offset = 0;
	for (unsigned int i=0;i<elements.size();i++)
	{
		const auto& element = elements[i];
		// 启用索引为 i 的(顶点)属性 
		glEnableVertexAttribArray(i);
		//1. 打标签：它把当前 GL_ARRAY_BUFFER 里的数据流，贴上了“i号”的标签。2. 定规则：它告诉 GPU，当你（Shader）想要 location = 0 的数据时，请按照“每 count 个 float 为一组”的规则去缓存里抓取。
		glVertexAttribPointer(i, element.count, element.type, element.normalized, layout.GetStrde(), (const void*)offset);

		offset += element.count * VertexBufferElement::GetSizeOfType(element.type);
	}

}

void VertexArray::Bind() const
{
	glBindVertexArray(m_RendererID);
}

void VertexArray::Unbind() const
{
	glBindVertexArray(0);

	//这里是否要禁用呢，但是视频里面没有存count，所以也不知道总共有几个
	/*for (unsigned int i = 0; i < elements.size(); i++)
	{
		glDisableVertexAttribArray(i);
	}*/

}

Shader着色器#

//Shader.h
#pragma once
#include <string>
#include <unordered_map>

struct ShaderProgramSource
{
	std::string VertexSource;
	std::string FragmentSource;
};

class Shader
{
private:
	std::string m_FilePath;
	unsigned int m_RendererID;
	std::unordered_map<std::string, unsigned int> m_UniformLocationCache;

	// caching for uniforms
public:
	Shader(const std::string& filepath);
	~Shader();

	void Bind() const;
	void Unbind() const;

	void SetUniform4f(const std::string& name, float v0, float v1,
		float v2, float v3);
private:
	bool CompileShader();
	unsigned int GetUniformLocation(const std::string& name);

	ShaderProgramSource ParseShader(const std::string& filepath);
	unsigned int CompileShader(unsigned int type,
		const std::string& source);
	//创建着色器程序对象：编译并链接顶点着色器和片段着色器
	unsigned int CreateShader(const std::string& vertexShader,
		const std::string& fragmentShader);
};

//Shader.cpp
#pragma once
#include "Shader.h"
#include <iostream>
#include <fstream>
#include <sstream> 
#include "Render.h"

Shader::Shader(const std::string& filepath)
	:m_FilePath(filepath),m_RendererID(0)
{
	ShaderProgramSource source = ParseShader(filepath);
	m_RendererID = CreateShader(source.VertexSource, source.FragmentSource);

}

Shader::~Shader()
{
	glDeleteProgram(m_RendererID);
}

void Shader::Bind() const
{
	glUseProgram(m_RendererID);
}

void Shader::Unbind() const
{
		glUseProgram(0);
}

 ShaderProgramSource Shader::ParseShader(const std::string& filepath)
{

	enum class ShaderType
	{
		NONE = -1, VERTEX = 0, FRAGMENT = 1
	};

	//input file stream
	std::ifstream stream(filepath);

	std::string line;
	std::stringstream ss[2];
	ShaderType type = ShaderType::NONE;

	while (getline(stream, line))
	{
		if (line.find("#shader") != std::string::npos)
		{
			if (line.find("vertex") != std::string::npos)
			{
				type = ShaderType::VERTEX;
			}
			else if (line.find("fragment") != std::string::npos)
			{
				type = ShaderType::FRAGMENT;
			}
		}
		else
		{
			ss[(int)type] << line << '\n';
		}
	}

	return { ss[0].str(),ss[1].str() };

}

//GLenum也就是unsigned int,这里不用GLenum是为了解耦
unsigned int Shader::CompileShader(unsigned int type,
	const std::string& source)
{
	//创建着色器对象，向 OpenGL 申请一个空的“容器”来存放你的代码
	//把光标放在 glCreateShader( 的左括号后面，然后按下 Ctrl + Shift + Space。会弹出一个小黑框，显示：GLuint glCreateShader(GLenum type)
	//到glew.h搜索，发现typedef unsigned int GLenum;
	unsigned int id = glCreateShader(type);
	//返回一个指向该字符串首地址的只读指针（const char*）
	const char* src = source.c_str();

	//有了容器后，你需要把写好的字符串代码塞进去（拷贝）
	//3种用法
	//1. glShaderSource(id, 1, &src, nullptr);	只有一个字符串，且它是以 \0 结尾的。
	//2. glShaderSource(id, 1, &src, &len);	只有一个字符串，长度由 len 指定。
	//3. glShaderSource(id, 2, strings, lengths);	有两个字符串片段（数组形式），长度分别由 lengths[0] 和 lengths[1] 指定。
	glShaderSource(id, 1, &src, nullptr);

	//将你的 GLSL 代码翻译成显卡能理解的机器指令
	glCompileShader(id);

	//错误处理
	int result;

	// 查询编译状态：询问 OpenGL 这个 shader 编译成功了吗？
	// GL_COMPILE_STATUS 会把结果存入 result 中（成功为 GL_TRUE，失败为 GL_FALSE）
	glGetShaderiv(id, GL_COMPILE_STATUS, &result);

	if (result == GL_FALSE)
	{
		int length;
		//获取错误日志长度：如果编译失败，先问一下错误信息一共有多少个字符
		glGetShaderiv(id, GL_INFO_LOG_LENGTH, &length);
		//在栈上申请内存
		//如果申请的内存太大，alloca会导致栈溢出（1MB）
		char* message = (char*)alloca(length * sizeof(char));
		//提取错误信息：把显卡驱动里的具体报错文字拷贝到我们刚才申请的 message 内存中
		glGetShaderInfoLog(id, length, &length, message);
		std::cout << "Failed to compile " << ((type == GL_VERTEX_SHADER) ? "vertex" : "fragment") << " shader!";
		std::cout << message << std::endl;
		//清理：编译失败了，这个 shader 对象也就没用了，删掉它防止内存泄漏
		glDeleteShader(id);
		return 0;
	}


	return id;
}


 unsigned int Shader::CreateShader(const std::string& vertexShader,
	const std::string& fragmentShader)
{
	//在 GPU 中申请一个空的“程序对象”
	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);
	//验证当前的程序是否能在当前的 OpenGL 状态下执行（
	// 检查顶点着色器的输出是否与片段着色器的输入匹配，并
	// 生成最终的可执行二进制代码。）
	glValidateProgram(program);

	//删除临时的中间产物（类似编译完 C++ 后删除 .obj
	glDeleteShader(vs);
	glDeleteShader(fs);


	return program;
}


void Shader::SetUniform4f(const std::string& name, float v0, float v1, float v2, float v3)
{
	glUniform4f(GetUniformLocation(name), v0, v1, v2, v3);
}

unsigned int Shader::GetUniformLocation(const std::string& name)
{
	if (m_UniformLocationCache.find(name) != m_UniformLocationCache.end())
	{
		return m_UniformLocationCache[name];
	}
	unsigned int location=glGetUniformLocation(m_RendererID, name.c_str());
	if (location == -1)
		std::cout << "Warning: uniform '" << name << "' doesn't exist!" << std::endl;

	m_UniformLocationCache[name] = location;
	return location;
}

Main 主文件#

//Main.cpp
#ifdef LY_EP16
#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include <fstream>
#include <sstream>
#include <string>

#include "Renderer.h"

#include "VertexBuffer.h"
#include "VertexBufferLayout.h"
#include "IndexBuffer.h"
#include "VertexArray.h"
#include "Shader.h"


int main(void)
{
	{

#pragma region 一些初始化
		GLFWwindow* window;
		// 初始化 GLFW 库，失败则退出
		if (!glfwInit())
			return -1;

		//强制指定使用 Core Profile（核心模式），如果
		//没有手动写着色器则不会渲染；如果不是核心模式，
		//在固定管线中默认颜色是白色，且默认顶点在NDC标准
		//设备坐标系中
		glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
		//这是兼容配置模式,会让VAO0成为默认对象
		//glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
		glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
		glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);

		// 创建窗口对象
		window = glfwCreateWindow(640, 480, "Hello World", NULL, NULL);
		if (!window)
		{
			// 创建失败则清理并退出
			glfwTerminate();
			return -1;
		}

		// 将当前窗口的上下文设置为 OpenGL 渲染的目标
		glfwMakeContextCurrent(window);

		glfwSwapInterval(2);

		// 初始化 GLEW 以加载 OpenGL 函数指针，需在有上下文后执行
		if (glewInit() != GLEW_OK)
		{
			std::cout << "Error!" << std::endl;
		}

#pragma endregion

		// 定义三角形的顶点坐标（CPU 内存）
		float positions[] = {
			-0.5f, -0.5f,//0
			0.5f, -0.5f,//1
			0.5f, 0.5f,//2

			//0.5f, 0.5f,
			-0.5f, 0.5f,//3
			//-0.5f, -0.5f,
		};

		//
		unsigned int indices[] = {
			0,1,2,
			2,3,0
		};

		VertexArray va;

		//申请创建一个GPU上的缓冲区，绑定并复制进去数据构造函
		//数中已经绑定了，这样glVertexAttribPointer才有效果
		VertexBuffer vb(positions, 4 * 2 * sizeof(float));

		VertexBufferLayout layout;
		layout.Push<float>(2);
		va.AddBuffer(vb, layout);

		//申请创建一个GPU上的缓冲区，绑定并复制进去数据
		IndexBuffer ib(indices, 6);

		Shader shader("res/shaders/Basic.shader");
		shader.Bind();

		shader.SetUniform4f("u_Color", 0.8f, 0.3f, 0.8f, 1.0f);


		//===这里故意把他解绑了（假设他去绑定别的去了）===
		vb.Unbind();

		shader.Unbind();
		va.Unbind();

		//element_array_buffer 和vertexAttribArray不能
		//在解绑vao之前处理，否则就记录进去了
		ib.Unbind();

		//========================================

		float r = 0.0f;
		float increment = 0.05f;

		Renderer renderer;

		// 游戏/渲染主循环
		while (!glfwWindowShouldClose(window))
		{
			// 清理屏幕颜色缓冲区
			renderer.Clear();


			//必须先绑定program，因为vao不负责着色器程序的切换
			//va.Bind();

			if (r > 1.0f)
				increment = -0.05f;
			else if (r < 0.0f)
				increment = 0.05f;

			r += increment;

			//绘图前重新绑定
			shader.Bind();
			//在u_Color的位置上设置数值
			shader.SetUniform4f("u_Color", r, 0.3f, 0.0f, 1.0f);
			//========设置uniform========

			renderer.Draw(va, ib, shader);
			 

			// 交换前后缓冲区以刷新画面
			glfwSwapBuffers(window);

			// 轮询并处理窗口事件（如键盘输入、关闭动作）
			glfwPollEvents();
		}

		//最后解绑vao
		//glBindVertexArray(0);
	}

	// 退出前清理资源
	//glfwTerminate会破坏Context，导致析构函数中的glGetError()
	//返回一个OpenGL错误
	glfwTerminate();
	return 0;
}

#endif

12顶点数组

Wed, 25 Mar 2026 13:30:24 +0800

第 12 集是整个系列中非常关键的架构转折点。Cherno 在这一集深入讲解了 Vertex Array Object (VAO)。

如果你之前觉得代码里那堆 glVertexAttribPointer 既乱又难记，那么这一集就是为你准备的“整理收纳柜”。

总述#

为什么要用 VAO？（痛点分析）#

现状：在核心模式（Core Profile）下，OpenGL 要求必须绑定一个 VAO 才能绘图。
问题：如果你有多个模型（比如一个三角形、一个正方形），每个模型都有自己的 VBO、IBO 和复杂的 VertexBufferLayout（顶点布局）。
后果：每次切换模型画图，你都要重新写一遍 glBindBuffer、glEnableVertexAttribArray 和 glVertexAttribPointer。这太啰嗦了！

VAO 的本质：状态的“存档”#

定义：VAO 就像是一个配置记录仪。它不会存储实际的顶点坐标数据，但它会记住：
1. 哪个 VBO 与它绑定了。
2. 属性布局（多少个 float、偏移量是多少、是否归一化）。
优势：一旦你设置好了 VAO，下次画这个模型时，只需要一行 glBindVertexArray(vaoID)，所有的 VBO 绑定和属性设置就会瞬间还原。

兼容性大坑：Core vs Compatibility#

Compatibility Profile（兼容模式）：OpenGL 会默认帮你创建一个“隐藏的 VAO (ID为0)”。所以你之前不写 VAO 也能画出图。
Core Profile（核心模式）：必须显式地 glGenVertexArrays。如果不绑定 VAO 就直接调用 glVertexAttribPointer，程序会直接崩溃或报错。
Cherno 的建议：永远手动创建 VAO，这样你的代码在任何显卡驱动和模式下都是健壮的。

编码实践：如何创建 VAO#

标准流程：
1. unsigned int vao; glGenVertexArrays(1, &vao);
2. glBindVertexArray(vao);
3. glBindBuffer(GL_ARRAY_BUFFER, vbo);
4. glVertexAttribPointer(...);
5. glEnableVertexAttribArray(0);
注意：顺序很重要！必须先绑定 VAO，再去绑定 VBO 和设置属性，这样 VAO 才能“录制”下这些操作。

11uniform

Wed, 25 Mar 2026 07:52:27 +0800

在之前的章节里，颜色是硬编码在着色器里的，而这一集教你如何从 CPU（C++ 代码）动态地控制 GPU 里的变量。

总结#

什么是 Uniform？#

定义：Uniform 是从 CPU 向 Shader 传递数据的桥梁。
特性：
- “统一”性：在一个 Draw Call（绘制指令）中，所有的顶点和像素看到的 Uniform 值都是完全一样的。
- 对比：与 attributes（顶点属性）不同，属性是每个顶点都可能不同的（如坐标），而 Uniform 是全局一致的。
用途：最常用于传递颜色、变换矩阵（旋转/平移/缩放）、纹理采样器等。

uniform变量依赖 PCIe 总线 进行 CPU 到 GPU 的数据拷贝。在 GPU 内部，Uniform 并不像顶点属性（Attribute）那样存在于一个巨大的流缓冲区中。它存储在 GPU 专门划拨的一块==常量寄存器（Constant Registers）或统一常量缓冲区（Uniform Storage）==中。在 Shader 运行期间，Uniform 是只读的 ~~Uniform 的“只读”是指单个 Draw Call 执行期间它是静态的。在不同的 Draw Call 之间，你可以随意修改它。~~

在 Shader 中声明 Uniform#

语法：在 GLSL 中使用 uniform 关键字。
命名规范：Cherno 推荐使用 u_ 前缀（如 u_Color），以便在代码中快速区分。
代码示例：

 #shader fragment
 #version 330 core
 layout(location = 0) out vec4 color;
 uniform vec4 u_Color; // 声明 Uniform
 void main() {
 color = u_Color; // 使用该变量
 };

获取 Uniform 的位置 (Location)#

核心函数：glGetUniformLocation(program, "u_Color")。

10错误处理

Tue, 24 Mar 2026 23:05:53 +0800

如何自动化地捕获 OpenGL 的报错。由于 OpenGL 是一个状态机且基于 C 语言 API，它不会像现代 C++ 那样抛出异常，所以需要特殊的调试技巧。

传统方案：`glGetError`#

现状：OpenGL 的函数执行失败时，屏幕通常只是黑屏，没有任何提示。
原始手段：调用 glGetError()。它会返回一个错误代码（如 1280 代表 GL_INVALID_ENUM）。
痛点：这个函数只能一次返回一个错误。如果产生了多个错误，你得在一个 while 循环里不断调用它才能清空错误队列。

进阶方案：封装 `GLClearError` 与 `GLLogCall`#

思路：为了不让主代码被 glGetError 淹没，Cherno 进行了宏封装。
GLCheckError()：在执行 OpenGL 指令前调用，用来清空之前的旧错误。
GLLogCall()：在指令执行后调用，检查是否有新错误产生，并打印出文件名、行号和具体函数名。

神奇的宏：`ASSERT` 与 `#` 运算符#

自动化：定义一个 GLCall(x) 宏。

#define GLCall(x) GLClearError();\
 x;\
 ASSERT(GLLogCall(#x, __FILE__, __LINE__))

技巧：
- #x：将代码内容转为字符串。
- __FILE__ 和 __LINE__：C++ 内置宏，自动获取报错位置。
- ASSERT：如果报错，直接让程序停在出问题的那一行，而不是跑飞。

现代方案：`glDebugMessageCallback`#

~~视频没讲到这个~~

新特性：在 OpenGL 4.3+ 版本中引入。
优势：这是“被动式”报错。你只需在初始化时设置一个回调函数，一旦 OpenGL 出错，驱动程序会自动跳进你的函数。
局限性：虽然更现代，但某些旧显卡驱动支持不佳。Cherno 推荐在学习阶段使用 GLCall 宏，因为它兼容性最强且更直观。

实战演示：故意写错代码#

验证：Cherno 故意在 glDrawElements 里传了一个错误的枚举值。
结果：控制台瞬间精准报出了：
1. 哪个函数错了（glDrawElements）。
2. 在哪个文件哪一行。
3. 错误代码是什么。

💡 博客总结（金句/重点）#

知识点	关键点
为什么 OpenGL 不报错？	它是 C 风格 API，不提供异常机制，需手动查询状态。
`glGetError` 特点	错误码是累积的，必须循环读取直到返回 `GL_NO_ERROR`。
`GLCall` 宏的作用	它可以包裹任何 `gl` 函数，实现一站式“清空-执行-检查”。
调试效率	配合 `__debugbreak()`（Windows 特有）可以让调试器直接定位到崩掉的那行源码。

在发布版本（Release）中通常要关掉这些报错检查。因为频繁地通过总线询问 GPU 状态会严重拖慢帧率（FPS）。

09顶点缓冲区

Tue, 24 Mar 2026 19:10:23 +0800

总述#

核心痛点：重复的顶点数据#

现状分析：绘制一个矩形需要两个三角形（6 个顶点）。
资源浪费：矩形只有 4 个角，使用 glDrawArrays 必须重复定义其中 2 个顶点（坐标、纹理、颜色等完全一致）。
影响：随着模型复杂化，这种冗余会成倍消耗显存（VRAM）和带宽。

解决方案：Index Buffer 原理#

定义：索引缓冲区（IBO/EBO）存储的是指向顶点数组的整数索引。
逻辑：
1. Vertex Buffer：只存储 4 个唯一的顶点坐标。
2. Index Buffer：存储顺序（如 0, 1, 2, 2, 3, 0），告诉 GPU 如何连接这些点。
优势：一个浮点数顶点属性通常 12-32 字节，而一个索引（unsigned int 或 short）仅需 4 或 2 字节。

编码实践：创建与绑定 IBO#

创建对象：glGenBuffers(1, &ibo);
绑定目标：必须指定为 GL_ELEMENT_ARRAY_BUFFER。

填充数据：

unsigned int indices[] = { 0, 1, 2, 2, 3, 0 };


//索引缓冲区：index buffer object
unsigned int ibo;
// 生成一个缓冲区 ID
glGenBuffers(1, &ibo);
// 绑定该 ID 到元素数组缓冲区 (Element Array Buffer)插槽，
//也称索引缓冲区对象
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ibo);
// 将顶点数据从 CPU 内存拷贝到 GPU 显存，设为静态读取模式
glBufferData(GL_ELEMENT_ARRAY_BUFFER, 6 * sizeof(unsigned int),
	indices, GL_STATIC_DRAW);

注意：索引必须是正整数，且建议使用 unsigned int 以保证最大兼容性。

08处理着色器

Tue, 24 Mar 2026 16:37:11 +0800

主要是添加了struct ShaderProgramSource 和static ShaderProgramSource ParseShader(const std::string& filepath)

#ifdef LY_EP08
#include <iostream>
#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <fstream>
#include <sstream>
#include <string>

struct ShaderProgramSource
{
	std::string VertexSource;
	std::string FragmentSource;
};

static ShaderProgramSource ParseShader(const std::string& filepath)
{

	enum class ShaderType
	{
		NONE = -1,VERTEX = 0,FRAGMENT =1
	};

	//input file stream
	std::ifstream stream(filepath);

	std::string line;
	std::stringstream ss[2];
	ShaderType type = ShaderType::NONE;
	
	while (getline(stream, line))
	{
		if (line.find("#shader") != std::string::npos)
		{
			if (line.find("vertex") != std::string::npos)
			{
				type = ShaderType::VERTEX;
			}
			else if (line.find("fragment") != std::string::npos)
			{
				type = ShaderType::FRAGMENT;
			}
		}
		else
		{
			ss[(int)type] << line << '\n';
		}
	}

	return { ss[0].str(),ss[1].str() };

}

//GLenum也就是unsigned int,这里不用GLenum是为了解耦
static unsigned int CompileShader(unsigned int type,
	const std::string& source)
{
	//创建着色器对象，向 OpenGL 申请一个空的“容器”来存放你的代码
	//把光标放在 glCreateShader( 的左括号后面，然后按下 Ctrl + Shift + Space。会弹出一个小黑框，显示：GLuint glCreateShader(GLenum type)
	//到glew.h搜索，发现typedef unsigned int GLenum;
	unsigned int id = glCreateShader(type);
	//返回一个指向该字符串首地址的只读指针（const char*）
	const char* src = source.c_str();

	//有了容器后，你需要把写好的字符串代码塞进去（拷贝）
	//3种用法
	//1. glShaderSource(id, 1, &src, nullptr);	只有一个字符串，且它是以 \0 结尾的。
	//2. glShaderSource(id, 1, &src, &len);	只有一个字符串，长度由 len 指定。
	//3. glShaderSource(id, 2, strings, lengths);	有两个字符串片段（数组形式），长度分别由 lengths[0] 和 lengths[1] 指定。
	glShaderSource(id, 1, &src, nullptr);

	//将你的 GLSL 代码翻译成显卡能理解的机器指令
	glCompileShader(id);

	//错误处理
	int result;

	// 查询编译状态：询问 OpenGL 这个 shader 编译成功了吗？
	// GL_COMPILE_STATUS 会把结果存入 result 中（成功为 GL_TRUE，失败为 GL_FALSE）
	glGetShaderiv(id, GL_COMPILE_STATUS, &result);

	if (result == GL_FALSE)
	{
		int length;
		//获取错误日志长度：如果编译失败，先问一下错误信息一共有多少个字符
		glGetShaderiv(id, GL_INFO_LOG_LENGTH, &length);
		//在栈上申请内存
		//如果申请的内存太大，alloca会导致栈溢出（1MB）
		char* message = (char*)alloca(length * sizeof(char));
		//提取错误信息：把显卡驱动里的具体报错文字拷贝到我们刚才申请的 message 内存中
		glGetShaderInfoLog(id, length, &length, message);
		std::cout << "Failed to compile " << ((type == GL_VERTEX_SHADER) ? "vertex" : "fragment") << " shader!";
		std::cout << message << std::endl;
		//清理：编译失败了，这个 shader 对象也就没用了，删掉它防止内存泄漏
		glDeleteShader(id);
		return 0;
	}


	return id;
}

static unsigned int CreateShader(const std::string& vertexShader,
	const std::string& fragmentShader)
{
	//在 GPU 中申请一个空的“程序对象”
	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);
	//验证当前的程序是否能在当前的 OpenGL 状态下执行（
	// 检查顶点着色器的输出是否与片段着色器的输入匹配，并
	// 生成最终的可执行二进制代码。）
	glValidateProgram(program);

	//删除临时的中间产物（类似编译完 C++ 后删除 .obj
	glDeleteShader(vs);
	glDeleteShader(fs);


	return program;
}

int main(void)
{
#pragma region 一些初始化
	GLFWwindow* window;
	// 初始化 GLFW 库，失败则退出
	if (!glfwInit())
		return -1;

	//强制指定使用 Core Profile（核心模式），如果
	//没有手动写着色器则不会渲染；如果不是核心模式，
	//在固定管线中默认颜色是白色，且默认顶点在NDC标准
	//设备坐标系中
	//glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	//glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	//glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);

	// 创建窗口对象
	window = glfwCreateWindow(640, 480, "Hello World", NULL, NULL);
	if (!window)
	{
		// 创建失败则清理并退出
		glfwTerminate();
		return -1;
	}

	// 将当前窗口的上下文设置为 OpenGL 渲染的目标
	glfwMakeContextCurrent(window);

	// 初始化 GLEW 以加载 OpenGL 函数指针，需在有上下文后执行
	if (glewInit() != GLEW_OK)
	{
		std::cout << "Error!" << std::endl;
	}

#pragma endregion

	// 定义三角形的顶点坐标（CPU 内存）
	float positions[6] = {
		-0.5f, -0.5,
		0.0f, 0.5f,
		0.5f, -0.5f,
	};

	unsigned int buffer;
	// 生成一个缓冲区 ID
	glGenBuffers(1, &buffer);
	// 绑定该 ID 到顶点缓冲区插槽
	glBindBuffer(GL_ARRAY_BUFFER, buffer);
	// 将顶点数据从 CPU 内存拷贝到 GPU 显存，设为静态读取模式
	glBufferData(GL_ARRAY_BUFFER, 6 * sizeof(float),
		positions, GL_STATIC_DRAW);


	// 启用索引为 0 的(顶点)属性 
	glEnableVertexAttribArray(0);


	//1. 打标签：它把当前 GL_ARRAY_BUFFER 里的数据流，贴上了“0号”的标签。2. 定规则：它告诉 GPU，当你（Shader）想要 location = 0 的数据时，请按照“每 2 个 float 为一组”的规则去缓存里抓取。
	glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, sizeof(float) * 2, (const void*)0);
	 
	//这是一个相对路径，相对于 工作目录
	//如果不是在visual studio中运行，就会相对于 可执行文件 所在的目录
	//如果在visual studio中，工作目录被设置为$(ProjectDir) (右键目录-属性-调试-woking directory)
	ShaderProgramSource source = ParseShader("res/shaders/Basic.shader");

	std::cout << source.VertexSource << std::endl;
	std::cout << source.FragmentSource << std::endl;

	// 将字符串源码编译并链接成一个完整的程序对象
	unsigned int program = CreateShader(source.VertexSource, source.FragmentSource);
	// 告诉 OpenGL 状态机：接下来的所有绘制指令（如 glDrawArrays）
	// 都请使用这个编译好的着色器程序进行渲染
	glUseProgram(program);


	// 游戏/渲染主循环
	while (!glfwWindowShouldClose(window))
	{
		// 清理屏幕颜色缓冲区
		glClear(GL_COLOR_BUFFER_BIT);

		// 读取当前绑定的缓冲区数据并绘制三角形：从
		// 索引0即第1个顶点开始画，读取三个顶点(
		//并行地读第1个顶点的0号属性_以及_第1个顶点的1号属性) 
		glDrawArrays(GL_TRIANGLES, 0, 3);

		// 交换前后缓冲区以刷新画面
		glfwSwapBuffers(window);

		// 轮询并处理窗口事件（如键盘输入、关闭动作）
		glfwPollEvents();
	}

	// 手动通知显卡驱动释放该程序占用的显存
	glDeleteProgram(program);

	// 退出前清理资源
	glfwTerminate();
	return 0;
}

#endif

着色器

07编写一个着色器

Tue, 24 Mar 2026 12:31:46 +0800

概述#

编写最基础的顶点着色器 (Vertex Shader) 和片段着色器 (Fragment Shader)，并将它们链接成一个可以在显卡上运行的着色器程序。

课程引入回顾上一集关于着色器的理论概念，明确本集目标：编写实际代码让上一集绘制的三角形呈现特定的颜色（不再是默认的白色或黑色）。
创建基础字符串结构演示如何在 C++ 中以字符串形式编写 GLSL 代码。由于目前还没有文件读取系统，Cherno 直接在 main 函数中使用原始字符串（Raw Strings）来定义顶点和片段着色器的源码。
编写顶点着色器 (Vertex Shader)
- 指定版本：#version 330 core。
- 定义输入属性：layout(location = 0) in vec4 position;
- 主函数 main：将输入的坐标赋值给内置变量 gl_Position。
编写片段着色器 (Fragment Shader)
- 定义输出颜色：layout(location = 0) out vec4 color;
- 主函数 main：为像素指定颜色值（例如红色 vec4(1.0, 0.0, 0.0, 1.0)）。
创建编译与链接函数 CreateShader 开始实现逻辑：如何将上述两个字符串交给 OpenGL。
- 调用 glCreateProgram 创建一个程序容器。
- 调用自定义的 CompileShader 函数分别编译顶点和片段部分。
实现 CompileShader 函数这是核心步骤：
1. glCreateShader：根据类型创建着色器对象。
2. glShaderSource：将 C++ 字符串传递给 OpenGL。
3. glCompileShader：调用显卡驱动进行编译。
错误处理与调试 (Shader Debugging) 这是新手最容易卡住的地方。Cherno 详细演示了如何使用 glGetShaderiv 检查编译状态，并用 glGetShaderInfoLog 打印出显卡报错信息。
链接着色器程序 (Linking) 使用 glAttachShader 将编译好的两个着色器附加到程序上，然后调用 glLinkProgram 进行链接，最后用 glValidateProgram 验证。
清理工作链接成功后，调用 glDeleteShader 删除临时的中间产物（类似编译完 C++ 后删除 .obj 文件），以节省资源。
实际运行测试将编写好的 CreateShader 函数集成到渲染循环之前。
结果展示与总结屏幕上成功出现了一个红色的三角形。Cherno 总结了着色器在现代渲染管线中的重要角色。

学习要点提示：

06着色器原理

Mon, 23 Mar 2026 16:29:24 +0800

什么是着色器 (Shaders)#

着色器本质上是运行在 GPU（显卡）上的程序。在 OpenGL 绘图流程中，我们需要在 GPU 上运行代码来处理我们发送过去的顶点数据。

当你调用 glCompileShader(id) 时，显卡驱动（运行在 CPU 上）会获取这个字符串。显卡驱动里内置了一个编译器。它会将你的 GLSL 源代码翻译成该显卡硬件能听懂的机器码（微指令）。由于不同品牌的显卡（NVIDIA, AMD, Intel）底层指令集完全不同，所以 Shader 必须在你的电脑上“现场编译”，而不能像 C++ 那样预先编译成 .exe。编译好的二进制指令会被发送并存储在 GPU 的显存中。当你执行 glDrawArrays 时，GPU 会激活这些指令，大规模并行地处理你传进去的顶点数据。
我们需要显卡的能力在屏幕上绘制图形，所以需要程序完全在显卡上运行，当然部分代码需要在CPU上运行
着色器的本质，就是告诉GPU如何处理CPU发送给他的数据

渲染管线概述 (The Graphics Pipeline)#

解释了数据从 CPU 发送到 GPU 后的处理过程。渲染管线是一系列将 3D 坐标转换为屏幕上 2D 像素的步骤。

渲染管道：在CPU上写了一堆数据，之后向显卡发送了一些数据，然后发送了DrawCall指令（发送指令前绑定了一些状态），最后进入了着色器的阶段，GPU实际处理DrawCall指令并在屏幕上绘制一些东西

着色器#

顶点着色器和片段着色器是顺着管道的两种不同的着色器类型，发出DrawCall指令后，顶点着色器被执行，然后再经过一些阶段后是片段着色器

顶点着色器 ~~把 3D 空间的坐标转换成屏幕上的 2D 坐标（术语叫标准化设备坐标）~~ ->几何着色器 增减图形：可以把一个点变成一个三角形，或者把一个三角形删掉。这里，几何着色器根据这 3 个点，计算出了第 4 个点的位置，并把它们重新组合。输出：它“发射”出了足够的顶点，组成了两个独立的三角形图元。 ->图元组装 ~~把处理好的点“连线”~~ ->光栅化 ~~计算这个三角形到底盖住了屏幕上哪些像素格子~~ ->片段着色器 ~~根据光照、纹理、材质，给这个像素算出一个最终的 RGBA 值~~ ->测试与混合 ~~深度测试 (Depth Test)：检查这个像素是不是被别的物体挡住了。模板测试：一些特殊遮罩效果。混合 (Blending)：如果是半透明的，就把它和背景颜色融合~~

05顶点属性和内存布局

Sun, 22 Mar 2026 18:53:01 +0800

在第 04 集里你把数据塞进了显存，但 GPU 面对那一串二进制数字是“瞎”的。这一集的核心就是给数据贴标签，告诉 GPU 如何读取这些坐标。

问题的引入：为什么屏幕还是黑的？
- 数据（Positions）已经在 VRAM 里了，但 GPU 不知道这堆 float 代表什么。
- 是一组坐标？还是颜色？或者是贴图坐标？
- 我们需要一份“说明书”来定义数据的布局 (Layout)。
核心函数：glVertexAttribPointer 详解
- 这是 OpenGL 中参数最复杂的函数，Cherno 逐一拆解了这 6 个参数：
  1. index: 属性的索引（例如：0号属性给位置，1号属性给颜色，2号属性给纹理）。
  2. size: 每个属性包含几个分量（位置是3，纹理是2）。
  3. type: 数据类型（GL_FLOAT）。
  4. normalized: 是否归一化（通常选 GL_FALSE）。
  5. stride (步长): 最关键参数。从某个属性的起始点到下一个属性起始点的字节数。（这里第一组到第二组，位置index从0->5，纹理index从3->8，这里是5 * sizeof(float)）
  6. pointer (偏移量): 在单个顶点数据块内，该属性距离(这个块的)起始位置的字节偏移。

//这里举一个特殊的例子，LearnOpenGL中的
float vertices[] = {
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f,
 0.5f, -0.5f, -0.5f, 1.0f, 0.0f,
 0.5f, 0.5f, -0.5f, 1.0f, 1.0f,
 };
 
//配置位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0); 

//配置纹理属性
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
//第二个2，和上面第一个参数，也就是 vs文件中的location一致，
//表示要启用 2 号属性（对应纹理）
glEnableVertexAttribArray(2);

内存布局的可视化演示
- Cherno 使用画图工具展示了数据在内存中是如何排列的。
- 如果每个顶点只有 2 个 float 坐标，那么 Stride 就是 2 * sizeof(float)。
- 如果以后加上纹理坐标（又多 2 个 float），Stride 就会变成 4 * sizeof(float)。
启用顶点属性 (glEnableVertexAttribArray)
- 仅仅定义了“说明书”还不够，必须通过这个函数手动开启对应的属性索引（本例中是 0）。
- 默认情况下，为了性能，所有属性槽位都是关闭的。
链接缓冲区与属性
- 强调了一个隐式逻辑：glVertexAttribPointer 关联的是当前绑定在 GL_ARRAY_BUFFER 上的那个 ID。
- 这再次体现了 OpenGL “状态机”的特性。
总结与运行结果
- 加上这两行关键代码后，配合默认或简单的着色器，屏幕上终于能画出三角形的轮廓了。
- 预告：下一集将进入 Shader (着色器) 的世界，那是真正赋予图形灵魂的地方。
核心操作流程（接续你的代码）

在你的 glBufferData 之后，必须补充这两行，否则 glDrawArrays 找不到数据：

04顶点缓冲区和绘制三角形

Sun, 22 Mar 2026 16:24:13 +0800

总述#

这一集（时长 20:06）标志着你正式从“配置环境”跨越到了“图形编程”。这里讲解了现代 OpenGL 的灵魂：如何把 CPU 内存里的数据塞进 GPU 显存里。

什么是顶点缓冲区 (Vertex Buffer / VBO)？
- 核心定义：它本质上是 GPU 显存中的一块内存区域，用于存储顶点的各种数据（坐标、颜色等）。
- 为什么要用它？：CPU 到 GPU 的总线传输相对较慢。我们希望一次性把大量数据推送到显存，然后让 GPU 在内部高速读取，而不是每帧都由 CPU “手把手”教 GPU 怎么画。
定义顶点数据
- 在 C++ 中创建一个浮点数数组 float positions[6]，存入三个顶点的坐标。
- 注意：此时这些数据还在 RAM（内存）中，GPU 还看不见它们。
生成缓冲区 ID (glGenBuffers)
- OpenGL 是基于状态机的。我们不直接操作对象指针，而是操作 ID (unsigned int)。
- 调用 glGenBuffers(1, &buffer)：向 OpenGL 申请一个 ID，代表我们要创建的一个缓冲区。
绑定缓冲区 (glBindBuffer)
- 这是初学者最容易晕的地方。OpenGL 像是一个只有一个插槽的播放器。
- 调用 glBindBuffer(GL_ARRAY_BUFFER, buffer)：告诉 OpenGL，“从现在起，所有关于 GL_ARRAY_BUFFER 的操作，都请针对我刚刚申请的这个 buffer 进行”。
填充数据 (glBufferData)
- 这是真正发生“搬运”动作的代码。
- 参数解释：
  1. 目标：GL_ARRAY_BUFFER。
  2. 大小：6 * sizeof(float)。
  3. 数据指针：positions。
  4. 使用方式：GL_STATIC_DRAW（告诉显卡：这些数据我画一次后基本不动了，请优化存储）。
为什么屏幕上还是没东西？

01-03基础配置

Sat, 21 Mar 2026 19:43:45 +0800

01-03基础配置#

[16:04] 01-欢迎来到 OpenGL-Welcome to OpenGL
[22:03] 02-在 C++ 中设置 OpenGL 并创建窗口-Setting up OpenGL and Creating a Window in C++
[18:21] 03-在 C++ 中使用现代 OpenGL-Using Modern OpenGL in C++
[20:06] 04-顶点缓冲区与在 OpenGL 中绘制三角形-Vertex Buffers and Drawing a Triangle in OpenGL
[18:54] 05-OpenGL 中的顶点属性与布局-Vertex Attributes and Layouts in OpenGL
[17:37] 06-OpenGL 中的着色器工作原理-How Shaders Work in OpenGL
[28:21] 07-在 OpenGL 中编写着色器-Writing a Shader in OpenGL
[21:15] 08-我是如何处理 OpenGL 中的着色器的-How I Deal with Shaders in OpenGL
[16:54] 09-OpenGL 中的索引缓冲区-Index Buffers in OpenGL
[23:42] 10-处理 OpenGL 中的错误-Dealing with Errors in OpenGL
[11:27] 11-OpenGL 中的 Uniform 变量-Uniforms in OpenGL
[21:50] 12-OpenGL 中的顶点数组-Vertex Arrays in OpenGL
[26:46] 13-将 OpenGL 抽象为类-Abstracting OpenGL into Classes
[30:07] 14-OpenGL 中的缓冲区布局抽象-Buffer Layout Abstraction in OpenGL
[21:56] 15-OpenGL 中的着色器抽象-Shader Abstraction in OpenGL
[14:43] 16-在 OpenGL 中编写基础渲染器-Writing a Basic Renderer in OpenGL
[31:44] 17-OpenGL 中的纹理-Textures in OpenGL
[12:37] 18-OpenGL 中的混合-Blending in OpenGL
[18:07] 19-OpenGL 中的数学-Maths in OpenGL
[20:10] 20-OpenGL 中的投影矩阵-Projection Matrices in OpenGL
[15:53] 21-OpenGL 中的 MVP 矩阵-Model View Projection Matrices in OpenGL
[14:36] 22-在 OpenGL 中使用 ImGui-ImGui in OpenGL
[12:21] 23-在 OpenGL 中渲染多个物体-Rendering Multiple Objects in OpenGL
[16:52] 24-为 OpenGL 设置测试框架-Setting up a Test Framework for OpenGL
[22:46] 25-在 OpenGL 中创建测试-Creating Tests in OpenGL
[28:13] 26-在 OpenGL 中进行纹理测试-Creating a Texture Test in OpenGL
[11:37] 27-如何让你的 UNIFORMS 更快-How to make your UNIFORMS FASTER in OpenGL
[12:25] 28-批量渲染：简介-Batch Rendering - An Introduction
[09:15] 29-批量渲染：颜色-Batch Rendering - Colors
[15:51] 30-批量渲染：纹理-Batch Rendering - Textures
[23:17] 31-批量渲染：动态几何体-Batch Rendering - Dynamic Geometry

01WelcomToOpengl#

课程初衷与背景
- 作者介绍了为什么要制作这个系列：市面上很多教程只教“怎么做”，而不教“为什么”。
- 本系列的目标是不仅让你写出代码，还要让你理解 OpenGL 的底层工作原理及其与 GPU 的交互逻辑。
什么是 OpenGL？
- 核心定义：OpenGL 本质上是一个规范（Specification） ~~接口，API~~ ，而不是一个具体的库。它规定了函数应该如何命名、参数是什么以及预期的行为。 ~~允许我们实际访问我们的GPU，GraphicsProcessingUnit，图形处理单元。OpenGL是其中之一的接口，还有Direct3D，Vulkan，Metal等~~
- 实现者：具体的实现通常由显卡厂商（NVIDIA, AMD, Intel）编写在驱动程序中。
- 跨平台，Windows、Linux、Mac、Android、IOS
- 状态机（State Machine）：初步引入 OpenGL 是一个状态机的概念，你设置好状态（如颜色、缓冲区），然后发出指令进行渲染。
现代 OpenGL vs 传统 OpenGL
- Legacy OpenGL (固定管线)：简单但不够灵活，很多功能已经废弃（如 glBegin, glEnd）。
- Modern OpenGL (可编程管线)：通过着色器 (Shaders) 控制渲染过程。虽然代码量显著增加，但提供了极大的灵活性和性能优化空间。
- Shader（着色器）是程序，在==GPU==上运行的代码程序
- 本系列将专注于 Modern OpenGL (版本 3.3 及以上)。
学习 OpenGL 的难点与心态
- 强调了学习曲线：初期需要写==大量的“模板代码”（Boilerplate code）==才能在屏幕上画出一个简单的三角形。
- 图形管线 (Graphics Pipeline)：解释了数据如何从 CPU 传输到 GPU，并经过顶点处理、光栅化最终变成像素的过程。
开发环境与工具链预告
- 虽然是跨平台的，但本系列主要在 Windows 下使用 Visual Studio 演示。
- 提到后续会使用的关键第三方库：GLFW（窗口管理）和 GLEW/GLAD（访问 OpenGL 扩展函数）。
总结与后续计划
- 鼓励初学者不要被前几集的复杂配置和概念吓退。
- 下一集将正式进入 C++ 环境配置，动手创建第一个窗口。

02设置Opengl和创建窗口#

主要讲解如何在 Windows 环境下使用 Visual Studio 搭建 OpenGL 开发环境，并编写代码成功弹出一个窗口。这是所有图形编程的起点。

09Camera

Thu, 19 Mar 2026 08:01:16 +0800

Camera#

上一章我们讨论了视图矩阵以及如何利用视图矩阵在场景中移动（我们稍微向后移动了一下）。OpenGL 本身并不支持 摄像机 的概念，但我们可以尝试通过反向移动场景中的所有物体来模拟摄像机，从而产生移动的错觉。

本章我们将讨论如何在 OpenGL 中设置摄像机。我们将介绍一种飞行式摄像机，它允许您在 3D 场景中自由移动。我们还将讨论键盘和鼠标输入，最后介绍自定义摄像机类。

相机/视图空间 Camera/View space#

当我们讨论相机/视图空间时，指的是从相机视角（即场景原点）观察到的所有顶点坐标：视图矩阵将所有世界坐标转换为相对于相机位置和方向的视图坐标。要定义一个相机，我们需要它在世界空间中的位置、它的朝向、一个指向右侧的向量和一个指向上方的向量。细心的读者可能会注意到，我们实际上要创建一个以相机位置为原点的、具有三个相互垂直的单位轴的坐标系。本章前面的目的，那转换成这个坐标系的目的又是什么呢？—>(重要★★)：世界上所有的物体坐标都重新量一遍，量出它们==相对于你眼睛的距离和角度==。
~~注意下面这个公式：~~

\begin{array}{c} LookAt = \begin{bmatrix} \color{red}{R_x} & \color{red}{R_y} & \color{red}{R_z} & 0 \\ \color{green}{U_x} & \color{green}{U_y} & \color{green}{U_z} & 0 \\ \color{blue}{D_x} & \color{blue}{D_y} & \color{blue}{D_z} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} * \begin{bmatrix} 1 & 0 & 0 & -\color{purple}{P_x} \\ 0 & 1 & 0 & -\color{purple}{P_y} \\ 0 & 0 & 1 & -\color{purple}{P_z} \\ 0 & 0 & 0 & 1 \end{bmatrix} \end{array}

左边这个矩阵，是用以观察点为原点的坐标系算出的三个点，来形成新坐标系。由于矩阵乘法是先进行右边的换算，P表示cameraPos，所以就是说，先乘以右边矩阵，把世界坐标系的原点移到和cameraPos重叠；再乘以左边矩阵，得出在新坐标系下以cameraPos为原点，他的坐标该是多少（也就是换算成了原坐标系下的每个点，在新坐标系下与cameraPos的x,y,z的距离）

08Coordinate-Systems

Wed, 18 Mar 2026 16:01:39 +0800

坐标系 Coordinate Systems#

上一章我们学习了如何利用变换矩阵来变换所有顶点，从而更好地使用矩阵。OpenGL 要求所有我们希望可见的顶点在每次顶点着色器运行后都处于归一化设备坐标系中。也就是说，每个顶点的 x 、 y 和 z 坐标应该介于 -1.0 和 1.0 之间；超出此范围的坐标将不可见。通常的做法是，我们指定一个自定义范围（或空间）内的坐标，然后在顶点着色器中将这些坐标变换为归一化设备坐标 (NDC)。之后，这些 NDC 坐标会被传递给光栅化器，由光栅化器将其转换为屏幕上的二维坐标/像素。

顶点着色器：处理的是“点”（数学上的位置）。光栅化器：把“点”连接成“面”，并把这个“面”切碎成一个个对应屏幕像素的“小方块”（片段）。 ~~确定哪些像素属于这个图形~~ 片段着色器：给这些被选中的“小方块”涂上最终的颜色。

将坐标系转换为 NDC 坐标系通常是分步进行的，即先将对象的顶点转换到多个坐标系，最后再转换到 NDC 坐标系。这样做的好处是，某些操作/计算在某些坐标系中更容易进行，这一点很快就会显现出来。总共有 5 个对我们来说比较重要的坐标系：

局部空间（或对象空间） ~~Local Space，也称物体空间~~
世界空间 ~~World Space，乘以 Model Matrix (模型矩阵)后得到。把所有物体放到同一个大地图里，有了各自的相对位置~~
视野空间（或眼睛空间） 乘以 View Matrix (观察矩阵)后得到。状态：以摄像机为原点(0,0,0)，看所有物体在哪里。类比：摄影师扛起摄像机对准桌子。现在的坐标不再是“距离片场中心多远”，而是“距离镜头多远、在镜头画面的左边还是右边”
裁剪空间 乘以 Projection Matrix (投影矩阵)后得到。状态：决定哪些东西在镜头里，哪些在镜头外。类比：摄影师决定用“广角镜头”还是“长焦镜头”。在这个空间里，超出镜头范围的物体（比如演员伸到画面外的手）会被直接剪掉。透视除法也发生在这个阶段之后。
屏幕空间 Viewport Transform (视口变换)。状态：将坐标映射到显示器的实际像素（如 $1920 \times 1080$ ）。类比：电影最后投映在电影院的银幕上。原本的比例坐标变成了具体的像素点位置

这些都是顶点在最终变成片段之前会经历的不同状态。

你现在可能对空间或坐标系究竟是什么感到很困惑，所以我们首先会以更宏观的方式解释它们，展示整体情况以及每个特定空间所代表的含义。

全球概况 The global picture#

为了将坐标从一个空间转换到另一个坐标空间，我们将使用几个变换矩阵，其中最重要的包括==模型矩阵、视图矩阵和投影矩阵。我们的顶点坐标首先在局部空间中作为局部坐标出现，然后进一步转换为*世界坐标 ~~World Coordinates~~ 、视图坐标 ~~View Coordinates)~~ 、裁剪坐标 ~~Clip Coordinates~~ ，最终转换为屏幕坐标 ~~Screen Coordinates~~ *==。下图展示了这一过程，并说明了每个变换的作用：

07Transformations

Tue, 17 Mar 2026 08:58:33 +0800

转变 Transformations#

我们现在知道如何创建物体，给它们着色，或者用纹理赋予它们精细的外观，但它们仍然不够有趣，因为它们都是静态物体。我们可以尝试通过改变它们的顶点并在每一帧重新配置它们的缓冲区来让它们动起来，但这很麻烦，而且会消耗大量的处理能力。其实有更好的方法来变换物体，那就是使用（多个）矩阵对象。但这并不意味着我们要讨论功夫和庞大的数字人工世界。

矩阵是非常强大的数学结构，乍一看似乎令人生畏，但一旦你熟悉了它们，就会发现它们非常有用。在讨论矩阵时，我们需要稍微了解一些数学知识，对于数学基础较好的读者，我还会提供一些额外的阅读资源。

然而，要充分理解变换，我们首先需要深入研究向量，然后再讨论矩阵。本章的重点是为你提供一些我们后续会用到的基本数学知识。如果这些内容比较难懂，请尽量理解它们，并在需要时再回到本章复习相关概念。

向量 Vectors#

从最基本的定义来看，向量就是方向，仅此而已。向量具有方向和大小（也称为强度或长度）。你可以把向量想象成藏宝图上的指示：“向左走10步，然后向北走3步，再向右走5步”；这里，“向左”是方向，“10步”是向量的大小。因此，藏宝图上的指示包含了3个向量。向量可以是任意维度，但我们通常处理的是2到4维的向量。二维向量表示平面上的一个方向（想想二维图形），三维向量可以表示三维空间中的任何方向。

下面你会看到三个向量，每个向量在二维图中用 $(x,y)$ 表示为箭头。由于二维（而非三维）表示向量更直观，你可以将这些二维向量视为 $z$ 坐标为 $0$ 的三维向量。由于向量表示方向，向量的原点不会改变其值。在下面的图中我们可以看到，向量 $\color{red}{\bar{v}}$ 和 $\color{blue}{\bar{w}}$ 即使原点不同，它们的值也相等：

数学家在描述向量时，通常倾向于使用头顶带横线的字符符号，例如 ${\bar{v}}$ 此外，在公式中表示向量时，通常也采用以下方式：

\bar{v} = \begin{pmatrix} \color{red}x \\ \color{green}y \\ \color{blue}z \end{pmatrix}

由于向量被定义为方向，因此有时很难将其可视化为位置。如果我们想将向量可视化为位置，我们可以将方向向量的原点想象为 $(0,0,0)$ ，然后指向某个特定方向来确定该点，从而使其成为位置向量（我们也可以指定不同的原点，然后说：“该向量从该原点指向空间中的该点”）。位置向量 $(3,5)$ 则指向原点为 $(0,0)$ 的图上的 $(3,5)$ 点。因此，我们可以利用向量来描述二维和三维空间中的方向和位置。

就像对普通数字一样，我们也可以对向量定义几种运算（其中一些你已经见过了）。

标量向量运算 Scalar vector operations#

标量是一个数字。当对向量进行加/减/乘/除运算时，我们只需将向量的每个元素分别乘以或减去该标量即可。例如，加法运算如下所示：

\begin{pmatrix} \color{red}1 \\ \color{green}2 \\ \color{blue}3 \end{pmatrix} + x \rightarrow \begin{pmatrix} \color{red}1 \\ \color{green}2 \\ \color{blue}3 \end{pmatrix} + \begin{pmatrix} x \\ x \\ x \end{pmatrix} = \begin{pmatrix} \color{red}1+x \\ \color{green}2+x \\ \color{blue}3+x \end{pmatrix}

其中 + 可以是 + 、 − 、 ⋅ 或 ÷ ，其中 ⋅ 是乘法运算符。

06Textures

Mon, 16 Mar 2026 10:29:53 +0800

Textures#

我们了解到，为了增加物体的细节，我们可以为每个顶点设置颜色，从而创建一些有趣的图像。然而，为了获得相当逼真的效果，我们需要大量的顶点才能指定多种颜色。这会带来相当大的额外开销，因为每个模型都需要更多的顶点，并且每个顶点都需要一个颜色属性。

艺术家和程序员通常更喜欢使用纹理。纹理是一种二维图像（甚至还有一维和三维纹理），用于为物体添加细节；可以把纹理想象成一张印有精美砖块图案（例如）的纸，将其整齐地折叠覆盖在你的三维房屋上，使房屋看起来像是有石头外墙一样。因为我们可以在单个图像中添加大量细节，所以无需指定额外的顶点，就能使物体看起来极其精细。

除了图像之外，纹理还可以用来存储大量任意数据，以便发送到着色器，但我们将把这留到另一个话题中讨论。

下面你会看到一张砖墙的纹理图像，它映射到上一章中的三角形上。

为了将纹理映射到三角形，我们需要告诉三角形的每个顶点它对应纹理的哪一部分。因此，每个顶点都应该关联一个纹理坐标，该坐标指定要从纹理图像的哪一部分进行采样。然后，片段插值会处理其他片段的剩余部分。 ~~先画屏幕(三角形)，然后再去纹理图片那里采样~~

纹理坐标在 x 轴和 y 轴方向上的取值范围均为 0 到 1 （请记住，我们使用的是二维纹理图像）。使用纹理坐标获取纹理颜色的过程称为采样。纹理坐标从纹理图像左下角的 (0,0) 开始，到纹理图像右上角的 (1,1) 结束。下图展示了如何将纹理坐标映射到三角形：

我们为三角形指定了 3 个纹理坐标点。我们希望三角形的左下角与纹理的左下角对应，因此我们使用纹理坐标 (0,0) 作为三角形左下角顶点的坐标。右下角也一样，使用纹理坐标 (1,0) 。三角形的顶部应与纹理图像的顶部中心对应，因此我们使用纹理坐标 (0.5,1.0) 。我们只需将这 3 个纹理坐标传递给顶点着色器，顶点着色器再将这些坐标传递给片段着色器，片段着色器会对每个片段的所有纹理坐标进行插值。

最终得到的纹理坐标如下所示：

float texCoords[] = {
 0.0f, 0.0f, // lower-left corner 
 1.0f, 0.0f, // lower-right corner
 0.5f, 1.0f // top-center corner
};

纹理采样有多种不同的实现方式，其定义也比较宽泛。因此，我们的任务是告诉 OpenGL 应该如何对纹理 进行采样 。

Texture Wrapping#

纹理坐标通常介于 (0,0) 和 (1,1) 之间，但如果我们指定超出此范围的坐标会发生什么？OpenGL 的默认行为是重复纹理图像（我们基本上忽略浮点纹理坐标的整数部分），但 OpenGL 还提供了更多选项：

GL_REPEAT ：纹理的默认行为。重复纹理图像。 ~~图片不断重复。坐标 1.1 看起来和 0.1 一样（忽略整数部分）~~
GL_MIRRORED_REPEAT ：与 GL_REPEAT 相同，但每次重复都会镜像图像。 ~~图片重复，但一次正、一次反。边缘处能完美衔接，没有裂缝感。~~
GL_CLAMP_TO_EDGE ：将坐标限制在 0 到 1 之间。结果是，较高的坐标会被限制在边缘，从而形成拉伸的边缘图案。 ~~坐标只要大于 1.0，就永远取 1.0 那一像素的颜色。结果是边缘被无限拉伸成直线。~~
GL_CLAMP_TO_BORDER ：超出范围的坐标现在会赋予用户指定的边框颜色。 ~~图片外面是一片纯色（你可以自己定颜色，比如黑色或透明）。~~

当使用超出默认范围的纹理坐标时，每个选项都会产生不同的视觉效果。让我们看看它们在示例纹理图像上的效果（原图由 Hólger Rezende 提供）：

05Shaders

Sun, 15 Mar 2026 19:43:26 +0800

着色器#

正如 “你好，三角形” 一章中所述，着色器是运行在 GPU 上的小型程序。这些程序在图形管线的每个特定阶段运行。从本质上讲，着色器就是将输入转换为输出的程序。着色器也是高度隔离的程序，它们之间不允许通信；它们之间唯一的通信方式是通过输入和输出。

上一章我们简要介绍了着色器及其正确使用方法。现在我们将更全面地解释着色器，特别是 OpenGL 着色语言 ~~OpenGL Shading Language~~ 。

GLSL#

着色器是用类似 C 语言的 GLSL 编写的。GLSL 专为图形处理而设计，包含专门针对向量和矩阵操作的实用功能。

着色器总是以版本声明开始，后面跟着输入输出变量列表、uniform 变量以及主函数。每个着色器的入口点都在其主函数中，该函数处理所有输入变量并将结果输出到输出变量中。如果您不了解 uniform 变量，请不要担心，我们稍后会讲解。

着色器通常具有以下结构：

#version version_number
in type in_variable_name;
in type in_variable_name;

out type out_variable_name;
 
uniform type uniform_name;
 
void main()
{
 // process input(s) and do some weird graphics stuff
 ...
 // output processed stuff to output variable
 out_variable_name = weird_stuff_we_processed;
}

当我们专门讨论顶点着色器时，每个输入变量也称为顶点属性。我们可以声明的顶点属性数量受硬件限制。OpenGL 保证始终至少有 16 个 4 分量顶点属性可用，但某些硬件可能允许更多，您可以通过查询 GL_MAX_VERTEX_ATTRIBS 来获取这些信息：

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

这通常会返回最小值 16 ~~我的是32~~ ，这对于大多数用途来说应该绰绰有余。

03HelloWindow

Fri, 13 Mar 2026 21:44:30 +0800

Hello，Window#

我们来看看能不能让 GLFW 运行起来。首先，创建一个 .cpp 文件，并在新创建的文件顶部添加以下包含语句。

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

请务必在引入 GLFW 之前引入 GLAD。GLAD 的头文件包含了后台所需的 OpenGL 头文件（例如 GL/gl.h ），因此请确保在其他需要 OpenGL 的头文件（例如 GLFW）之前引入 GLAD。

接下来，我们创建主函数，并在其中实例化 GLFW 窗口：

int main()
{
 glfwInit();
 glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
 glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
 glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
 //glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
 
 return 0;
}

在主函数中，我们首先使用 `glfwInit` 初始化 GLFW，之后可以使用 `glfwWindowHint` 配置 GLFW。`glfwWindowHint` 的第一个参数指定要配置的选项，我们可以从一个以 GLFW_ 为前缀的枚举列表中选择。第二个参数是一个整数，用于设置选项的值。所有可用选项及其对应值的列表可以在 GLFW 的窗口处理文档中找到。如果您现在尝试运行应用程序并出现大量_未定义引用_错误，则表示您没有成功链接 GLFW 库。

由于本书重点介绍 OpenGL 3.3 版本，我们需要告知 GLFW 我们要使用的 OpenGL 版本为 3.3。这样，GLFW 在创建 OpenGL 上下文时就能做出正确的配置。这确保了当用户没有安装正确的 OpenGL 版本时，GLFW 不会运行。我们将主版本号和次版本号都设置为 3 此外，我们还告知 GLFW 我们要==显式使用核心配置文件。使用核心配置文件意味着我们将获得 OpenGL 功能的一个较小子集，而不会使用我们不再需要的向后兼容功能。==请注意，在 macOS 系统上，您需要在初始化代码中添加 glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); 才能使其生效。

02创建窗口

Fri, 13 Mar 2026 17:11:47 +0800

在开始创建精美图形之前，我们需要做的第一件事是创建一个 OpenGL 上下文和一个用于绘制的应用程序窗口。然而，这些操作因操作系统而异，OpenGL 也刻意将这些操作抽象化。这意味着我们需要自行创建窗口、定义上下文并处理用户输入。

幸运的是，有很多库可以提供我们所需的功能，其中一些是专门针对 OpenGL 的。这些库省去了我们所有与操作系统相关的繁琐工作，并为我们提供了一个窗口和一个 OpenGL 上下文来进行渲染。一些比较流行的库包括 GLUT、SDL、SFML 和 GLFW。在 LearnOpenGL 课程中，我们将使用 GLFW 。当然，您也可以使用其他任何库，大多数库的设置都与 GLFW 的设置类似。

GLFW#

GLFW 是一个用 C 语言编写的库，专门针对 OpenGL。GLFW 提供了在屏幕上渲染内容所需的基本功能。它允许我们创建 OpenGL 上下文、定义窗口参数并处理用户输入，这些功能足以满足我们的需求。

本章及下一章的重点是启动并运行 GLFW，确保它能正确创建 OpenGL 上下文，并显示一个简单的窗口供我们进行实验。本章将采用循序渐进的方式，讲解如何获取、构建和链接 GLFW 库。截至本文撰写之时，我们将使用 Microsoft Visual Studio 2019 IDE（请注意，在更新的 Visual Studio 版本中，此过程相同）。如果您未使用 Visual Studio（或更早的版本），也无需担心，在大多数其他 IDE 中，此过程也类似。

建造 GLFW#

您可以从 GLFW 的网页下载页面获取它。GLFW 已经提供了适用于 Visual Studio 2012 到 2019 的预编译二进制文件和头文件，但为了完整起见，我们将从源代码自行编译 GLFW。这样做是为了让您体验自行编译开源库的过程，因为并非所有库都有预编译的二进制文件。那么，让我们下载_源代码包_吧。

我们将把所有库都构建成 64 位二进制文件，因此如果您使用的是预编译的二进制文件，请确保获取 64 位二进制文件。 ~~我这里用的是32位的~~

下载完源代码包后，请解压缩并打开其内容。我们只需要其中的几个项目：

编译后生成的库。
include文件夹。

从源代码编译库可以确保生成的库完美适配您的 CPU/操作系统，这是预编译二进制文件并不总是能提供的（有时，您的系统甚至没有可用的预编译二进制文件）。然而，向开源社区提供源代码的问题在于，并非所有人都使用相同的 IDE 或构建系统来开发应用程序，这意味着提供的项目/解决方案文件可能与其他人的配置不兼容。因此，其他人必须使用提供的 .c/.cpp 和 .h/.hpp 文件来配置自己的项目/解决方案，这非常繁琐。正是出于这些原因，才有了 CMake 这个工具。

01OpenGL

Fri, 13 Mar 2026 15:58:58 +0800

在开始我们的探索之旅前，我们首先应该明确 OpenGL 究竟是什么。OpenGL 主要被视为一个 API（应用程序编程接口），它提供了一系列可用于操作图形和图像的函数。然而，OpenGL 本身并非 API，而仅仅是一个规范，由 Khronos Group 开发和维护。

OpenGL 规范明确规定了每个函数的输出结果及其执行方式。开发者需要根据规范实现这些函数，并找到相应的解决方案。由于 OpenGL 规范并未提供具体的实现细节，因此实际开发的 OpenGL 版本可以采用不同的实现方式，只要其结果符合规范（从而对用户而言相同）即可。

实际开发 OpenGL 库的是显卡制造商。你购买的每张显卡都支持特定版本的 OpenGL，这些版本是专门为该显卡（系列）开发的。在苹果系统中，OpenGL 库由苹果公司维护；而在 Linux 系统中，则存在着显卡供应商提供的版本以及爱好者对这些库的修改版本。这也意味着，如果 OpenGL 出现任何异常行为，很可能是显卡制造商（或开发/维护该库的人员）的问题。

由于大多数 OpenGL 实现都是由显卡制造商开发的，因此一旦实现中出现错误，通常可以通过更新显卡驱动程序来解决；这些驱动程序包含显卡支持的最新 OpenGL 版本。这也是为什么始终建议定期更新显卡驱动程序的原因之一。

Khronos 公开托管了所有 OpenGL 版本的规范文档。感兴趣的读者可以在这里找到 OpenGL 3.3 版本的规范（我们将使用这个版本），如果您想深入了解 OpenGL 的细节，这份规范值得一读（请注意，其中大部分内容仅描述结果，而非具体实现）。这些规范也为理解其函数的具体工作原理提供了极佳的参考。

核心模式与即时模式#

过去，使用 OpenGL 意味着在即时模式（通常称为固定功能管线）下进行开发，这是一种易于使用的图形绘制方法。OpenGL 的大部分功能都隐藏在库内部，开发者对 OpenGL 的计算方式几乎没有控制权。随着开发者对灵活性的需求不断增长，规范也随之变得更加灵活，开发者获得了对图形的更多控制权。即时模式虽然易于使用和理解，但效率极低。因此，从 3.2 版本开始，规范逐渐弃用即时模式的功能，并鼓励开发者使用 OpenGL 的核心配置文件模式进行开发。核心配置文件模式是 OpenGL 规范的一个分支，它移除了所有旧的、已弃用的功能。

使用 OpenGL 的核心配置文件时，OpenGL 会强制我们使用现代编程实践。每当我们尝试使用 OpenGL 已弃用的函数时，OpenGL 都会抛出错误并停止绘制。学习现代方法的优势在于其灵活性和高效性。然而，它也更难学习。立即模式抽象了 OpenGL 执行的许多实际操作，虽然易于学习，但很难理解 OpenGL 的实际运行机制。现代方法要求开发者真正理解 OpenGL 和图形编程，虽然这有点难度，但它提供了更大的灵活性、更高的效率，最重要的是：更深入地理解图形编程。

这也是本书以核心配置文件 OpenGL 3.3 版本为目标的原因。虽然难度更高，但绝对值得付出努力。

000介绍

Fri, 13 Mar 2026 15:26:20 +0800

欢迎来到这本在线 OpenGL 学习书籍！无论您学习 OpenGL 的目的是学术研究、职业发展还是纯粹出于兴趣爱好，本书都将使用现代（核心配置文件）OpenGL，为您讲解 OpenGL 的基础知识、中级知识以及所有高级知识。本书旨在以清晰易懂的方式和示例，向您展示现代 OpenGL 的方方面面，同时为后续学习提供有用的参考资料。

那么，为什么要读这些章节呢？#

互联网上有成千上万篇关于学习 OpenGL 的文档、书籍和资源，然而，其中大多数资源只关注 OpenGL 的即时模式（通常被称为旧版 OpenGL），内容不完整，缺乏完善的文档，或者不符合你的学习偏好。因此，我的目标是提供一个既完整又易于理解的平台。

如果您喜欢阅读提供循序渐进的指导、清晰示例且不会让您被海量细节淹没的内容，那么这本书可能正合您意。本书各章节旨在让没有任何图形编程经验的读者也能理解，同时也能为经验丰富的用户带来阅读乐趣。我们还会探讨一些实用的概念，只需稍加创意，就能将您的想法转化为真正的 3D 应用。如果您觉得以上描述与您自身情况相符，那么请继续阅读。

你将学到什么？#

这些章节的重点是现代 OpenGL。学习（和使用）现代 OpenGL 需要扎实的图形编程知识，以及对 OpenGL 底层工作原理的了解，才能真正获得最佳体验。因此，我们将首先讨论核心图形方面的内容，即 OpenGL 如何将像素绘制到屏幕上，以及如何利用这些知识来创建一些炫酷的效果。

除了核心知识之外，我们还将探讨许多可用于应用程序的实用技巧，例如：场景遍历、创建精美光照、从建模程序加载自定义对象、进行炫酷的后期处理等等。我们还会推出一系列演示视频，实际创建一个基于所学 OpenGL 知识的小游戏，让您真正体验图形编程的乐趣。

从哪里开始呢？#

学习 OpenGL 完全免费，而且永远免费，任何想要入门图形编程的人都可以使用。所有内容都可以在左侧菜单中找到。只需点击“简介”按钮，即可开始您的学习之旅！

Opengl on 随记

01颜色

颜色#

灯光场景#

23批量渲染对象

第 23 集：在 OpenGL 中渲染多个物体#

22关于ImGui

代码#

添加头文件#

shader后的修改#

21关于模型视图投影矩阵

1. 初始化阶段：建立“尺子” (P)#

2. 空间布局阶段：摆放相机与物体 (V & M)#

分工#

1. M (Model 矩阵) —— 物体自己的“属性”#

20关于投影矩阵

诞生：模型空间 (Model Space)#

变换：世界空间 (World Space) —— M (Model Matrix)#

观察：摄像机空间 (View Space) —— V (View Matrix)#

关键：投影变换 (Projection Space) —— P (Projection Matrix)#

正交投影和透视投影#

19关于数学库

总结#

为什么需要第三方数学库？#

向量与矩阵的基本概念#

正交投影矩阵 (Orthographic Projection)#

18关于混合

问题的引入：为什么我的图片有“黑边”？#

开启混合 (Enable Blending)#

核心公式：混合方程式#

最常用的配置：实现透明效果#

17关于纹理

简述#

纹理的基本原理：坐标映射#

图像加载与 stb_image#

OpenGL 纹理对象 (Texture Object)#

13-16抽象OpenGL成类

13-16抽象OpenGL成类#

为什么要抽象？（工程思维）#

封装 VertexBuffer 类#

封装 IndexBuffer 类#

代码#

Render 渲染器#

VertextBuffer 顶点缓冲区#

IndexBuffer 索引缓冲区#

VertexBufferLayout 顶点缓冲区布局设置#

VertexArray 顶点数组（属性）绑定#

Shader着色器#

Main 主文件#

12顶点数组

总述#

为什么要用 VAO？（痛点分析）#

VAO 的本质：状态的“存档”#

兼容性大坑：Core vs Compatibility#

编码实践：如何创建 VAO#

11uniform

总结#

什么是 Uniform？#

在 Shader 中声明 Uniform#

获取 Uniform 的位置 (Location)#

10错误处理

传统方案：glGetError#

进阶方案：封装 GLClearError 与 GLLogCall#

神奇的宏：ASSERT 与 # 运算符#

现代方案：glDebugMessageCallback#

实战演示：故意写错代码#

💡 博客总结（金句/重点）#

09顶点缓冲区

总述#

核心痛点：重复的顶点数据#

解决方案：Index Buffer 原理#

编码实践：创建与绑定 IBO#

08处理着色器

07编写一个着色器

概述#

06着色器原理

什么是着色器 (Shaders)#

渲染管线概述 (The Graphics Pipeline)#

着色器#

05顶点属性和内存布局

传统方案：`glGetError`#

进阶方案：封装 `GLClearError` 与 `GLLogCall`#

神奇的宏：`ASSERT` 与 `#` 运算符#

现代方案：`glDebugMessageCallback`#