简介一份面向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 coreOpenGL 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::vectorfloat vertices, const std::vectorunsigned 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::vectorfloat 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::vectorunsigned 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::vectorVec2 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::vectorunsigned int makeFanIndices(int centerIndex, int contourStart, int contourCount) { std::vectorunsigned 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::vectorVec2 contour; sampleBezier3({-80, -20}, {-100, 40}, {-70, 90}, {0, 100}, 50, contour); sampleBezier3({0, 100}, {70, 90}, {100, 40}, {80, -20}, 50, contour); // 建立顶点数组先中心再轮廓点 std::vectorfloat 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::vectorunsigned 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::vectorVec2 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::vectorfloat 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 变成 600x800x 方向单位长度对应的像素变少图形在水平方向就被压缩。解决分两种情况如果你希望动物“变形跟着窗口走”那现在的逻辑不用改如果你希望动物在任何窗口比例下都保持正方形比例调整视口或 uniform 即可。我一般选择后者让画面以高度为基准宽度超出部分留白glUniform2f(uniRes, windowHeight, windowHeight);也就是把uResolution的 x 替换成窗口高度这样 x 方向的缩放与 y 方向一致动物永远不变形。5.3 耳朵边缘有折线采样不足与扇心顺序问题现象是明明是贝塞尔曲线画出来却有明显的多边形折痕尤其动物放大以后更明显。原因有二一是samples太少30 以下的采样密度在曲率变化剧烈的耳尖处不够用二是三角形扇的心选得离轮廓太远导致相邻两个轮廓点跨度过大。解决时先加采样数到 50 再看效果。如果还不行检查makeFanIndices里(i 1) % contourCount是否正确闭合处漏一个点会让最后一格变成从中心点到第一个点的扇面视觉上像缺了一块。这个错误特别隐蔽因为画面整体轮廓只在尾部破一个小口不放大看很难发现。5.4 逐帧重传整个缓冲区导致掉帧分清 Allocate 与 SubData现象是动画一旦开始帧率从 60 掉到 20CPU 占用率飙升。原因是用glBufferData每一帧重新上传整个尾巴数据。glBufferData每次都会重新分配一块缓冲对象的内存这是一个开销不小的操作频繁调用会让驱动不断走“分配-释放-再分配”的流程。解决是把初始化时的glBufferData保留动画阶段只调glBufferSubData。另外有一种更隐蔽的坑你更新了顶点但忘了glVertexAttribPointer里的步长和偏移是否还匹配。如果把顶点结构从“位置2颜色3”改成“位置2颜色3UV2”旧的stride参数就会错位画出来全是乱色。5.5 锯齿与正反面剔除冲突现象是圆形轮廓边缘有明显锯齿或动物有部分区域莫名消失。锯齿的原因是默认情况下 MSAA多重采样抗锯齿没开。在 GLUT 里初始化显示模式时要加GLUT_MULTISAMPLEglutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_MULTISAMPLE); glEnable(GL_MULTISAMPLE);部分区域消失的原因则多半是glEnable(GL_CULL_FACE)开启后三角形顶点超过了逆时针顺序背面被剔除了。解决方法是在做三角形扇时统一按照“中心 → 轮廓点 i → 轮廓点 i1”的顺序组装这个顺序本身是逆时针的不要手工打乱。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 时一定会先把键盘调试键线框切换、暂停、参数调整全部接好再开始调美术这样每改一个参数都能立刻看到影响而不是反复改代码重新编译。希望这篇笔记能帮你少踩几个我踩过的坑。本文还有配套的精品资源点击获取