InsetFace 内插面算法实现——从二维 Offset 到三维区域求解

在建模软件里，Inset Face 看起来是一个很小的操作：选中一个面，拖一下厚度，轮廓往里缩一圈；如果再给一点 

，它就变成一个凹进去或者凸出来的结构。

但是，如果仅把 inset 理解成把所有顶点朝中心点拉一拉，结果基本不会太理想。

 插件时整理出来的一套做法。它不是一个学术级的 mesh offset 系统，更像是面向交互式建模工具的工程实现：常见情况尽量正确，复杂情况给出可控近似，出问题时优先保证预览不炸。整体思路参考了 Blender、Maya 这类现代 3D 软件里的 inset 行为，我是做法仅供参考，如果要做生产级实现，还是建议直接去看这些软件本身的代码和数据结构设计。

如果只处理一个平面多边形，inset 的定义其实很清楚：每条边向内部平移一段距离，然后相邻平移边求交，得到新的内轮廓。

麻烦在于建模软件里的面不是孤立的二维多边形。它们在三维空间里，可能多个面连成一个区域，区域还可能不是共面的。

 到底表示顶点移动距离，还是边到边的真实距离，也会影响最后的算法分支。

把 3D 面投影到局部 2D 平面，在 2D 里做 polygon offset，再抬回 3D。

每个面先做局部 inset，然后把共享顶点的切向位移做加权融合。

如果区域近似共面，就做统一的 2D 区域 offset；如果明显非共面，就走曲面感知的 3D 切向近似。

所以这个插件的核心大概可以写成：

\text{InsetFace}
=
\text{2D polygon offset}
+
\text{local frame projection}
+
\text{half-edge boundary extraction}
+
\text{tangent displacement smoothing}

这几个部分听起来分散，但实现里基本就是围绕这条线组织的。

单个面 inset 最适合先变成 2D 问题。给定面顶点：

\mathbf{x}_0, \mathbf{x}_1, \dots, \mathbf{x}_{n-1}

先计算面法线。我这里用的是 Newell 风格的多边形法线累积：

\widehat{\mathbf{n}}
=
\frac{\mathbf{n}}{\|\mathbf{n}\|}

局部坐标系用面上的第一个点作为原点：

\mathbf{u}
=
\frac{\mathbf{x}_1 - \mathbf{x}_0}
{\|\mathbf{x}_1 - \mathbf{x}_0\|}

第二个基向量由法线叉乘得到：

\mathbf{v}
=
\widehat{\mathbf{n}} \times \mathbf{u}

\mathbf{q}
=
\begin{bmatrix}
(\mathbf{x} - \mathbf{o}) \cdot \mathbf{u} \\
(\mathbf{x} - \mathbf{o}) \cdot \mathbf{v}
\end{bmatrix}

\mathbf{x}'
=
\mathbf{o}
+
q'_x \mathbf{u}
+
q'_y \mathbf{v}
+
d\widehat{\mathbf{n}}

这个路径后面会反复用到。区域算法看起来更复杂，但底层依然依赖稳定的局部 2D offset。

这里是真正实现轮廓偏移的地方。

 是整个实现里最核心的函数。输入是二维闭合多边形：

P = \{\mathbf{p}_0, \mathbf{p}_1, \dots, \mathbf{p}_{n-1}\}

P' = \{\mathbf{p}'_0, \mathbf{p}'_1, \dots, \mathbf{p}'_{n-1}\}

首先要判断多边形方向。二维有向面积为：

A(P)
=
\frac{1}{2}
\sum_{i=0}^{n-1}
\operatorname{cross}(\mathbf{p}_i, \mathbf{p}_{i+1})

\operatorname{cross}(\mathbf{a}, \mathbf{b})
=
a_x b_y - a_y b_x

为了后面统一处理，我用了一个方向符号：

s =
\begin{cases}
1, & A(P) \ge 0 \\
-1, & A(P) < 0
\end{cases}

\mathbf{d}_0
=
\frac{\mathbf{p}_i - \mathbf{p}_{i-1}}
{\|\mathbf{p}_i - \mathbf{p}_{i-1}\|}

\mathbf{d}_1
=
\frac{\mathbf{p}_{i+1} - \mathbf{p}_i}
{\|\mathbf{p}_{i+1} - \mathbf{p}_i\|}

于是两条边的 inward normal 写成：

\mathbf{n}_0
=
s \cdot \operatorname{perpLeft}(\mathbf{d}_0)

\mathbf{n}_1
=
s \cdot \operatorname{perpLeft}(\mathbf{d}_1)

接下来分两种情况：普通 inset 和 

 时，我用的是比较轻的方案：顶点沿相邻两条边 inward normal 的角平分方向移动。

