简介：一份使用OpenGL绘制二维动物小猪的工程资源，面向OpenGL初学者或希望了解Windows下二维图形编程的开发者。项目在Visual Studio 2010中实现，通过glBegin、glVertex2f等函数勾勒小猪身体、耳朵和鼻子，并结合鼠标拖拽、键盘方向键移动以及右键菜单交互，完整演示了OpenGL绘图流程与Windows事件机制的集成方式。压缩包共60个文件，含可直接运行的exe、cpp源码、rc资源文件，以及vcxproj、sln工程配置和pdb、tlog等编译中间文件，整体约14.35MB，目录结构完整，适合对照学习二维坐标、顶点绘制和事件回调。已有1567人浏览下载。解压运行即可观察小猪绘制效果并测试交互操作，配合源码阅读能够理解OpenGL初始化、顶点描画和实时响应用户输入的完整逻辑，也为后续三维图形编程打下基础。

1. OpenGL VS 二维图形：动物图形的顶点化思路

网上聊 OpenGL 和二维图形，第一反应多半是“杀鸡用牛刀”——画一只动物，贴一张 PNG 不就行了？真正动手才发现，当你手头只有一张位图或一段轮廓坐标时，OpenGL 渲染出来的二维图形不仅缩放不糊、旋转不裂，还能继续接到骨骼动画、轨迹追踪里做输入数据。其核心逻辑，是把动物图形拆成一串可编程的顶点送进渲染管线，而不是简单贴图。下文从坐标系换算、轮廓构建、顶点送显一路讲到避坑细节，适合刚接触图形学课程设计、以及想尝试顶点渲染方案的开发者。

2. 坐标系换算与图元选择：二维动物绘制的两个前提

很多人第一次用 OpenGL 画动物，出来的图形要么缺角，要么变形，要么整个偏到屏幕左下角。问题往往不在代码本身，而在坐标系的理解。OpenGL 内部用的是标准化设备坐标（NDC），范围是 -1 到 1，和你脑海里的像素坐标完全是两套体系。这一章先把坐标系敲定，再讲清楚选什么图元来拼轮廓，后面所有顶点数据都建立在上面。

2.1 NDC 坐标与窗口坐标：为什么画屏内图形总差一角

NDC 坐标下，x 轴向右为正，y 轴向上为正，原点在屏幕中心。窗口坐标则相反：y 轴向下，原点在左上角。两条坐标系的差异是初学者翻车的第一重灾区。

我一般把“窗口坐标转 NDC”写成独立函数，每个点都过一遍，而不是在顶点着色器里临时算：

// 把窗口坐标转成 NDC 坐标 // wx, wy 是窗口中的像素坐标，win_w, win_h 是当前窗口的宽高 float to_ndc_x(float wx, float win_w) { return 2.0f * wx / win_w - 1.0f; } float to_ndc_y(float wy, float win_h) { return 1.0f - 2.0f * wy / win_h; // 注意：窗口 Y 轴朝下，所以要反转 }

这段代码的关键是把窗口坐标系里的 Y 轴方向反转。如果直接照搬wy / win_h，图形会上下颠倒，这是最常见的现象。另外要注意：NDC 本身是正方形空间，但窗口往往是长方形，如果没有在顶点数据层面做宽高比校正，一个圆会被拉伸成椭圆。

宽高比的校正一般放在生成顶点数据时完成：

float aspect = (float)win_w / (float)win_h; // 假设原始轮廓点坐标为 raw_x, raw_y // 校正后： float corrected_x = raw_x / aspect; // 保持纵向不变，横向压缩

这段代码放在顶点生成阶段而不是着色器阶段，可以让后续的旋转、缩放计算全部基于统一坐标系，避免在 shader 里反复处理比例问题。需要强调的是：aspect会随窗口尺寸改变，所以窗口大小变化时要重新生成顶点或更新 uniform，否则图形会变形。

2.2 三角形扇：拼接动物轮廓的首选图元

OpenGL 里常见图元有GL_POINTS、GL_LINE_STRIP、GL_TRIANGLES、GL_TRIANGLE_FAN和GL_TRIANGLE_STRIP。二维动物轮廓大多是一个封闭多边形，最稳的选择是GL_TRIANGLE_FAN，因为：

