简介这份资源聚焦于利用OpenGL实现毛笔字渲染的算法面向具备一定图形学基础与C编程经验的开发者尤其是对非真实感渲染、书法模拟或粒子特效感兴趣的技术人员。它解决的是如何在实时图形环境中还原毛笔笔触的粗细变化、墨迹扩散与运笔轨迹等核心问题属于图形学与艺术效果交叉的进阶实践。压缩包共37个文件约840KB包含5个cpp源文件与6个h头文件构成主要逻辑另有9个bmp与3个jpg提供纹理素材配合ico、rc等资源文件及vc工程配置整体结构完整可直接编译运行。目前已有367人学习下载说明该算法在相关技术圈内具备一定参考价值。读者可从中获取毛笔笔触建模思路、OpenGL纹理与混合渲染技巧以及一套可运行的VC示例工程便于在此基础上二次开发或移植到其他图形框架中。1. 用 OpenGL 写毛笔字从一笔“飞白”说起如果你试过在屏幕上用鼠标画一条线然后试图让它看起来像毛笔写出来的大概率会得到一根粗细均匀、边缘锐利的“铁丝”。这不是你手抖而是默认的 OpenGL 画线逻辑根本不理解毛笔的脾气。毛笔笔迹的核心在于笔锋的提按导致笔迹宽度动态变化加上墨汁在宣纸上的扩散与枯笔产生的飞白效果。这套利用 OpenGL 写毛笔字的算法解决的正是把鼠标轨迹转化为带有笔锋、枯笔和墨韵的实时渲染问题。它适合图形学初学者理解几何着色器与纹理混合也适合想给绘图应用加入书法笔触的开发者。我拆过不少类似项目很多只是简单根据速度改线宽但真正能模拟出“捺”的粗细变化和“撇”的收锋需要从顶点生成到片元着色的完整链路设计。2. 笔锋生成的几何逻辑从轨迹点到三角带2.1 为什么不能直接用 GL_LINESOpenGL 的GL_LINES或GL_LINE_STRIP在大多数驱动实现里线宽支持非常有限很多现代 GPU 甚至只支持 1 像素线宽。即便用glLineWidth设定了宽度线段的连接处是平头或圆头无法表达毛笔那种一侧光滑一侧毛糙的质感。更致命的是线宽是常量无法沿路径变化。所以必须把轨迹点扩展成三角形带Triangle Strip每个轨迹点根据压力或速度计算出左右两个偏移顶点再由这些顶点构成连续的四边形条带。常见做法是维护一个点列表每次鼠标移动时取最后两个点计算法线方向然后向两侧扩展。2.2 用几何着色器动态扩宽路径如果不想在 CPU 端每帧重建顶点缓冲可以用几何着色器Geometry Shader在 GPU 上完成扩宽。输入是GL_LINES的相邻两个顶点输出是一个三角带。下面是一个简化的几何着色器示例它根据传入的pressure属性决定笔迹宽度。#version 330 core layout (lines) in; layout (triangle_strip, max_vertices 4) out; in float vPressure[]; out vec2 vTexCoord; uniform float uBaseWidth; uniform vec2 uViewportSize; void main() { vec2 p0 gl_in[0].gl_Position.xy; vec2 p1 gl_in[1].gl_Position.xy; vec2 dir normalize(p1 - p0); vec2 normal vec2(-dir.y, dir.x); // 根据压力计算实际宽度压力越大越宽 float w0 uBaseWidth * vPressure[0]; float w1 uBaseWidth * vPressure[1]; // 将像素宽度转换到 NDC 空间 vec2 offset0 normal * w0 / uViewportSize * 2.0; vec2 offset1 normal * w1 / uViewportSize * 2.0; // 生成四个顶点构成四边形 gl_Position vec4(p0 offset0, 0.0, 1.0); vTexCoord vec2(0.0, 0.0); EmitVertex(); gl_Position vec4(p0 - offset0, 0.0, 1.0); vTexCoord vec2(0.0, 1.0); EmitVertex(); gl_Position vec4(p1 offset1, 0.0, 1.0); vTexCoord vec2(1.0, 0.0); EmitVertex(); gl_Position vec4(p1 - offset1, 0.0, 1.0); vTexCoord vec2(1.0, 1.0); EmitVertex(); EndPrimitive(); }逻辑说明vPressure是从顶点着色器传过来的压力值通常由鼠标移动速度映射而来——速度快则压力小笔迹细模拟提笔速度慢则压力大笔迹粗模拟按笔。uViewportSize用于把像素宽度换算到 NDC 坐标否则在不同分辨率下笔迹粗细会不一致。vTexCoord的 y 分量从 0 到 1后续在片元着色器里可以用来做边缘羽化或飞白纹理采样。参数uBaseWidth是基础宽度一般设 10 到 30 像素根据画布大小调整。2.3 顶点属性设计与数据上传CPU 端需要为每个轨迹点准备位置和压力值。压力值不能直接用鼠标速度因为速度抖动很大容易导致笔迹忽粗忽细。我一般会做一个简单的滑动平均滤波窗口大小取 5 到 8 个采样点。下面是一个 C 侧的数据准备片段。struct StrokePoint { float x, y; // 屏幕坐标 float pressure; // 0.0 ~ 1.0 }; std::vectorStrokePoint points; // 鼠标移动回调中 void onMouseMove(float x, float y) { static float lastX x, lastY y; float dx x - lastX; float dy y - lastY; float speed sqrt(dx*dx dy*dy); // 速度映射到压力速度越快压力越小 float rawPressure 1.0f - std::min(speed / 50.0f, 1.0f); // 滑动平均滤波 static std::dequefloat pressureWindow; pressureWindow.push_back(rawPressure); if (pressureWindow.size() 6) pressureWindow.pop_front(); float smoothPressure 0.0f; for (float p : pressureWindow) smoothPressure p; smoothPressure / pressureWindow.size(); points.push_back({x, y, smoothPressure}); lastX x; lastY y; // 上传到 VBO这里省略具体 glBufferSubData 调用 }参数说明speed / 50.0f中的 50 是速度归一化系数屏幕像素每秒移动 50 像素时压力降到最低。这个值需要根据实际画布尺寸和鼠标灵敏度调整太小会导致笔迹变化不明显太大则稍微一动就断线。滑动平均窗口取 6 是在响应速度和稳定性之间的折中窗口太大笔迹会滞后太小则滤波效果差。3. 飞白与墨韵片元着色器的纹理混合3.1 飞白纹理的生成与采样飞白是毛笔快速划过纸面时墨汁未完全覆盖形成的丝丝白痕。用程序化生成飞白纹理比较麻烦常见做法是预生成一张噪声纹理或者用多个正弦波叠加。我一般会生成一张 256x256 的灰度图里面是横向拉伸的柏林噪声然后在片元着色器里根据压力值混合。压力越低飞白越明显。#version 330 core in vec2 vTexCoord; in float vPressure; out vec4 FragColor; uniform sampler2D uPaperTex; // 宣纸纹理 uniform sampler2D uFeibaiTex; // 飞白噪声纹理 uniform vec3 uInkColor; void main() { // 飞白强度压力越小飞白越强 float feibaiAmount 1.0 - vPressure; // 采样飞白纹理取红色通道 float noise texture(uFeibaiTex, vTexCoord * vec2(1.0, 0.3)).r; // 边缘羽化vTexCoord.y 在 0 和 1 附近时透明度降低 float edgeAlpha smoothstep(0.0, 0.15, vTexCoord.y) * smoothstep(1.0, 0.85, vTexCoord.y); // 飞白区域透明度降低 float alpha edgeAlpha * (1.0 - feibaiAmount * noise * 0.8); // 混合宣纸底色 vec3 paperColor texture(uPaperTex, gl_FragCoord.xy / vec2(800, 600)).rgb; vec3 finalColor mix(paperColor, uInkColor, alpha); FragColor vec4(finalColor, 1.0); }逻辑说明vTexCoord.y从 0 到 1 对应笔迹的横向边缘smoothstep让边缘 15% 的区域逐渐透明模拟笔锋的圆润感。飞白纹理的采样坐标把 y 方向压缩到 0.3是为了让噪声沿笔迹方向拉长更像毛笔的枯笔痕迹。feibaiAmount直接由压力反推压力为 1 时飞白完全消失压力为 0 时飞白最强。uInkColor一般设为深灰色而非纯黑纯黑在宣纸底色上会显得生硬。3.2 墨色扩散的简单模拟真实毛笔字在宣纸上会有轻微晕染边缘不是锐利的。可以在片元着色器里对 alpha 再做一次模糊但实时模糊开销大。更省事的办法是在笔迹边缘叠加一个低透明度的外扩三角形带或者用discard配合噪声做不规则边缘。我试过在几何着色器里多输出一圈稍微宽一点、透明度更低的四边形效果尚可但顶点数翻倍。如果对性能不敏感可以用后处理模糊但要注意只模糊笔迹区域别把整个画面糊了。3.3 混合模式与渲染顺序毛笔字通常是黑墨写在白纸上混合模式用普通的 alpha 混合即可。但如果要模拟不同颜色的墨或者叠加多笔需要注意渲染顺序。后画的笔迹应该覆盖先画的所以按绘制顺序渲染就行。如果用了深度测试记得关闭深度写入否则后面的笔迹会被前面的挡住。我一般直接glDisable(GL_DEPTH_TEST)因为这是 2D 绘制场景。4. 避坑与排查那些让我重写三遍的细节4.1 笔迹在拐角处出现断裂或重叠现象快速画一个锐角时拐角处三角形带出现缝隙或者墨色堆积成黑点。原因相邻两个线段扩展出的四边形在拐角处没有共享顶点法线方向突变导致缝隙如果重叠过多则 alpha 混合叠加变黑。解决在拐角处插入一个圆形或方形的“关节”图元或者用斜接miter join算法计算拐角顶点。简单做法是在每个轨迹点位置额外绘制一个小的四边形大小等于该点的笔宽这样拐角自然被填充。注意这个关节的 alpha 也要和笔迹一致否则会看到明显的圆点。4.2 压力值抖动导致笔迹粗细不均现象慢慢画线时笔迹宽度仍然一跳一跳的。原因鼠标采样率有限相邻两个点的速度计算误差大尤其慢速移动时 dx 和 dy 很小除法结果不稳定。解决除了滑动平均还可以对压力值做低通滤波或者直接用轨迹点的累积距离来映射压力而不是瞬时速度。累积距离的映射更平滑但无法表达“提笔”的快速变化。我一般会混合两者短窗口速度加长窗口距离按 7:3 加权。4.3 高分辨率下笔迹变细或消失现象在 4K 屏幕上同样的uBaseWidth值笔迹看起来比 1080p 细很多。原因几何着色器里把像素宽度转换到 NDC 时uViewportSize没有随窗口大小更新或者用了固定的视口尺寸。解决在窗口大小回调里更新uViewportSize并且确保glViewport设置正确。另外如果用了高 DPI 缩放还要把逻辑像素和物理像素区分开uBaseWidth应该基于物理像素计算。4.4 飞白纹理在笔迹上重复感太强现象长笔画上飞白图案明显周期性重复。原因飞白纹理的采样坐标vTexCoord在每条线段上都是从 0 到 1导致每条线段都完整采样一遍纹理。解决不要用线段局部的vTexCoord而是用轨迹的累积弧长作为纹理坐标的 u 分量。在 CPU 端计算每个点的累积距离传入顶点属性几何着色器里插值后传给片元着色器。这样整条笔迹的飞白是连续变化的不会重复。4.5 性能瓶颈顶点数爆炸现象画一条长线后帧率骤降。原因每个轨迹点扩展成 4 个顶点如果鼠标移动快一秒产生几百个点顶点数迅速上万。解决在 CPU 端做轨迹简化比如 Douglas-Peucker 算法在曲率小的地方合并点。另外已经画完的笔迹可以烘焙到一张纹理上不再每帧重新渲染。我一般会维护一个“当前笔迹”的 VBO抬笔后把笔迹渲染到背景纹理然后清空 VBO。这样无论画多长实时渲染的顶点数只和当前笔画有关。5. 进阶技巧用噪声纹理控制笔锋走向前面说的飞白是用噪声控制透明度但毛笔的笔锋还有方向性——写“横”的时候笔毛是横向铺开的飞白也是横向的写“竖”的时候则相反。要模拟这个效果需要让飞白纹理的采样方向跟随笔迹方向旋转。可以在几何着色器里把笔迹方向dir传给片元着色器然后在片元着色器里旋转纹理坐标。// 在几何着色器中输出方向 out vec2 vDirection; // ... vDirection dir; // 单位向量 // 在片元着色器中旋转采样坐标 vec2 rotatedCoord vec2( dot(vTexCoord, vec2(vDirection.x, -vDirection.y)), dot(vTexCoord, vec2(vDirection.y, vDirection.x)) ); float noise texture(uFeibaiTex, rotatedCoord * vec2(1.0, 0.3)).r;这样飞白纹理始终沿着笔迹方向拉伸写横和写竖的飞白方向自然不同。参数上旋转后的坐标缩放系数vec2(1.0, 0.3)可以调整y 方向压缩得越厉害飞白越细长。我试过 0.2 到 0.5 之间的值0.3 左右比较像真实毛笔。另一个技巧是用两张飞白纹理一张高频一张低频按压力值混合。压力大时主要用低频纹理飞白少而大块压力小时高频纹理占主导飞白细密。这样枯笔的层次感更强。实现上就是多一次纹理采样和一次mix开销可以接受。验证方法很简单画一个“永”字看八个基本笔画是否都有合理的粗细变化和飞白分布。如果“捺”的收锋处出现突然截断说明压力映射在笔画末端没有归零需要在抬笔时强制把最后几个点的压力渐变到 0。我一般会在鼠标抬起时往点列表里补 3 到 5 个压力递减的点位置和最后一个点相同或微移这样收锋自然。从那以后我每次做笔迹模拟都强制在抬笔时补一段压力衰减否则收笔永远像被刀切。希望帮到你。本文还有配套的精品资源点击获取