追随世纪中叶弗朗西斯（Francis）、阿佩里（Apéry）、希尔伯特-科恩-沃森（Hilbert–Cohn-Vossen）风格的手绘排线曲面，可用鼠标拖动自由旋转模型，按住 Shift 拖动能令其翻滚，滚动滚轮可拉近视角。在触摸屏上，单指滑动转动模型，双指捏合既能靠近也可扭转翻滚。

以 Francis、Apéry、Hilbert–Cohn-Vossen 中期风格手绘的排线曲面。可自由拖动旋转模型（shift+拖动使其翻滚）；滚动滚轮拉近。触摸屏上单指旋转，双指捏合拉近并扭动翻滚。

来源与方法

图画由笔画而非像素构成。轮廓是网格上 n·v 的零集（用插值法线找到，连成平滑曲线），边界和浸入的双曲线作为额外链，全部用宽笔模型绘成锥形带，阴影侧和靠近观察者处加粗，并有连贯的手绘抖动。可见性在 GPU 上确定：隐藏线 Pass 将遮挡部分画虚线，每条近轮廓下的单面纸晕切断其后线条。排线是主曲率线场的流线，构建时以三种嵌套密度追踪（第二种沿另一主方向以交叉排线）；色调决定哪族上墨及笔画渐隐处。高光留白纸。主方向按有符号曲率而非大小排序，使两族在 κ₁ = −κ₂ 处连续。轮廓链上墨前轻平滑。笔画略过端点，如速写线渲染；起笔墨聚和渗入纸纹的毛边是本页手工调效（加宽带子边缘受类纤维噪声控制），非取自纸张。标签为手写，用引线钉在表面点，点位隐藏时变暗。

风格目标为 G. K. Francis《拓扑图画书》1987：带尖点、双曲线、隐藏线及稀疏排线带的轮廓画。轮廓管线参见 P. Bénard 与 A. Hertzmann 2019 教程：平滑轮廓为 n·v=0、链化、可见性、风格化。A. Hertzmann 1999 从插值顶点法线得轮廓（n·v 上行进三角形）。Hertzmann 与 Zorin 2000 沿主曲率方向排线，仅暗区交叉排线，高光留白，含下切。Jobard 与 Lefer 1997 用分离距离规则追踪排线流线。Appel 等 1979 线交叉处纸晕。Northrup 与 Markosian 2000 链化轮廓段并作为带锥度和宽度变化的风格化笔画渲染。Strothotte 等 1994 速写线渲染：线过冲端点并摆动，用笔模型沿笔画变宽。Salisbury 等 1994 笔画纹理及手工特征笔画放置达到目标色调。Praun 等 2001 实时排线嵌套色调级，此处用对象空间笔画使排线不漂移。Winkenbach 与 Salesin 1994 按笔画密度厚度调色调。Elber 1995 沿等参曲线排线（参数线条纹模式）。Saito 与 Takahashi 1990 从法线和深度缓冲提取边（可选 Sobel 边滤）。隐式曲面用四面体变体多边形化（Lorensen 与 Cline 1987；Doi 与 Koide 1991）。双曲线计算背后的线段-三角形测试用 Möller 与 Trumbore 1997。

R. Kusner 1987 提供 Boy 曲面所用的 Bryant–Kusner 参数化（此处数值验证：对径边界粘合与三重对称达机器精度）。kusner() 用的通用 p 形式分母为 w^{2p} + κp w^{p-1}，其中 κp = 2√(2p−1)/(p−1)，前置因子 p/(p−1)；常数通过数值检验反演前曲面极小确定（p=2 循环版用 √3 代替 2√3 则不对）。另见 F. Apéry《实射影平面模型》1987，其笛卡尔族（载于 R. Ferréol 的 mathcurve.com “Morin surface”）给出 Morin 预设，n=3 时给出 Boy 曲面第二模型。

记号

公式为 JavaScript 表达式；^ 表示幂。可用 sin cos tan asin acos atan atan2 sinh cosh tanh exp log sqrt cbrt abs sign pow min max floor hypot pi tau e sq(x)。范围框也接受表达式（如 2*pi）。辅助函数 boy(u,v) 返回 ℝℙ² 的 Bryant–Kusner 浸入为 [x,y,z]（u 为 [0,1] 半径，v 为角度）。torusknot(u,v,p,q,R,r,a) 返回环面上 (p,q) 环结半径为 a 的管（默认 2, 3, 2.2, 1, 0.42）；u 沿结走一圈，v 绕管。apery(u,v,n,k) 为 Apéry 笛卡尔族，u∈[−π/2, π/2]：n=2,k=1 为 Morin 曲面（v∈[0,2π]）；n=3,k=1 为 Boy 曲面（v∈[0,π]）。kusner(u,v,p,d) 为 Kusner–Bryant 族，w = tan(πu/4) e^{iv}：u∈[0,2] 为整球（p=2 为 Morin 曲面），u∈[0,1] 对奇数 p 覆盖 ℝℙ² 一次（p=3 为 boy）；d 平移反演中心（默认 −½）。

评论区几乎一致地站在“好看”这一边；为数不多的争论不是立场冲突，而是一边想亲手复现、一边希望在小屏设备上也看得顺眼。作者随后本人现身回应，让讨论更像是创作者和读者之间的直接交流。

成品画面实在漂亮，连技术讨论也要先夸一句

• 许多读者直接用“太棒了”“绝对美丽”表达第一印象，认为线条的疏密、间距和笔触都很耐看。（较多人）
• 连追问实现方式的读者也承认，这种手绘线条的间距和风格“真的很完美”。 > 太棒了，这个项目简直不可思议。（@gotfork）

想用曲率场复现这种手绘感并不容易，试过的人最有共鸣

• 有读者说，自己一直想为任意 3D 模型生成类似画面，反复尝试过许多次，甚至让大模型帮忙辅助，仍没达到想要的效果。（少数人）
• 另一个技术背景较强的读者则好奇：即便使用主曲率场，要得到这么干净的线条，应该也不容易吧？（少数人） > 我也一直想实现这种效果，试了很多次，最近还借助大模型帮忙，可依然没有做成理想的样子。（@fogleman）

移动端菜单和手势问题成了小屏幕上的体验短板

• 有人抱怨手机屏幕上画面几乎被菜单挡住，只剩边角几像素；另一人补充，旋转物体时手势经常被浏览器误判成页面滚动，安卓 Chrome 上尤其明显。（少数人）
• 作者在回应中说刚刚面向小屏设备做了适配，算是当场接下了这批建议。 > 能先把菜单收起来吗？手机上能看到的几像素已经很漂亮了。（@ks2048）

有价值的补充

• 作者说明，项目实现主要基于 Hertzmann 和 Zorin 在 2000 年提出的经典思路：用主曲率方向决定排线方向。也就是说，它的根源是非真实感渲染的经典方法，而不是新的“AI 生成”。
• 一位多年前听过 George 课的用户回忆，George 从前就爱用钢笔在黑板、笔记本、餐巾纸上随手画这类线条，也热衷用计算机做可视化，还写过不少能在 CAVE 里运行的程序。这给数字渲染添了一层个人风格底色。
• 想复刻类似网页应用的人可以记住一个前端细节：给画布加上 touch-action: none，能避免触屏上旋转模型时被浏览器当成滚动打断。