第一，GL_POLYGON在 OpenGL 核心剖面中已经废弃，不能用于现代管线。第二，直接生成三角形列表需要手写大量索引，费时且容易错。三角形扇只用一圈顶点加一个中心点，就能覆盖任意凸多边形，顶点顺序自然而然。

以企鹅身体为例，我生成一圈轮廓点：

#define PI 3.141592653589793f // 生成一个椭圆轮廓上的顶点 // center_x, center_y 为椭圆圆心；rx, ry 为横向和纵向半径 // segments 控制采样密度，值越大轮廓越圆润 void generate_ellipse_vertices(float center_x, float center_y, float rx, float ry, int segments, float *x_out, float *y_out) { for (int i = 0; i <= segments; i++) { float theta = (float)i / segments * 2.0f * PI; // 0 到 360 度 x_out[i] = center_x + rx * cosf(theta); y_out[i] = center_y + ry * sinf(theta); } }

segments参数直接影响轮廓质量：36 个点拼接时棱角明显，200 个以上肉眼基本看不出多边形痕迹。但顶点太多会增加 CPU 到 GPU 的传输量，对二维动物来说 128 个点已经足够圆润。整个GL_TRIANGLE_FAN的顶点顺序是：第一个顶点是中心点，之后按逆时针方向依次放入轮廓点。中心点通常放在多边形的质心附近，这样扇面才会覆盖整个轮廓。

2.3 顶点环绕顺序与正反面剔除：二维场景的隐藏雷区

OpenGL 通过顶点环绕顺序判断三角形的正面与背面。默认规则是：逆时针方向上的点为正面。如果开启GL_CULL_FACE，所有背面三角形会被直接丢弃。这本来是三维渲染的优化手段，但拿到二维图形上经常造成“图形缺了一半”的诡异现象。

我在二维场景中的习惯是：初始阶段不开启剔除，等轮廓确认无误后再打开调试。如果你确实需要开启，请保证所有扇面顶点严格逆时针排列。

// 开启正面剔除的正确示例 glEnable(GL_DEPTH_TEST); // 二维通常不需要，但习惯性保留 glEnable(GL_CULL_FACE); glCullFace(GL_BACK); // 剔除背面 glFrontFace(GL_CCW); // 逆时针为正面

二维图形只有一层，不存在遮挡关系，正常情况下不需要开剔除。如果开了剔除又没注意绕序，动物会变成“半边透明”——这个问题排查起来非常隐蔽，因为画面看起来只是颜色变得奇怪，并不报错。

3. 动物轮廓的三种来源方法：算点、抠边、手描

拿到 OpenGL 的坐标系和图元基础之后，下一个问题是：动物轮廓的顶点数据从哪来？这一步是所有二维绘图工作的分水岭。有人手写坐标点，有人从图片抠边，有人用数学函数拟合，方法不同，最终效果和工作量差异极大。

3.1 解析式拟合：用极坐标生成企鹅轮廓

某些动物的轮廓可以用若干圆弧、椭圆弧拼接出来，比如企鹅、鱼、龟这类形状规整的动物。以企鹅为例，身体是一个竖椭圆，头是一个小圆，嘴部可以用小段圆弧近似。这种方法的优势是顶点位置完全可控、缩放不失真、无需外部资源。

我常用“组合椭圆 + 圆”的方式构造简化企鹅轮廓：

// 生成企鹅轮廓顶点数据 // 身体椭圆：中心(0.0, -0.1)，半径(0.6, 0.9) // 头部圆：圆心(0.0, 0.7)，半径(0.35)——企鹅头部高于身体顶端 // segments 控制每一部分的细腻程度 #define BODY_SEG 64 #define HEAD_SEG 32 void generate_penguin_vertices(float *verts, int *out_count) { int idx = 0; // 第一段：身体（纵向椭圆），从底部起始逆时针绕行 // 注意：为了和头部衔接，身体上端在 th 接近 90 度处截断 for (int i = 0; i <= BODY_SEG; i++) { float th = (float)i / BODY_SEG * PI; // 0 到 180 度，只取上半个圆弧 float x = 0.6f * cosf(th); float y = -0.1f + 0.9f * sinf(th); verts[idx++] = x; verts[idx++] = y; } // 第二段：头部（圆）——闭合到身体上端 // 圆心在 (0.0, 0.7)，半径 0.35；从头顶顺时针回到衔接点 for (int i = 0; i <= HEAD_SEG; i++) { float th = PI - (float)i / HEAD_SEG * PI; // 从左侧半圆到右侧半圆 float x = 0.0f + 0.35f * cosf(th); float y = 0.7f + 0.35f * sinf(th); verts[idx++] = x; verts[idx++] = y; } *out_count = idx / 2; }

