前阵子给图形学入门小组梳理分形题目发现科赫三角形出现频率最高。这个项目正好同时踩中了三个经典需求用 C 实现递归算法、用 OpenGL 把结果画出来、还要在老牌的 Dev-C 环境里跑通。很多人卡在环境上更多的人卡在“递归到底怎么写”上。这篇文章就把整条路完整走一遍从科赫三角形的数学规则讲起到 Dev-C 里最顺滑的 OpenGL 配置方式再到能直接跑起来的代码。适合正在学 C 想做图形学小项目的人、做课程设计的学生、以及单纯想看看分形怎么从一条线段变出漫天雪花的好奇选手。1. 科赫三角形到底是什么先拆透递归分形的核心逻辑1.1 一条线段如何变成永远画不完的雪花科赫雪花的原始定义来自瑞典数学家科赫在 1904 年给出的连续但处处不可微曲线后来人们把三条这样的曲线首尾相接得到了封闭的科赫三角形。很多资料说“雪花曲线”其实形状并不像真实雪花准确说是一个六角星形状的封闭图形但这个名字流传太广大家都这么叫。核心变换非常简单对一个线段重复做三件事把线段三等分去掉中间那一小段用两条长度相等的线段拼接出“凸起”。每执行一轮原来的 1 条线段就变成 4 条长度变成原来的 4/3 倍。在等边三角形的三条边上同时做这个变换第一轮得到六角星第二轮得到 48 条小线段第三轮是 192 条……理论上无限迭代周长趋向无穷而面积却趋向一个有限值这是分形最反直觉的地方也是它被反复拿来讲课的原因。分形fractal这个概念的通俗解释是“整体与局部自相似”。你随便放大雪花曲线的一小段看到的依然是被三等分、凸起、再细分的模式。生活里类比西兰花掰下一小朵和整棵西兰花形状几乎一样再掰更小一簇还是像。科赫曲线就是这种自相似结构的数学版本。1.2 递归的三条铁律三等分、旋转 60 度、四段继续实现科赫三角形不需要复杂的数学只需要一个递归函数。我习惯把递归的“契约”先写清楚如果递归深度为 0直接在起点和终点之间画一条线段如果深度大于 0则把线段三等分算出两个分割点 p1、p2以 p1 为旋转中心把从 p1 指向 p2 的向量旋转 60 度得到顶点 p3依次对 (起点, p1)、(p1, p3)、(p3, p2)、(p2, 终点) 四段递归调用深度减一。用伪代码写出来是function koch(a, b, depth): if depth 0: drawLine(a, b) return dx (b.x - a.x) / 3 dy (b.y - a.y) / 3 p1 (a.x dx, a.y dy) p2 (a.x 2 * dx, a.y 2 * dy) p3 rotate(p2, around p1, angle60°) koch(a, p1, depth - 1) koch(p1, p3, depth - 1) koch(p3, p2, depth - 1) koch(p2, b, depth - 1)为什么是 60 度因为等边三角形的内角是 60 度旋转后的两条线段和原线段构成一个近似等边三角形的折线结构。若把角度改成负 60 度凸起会向内凹陷得到的是“内翻”版本科赫曲线。不少初学者在这里容易做反画出来像花瓣朝里弯也知道哪里出了问题。1.3 为什么这个场景天生适合递归而不是循环科赫曲线的数学定义本身就是递归的第 n 层图形由第 n-1 层图形经过同样变换得到。递归函数在结构上直接对应这种定义代码几乎不需要额外设计状态。循环也能写但需要用一个数组反复遍历所有线段、逐个替换成四段每次迭代都要动态扩数组代码既不直观也容易出错。递归写法把“对每条线做什么”与“如何组织层级关系”两件事彻底分开。分形递归深度一般控制在 5 到 7 之间。即使开到 7递归调用层数也只是 7 层离系统栈上限很远不用担心爆栈。真正爆的不是栈而是线段数量深度 n 时总线段数是 3 乘以 4 的 n 次方。深度 5 是 3072 条深度 6 是 12288 条深度 7 是 49152 条深度 8 直接飙到 196608 条。这个数字在后面讲性能时会非常关键。2. Dev-C 配置 OpenGL 的完整流程与避坑记录2.1 为什么选 Dev-C以及它和 VSCode、Visual Studio 的差异Dev-C 5.11Orwell Dev-C 5.11基于 MinGW-w64/gcc安装包小、界面直接、对新人不友好但极具迷惑性的两个字——“简单”。它默认自带 g 编译器写 C 控制台程序零门槛。OpenGL 在 Windows 上的底层库 opengl32.dll 系统自带理论上不需要额外装什么东西但你要自己创建窗口并处理消息循环就会很痛苦。所以实际做图形学小项目时大家一般用 GLUT 或 freeglut 这套工具库把窗口、键盘、鼠标、菜单等杂活都接管了。Dev-C 下配 freeglut只需要复制几个文件、在链接器里加几个参数比 VSCode 里折腾 tasks.json 和 launch.json 直观不少。Visual Studio 虽然天然支持 OpenGL但建项目、装模板的流程对只想画个雪花的人来说反而更厚重。如果你已经习惯 VSCode那当然可以用 VSCode 配 C/C 环境编译命令也没区别。这篇文章之所以主写 Dev-C是因为课程设计或新手入门环境里它依然大量存在并且它处理 OpenGL 链接的方式非常简单。2.2 freeglut 的选择老 GLUT 还是新版 freeglut经典的 GLUT 3.7 已经停止维护多年在较新的操作系统和 MinGW 编译器下偶尔出现头文件兼容问题。freeglut 是它的开源替代品接口几乎完全兼容API 名字都不变文档里查 GLUT 的老函数照样能用。所以我的建议是直接下载 freeglut具体版本选 freeglut 3.0.0 的 MinGW 包。注意 Dev-C 5.11 自带的是 32 位编译器下载时最好认准 32 位版本如果错下了 64 位库文件链接时会报一堆 undefined reference非常难排查。下载解压后包内通常有 include/GL 和 lib 两个目录。include/GL 下面有 freeglut.h 和 glut.h 兼容头文件lib 下面有 libfreeglut.a 和 freeglut.dll。从这些文件名就能看出头文件负责告诉编译器函数长什么样静态库 libfreeglut.a 负责在链接时把函数调用绑定到动态库而 freeglut.dll 是真正在运行时刻被调用的动态库。理解这三层关系后面的报错就能自己定位。2.3 具体配置步骤复制文件、设置链接器、写验证程序假设 Dev-C 已经安装好安装目录通常是 C:\Dev-Cpp下面是完整步骤把 freeglut.h以及包内 GL 目录下的 glut.h复制到 C:\Dev-Cpp\include\GL 目录。如果 include 下没有 GL 文件夹手动新建一个。这一步决定了 #include GL/glut.h 能不能被找到。把 libfreeglut.a 复制到 C:\Dev-Cpp\lib 目录。这是链接器搜索库文件的默认位置之一。把 freeglut.dll 复制到一个能被运行时找到的位置。最稳妥的做法是复制到编译生成的 exe 文件旁边比如项目目录或项目下的 bin 目录。你要是嫌麻烦复制到 C:\Windows\System32 也能跑但我更建议放在 exe 同目录避免系统目录被塞乱。在 Dev-C 里新建一个 Console Application 项目打开“项目”-“项目属性”切到“参数”选项卡在“链接器”输入框中填入-lopengl32 -lglu32 -lfreeglut这三个参数的含义分别是链接 OpenGL 主库、OpenGL 实用库 GLU、以及 freeglut。Dev-C 的本质是调用 gcc/g 做编译和链接所以这些参数和命令行写法一致。关闭弹窗写一个最小验证程序#include GL/glut.h #include cmath void display() { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0f, 1.0f, 1.0f); glBegin(GL_TRIANGLES); glVertex2f(-0.8f, -0.5f); glVertex2f(0.8f, -0.5f); glVertex2f(0.0f, 0.5f); glEnd(); glutSwapBuffers(); } int main(int argc, char** argv) { glutInit(argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize(800, 600); glutCreateWindow(OpenGL Test); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-1.5, 1.5, -1.5, 1.5, -1.0, 1.0); glutDisplayFunc(display); glutMainLoop(); return 0; }如果弹出窗口并显示一个白色三角形环境就通了。这一步不通过后面的雪花一个像素都出不来所以别跳过。2.4 环境层常见报错一览以下是我在多个同学电脑上见到过的高频报错这里先列环境相关的几条编辑器提示 glutInit 未定义头文件路径没配对。检查 include/GL 有没有正确放置文件以及代码里写的是 #include GL/glut.h 还是 #include GL/freeglut.h路径要保持一致。链接时报 undefined reference to glutInit说明 -lfreeglut 没写或库文件名对不上。检查 lib 目录里是 libfreeglut.a 还是 glut32.lib以及链接参数是否写了对应用户的名字。编译通过但运行时提示缺少 freeglut.dlldll 不在 exe 旁边的目录。找到生成目录复制过去即可。程序一打开就闪退但没有编译错误大概率是 32 位编译器配了 64 位的库。确认下载版本。这些坑都不难但第一次遇到时很浪费时间尤其是 32/64 位不匹配的问题报错信息又乱又长容易劝退。3. 手写递归与 OpenGL 渲染核心代码逐行拆解3.1 用最轻量的数据结构承载分形线段画科赫三角形不需要复杂的类体系一个点结构体加一个 vector 就够用#include vector #include cmath struct Point { double x, y; }; std::vectorPoint lines; int depth 5;lines 里每两个连续元素代表一条线段的起点和终点比如 lines[0] 和 lines[1] 组成第一条线段lines[2] 和 lines[3] 组成第二条。为什么不在递归函数里直接调用 glVertex2f 画线因为那样每次重绘都要重新递归而且将来想调整颜色、做动画、改深度都更麻烦。先把所有端点算好存进数组再统一绘制逻辑更清晰。3.2 科赫递归函数每一行都在干什么核心函数如下void koch(Point a, Point b, int n) { if (n 0) { lines.push_back(a); lines.push_back(b); return; } double dx b.x - a.x; double dy b.y - a.y; Point p1 { a.x dx / 3.0, a.y dy / 3.0 }; Point p2 { a.x dx * 2.0 / 3.0, a.y dy * 2.0 / 3.0 }; Point p3; p3.x p1.x (p2.x - p1.x) * 0.5 - (p2.y - p1.y) * sqrt(3.0) / 2.0; p3.y p1.y (p2.x - p1.x) * sqrt(3.0) / 2.0 (p2.y - p1.y) * 0.5; koch(a, p1, n - 1); koch(p1, p3, n - 1); koch(p3, p2, n - 1); koch(p2, b, n - 1); }逐步拆开看。dx、dy 是线段 b-a 的方向向量三分点的公式就是向量起点加上方向向量的 1/3 和 2/3。p3 的计算本质上是把向量 (p2-p1) 旋转 60 度再用旋转结果加上 p1。旋转公式来自二维旋转矩阵向量旋转角度 θ 后x 分量等于 xcosθ - ysinθy 分量等于 xsinθ ycosθ。因为 θ 固定为 60 度cos60 是 0.5sin60 是 sqrt(3)/2所以代码里直接用常数没有调用 cos 和 sin 函数。这样写比每层递归都算一遍三角函数省而且对新手来说常数更容易对照公式检查。最后四行递归调用对应四条新线段。注意顺序a 到 p1、p1 到 p3、p3 到 p2、p2 到 b刚好首尾相接。顺序反了可能会导致线段交叉或者图形混乱。3.3 组装三条边让三角形坐标居中且对称有了对任意一条线段的递归规则科赫三角形就等于对初始等边三角形的三条边分别递归。我选的中心在原点、半径 1 的等边三角形顶点void build() { lines.clear(); double r 1.0; Point A { 0.0, r }; Point B { -r * sqrt(3.0) / 2.0, -r / 2.0 }; Point C { r * sqrt(3.0) / 2.0, -r / 2.0 }; koch(A, B, depth); koch(B, C, depth); koch(C, A, depth); }为什么这样选点三个顶点均匀分布在原点周围雪花整体居中任何尺寸的窗口都能完整显示。半径 1 的三角形外接圆半径也是 1配合后面投影范围设置刚好留出视觉余量。3.4 OpenGL 绘制、窗口比例、交互与动画显示回调里做的事很简单清屏、设置线条颜色、把 lines 里的点成对传给 OpenGL 画线段void display() { glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.6f, 0.85f, 1.0f); glBegin(GL_LINES); for (size_t i 0; i lines.size(); i 2) { glVertex2d(lines[i].x, lines[i].y); glVertex2d(lines[i 1].x, lines[i 1].y); } glEnd(); glutSwapBuffers(); }投影部分必须用心。如果不设置投影矩阵顶点坐标会被当作用户坐标系直接映射到窗口而且不会自动适应宽高比。我的做法是在 reshape 回调里根据窗口宽高设定一个对称范围void reshape(int w, int h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); double aspect (double)w / (h 0 ? 1 : h); glOrtho(-aspect * 1.5, aspect * 1.5, -1.5, 1.5, -1.0, 1.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); }这里坐标范围是横轴 -aspect1.5 到 aspect1.5纵轴 -1.5 到 1.5。宽窗口时横向范围自动变大图形不会被拉伸变形。交互我加了两个键盘的加号减号调整递归深度timer 不断旋转模型让雪花动起来。void keyboard(unsigned char key, int x, int y) { if (key ) { if (depth 7) { depth; build(); } } if (key -) { if (depth 0) { depth--; build(); } } glutPostRedisplay(); } void timer(int value) { static float angle 0.0f; glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glRotatef(angle, 0.0f, 0.0f, 1.0f); angle 0.5f; glutPostRedisplay(); glutTimerFunc(16, timer, 0); }main 函数把这些串起来int main(int argc, char** argv) { glutInit(argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize(800, 600); glutCreateWindow(Koch Snowflake in Dev-C); glClearColor(0.05f, 0.05f, 0.08f, 1.0f); build(); glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutTimerFunc(16, timer, 0); glutMainLoop(); return 0; }glutMainLoop 一旦进入就不再返回它内部循环处理窗口事件、定时器、绘制回调。所以不需要自己写 while 循环。4. 运行过程实录与高频问题排查表4.1 我第一次跑通时踩过的三个真实问题第一版代码写完后第一次运行只看到一条横跨窗口的斜线完全没有雪花形状。排查发现问题出在 build 的递归里我在深度为 0 时只 push 了起点 a漏掉了终点 b导致线段数目减半图形被拆得七零八落。加回终点后图形完整了但窗口只显示雪花的一角原因是投影范围写成了固定 -1.5 到 1.5窗口宽高比又比较大横向上图形被裁掉。改成 reshape 里按 aspect 动态计算后有解了。第三个问题最诡异动画旋转后雪花在窗口边缘不断“缺角”。后来发现 timer 回调里只执行了 glRotatef但 display 里的 glColor3f 和 glClear 没问题问题出在投影矩阵被动了。我的 reshape 每次设置 GL_PROJECTION 并 glLoadIdentity但 timer 设置 GL_MODELVIEW 时没有先重置旧变换导致旋转矩阵和残留矩阵叠加。解决办法就是在 timer 的绘制开始前执行 glLoadIdentity()把模型视图矩阵清干净。4.2 高频问题速查表下面是这段时间收集到的最高频问题按现象、原因、解决办法整理成表方便你遇到时直接查现象可能原因解决办法编译报 glutInit 未定义头文件路径不对或没复制检查 include/GL 目录确认代码 include 路径一致undefined reference to glutInit 等链接库没加或库文件缺失链接器加 -lfreeglut确认 lib 目录存在文件运行时提示缺少 freeglut.dll动态库不在 exe 目录把 dll 复制到生成 exe 的同目录黑屏且没有任何图形投影矩阵不对或顶点坐标范围超限用 glOrtho 设一个足够大的坐标范围图形被拉伸变形没有考虑宽高比reshape 里用 aspect 计算 glOrtho 参数尖角方向凹进去了旋转角用了负 60 度检查 p3 公式中 sqrt(3)/2 的符号深度到 8 画面极卡线段数指数爆炸限制最大深度为 6 或 7窗口闪烁明显没有启用双缓冲glutInitDisplayMode 加 GLUT_DOUBLE旋转动画后图形残影模型视图矩阵没重置每次绘制前 glLoadIdentity()图形颜色没变化忘了调用 glColor 或 glClear 颜色太深在 glBegin 前设置颜色4.3 调试时最值得养成的习惯调试分形程序我强烈建议在 build 之前先临时打印几个关键坐标比如初始三角形的三个顶点、第一次递归产生的三条顶点坐标。如果顶点坐标看起来分布在预期范围说明递归逻辑基本正确问题大概率出在窗口投影上。另一个技巧是调 glPointSize(5)在画线段之前先用 GL_POINTS 把所有点画一遍。这样你能直观看到端点分布尤其是递归末端是否闭合。第一次看科赫雪花的人很难通过线段的错位分辨出递归漏点但点一下就清楚了。最后递归深度务必从 1 开始逐级往上加。深度 1 就是六角星深度 2 就明显复杂起来深度 5 已经很漂亮。直接从 7 开始很容易在图形还没设计好时先被密密麻麻的线条淹没反而不利于定位问题。5. 从科赫雪花延伸开交互优化与更多分形玩法5.1 改两个参数一条递归函数变成无数分形科赫递归函数里真正影响形状的只有两个参数分割份数和旋转角度。把三等分改成四等分、在中间两段上面同样做凸起就得到另一种分形把旋转角从 60 度改成 90 度、45 度图形会从“雪花”逐渐变成“珊瑚”“海马”形状。很多人以为分形必须套固定模板其实理解了递归之后你会发现改变一个参数就能探索出自己的图案。我试过把旋转角度改成 80 度生成的结果像带刺的海胆改成 30 度之后又像锯齿波组成的围栏。这种试错玩法特别适合用来加深对递归过程的理解比硬啃教材里的定义有效得多。5.2 按递归深度着色和鼠标拖拽旋转想让雪花更有层次可以在递归函数里加一个深度参数传入当前颜色信息。具体做法是在 koch 函数进入递归时用一个全局变量记录当前深度在 n 0 时根据深度给线段设定不同颜色。深度越小线条越靠外用暖色深度越大线条越密用冷色。一个简单的映射if (n 0) { glColor3f((depth - n) * 0.2f, 0.5f n * 0.1f, 1.0f); }鼠标拖拽旋转也不难用 glutMotionFunc 注册一个回调在回调里记录鼠标位移差换算成旋转角度更新全局变量。这部分扩展对理解事件循环很有帮助而且做出来很有成就感。5.3 性能边界与继续进阶的方向这个实现本质上用的是 OpenGL 1.1 固定管线的立即模式每条线段调用两个 glVertex2d。性能瓶颈不是递归本身而是顶点数据的传输和状态切换。深度 6 时 12288 条线段一帧能稳定 60 帧以上深度 7 是 49152 条线段肉眼能感觉到压力再往上就明显掉帧。如果想继续深入两个方向比较推荐一是把线段端点一次性打包进 VBO用现代 OpenGL 管线绘制性能可以提升一个量级二是不画线改成填充科赫三角形的内部区域那需要研究多边形镂空和顶点绕序。这些内容就不是一篇入门篇文章能装下的了但到那种程度你已经从“照着写代码”变成了“自己设计图形程序”。最后再分享两个我实际跑这套代码时觉得好用的细节。如果你觉得雪花线条太细、看不清细节在 display 里加一行 glLineWidth(2.0) 效果立刻不一样。背景色尽可能用深色比如 RGB 分别为 0.05、0.05、0.08 的深蓝黑配合淡蓝色线条视觉上比纯黑底更舒服。深度我日常默认调到 5既保留清晰的轮廓又不会因为线段太密导致线条重叠糊成一片。这个项目做完你对 C 递归、OpenGL 窗口程序和分形算法的理解就能串成一条线了。