用SDF画个五角星：从几何直觉到GLSL代码的保姆级拆解（附GeoGebra动图）

用SDF画个五角星从几何直觉到GLSL代码的保姆级拆解在创意编程和图形学领域符号距离函数SDF正逐渐成为构建复杂图形的利器。不同于传统的光栅化渲染SDF通过数学函数定义形状边界为动态图形、粒子系统和实时渲染开辟了新可能。本文将聚焦五角星这一经典图形带你从零构建其SDF实现过程中不仅会揭示几何原理与代码的映射关系还会分享如何用GeoGebra等工具可视化调试SDF。1. 理解SDF的核心机制符号距离函数的本质是计算空间中任意点到目标图形边界的最短距离并通过符号区分内外距离计算对于点P找到图形边界上离它最近的点Q计算PQ的长度符号定义当P在图形内部时距离为正外部为负恰好在边界上则为零数学特性理想的SDF应满足距离场的单调性即从边界向外距离值均匀增大以圆形为例其SDF可表示为float sdCircle(vec2 p, float r) { return length(p) - r; }这里length(p)计算点到原点的距离减去半径r即得到符号距离。这种简洁性正是SDF的魅力所在。注意SDF的精度直接影响渲染质量。理论上完美SDF的等值线应是围绕图形的同心轮廓且梯度大小恒为1。2. 五角星的几何特征分析构建五角星SDF前需先解析其几何结构。标准五角星五角星形具有以下特性顶点分布5个外凸顶点和5个内凹顶点交替排列对称性绕中心每72°旋转对称360°/5关键参数外接圆半径R中心到凸顶点的距离内接圆半径r中心到凹顶点的距离凹陷比τ r/R ≈ 0.382黄金分割相关在GeoGebra中绘制时可通过以下步骤构建创建外接圆和内接圆将圆周5等分标记外顶点连接每隔两个的外顶点形成凹陷调整半径比观察形状变化图五角星的对称轴与关键尺寸标注GeoGebra截图3. SDF构建的分步推导3.1 空间分区策略五角星的对称性允许我们将平面划分为10个相同的扇形区域每个36°只需计算一个基准区域的距离再镜像处理。选定起始区域为以Y轴为对称轴的扇形区域特征最近边界I上部扇形水平边II右侧相邻区斜边III左侧相邻区对称斜边3.2 核心距离计算在基准区域区域I内距离计算分三步进行坐标变换将任意点P通过旋转变换到基准区域float angle 2.0*PI/5.0; // 72度 vec2 p abs(original_p); // 利用对称性 p rotate(p, -angle/2.0); // 对齐到基准区边界投影计算到最近边的垂直距离vec2 edgeDir vec2(sin(angle), cos(angle)); // 斜边方向 float proj dot(p, edgeDir); // 投影长度 float edgeDist abs(proj - 0.5*r); // 到斜边距离区域判定结合水平边距离综合判断float horizontalDist p.y - r; return min(edgeDist, horizontalDist);3.3 符号判定优化传统的内外测试可通过射线法实现但在SDF中更高效的做法是利用角度判断float angle atan(p.y, p.x); float sector floor(angle / (2.0*PI/10.0)) 0.5; vec2 sectorCenter vec2(cos(sector), sin(sector)) * mix(R, r, step(0.5, mod(sector,1.0))); float sign length(p) length(sectorCenter) ? 1.0 : -1.0;4. 完整GLSL代码实现结合上述分析最终的五角星SDF代码如下float sdStar5(vec2 p, float r, float R) { const float PI 3.14159265359; const float angle 2.0*PI/5.0; // 72度 const vec2 k vec2(cos(angle), sin(angle)); // 利用五重对称性 p abs(p); p - 2.0*max(dot(k,p), 0.0)*k; p - vec2(clamp(p.x, -r*tan(angle/2.0), r*tan(angle/2.0)), r); return length(p)*sign(p.y); }参数说明r内接圆半径凹顶点距离R外接圆半径凸顶点距离k预计算的旋转系数5. 可视化调试技巧在GeoGebra中验证SDF时可采用以下方法等值线可视化创建滑动条调节参数r和R输入SDF函数表达式使用等值线工具观察距离场分布动态追踪测试点P (x(P), y(P)) StarSDF If[abs(atan2(y(P),x(P))) 36°, abs(y(P)) - r, abs(cos(54°)*x(P)sin(54°)*y(P)) - r*cos(36°)]梯度可视化计算SDF的数值导数绘制箭头表示梯度方向和大小验证边界处的梯度突变图五角星SDF的等值线与梯度场动态演示6. 性能优化与扩展6.1 计算优化技巧预处理对称性利用abs()减少计算区域查表法预计算三角函数值存为常量早期终止先进行粗略距离测试优化后的代码片段const vec3 angles vec3(0.309016994, 0.587785252, 0.951056516); // cos(72°), sin(72°), cos(36°) float sdStar5_optimized(vec2 p, float r) { p abs(p); vec2 q p - 2.0*min(dot(p, angles.xy), 0.0)*angles.xy; q - vec2(clamp(q.x, -r*angles.z, r*angles.z), r); return length(q)*sign(q.y); }6.2 衍生图形创作基于基础五角星SDF可通过以下操作创造新图形圆角化处理float roundedStar sdStar5(p, r, R) - cornerRadius;轮廓效果float outline abs(sdStar5(p, r, R)) - thickness;布尔运算float starMoon max(sdStar5(p, r, R), -sdCircle(poffset, moonRadius));7. 常见问题与解决方案在实际应用中可能遇到的典型问题问题现象可能原因解决方案尖角处出现锯齿距离场梯度突变增加多重采样或后处理抗锯齿旋转后形状畸变对称轴未对齐检查角度换算和旋转顺序性能瓶颈复杂SDF组合采用层次包围盒优化特别提醒当需要动态改变星形尖锐度时建议使用以下参数化方案float sdAdjustableStar(vec2 p, float r, float R, float sharpness) { float t clamp(sharpness, 0.0, 1.0); float currentR mix(r, R, t); return sdStar5(p, currentR, R); }掌握SDF不仅需要理解其数学本质更要培养将几何直觉转化为代码的能力。建议从简单图形入手逐步增加复杂度同时善用可视化工具验证中间结果。五角星的实现方案稍作修改即可推广至其他星形如六角星、七角星关键在于把握对称性和投影计算的通用模式。