这段代码的关键在于：两个弧段要首尾相接，才能让三角形扇覆盖完整轮廓。实际效果是身体和头部之间有轻微的高低不平，添加节点即可修正。解析式拟合的边界约束是：动物形态越复杂，分段函数越难写，解这个的性价比就越低。

3.2 位图轮廓追踪：把像素边界转成顶点序列

如果手里只有一张动物的位图素材，常见做法是先对图像做二值化，灰度阈值以上视为前景、以下视为背景，然后用轮廓追踪算法提取边界点序列。

最简单的方案是“摩尔邻域”或“连通域边界”思路：从第一行第一个前景像素出发，按顺时针方向沿着边界移动，记录每个边界像素坐标。这个算法路径短、代码量不大，但要注意：图像边界坐标的精度是像素级的，直接作为顶点数据时锯齿感明显。

提取后再做一个简化处理——按等距抽稀，比如每 8 个轮廓像素保留 1 个顶点，就能大幅降低顶点数，再配合管线中的抗锯齿或多边形平滑，效果就够看了。

我习惯用下述流程跑位图转顶点：

输入：动物轮廓 PNG（建议白底黑图） 步骤： 1. 二值化：所有灰度大于 128 的像素设为 255，其余设为 0 2. 寻找第一个前景像素，作为起点 3. 沿边界顺时针遍历，输出坐标序列到 txt 文件 4. 按步长 6~8 像素抽稀，得到最终顶点文件

抽稀步长是一个需要反复调的参数。步长太小，顶点过多，渲染性能下降；步长太大，棱角感明显，曲线失真。以企鹅的 512×512 素材为例，原始轮廓约 1800 个点，抽稀到 180 个点左右时，视觉误差基本可忽略。

3.3 矢量路径转换：手绘轮廓的工业化路子

还有一种更可控但需要工具辅助的方式：在矢量绘图软件里手工描出动物轮廓，导出 SVG 路径，再写一个小工具把路径转成 OpenGL 可用的顶点数组。

SVG 里的路径数据长这样：

M 100,100 C 120,80 140,110 150,130 L 160,160 Z

其中M表示起点，C表示三次贝塞尔曲线，L表示直线，Z表示闭合。要正确转换成三角形扇顶点，需要把贝塞尔曲线离散化成线段。常见的做法是固定时间段采样，比如每条贝塞尔曲线按精度分成 20 段，逐点计算坐标存入顶点数组。

这条路径的优势在于：矢量图放大缩小不损细节，而且曲线光滑，顶点数量可以精确控制。缺点是必须有一个可以手工描图的环节，起步成本高。对于做课程设计或静态演示而言，如果不是对轮廓质量有极致要求，手工描图的工作量往往比想象中大得多。

3.4 三种方案如何选：质量、工作量与可控性对比

选型经验：追求效率、又要快速出效果，推荐解析式拟合；素材库里有现成的高清图，走位图追踪；如果动物形态复杂（比如四肢分明的马、鹿），就去手工描矢量再转顶点，这样可控性最强。

4. 从坐标到屏幕：一个企鹅 Demo 的完整渲染链路

轮廓顶点数据准备好了，接下来要走过完整的渲染管线：顶点缓冲、着色器编译、属性指针、绘制循环。这一章用一个企鹅 demo 把整条链路串起来，每一段代码都给出解释和参数含义。

4.1 顶点生成与缓冲区绑定：把坐标送进 GPU 的第一步

按第 3 章的解析式方法生成企鹅轮廓顶点后，先存入一个浮点数组。二维图形只需要 x、y 两个分量，但为了和后续扩展对齐，我用两个分量加一个预留 z 值的方式存储：

