python-opengl进阶：SDF有向距离场终极指南，8种形状True vs Fake实现全对比（附GLSL代码）

python-opengl进阶：SDF有向距离场终极指南，8种形状True vs Fake实现全对比（附GLSL代码）

【免费下载链接】python-openglAn open access book on Python, OpenGL and Scientific Visualization, Nicolas P. Rougier, 2018项目地址: https://gitcode.com/gh_mirrors/py/python-opengl

python-opengl是一本关于 Python、OpenGL 与科学可视化的开源书籍项目（Nicolas P. Rougier 著），其第 6 章以SDF 有向距离场（Signed Distance Field）为核心，系统解决了传统抗锯齿无法胜任的"像素级平滑边缘"难题。本章为 8 种基本形状（圆形、平面、方形、三角形、椭圆及其圆角/快速变体）提供了完整的 GLSL 实现，并逐一对比True（精确）与 Fake（快速近似）两种写法。本文将带你快速掌握 SDF 有向距离场的原理、各形状实现差异与上手方法。

上图展示了关键结论：即使使用 64 个采样点的超采样（SSAA），锐利顶点处的锯齿依然可见，而SDF 有向距离场（最右列）的渲染质量明显更高——这正是本书放弃硬件 MSAA、全面采用 SDF 的原因。

什么是SDF有向距离场？一图看懂原理 📐

SDF 的定义非常直观：一个函数，输入任意点 (x, y)，返回该点到形状边界的"带符号距离"。

• 点在形状内部：返回正值
• 点在形状外部：返回负值
• 点恰好在边界上：返回 0

以圆形为例，只需一行数学公式就能表达：

// 圆形SDF：到中心的距离减去半径 float SDF_circle(vec2 p, float radius) { return length(p) - radius; }

配合 Shadertoy 社区标准的距离场调色板（项目内置于 SDF-palette.glsl），每个像素根据到边界的远近着色，边界呈白色，内部呈蓝白波纹，外部呈棕色波纹——这就是 SDF 有向距离场标志性的"等高线"视觉效果。

8种形状SDF实现全对比：True vs Fake 🔍

本章在 06-anti-grain.rst 中定义了 8 类形状的 SDF 函数。所谓True，是严格计算点到"线段/角点"的精确距离；Fake则是把边界当作无限延长线来近似，牺牲少量精度换取更高的 GPU 计算速度。

方形（Box）：True vs Fake 两种写法

True 版必须考虑点到四个角点的距离（代码出自 Inigo Quilez 的经典推导）：

float SDF_box(vec2 p, vec2 size) { vec2 d = abs(p) - size; return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)); }

Fake 版则把四条边当作无限直线，只取最远方向的有符号距离：

float SDF_fake_box(vec2 p, vec2 size) { return max(abs(p.x) - size.x, abs(p.y) - size.y); }

两者在远离角点的区域完全一致，差异只在角落外部：Fake 版在角点处的等高线会变成"十字"而非圆弧。对科学可视化中密集排列的小 marker 而言，这个速度优势非常可观。完整实现分别见 SDF-box.py 与 SDF-fake-box.py。

三角形：最典型的 True vs Fake 差异

三角形由 3 条线段组成，True 版（SDF-triangle.py）要对每条边做"点-线段"投影距离，再用叉积符号保证内外取值正确；Fake 版（SDF-fake-triangle.py）只用 3 条边的无限直线取最大值，计算量几乎减半：

float SDF_fake_triangle(vec2 p, vec2 p0, vec2 p1, vec2 p2) { // 三条边各取一条法向量，取最远的有符号距离 vec2 o0 = normalize(vec2(e0.y, -e0.x)); ... return max(max(dot(o0, v0), dot(o1, v1)), dot(o2, v2)); }

对比两者的渲染结果，填充与描边模式下的差异清晰可见：

Fake 三角形在第 8 章的marker（数据点标记）中被大量使用——因为一个科学图表动辄上万个标记，速度优先级高于角点处的微小偏差。

椭圆：精确解难得，Fake 近乎免费

点到任意椭圆的距离是公认的计算难题（涉及迭代/数值求解）。本书直接复用了 Inigo Quilez 的解析公式（SDF-ellipse.py）；而 Fake 版（SDF-fake-ellipse.py）只需一次length()运算：

float SDF_fake_ellipse(vec2 p, vec2 size) { float r = 0.2; float f = length(p * size); return f * (f - r) / length(p * size * size); }

只要椭圆"不太粗"，Fake 版的伪影完全可以忽略——这是精度换速度的教科书案例。

圆角衍生：一行代码搞定 Rounded Box / Triangle

圆角形状无需单独推导，直接对精确解减去圆角半径即可，边界自动外扩成圆弧：

float SDF_round_box(vec2 p, vec2 size, float radius) { return SDF_box(p, size) - radius; }

对应示例：SDF-round-box.py、SDF-round-triangle.py。

基于距离的抗锯齿：把SDF变成平滑边缘 ✨

有了距离值，只需再定义一个覆盖率函数，就能把"到边界的距离"转换为像素的混合比例，得到完美平滑的边缘。SDF 距离抗锯齿需要区分三种绘制模式：只描边、只填充、或两者兼有：

覆盖率的过渡区宽度通常取1 像素：太宽形状发虚，太窄则边缘生硬。书中对比了无抗锯齿、线性过渡与指数过渡三种函数，最终选用了效果最自然的指数型：

这一"距离 → 覆盖率"的转换是第 6 章的收尾技巧，完整流程见 triangle-sdf.py。

如何快速上手：克隆项目并运行SDF示例 🚀

git clone https://gitcode.com/gh_mirrors/py/python-opengl cd python-opengl pip install glumpy numpy python code/chapter-06/SDF-circle.py

推荐按以下顺序体验（全部位于 code/chapter-06/ 目录）：

1. circle-sdf-distances.py —— 直观看到"内红外蓝白边界"的距离场本质
2. SDF-circle.py → SDF-box.py → SDF-fake-box.py —— 感受 True/Fake 差异
3. SDF-ellipse.py 与 SDF-fake-ellipse.py —— 观察精确解与近似的伪影
4. triangle-ssaa.py —— 回顾 SDF 为什么碾压超采样

💡 进阶路线：SDF 是后续章节的基石——第 8 章用它做CSG 布尔运算与自定义 marker，第 9 章做变宽线条，第 10 章做多边形填充。掌握本章，等于拿到了整本书渲染体系的钥匙。

总结：一张表看懂 SDF 有向距离场 🎯

• 原理：一个函数返回"点到边界的带符号距离"，内部为正、外部为负、边界为 0
• 优势：解析式边缘，抗锯齿质量远超 MSAA/SSAA，且计算可并行
• 选型：追求质量选 True（box/triangle/ellipse 精确解），追求速度选 Fake（用直线近似线段）
• 衍生：圆角形状 = 精确解 − 半径，一行代码完成
• 应用：距离值 + 覆盖率函数 → 像素级平滑的描边、填充与混合

SDF 有向距离场看似只是一个数学函数，却是科学可视化中"矢量级画质"的核心引擎。打开 06-anti-grain.rst 对照示例代码，你会发现 8 种形状的实现都短小精悍——这正是 GLSL 表达几何之美的地方。

【免费下载链接】python-openglAn open access book on Python, OpenGL and Scientific Visualization, Nicolas P. Rougier, 2018项目地址: https://gitcode.com/gh_mirrors/py/python-opengl