\mathbf{b}
=
\frac{\mathbf{n}_0 + \mathbf{n}_1}
{\|\mathbf{n}_0 + \mathbf{n}_1\|}

\mathbf{p}'_i
=
\mathbf{p}_i
+
t\mathbf{b}

 更接近“顶点沿角平分线移动的距离”，不是严格的边到边距离。

d_{\text{edge}}
\approx
t\cos\frac{\theta}{2}

所以钝角处的实际边距会比输入厚度小，锐角处则会显得收缩更明显。这也是普通 inset 和 

这条路径的价值在于简单、快，而且稳定。作为交互式工具的默认轻量分支，它比较合适。

 应该更接近真实的边距。这个时候不能只推顶点，而要平移边线。

，相邻两条边分别沿 inward normal 平移 

L_0(\alpha)
=
(\mathbf{p}_i + t\mathbf{n}_0)
+
\alpha\mathbf{d}_0

L_1(\beta)
=
(\mathbf{p}_i + t\mathbf{n}_1)
+
\beta\mathbf{d}_1

(\mathbf{p}_i + t\mathbf{n}_0)
+
\alpha\mathbf{d}_0
=
(\mathbf{p}_i + t\mathbf{n}_1)
+
\beta\mathbf{d}_1

\operatorname{dist}(\mathbf{p}'_i, E_{i-1}) \approx t

\operatorname{dist}(\mathbf{p}'_i, E_i) \approx t

 的语义更接近传统建模软件里的等距 inset。

但它也更容易遇到数值问题。两条边接近平行时，交点会跑得很远；角很尖时，miter 也可能被拉成一根长刺。所以这里必须加限制。

Offset 里的尖角很麻烦。两条偏移线夹角太小时，求出来的交点可能离原顶点非常远，形成一个夸张的 miter。

我的处理是：如果直接求交失败，或者结果不稳定，就退回到角平分线方向。

\ell
=
\frac{t}{\mathbf{b}\cdot \mathbf{n}_1}

\mathbf{p}'_i
=
\mathbf{p}_i
+
\ell \mathbf{b}

InsetFace 内插面算法实现

：2025年3月15日举办MTR - Dev Webinar，主题为NTE train JS discussion & sharing。研讨会提供幻灯片，但不提供回放，允许将视频发布到个人账号。

：重点讨论NTE - JS能实现的功能以及如何使用；明确不涉及具体功能实现的协助、JS基础及数学运算原理。

：支持雨刮动画（雨天自动开启）和车轮动画（车轮可动），包含几何动画和纹理动画两种类型。

：实现车内LCD中英双语显示；电子显示屏可获取并显示下一站信息，还能切换显示语言。

：具备动态仪表盘、动态控制手柄（根据加速减速状态旋转）以及动态路线图等功能。

文件，定义列车的名称、类型、颜色、声音和脚本文件路径等属性。

（列车加载时调用，用于初始化）、

（每帧调用，编写主要逻辑）、

（列车离开可见范围时调用，用于清理）三个函数。

：以列车渲染为例，介绍如何加载OBJ模型、处理模型纹理和UV镜像，以及上传模型部分到渲染环境。

：详细阐述车厢各部分（如车身、车门、连接部分）的渲染逻辑，考虑列车车厢数量、车门开关状态等因素。

车轮旋转实现：通过单独控制车轮模型渲染，依据速度计算旋转角度，并为每个车辆独立存储旋转角度，逐帧更新。

：通过单独控制指针模型渲染，并根据列车速度旋转指针来实现。包括模型加载、初始化和渲染时的坐标变换与角度计算。

：根据列车的加速减速状态旋转手柄模型。初始化时加载手柄模型，渲染时判断加速状态并计算旋转角度。

：获取列车下一站信息并展示。初始化时创建纹理对象，渲染时根据信息内容调整显示布局。

：获取列车信息并展示，支持定期切换显示语言。初始化时准备字体、图像资源和相关跟踪器，渲染时根据语言状态和列车信息进行绘制。

MTR-Dev Webinar

我其实蛮早之前就有这样的想法了，因此在做主站的时候，导航栏里便预留了Blog这一项，但由于我切实没有这样的技术力，于是就一直耽搁了。直到昨天，偶然看到了next.js+sanity这套方案，感觉可行效果也很好，于是就着手部署了。

搭建个人博客，主要是想给自己留下些回忆。过个几年，甚至几十年，再回看曾经写下的内容，想必会很有感慨。每个阶段都有它独特的意义，写点东西，是为了让未来的自己能清晰地回溯这段经历，感慨时光的流逝。

Huli's Blog.

为什么搭建个人博客