// 把顶点数组送入 GPU 的 VBO // vertices 是第 3 章生成的轮廓顶点（每两个 float 为一组坐标） // count 是顶点个数；我们让每个顶点占 2 个 float（x, y），后续扩展可加颜色属性 GLuint vbo, vao; glGenVertexArrays(1, &vao); glBindVertexArray(vao); glGenBuffers(1, &vbo); glBindBuffer(GL_ARRAY_BUFFER, vbo); glBufferData(GL_ARRAY_BUFFER, count * 2 * sizeof(float), vertices, GL_STATIC_DRAW); // 告诉 GPU 如何解析这个缓冲： // location = 0（对应着色器里的 aPos），size = 2（x, y），类型 float // stride = 0（数据紧密排列），offset = 0 glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 0, (void*)0); glEnableVertexAttribArray(0);

glVertexAttribPointer的第二个参数值是 2，因为我们只关心 xy 坐标，不传颜色；如果需要给轮廓加渐变或按区域填充颜色，有两种扩展方式：一种是在顶点属性里增加一个颜色分量，另一种是用 uniform 统一设置整个轮廓颜色。GL_STATIC_DRAW意味着顶点数据不会每帧更新，适用于静态动物轮廓；如果要做动画变形，就改用GL_DYNAMIC_DRAW并在每帧调用glBufferSubData。

4.2 顶点与片段着色器：二维场景下的最小 Shader 对

二维图形的着色器可以比三维场景简单很多：顶点着色器只做一件事——把输入坐标透传到光栅化阶段；片段着色器返回一个固定颜色。下面是最小可用的 shader 对：

// 顶点着色器：version 330 core #version 330 core layout(location = 0) in vec2 aPos; uniform float uAngle; // 旋转角度，单位弧度 void main() { // 二维旋转矩阵，绕原点旋转 mat2 rot = mat2( cos(uAngle), -sin(uAngle), sin(uAngle), cos(uAngle) ); vec2 pos = rot * aPos; gl_Position = vec4(pos, 0.0, 1.0); }

// 片段着色器：version 330 core #version 330 core out vec4 FragColor; uniform vec4 uColor; // 填充颜色，RGBA void main() { FragColor = uColor; }

uAngle初始值为 0，这样第一帧渲染出来的图形是原始轮廓位置；旋转操作放在顶点着色器而不是 CPU 端，是为了避免每帧重新上传顶点数据。uColor控制整体填色，比如企鹅身体设成灰色vec4(0.4, 0.4, 0.5, 1.0)，头部设成深色vec4(0.1, 0.1, 0.15, 1.0)。

编译着色器的过程要点是：查编译状态、打印日志、及时删除。经典的翻车现场是写错layout(location = 0)的索引值，导致属性指针与 shader 接不上，画面白屏但代码不报错。排查方法见第 5 章。

4.3 绘制循环与旋转交互：让动物动起来的三个点

渲染循环的标准结构是：清屏 → 更新 uniform → 绑定 VAO → 绘制 → 交换缓冲区。下面是企鹅 demo 的核心循环：

// 绘制循环：每一帧都重绘 while (!glfwWindowShouldClose(window)) { // 1. 清屏：清成白色背景 glClearColor(0.95f, 0.95f, 0.92f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); // 2. 更新旋转角：每帧增加 0.01 弧度，约 0.57 度 angle += 0.01f; if (angle > 2.0f * PI) angle -= 2.0f * PI; // 3. 设置着色器 uniform glUseProgram(shader_program); glUniform1f(glGetUniformLocation(shader_program, "uAngle"), angle); glUniform4f(glGetUniformLocation(shader_program, "uColor"), 0.3f, 0.4f, 0.5f, 1.0f); // 4. 绘制三角形扇 glBindVertexArray(vao); glDrawArrays(GL_TRIANGLE_FAN, 0, vertex_count); // 5. 交换缓冲，显示当前帧 glfwSwapBuffers(window); glfwPollEvents(); }

第一点：glClearColor在循环外调用一次也行，循环内调用也合法，但要注意它并不立即生效，而是要等glClear执行才真正填色。第二点：旋转角累加要防止浮点溢出，所以我用取模把角度限制在 0~2π 之间。第三点：vertex_count是第 3 章生成顶点后的实际数量，它必须是三角形扇的完整点数量（中心点 + 一圈轮廓点），数量写错会出现轮廓残缺或额外的顶点被填充。

