用GLSL和SDF绘制2D图形从数学公式到视觉魔法的完整指南在数字艺术和游戏开发的世界里那些令人惊叹的视觉效果背后往往隐藏着看似简单的数学原理。符号距离函数(SDF)就是这样一种强大的工具它能够用简洁的数学表达式定义复杂图形的边界。本文将带你从零开始逐步掌握如何用GLSL着色器语言实现各种2D图形的SDF渲染。1. SDF基础概念与核心原理符号距离函数(Signed Distance Function)是一种特殊的数学函数它定义了空间中任意一点到某个图形表面的最短距离并通过符号区分点在图形内部还是外部正数点在图形外部零点在图形边界上负数点在图形内部这种表示方法在计算机图形学中有诸多优势数学表达简洁易于进行图形组合与变形支持高质量的抗锯齿渲染适合GPU并行计算GLSL中的基本SDF实现通常遵循以下模式float sdfCircle(vec2 p, float r) { return length(p) - r; }这个简单的函数计算了点p到圆心(0,0)的距离并减去半径r。当结果为0时点正好落在圆周上。2. 基础图形SDF实现详解2.1 圆形与线段SDF的基石圆形是最简单的SDF案例但线段SDF则展示了更通用的思路float sdfSegment(vec2 p, vec2 a, vec2 b) { vec2 ap p - a; vec2 ab b - a; float h clamp(dot(ap, ab)/dot(ab, ab), 0.0, 1.0); return length(ap - ab * h); }这段代码的核心思想是将点p投影到线段ab上然后计算垂直距离。clamp函数确保投影点在线段范围内。2.2 矩形与圆角矩形轴对称矩形的SDF实现展示了如何利用对称性简化计算float sdfBox(vec2 p, vec2 size) { vec2 d abs(p) - size; return length(max(d, 0.0)) min(max(d.x, d.y), 0.0); }圆角矩形则可以通过简单修改基础矩形的SDF得到float sdfRoundedBox(vec2 p, vec2 size, float radius) { return sdfBox(p, size) - radius; }2.3 三角形家族从等边到任意形状等边三角形的SDF实现展示了坐标映射的技巧float sdfEquilateralTriangle(vec2 p, float r) { const float k sqrt(3.0); p.x abs(p.x); if(p.x k*p.y 0.0) { p vec2(p.x - k*p.y, -k*p.x - p.y)/2.0; } p.x - r; p.y r/k; p.x - clamp(p.x, -2.0*r, 0.0); return -length(p)*sign(p.y); }而任意三角形的SDF则需要分别计算到三条边的距离float sdfTriangle(vec2 p, vec2 a, vec2 b, vec2 c) { vec2 ba b - a; vec2 pa p - a; vec2 cb c - b; vec2 pb p - b; vec2 ac a - c; vec2 pc p - c; float d min(min( length(pa - ba*clamp(dot(pa,ba)/dot(ba,ba), 0.0, 1.0)), length(pb - cb*clamp(dot(pb,cb)/dot(cb,cb), 0.0, 1.0))), length(pc - ac*clamp(dot(pc,ac)/dot(ac,ac), 0.0, 1.0))); float s sign(ba.x*ac.y - ba.y*ac.x); return d * ((pa.x*ba.y-pa.y*ba.x 0.0 pb.x*cb.y-pb.y*cb.x 0.0 pc.x*ac.y-pc.y*ac.x 0.0) ? -1.0 : 1.0); }3. 高级技巧与组合应用3.1 图形组合并集、交集与差集SDF的强大之处在于可以轻松组合基本图形// 并集 float unionSDF(float a, float b) { return min(a, b); } // 交集 float intersectSDF(float a, float b) { return max(a, b); } // 差集 float differenceSDF(float a, float b) { return max(a, -b); }3.2 变形与特效利用SDF可以创建各种有趣的变形效果// 圆角效果 float roundedSDF(float d, float radius) { return d - radius; } // 膨胀/收缩效果 float inflateSDF(float d, float amount) { return d - amount; } // 扭曲效果 float twistSDF(vec2 p, float k) { float c cos(k*p.x); float s sin(k*p.x); mat2 m mat2(c, -s, s, c); return sdfBox(m*p, vec2(0.5)); }3.3 距离场着色技巧SDF不仅用于确定形状还能创造丰富的视觉效果vec3 renderSDF(float d) { // 基础颜色 vec3 col vec3(1.0) - sign(d)*vec3(0.1,0.4,0.7); // 抗锯齿边缘 col * 1.0 - exp(-6.0*abs(d)); // 轮廓线 col * 0.8 0.2*cos(150.0*d); // 内部高光 col mix(col, vec3(1.0), 1.0-smoothstep(0.0,0.02,abs(d))); return col; }4. 实战案例胶囊体与复杂形状4.1 胶囊体的实现胶囊体是线段和圆的组合体其SDF实现展示了如何结合基本元素float sdfCapsule(vec2 p, vec2 a, vec2 b, float r) { vec2 pa p - a, ba b - a; float h clamp(dot(pa, ba)/dot(ba, ba), 0.0, 1.0); return length(pa - ba*h) - r; }4.2 不均匀胶囊体两端半径不同的胶囊体需要更复杂的计算float sdfUnevenCapsule(vec2 p, vec2 a, vec2 b, float ra, float rb) { vec2 ba b - a; float l length(ba); vec2 dir ba/l; // 坐标变换到局部空间 vec2 q p - a; float k dot(q, vec2(dir.y, -dir.x)); float m dot(q, dir); if(m 0.0) return length(q) - ra; else if(m l) return length(q - ba) - rb; else return abs(k) - mix(ra, rb, m/l); }4.3 多边形通用实现对于正多边形可以使用通用公式float sdfRegularPolygon(vec2 p, int n, float r) { float a atan(p.x, p.y) PI; float b 2.0*PI/float(n); return cos(floor(0.5 a/b)*b - a)*length(p) - r; }5. 调试与优化技巧5.1 可视化调试方法在开发SDF着色器时可视化调试至关重要// 距离场可视化 vec3 debugSDF(float d) { // 等距线 float fw fwidth(d)*0.5; float contour abs(mod(d, 0.1)) fw ? 1.0 : 0.0; // 零线 float zero abs(d) fw ? 1.0 : 0.0; // 内部外部区分 vec3 col d 0.0 ? vec3(0.3,0.6,1.0) : vec3(1.0,0.6,0.3); // 叠加调试信息 col mix(col, vec3(0.0,1.0,0.0), zero); col mix(col, vec3(0.5), contour); return col; }5.2 性能优化建议SDF计算可以很高效但也需要注意优化利用对称性尽可能使用abs()减少计算区域简化数学运算用dot(p,p)代替length(p)的平方避免分支尽量使用mix()、clamp()等函数替代条件判断预计算将不变的计算移到着色器外部// 优化前的代码 float oldSDF(vec2 p) { if(p.x 0.0) { return length(p - vec2(1.0,0.0)); } else { return length(p - vec2(-1.0,0.0)); } } // 优化后的代码 float optimizedSDF(vec2 p) { vec2 q vec2(abs(p.x), p.y) - vec2(1.0,0.0); return length(q); }5.3 常见问题解决问题1边缘锯齿明显解决方案使用fwidth()实现抗锯齿float aastep(float threshold, float value) { float afwidth fwidth(value)*0.5; return smoothstep(threshold-afwidth, thresholdafwidth, value); }问题2复杂组合图形性能低下解决方案使用边界层次结构(BVH)或空间分割技术问题3变形效果不自然解决方案对距离场进行平滑插值float smoothUnion(float a, float b, float k) { float h clamp(0.5 0.5*(b-a)/k, 0.0, 1.0); return mix(b, a, h) - k*h*(1.0-h); }掌握SDF技术需要时间和实践但一旦理解其核心原理你将能够创造出令人惊叹的图形效果。从简单的圆形开始逐步尝试更复杂的形状和组合最终你将能够用数学公式构建出想象中的任何2D图形。