简介：一份面向OpenGL初学者的二维图形交互示例，基于Visual Studio 2010环境实现小猪图形的绘制，既可作为计算机图形学课程的小型练手项目，也能帮助开发者理解固定功能管线的绘图方式。程序支持鼠标拖拽、键盘方向键移动和右键菜单控制，适合借此弄懂OpenGL事件处理与二维顶点坐标的对应关系。压缩包共60个文件，约14.35MB，除main.cpp源码、sln/vcxproj工程文件、exe可执行程序和pdb调试符号外，还包含sdf、ipch、obj等编译缓存与中间文件，目录结构完整，可直接打开工程运行或对照学习。目前已有1567人学习下载。项目中借助glBegin、glVertex2f等传统管线接口逐部分绘制小猪身体，并通过回调机制完成交互；读者既能从源码梳理二维图形坐标、颜色设置、消息循环与实时重绘的完整流程，也能学习OpenGL与Windows API结合创建菜单、处理鼠标键盘事件的常用方法，为进一步学习三维图形编程打下基础。

1. 用OpenGL画二维动物：把 3D 管线拿来给 2D 网格做动画

不少初学者听到“OpenGL”第一反应是旋转立方体、光照、深度缓冲，觉得二维动物这种小玩意用 Canva 或者 PNG 拼一下就完事了。但我这几年代码围观的感受恰恰相反：OpenGL 在二维场景里最大的价值不是“画得像”，而是“动得顺”——你能够对每一帧的顶点坐标、颜色、透明度做程序化控制，做尾巴摆动、眨眼、角色切帧，全部在 GPU 侧完成。二维动物这个项目标题一点都不“玩具”，它背后是顶点缓冲、图元装配、着色器、混合、变换矩阵这一整套图形学核心链路，只是把深度砍掉，让数学门槛降到一个周末能上手。这篇笔记写给两类人：一类是图形学课程作业想找个“不烂大街”的题目，另一类是做 2D 工具或轻量交互 Demo 的从业者，想搞清这类渲染方案怎么落地最省事。我会直接按我自己的做法讲，代码可以照抄，坑也会给你标明白。

2. 坐标系统与最小着色器：先把动物放进固定画布

二维渲染不用做透视投影，不需要模型视图矩阵的层层嵌套，但这不代表你可以跳过坐标约定。坐标约定定不清楚，后面所有顶点位置都是空中楼阁，画出来的动物不是歪在屏幕角上，就是被拉伸成“哈哈镜”。

2.1 从像素坐标到 NDC：一个二维的坐标约定

我的习惯是：让顶点数据直接使用“以窗口中心为原点、以像素为单位的坐标”。比如一只耳朵尖在 (30, 120)，身体中心在 (0, 0)，眼睛在 (12, 40)。这样设计的好处是写顶点时完全符合直觉，改位置时直接按像素去调，不用心算 NDC 那套 [-1, 1] 的区间。GPU 那边的坐标换算，交给一个简单的着色器 uniform 完成。

// 顶点着色器：把窗口像素坐标换算到 NDC const char* vertexShaderSrc = R"( #version 330 core layout(location = 0) in vec2 aPos; layout(location = 1) in vec3 aColor; uniform vec2 uResolution; // 窗口宽高，例如 (800, 600) out vec3 vColor; void main() { vColor = aColor; // 以窗口中心为原点，把像素坐标映射到 [-1, 1] vec2 ndc = (aPos - uResolution * 0.5) / (uResolution * 0.5); gl_Position = vec4(ndc.x, ndc.y, 0.0, 1.0); } )";

这段着色器代码里，aPos的单位是像素，且 y 轴向上为正。注意uResolution是 uniform，窗口 Resize 时必须重新赋值，否则画面会变形。NDC 换算放在顶点着色器里做，比在 CPU 端每个顶点都手动除一遍要省心，也方便后续加缩放、旋转矩阵。

片元着色器更简单，直接把顶点色传递出去：

const char* fragmentShaderSrc = R"( #version 330 core in vec3 vColor; out vec4 fragColor; void main() { fragColor = vec4(vColor, 1.0); } )";

顺便说一句，为什么用 330 core？OpenGL 2.1 的固定管线glBegin/glEnd时代已经过去，新写的代码尽量别开倒车，否则换台电脑、换个驱动就翻车。用 330 这套，Windows/Mac/Linux 都能跑，兼容性比 4.5 要稳，二维动物也完全用不到 tessellation 那些新特性。