5. 绘制二维动物常见问题的排查与避坑

这章是血泪经验汇总。以下每一条都是实际项目中反复出现的问题，按“现象 → 原因 → 解决”记录，可以直接对照排查。

5.1 现象：窗口纯黑或纯白，没有任何动物图形

通常不是 shader 报错（控制台可能只字不提），而是属性指针的 location 对不上。顶点 shader 里声明的是layout(location = 0) in vec2 aPos，但 CPU 端glVertexAttribPointer的第一个参数写成了 1，两个索引不匹配，GPU 不会加载任何顶点数据。解决方法是：统一 location 值，写好代码后打印glGetUniformLocation的结果做一次核对。

5.2 现象：图形整体挤在窗口角落

这是窗口坐标和 NDC 坐标混用。顶点数据直接用像素坐标送入 GPU，没有经过第 2 章的to_ndc_x/to_ndc_y换算，GPU 只接受 -1 到 1 的范围，像素坐标 500 会被挤到角落。解决方法是：在生成顶点数据时就把所有坐标转换到 NDC 空间，或者在 shader 里加一个uScale和uOffsetuniform 做实时校正。

5.3 现象：开启GL_CULL_FACE后，图形像“被啃掉一块”

原因没有悬念——顶点环绕顺序是顺时针，被当成背面剔除了。二维渲染建议直接不开启GL_CULL_FACE；如果非要开，就检查所有轮廓点的生成方向，确保逆时针，或者手动调用glFrontFace(GL_CW)绕转顺序。

5.4 现象：窗口拉伸后，动物从圆变成椭圆

经典的宽高比问题。窗口长宽比变了，但顶点坐标没有同步适配。解决方法是：注册glfwSetFramebufferSizeCallback回调，窗口尺寸变化时更新aspect并重新校正顶点数据；如果懒得重新生成顶点，就给顶点 shader 传入uAspectuniform，在 shader 里做除法校正，效果一样但少一次 CPU-GPU 数据传输。

5.5 现象：三角形扇填充时，轮廓内部出现奇怪的空白

原因一般是中心点不在多边形的质心。三角形扇的覆盖区域是中心点与相邻两个轮廓点构成的三角形拼接，如果中心点靠在多边形边缘，就会在对面一侧留下空隙。解决方法是：计算轮廓顶点的包围盒，取中心作为扇心，或直接把所有顶点做一次质心运算后填入第一个位置。质心计算方式：center_x = sum(x[i]) / n，center_y = sum(y[i]) / n，注意这里要求轮廓点是均匀分布的，不均匀时质心会偏移，偏差可以通过加权平均修正。

6. 一个实用技巧：先开线框模式验证轮廓，再填色

所有动物轮廓项目里，最容易出问题的不是渲染本身，而是顶点数据是否符合预期。把坐标打印出来看不够直观，我习惯在绘制阶段用glPolygonMode把渲染结果切到线框模式，一帧就能看清轮廓是否完整、是否有交叉线。

// 切换线框模式：只画三角形的边，不填色 glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glDrawArrays(GL_TRIANGLE_FAN, 0, vertex_count); // 切回填充模式 glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); glDrawArrays(GL_TRIANGLE_FAN, 0, vertex_count);

GL_FRONT_AND_BACK指定所有三角形都按线框模式绘制；GL_LINE是线框模式，GL_FILL恢复正常填充。这段代码放在实际绘制之前，先用线框跑一次，观察轮廓是否流畅。如果线段交叉，说明顶点顺序有问题；如果线段之间有缺口，说明扇形中心点位置不对；如果线段变形，多半是宽高比没有校正。

配合线框模式，我另一个习惯是把segments临时调到很小的值，比如 12 个顶点，这样轮廓结构一目了然，能非常直观地看到顶点绕序。调试完之后把值改回 128，再恢复填充模式做正式渲染。

从那以后，每次接二维动物绘制任务，我都会强制在第一步走一遍：先生成轮廓 → 切线框看整体 → 检查绕序 → 打开填充。这套流程在模拟项目 X 里救过一次图形大面积翻转，也在另一个课程设计里避免了三角形缺失。希望帮到你。

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