2.2 VAO/VBO 与第一只耳朵：最小可绘制图元

坐标与着色器就位后，下一步是把“耳朵”这种几何数据送进 GPU。我习惯封装一个小结构体，专门管理 VAO、VBO、EBO 和索引数量，后面画身体、眼睛、尾巴都是复用这套逻辑。

struct Shape { GLuint vao, vbo, ebo; int indexCount; }; Shape createShape(const std::vector<float>& vertices, const std::vector<unsigned int>& indices) { Shape s; glGenVertexArrays(1, &s.vao); glGenBuffers(1, &s.vbo); glGenBuffers(1, &s.ebo); glBindVertexArray(s.vao); glBindBuffer(GL_ARRAY_BUFFER, s.vbo); glBufferData(GL_ARRAY_BUFFER, vertices.size() * sizeof(float), vertices.data(), GL_STREAM_DRAW); // 注意：会逐帧更新时用 STREAM glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, s.ebo); glBufferData(GL_ELEMENT_ARRAY_BUFFER, indices.size() * sizeof(unsigned int), indices.data(), GL_STREAM_DRAW); glEnableVertexAttribArray(0); glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0); glEnableVertexAttribArray(1); glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(2 * sizeof(float))); glBindVertexArray(0); s.indexCount = (int)indices.size(); return s; }

这段代码的布局是“位置 2 个 float + 颜色 3 个 float”，也就是单个顶点 5 个 float。之所以用GL_STREAM_DRAW而不是GL_STATIC_DRAW，是因为后面做尾巴动画时要每帧更新顶点数据，提前告诉驱动这个 Buffer 会被频繁修改，能减少一些隐式的数据搬运开销。如果你只画一个静态动物，改回GL_STATIC_DRAW性能更好。

有了createShape，画第一只耳朵只需一个三角形：

// 耳朵三角形：耳尖在上，底边在下 std::vector<float> verts = { // 位置 xy 颜色 rgb -30, 120, 1.0f, 0.5f, 0.3f, -90, 20, 0.8f, 0.4f, 0.2f, 30, 20, 1.0f, 0.7f, 0.4f, }; std::vector<unsigned int> idx = { 0, 1, 2 }; Shape ear = createShape(verts, idx);

注意这里的顶点序我按逆时针写：从耳尖到左下角再到右下角。OpenGL 默认认为逆时针是正面，开启glEnable(GL_CULL_FACE)后，正面才会被绘制。二维图形虽然不需要深度剔除，但保留逆时针习惯，以后往 3D 扩展时不至于整个模型背面全空。

每帧绘制时，流程是：

glUseProgram(shaderProgram); glUniform2f(uniRes, windowWidth, windowHeight); glBindVertexArray(ear.vao); glDrawElements(GL_TRIANGLES, ear.indexCount, GL_UNSIGNED_INT, 0);

2.3 选型理由：为什么不用固定管线与“先画纹理”路线

这条值得展开说，因为这是新手最容易问的问题。有人会问：既然画动物，我直接加载一张 PNG 或者用 OpenGL 的glDrawPixels不就行了，为什么要折腾顶点、索引、着色器？

我的回答是：二维动物的核心诉求不只是“显示一张图”，而是“让这个图形能响应交互、能变形、能组合”。纹理方案能做到前两点，但做到“变形”——比如尾巴在不同角度下摆动、耳朵被风吹动、角色身体随按键拉伸——就得做纹理网格形变，而那套 UV 坐标在 CPU 端手动调整的复杂度，比直接用几何顶点还要高。直接用几何图元拼动物，每个器官都是独立的顶点集合，做动画时只需要改变对应那一组顶点的位置即可，数据模型非常干净。

另一个常被忽略的点是可扩展性。几何路径画出来的动物，天然支持描边、填充、渐变、透明度分层，你可以随时把一个圆头拆成半透明的高光层、底色层、轮廓层。纹理图像一旦固定，每层的“透明度”只能在绘图软件里预烘焙掉，程序侧很难再独立控制。对于“用 OpenGL 绘制二维动物”这类偏图形学的项目，评分的重点也往往不是“像”，而是“你能不能解释清楚每个像素为什么出现在那里”——几何路径恰好把这个问题切成了一块块可解析的顶点数据。

3. 把圆润还给它：贝塞尔曲线与三角网格化填色

直接用三角形拼动物，轮廓一定生硬。兔子脑袋不可能是方块，猫耳朵弧线也需要曲线拟合。二维图形里最顺手、也最不容易出数学 Bug 的工具就是贝塞尔曲线。

3.1 三次贝塞尔采样：耳朵轮廓不再有折痕

贝塞尔曲线的原理不复杂：给定 P0、P1、P2、P3 四个控制点，t 从 0 走到 1，就能得到一条平滑曲线。P1 和 P2 是“牵引点”，它们不一定要落在曲线上，但决定了曲线的走向。采样就是用循环按固定步长算出足够多的点，再用GL_LINE_STRIP或后续的三角形扇把它画出来。

// 三次贝塞尔采样，把结果追加到顶点数组 void sampleBezier3(const Vec2& p0, const Vec2& p1, const Vec2& p2, const Vec2& p3, int samples, std::vector<Vec2>& out) { for (int i = 0; i <= samples; ++i) { float t = (float)i / (float)samples; float mt = 1.0f - t; float x = mt*mt*mt*p0.x + 3.0f*mt*mt*t*p1.x + 3.0f*mt*t*t*p2.x + t*t*t*p3.x; float y = mt*mt*mt*p0.y + 3.0f*mt*mt*t*p1.y + 3.0f*mt*t*t*p2.y + t*t*t*p3.y; out.push_back({x, y}); } }

samples参数很关键。我一般取 40 到 60 之间，低于 20 时耳朵轮廓在放大后会明显看到折线；高于 100 纯属浪费，因为屏幕像素密度已经低于采样密度了。为了某一帧的动物轮廓更圆润，有人会把 samples 拉到 200，我觉得这种优化是自我安慰，GPU 顶点数翻倍但画面肉眼完全看不出差别。

采样完成后，你会得到一个首尾相接的轮廓点序列。执行绘制以前，先做一步排查：把前几个点和最后几个点打出来，看看闭合处有没有跳变。新手翻车往往不是公式写错，而是 P0 和 P3 坐标没对齐，导致轮廓出现一个肉眼可见的小缺口。

3.2 用三角形扇把头部填起来，并保持可编辑

贝塞尔曲线采样得到的只是一圈轮廓点，要把这个轮廓内部填上颜色，得把它三角化。最简单的方法是“三角形扇”：取轮廓内的一个中心点，和轮廓上每两个相邻点组成三角形。

// 把中心点和轮廓点组装成 GL_TRIANGLES 索引 std::vector<unsigned int> makeFanIndices(int centerIndex, int contourStart, int contourCount) { std::vector<unsigned int> indices; for (int i = 0; i < contourCount; ++i) { indices.push_back(centerIndex); indices.push_back(contourStart + i); indices.push_back(contourStart + (i + 1) % contourCount); } return indices; }

中心点我一般放在轮廓的重心附近，而不是 (0, 0) 原点。重心算起来也简单：所有轮廓点坐标取平均即可。这个中心点如果选得太偏，扇形的三角形会有一个特别扁长的，渲染无碍，但如果后续要做骨骼变形，扁长三角形在插值时会露出痕迹。

需要提醒的是，三角形扇只适用于星形轮廓。像“S 形”的动物尾巴轮廓，扇心无论放哪里都可能跑出轮廓外，生成错误的覆盖区域。这种情况需要用耳切法（Ear Clipping）或直接调用现成的三角化库。二维动物项目里，把身体拆成“头、躯干、四肢、尾巴”多个独立轮廓来画，每个轮廓用扇即可，不建议一个复杂多边形整体三角化。

有了头部轮廓点，组装成Shape并绘制：

// 头部轮廓由两条贝塞尔曲线拼接 std::vector<Vec2> contour; sampleBezier3({-80, -20}, {-100, 40}, {-70, 90}, {0, 100}, 50, contour); sampleBezier3({0, 100}, {70, 90}, {100, 40}, {80, -20}, 50, contour); // 建立顶点数组：先中心，再轮廓点 std::vector<float> verts; verts.push_back(0.0f); verts.push_back(0.0f); verts.push_back(0.9f); verts.push_back(0.6f); verts.push_back(0.4f); for (auto& p : contour) { verts.push_back(p.x); verts.push_back(p.y); verts.push_back(0.9f); verts.push_back(0.6f); verts.push_back(0.4f); } std::vector<unsigned int> indices = makeFanIndices(0, 1, (int)contour.size()); Shape head = createShape(verts, indices);

这段代码的细节在于：makeFanIndices的第三个参数是轮廓点数，索引从 1 开始，因为 0 号是中心点。前面的sampleBezier3连续调用两次，要注意第二条曲线的起点正好是第一条的终点，也就是 P0 是 (0, 100)，否则轮廓闭合处会断裂。

3.3 眼睛、高光与配色：层次感来自层叠

单纯一个填色轮廓，画出来的动物像剪纸。要让它“活”，得给眼睛、瞳孔、高光做叠加。做法还是上面那套工具，只是把圆用三角形扇生成一遍。眼睛可以用圆形轮廓采样，也可以直接写一个generateCircle函数：

void generateCircle(Vec2 center, float radius, int segments, std::vector<Vec2>& out) { for (int i = 0; i <= segments; ++i) { float theta = i * 2.0f * 3.14159265f / segments; out.push_back({center.x + radius * cosf(theta), center.y + radius * sinf(theta)}); } }

绘制顺序决定最终的视觉效果。我习惯按“身体层 → 眼睛底色 → 瞳孔 → 高光”的顺序提交绘制调用。高光不是白色圆形，而是一个半径只有瞳孔三分之一的小圆，位置在瞳孔左上角，颜色可以用半透明白，开启混合后更自然。

glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

混合这里如果不开启，高光圆会把瞳孔底色完全盖掉，看起来像贴了块创可贴。开启后 Alpha 值为 0.6 左右的白色高光会透出下面的瞳孔颜色，这才有“玻璃感”而不是“纸片感”。绘制顺序对透明物体很重要：先画不透明层，再画透明层，否则透明层后面的物体可能被深度测试挡掉。二维项目虽然没有深度缓冲参与，但绘制顺序依然影响最终像素。

4. 动起来：CPU 骨骼动画、交互与帧节奏

静态动物只能算绘图，能按照输入变化才算“动画”。二维动物的动画不需要复杂的蒙皮系统，最常见做法是：把尾巴或四肢拆成单独的形状，每帧在 CPU 上计算旋转后的顶点位置，再上传到缓冲。这套方案叫“CPU 骨骼动画”，数据量小，逻辑直观。

4.1 可变形的尾巴：glBufferSubData 做逐帧顶点更新

尾巴摆动，本质是让尾巴根部的顶点固定，越往尾尖偏移越大。我设计一条由两个三角形组成的尾巴，每帧更新顶点坐标。关键代码是updateTail函数：

void updateTail(Shape& tailShape, float time, float amplitude) { // 尾巴根部固定在身体右下角 (80, -40) float angle = sinf(time * 2.0f) * amplitude; std::vector<float> verts = { // 尾尖随角度旋转 80.0f + offsetX(angle, 40), -40.0f + offsetY(angle, 40), 0.8f, 0.5f, 0.2f, // 尾根两个端点保持不变 120.0f, -20.0f, 0.7f, 0.4f, 0.2f, 120.0f, -60.0f, 0.7f, 0.4f, 0.2f, }; glBindBuffer(GL_ARRAY_BUFFER, tailShape.vbo); glBufferSubData(GL_ARRAY_BUFFER, 0, verts.size() * sizeof(float), verts.data()); }

这里的offsetX/offsetY是旋转公式：新的 x = 原 x * cos(angle)，新增的偏移量按尾尖相对尾根的距离做旋转。振幅amplitude控制摆动幅度。频率由time * 2.0f决定，2.0 是一秒大约完成一个摆动周期，连按方向键时可以把这个系数调大调小。

这段代码背后必须区分两件事：glBufferData每次调用会重新分配缓冲内存，而glBufferSubData只是在已分配的空间里覆盖一段数据。逐帧动画一定要用SubData，因为每一帧都Allocate一次会让驱动不断做内存释放和分配，帧率直接掉一半。这也是为什么createShape里我用GL_STREAM_DRAW提前声明缓冲会被频繁写入。

4.2 键盘交互：方向键控制角度与摆速

动画必须响应用户输入才有互动感。我用 GLUT 的glutSpecialFunc捕获方向键，你也可以换成 GLFW 的glfwSetKeyCallback，逻辑完全一样。

float gAmplitude = 0.4f; float gSpeed = 1.0f; bool gPaused = false; void onSpecialKey(int key, int x, int y) { switch (key) { case GLUT_KEY_UP: gSpeed += 0.2f; break; case GLUT_KEY_DOWN: gSpeed -= 0.2f; break; case GLUT_KEY_LEFT: gAmplitude -= 0.05f; break; case GLUT_KEY_RIGHT: gAmplitude += 0.05f; break; } // 防止数值跑飞 gSpeed = std::max(0.2f, std::min(gSpeed, 3.0f)); gAmplitude = std::max(0.1f, std::min(gAmplitude, 0.8f)); }

glutSpecialFunc注册的是“特殊按键”，也就是方向键和 F1-F12；普通字母键要另用glutKeyboardFunc。这个回调在 GLUT 主循环里由窗口系统事件触发，并不会阻塞渲染线程。如果你想把“暂停”功能放到空格键上，记得字母按键回调里处理GLUT_KEY那套不适用。

4.3 帧循环与缓冲交换：动画节奏正确才不“打嗝”

动画的驱动方式直接决定画面平滑度。GLUT 的glutTimerFunc加glutPostRedisplay是入门最稳的组合：

void timerCallback(int value) { if (!gPaused) { glutPostRedisplay(); // 请求下一帧重绘 } glutTimerFunc(16, timerCallback, 0); // 约 60 FPS }

glutPostRedisplay不是立即重绘，而是设置一个“需要重绘”的标志，回到主循环后才会调用 display 回调。这么做的好处是：如果一帧渲染耗时超过 16 毫秒，系统不会堆积大量的重绘请求；坏处是帧率不稳定时会有一点抖动，但对二维动物这种简单场景足够。

display 回调里有两件事千万别省。第一件是glClear，不清屏的话上一帧的尾巴残影会留在画面上。第二件是绘制完所有 Shape 后调用glutSwapBuffers，因为窗口用了双缓冲模式，绘制发生在后台缓冲，SwapBuffers才把内容同步到屏幕。漏掉这一步，画面会闪烁或干脆不显示。

5. 二维动物绘制避坑：查过几千行代码后的五个高频翻车点

这部分写几条最常见的错误。都是我看别人代码和自己改 Bug 时的血泪经验，按“现象 → 原因 → 解决”的顺序写，可以直接当成排查手册用。

5.1 黑屏或闪一下绿屏：shader 编译失败与 VAO 绑定的玄学

现象是窗口弹出来全黑，或者第一次 Resize 时闪一下绿色。控制台没有报错，程序也没崩。

原因通常有两种：第一种是着色器编译失败，最典型的是 OpenGL 版本不匹配——我的着色器是#version 330 core，但窗口创建时用的 context 是 2.1，着色器直接编译失败且 GLUT 默认不打印日志。第二种是 VAO 没绑定，绘制指令发出后 GPU 没有可用的顶点属性指针，相当于“空气绘图”。

解决方法是给编译函数加上日志输出。查 shader 编译信息比肉眼挑代码快得多：

GLint success; glGetShaderiv(shader, GL_COMPILE_STATUS, &success); if (!success) { char infoLog[512]; glGetShaderInfoLog(shader, 512, NULL, infoLog); fprintf(stderr, "Shader Error: %s\n", infoLog); }

画到屏幕上之前先验证glIsVertexArray(vao)是否为GL_TRUE，同时确认glBindVertexArray没有被后面的代码不小心解绑。

5.2 窗口一变，动物被压扁：视口与纵横比失配

现象是窗口从横屏拖成竖屏，动物从正常比例变成“瘦高个”。

原因是我的坐标换算是按uResolution整体等比例缩放的，窗口宽高变了，x 和 y 的缩放倍率可能不同。比如窗口从 800x600 变成 600x800，x 方向单位长度对应的像素变少，图形在水平方向就被压缩。

解决分两种情况：如果你希望动物“变形跟着窗口走”，那现在的逻辑不用改；如果你希望动物在任何窗口比例下都保持正方形比例，调整视口或 uniform 即可。我一般选择后者，让画面以高度为基准，宽度超出部分留白：

glUniform2f(uniRes, windowHeight, windowHeight);

也就是把uResolution的 x 替换成窗口高度，这样 x 方向的缩放与 y 方向一致，动物永远不变形。

5.3 耳朵边缘有折线：采样不足与扇心顺序问题

现象是明明是贝塞尔曲线，画出来却有明显的多边形折痕，尤其动物放大以后更明显。

原因有二：一是samples太少，30 以下的采样密度在曲率变化剧烈的耳尖处不够用；二是三角形扇的心选得离轮廓太远，导致相邻两个轮廓点跨度过大。

解决时先加采样数到 50 再看效果。如果还不行，检查makeFanIndices里(i + 1) % contourCount是否正确，闭合处漏一个点会让最后一格变成从中心点到第一个点的扇面，视觉上像缺了一块。这个错误特别隐蔽，因为画面整体轮廓只在尾部破一个小口，不放大看很难发现。

5.4 逐帧重传整个缓冲区导致掉帧：分清 Allocate 与 SubData

现象是动画一旦开始，帧率从 60 掉到 20，CPU 占用率飙升。

原因是用glBufferData每一帧重新上传整个尾巴数据。glBufferData每次都会重新分配一块缓冲对象的内存，这是一个开销不小的操作，频繁调用会让驱动不断走“分配-释放-再分配”的流程。

解决是把初始化时的glBufferData保留，动画阶段只调glBufferSubData。另外有一种更隐蔽的坑：你更新了顶点，但忘了glVertexAttribPointer里的步长和偏移是否还匹配。如果把顶点结构从“位置2+颜色3”改成“位置2+颜色3+UV2”，旧的stride参数就会错位，画出来全是乱色。

5.5 锯齿与正反面剔除冲突

现象是圆形轮廓边缘有明显锯齿，或动物有部分区域莫名消失。

锯齿的原因是默认情况下 MSAA（多重采样抗锯齿）没开。在 GLUT 里初始化显示模式时要加GLUT_MULTISAMPLE：

glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_MULTISAMPLE); glEnable(GL_MULTISAMPLE);

部分区域消失的原因则多半是glEnable(GL_CULL_FACE)开启后，三角形顶点超过了逆时针顺序，背面被剔除了。解决方法是在做三角形扇时，统一按照“中心 → 轮廓点 i → 轮廓点 i+1”的顺序组装，这个顺序本身是逆时针的，不要手工打乱。

6. 一个自查技巧：用线框模式去验证你的动物网格

画完一个完整动物后，最值得做的检查不是盯着看顺不顺眼，而是按下某个按键切换到线框模式，直接审视网格质量。

// 按键 T：切换填充与线框显示 glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); // 线框 glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); // 切回填充

线框模式下能一眼看出三个问题：三角形有没有重叠、有没有覆盖不到的空隙、有没有特别细长的畸形三角形。畸形三角形在填充模式完全看不见，但一旦做骨骼动画，顶点插值会让畸形三角形出现“呼吸”一样的形变闪烁。发现畸形三角形，优先调整轮廓取样密度和扇心位置。网格质量合格后，再切回填充模式检查配色和层次。

另一个实用习惯是调试与验证分开。我把动物绘制封装成“一次性输出窗口图像”，然后借助glReadPixels做像素级断言：

unsigned char pixel[3]; glReadPixels(200, 300, 1, 1, GL_RGB, GL_UNSIGNED_BYTE, pixel); // 检查 pixel[0], pixel[1], pixel[2] 是否符合期望颜色

这个技巧在做动画回归测试时尤其有用——改完尾巴摆动算法后，跑一遍脚本用glReadPixels采样几个特征点，确认颜色没有偏移，比每次人工瞪眼看要可靠得多。注意glReadPixels的原点在窗口左下角，跟很多 UI 框架的左上角坐标系相反，取样前先把 y 翻转一下，否则怎么测怎么错。

最后一件事

这套“几何拼装 + 贝塞尔曲线 + CPU 逐帧更新”的方案，应对课程作业和 Mini 项目足够，真要投入生产级 2D 引擎，建议把 CPU 顶点更新迁到顶点着色器里的骨骼矩阵，把全局变量收敛到状态结构体，同时把 GLUT 换成 GLFW 以便更精细控制窗口与事件。做法不同，但坐标约定和调试思路完全一致。我自己做这类 Demo 时，一定会先把键盘调试键（线框切换、暂停、参数调整）全部接好再开始调美术，这样每改一个参数都能立刻看到影响，而不是反复改代码重新编译。希望这篇笔记能帮你少踩几个我踩过的坑。

本文还有配套的精品资源，点击获取