解剖学（Anatomy）
该技能制作类似工作台上小仪器的图形：带有底脚的沉重底座、带有刻度滑尺的导轨、安装在衬套上的滑架、滚花旋钮、螺旋弹簧、指针移动的千分表、如同微小圆点的螺丝。读者通过识别机器本身来理解概念。图形中显示的每个数字都来自驱动其零件移动的同一模型。
该技能内置了八个完整的示例。开始之前，请先打开最接近的一个。每个无框架示例都通过 node examples/<名称>/build.mjs 构建，该脚本会在脚本旁生成一个独立的HTML页面；添加 --light 参数可生成浅色主题版本。
examples/dial-indicator/是最小的示例：一个带支架的千分表，总共约300行代码。examples/desk-computer/是无框架SVG示例：一台台式计算机，带有可输入文字的键盘。输入的文字会显示在CRT屏幕上（屏幕绘制在机箱正面平面内），当计算机关闭时，画面会坍缩为一条线和一个点。它包含约85个实体和850条路径。examples/arcade-cabinet/是一个立式街机柜，侧面面板已移除，包含约240个实体和15根线缆。硬币飞入投币口，沿着投币滑道滚落（速度相当于在30°斜坡上滚动的圆盘），触动投币开关线后落入现金盒；开关脉冲沿其线缆逐段传输至主板，CRT屏幕预热、自检并运行磁吸模式（画面绘制在倾斜显示器平面内）。操纵杆倾斜时会闭合面板下方的微动开关。该示例展示如何放置摄像机以保持剖切机构的可视性，如何将凹形电路板绘制为沿任意轴的多棱柱，如何从构建使用的同一模块重建页面中的运动部件，以及如何在固定顺序的保留插槽中绘制实时硬币和线缆。node build.mjs --audit可验证几何正确性。examples/raptor-engine/是一个悬挂在测试架上的火箭发动机。其圆形零件来自kit/lathe.mjs，管道和线束来自kit/tube.mjs。它可以分解为11个组件，带有交错弹簧和逐帧深度重新排序。每个零件都记录其真实形状，node build.mjs --audit（由kit/audit.mjs实现）可验证：在静态、分解状态以及分解动画的每一帧中，没有零件穿透其他零件，每个端部都安装在真实基座上，没有弯折被挤压、折叠或落在其他线条上，没有曲线轮廓的斜率摆动，并且所有重叠部分都按深度顺序绘制。WebGL羽流、冲击波、飞溅和水蒸汽效果在SVG背景和前景之间渲染。它是密集管道、平滑着色和淡入淡出效果的参考示例。examples/ripple-tank/是一个学校用的波纹槽，安装在高支腿上，下方是纸屏，从44°仰角观察。两层WebGL效果（灯光明暗、纸屏上的阴影和焦散，以及水面的反射和玻璃效果）与等轴测平面对齐，并由纯色散和光学模型（model.mjs）驱动；频率变化通过历史纹理从浸入水中的振子传播出去。examples/test-rig/是一个来自真实网站（React/Next）的生产级图形：一个安装在弹簧滑架上的玻璃按钮，一个安装在导轨上可进行按压和拉拔动作的手指探针，以及一个显示倾斜度的千分表。它包含53个实体和约470条路径。examples/spot-plate/是来自同一网站的第二个生产级图形：放置在点样板上的六对玻璃滴，每对玻璃滴都由一个距离场绘制，因此距离小于merge参数的一对玻璃滴会融合成一块玻璃。一扇形测隙规叶片的设置决定了merge值，每个间隙对应一个叶片。它是形状相互融合以及一个控件驱动多个零件的参考示例。examples/turning-dial/是可选的3D模式示例：一个在真正3D空间中旋转的组合转盘，上面有一只小型机器人手。它包含约90个金属材质的活动零件、第二个旋转组、一个铰链、一个三铰链手指（可抬起）以及一个作为自由体脱落的吊舱。WebGL LED、其光晕和火花会跟随运动零件。旁边的stress.mjs是一个包含约380个零件的稠密手部模型，放置在一个杂乱的车间中，用于测量性能。
测试架是绘制图形本身的质量基准。开膛手引擎是着色器工作的基准：任何WebGL效果都必须达到其在世界空间、无突变、无缝渲染方面的标准。
唯一重要的理念
对象即解释。 不要绘制方框、箭头和标签。创造一个真实的、制作精良的物理对象，其工作原理本身就是概念本身。以下是将早期图形映射到概念的方式：
| 概念 | 对象 |
|---|---|
| 一个共享GPU上下文服务于多个画布 | 龙门绘图仪：一个打印头访问16个井 |
| 跳过无变化工作的缓存键 | 弹子锁：当所有弹子都匹配时，锁芯转动，无需重新绘制任何内容 |
| 七个字节每像素不同的渲染目标 | 七个抽屉的柜子：每个抽屉的深度与其字节数相同 |
| 可分离模糊（49×49个采样点 vs 49+49） | 钉床冲头旁边是两个安装在导轨上的梳子 |
| 既按压又倾斜的弹簧 | 带有弹簧、探针和千分表的测试架 |
| 高度轮廓 | 压在边缘上的轮廓（仿形）量规 |
| 依赖于朝向的照明 | 小型摄影棚：转盘周围的主光和补光灯 |
两种失败方式，均为实践所见：
- 过于抽象。 堆叠的平板、浮动的块或带标签的方框不像是任何具体事物。
- 过于扁平且平淡。 一块大平板上有几条线毫无立体感、零件稀疏且无可探究之处。
两者的修正方法相同：一个可识别的机器，由许多小型、精确、有目的的零件构成。
每个创作都高度精细。 这一点适用于任何图形，无论理念或要求多么简单：即使是快速解释器也必须是密集、真实的机器，而非几块平板。规模（根据工作流程步骤1）决定你能做到什么程度：图形（Figure）会对其主题和机制进行4倍扫描，而英雄（Hero）或史诗（Epic）则会对整个绘图进行4倍扫描。
- 参考真实事物。 按照真实物体的构建方式来构建：每个螺丝、接缝、斜面、衬套、铭牌、带连接器的线缆、带刻度的标尺，以及固定零件的零件。
- 两种观感。 在1倍视图下，它看起来像一台清晰的机器。在4倍视图下，每个区域仍然有真实细节可寻；裸露的面或空白的角落是未完成的工作，而非平静。
- 有目的，而非噪音。 细节来自属于机构本身的零件。每个零件都位于另一个零件之上，以边缘结束，并以淡出而非突然停止的方式结束。
- 最后检查。 在完成之前，放大到4倍（对于图形，检查主题和机制；对于英雄或史诗，检查整个绘图），并在任何区域显得简单的地方添加缺失的真实零件。
工作流程
按此顺序工作。在任何几何构建之前，先写出概念和零件清单。大部分质量由此决定。
- 开始前确定规模。 在任何其他工作之前，明确规模，并告诉用户预计所需的大致时间（当下层需要估计时）。
- Figure（图形）：一个机制，40-80个零件，SVG，至多一个WebGL层。直接确定规模并构建，无需询问。不要向用户说明时间，因为图形通常在不到一小时内完成。对于下面的进度检查，预算最多一小时。
- Hero（英雄）：一个密集的对象，几层WebGL或一个3D主题，80-150个零件。大约2-4小时。告知用户此时间，然后构建它，除非用户要求快速完成。
- Epic（史诗）：一个完整的车辆、建筑或工厂，具有多个运动系统，或多个主题的3D模式。6小时或更长时间。不要开始。给出估计时间，提出一个保留核心思想的大英雄版本，并列出完整版本会增加的内容。仅在用户明确选择史诗时才构建它。
- 无论规模如何，确保在第一个小时内就有一个可在浏览器中打开的工作页面，并在此基础上深化。在每一步开始时运行
date命令，当某一步骤运行时间超过其分配时间的两倍时，告知用户当前进度和剩余工作。
- 事实优先。 收集被解释事物的真实数值和行为：尺寸、数量、阈值、曲线。读数值、运动和标题必须全部真实。如果可能，将模型编写为一个小型纯模块，例如测试架示例中的
rig.ts，并让所有内容都由其驱动。 - 发明对象。 选择一个机器、工具、仪器或家具，其机制能一对一映射到概念。用一句话说明什么在运动以及该运动的含义。绝不复制参考图片：借鉴其表面处理，而非其对象。
- 零件清单。 列出至少40个零件（Figure：40-80个，Hero：80-150个，Epic：更多），并进行分组：基座（底板、底脚、凹槽、角螺钉、铭牌、标尺条）、结构（支柱、导轨、框架杆、限位器）、机构（滑架、衬套、弹簧、柱塞、指针）、控制件（滚花旋钮、翼形螺钉、表冠）以及主题本身（它是唯一被照亮的零件）。每个零件都位于另一个零件之上。
references/craft.md包含零件词汇表及其制作方法。 - 规划世界。 使用世界单位，约等于真实物体的1像素：x和y位于地板上，z向上。将布局规划为圆角矩形
{x, y, w, d, r}和圆形。选择摄像机：默认方位角45°，35-60°以展示长边，仰角30°（更高，如波纹槽的44°，以观察内部）。然后使用fitProjection(points, width, height, { pad, azimuth })进行适配。 - 一次构建几何图形。 在几何模块中使用工具包预计算所有静态路径：
slabOf、cylinder、extrude、planOutline、topTicks、knurl、coil、radialTicks等。任意轴上的圆形零件（钟形、法兰、阀门、执行器）来自kit/lathe.mjs，管道和线缆来自kit/tube.mjs。运动部件在静止位置一次构建，并使用translateAlong移动。只有形状发生变化的零件才需要逐帧重建。 - 从后向前、从下到上绘制。 使用
depthOf对重复零件进行排序。将包裹另一个零件的任何东西拆分为后部和前部两半：围绕杆的弹簧、围绕滑架的框架杆件。运动部件绘制在其物理位置所在的插槽中。参见references/craft.md中的“画家排序”。一旦图形中包含管道、线缆和圆形零件，就停止手动调整键值：将每个项目的真实形状记录到A.recorder(P, { order, spring })中，让A.settle(R, P)在两个项目重叠处测量真实深度并设置键值，最后以A.auditOrExit(R, P)结束构建。在绘制管道之前先规划路线：两端的真实端口、沿结构的支路、在直线段处交叉、使用管套分隔管道（references/craft.md，第8节）。记录你所绘制内容的真实形状：任何能静默通过审核的占位形状都是错误，审核本身也会检查出这一点。一个从密封套中滑出的杆就是G.rodOut产生的一个杆，使用A.slide记录。 - 装框。 将图形放入卡片中：左上角为
Fig n，右上角为简短标题，左下角为交互提示，右下角为实时读数。图例键和注释放在卡片下方，文字应尽量保持在绘图区域之外，至多可以有一个微小的雕刻铭文。 - 使其生动。 使用基于时间的平稳运动：指数跟随或真实的弹簧。无人交互时自动循环播放空闲导览。图形响应用户的指针和键盘操作，离开屏幕时停止动画，并在减少运动模式下保持静态。在ref上编写属性，不要逐帧重新渲染。参见
references/motion.md。 - 像评论家一样验证。 所有者通过放大来发现缺陷，因此你要首先放大。仔细检查你生成的每一张PNG图片。
- 使用
scripts/capture.mjs捕获桌面端、手机端（宽度390）、悬停状态以及多个运动时刻；对于序列、分解状态和--no-webgl回退情况，使用scripts/drive.mjs。 - 将审核结果清零。 对于包含管道、线缆或圆形零件的图形，
node build.mjs --audit必须输出audit passed，每个失败项目都必须显示为0：静态、分解以及飞行过程中的间隙、终端、松散末端、折叠、自重叠、拥挤（包括对细长实体）、占位形状、支撑、摆动、鞍座和深度顺序。必须通过修改几何体来修复互锁问题，绝不能使用键值偏移。 - 将线条检查结果清零。 审核无视线条标记。
node scripts/lines.mjs page.html --out shots/lines.png（以及在-light页面上，在使用drive.mjs的["lines"]动作产生的每个静态姿态下）必须输出line ends: 0：每条接缝、标尺线、肋线、刻度线和指针都必须终止于一条描边、一个点或一个轮廓线上。请仔细检查用圆圈标注的PNG图片。 - 在两种主题下（也使用
--light构建）对每个连接点进行4倍放大特写检查，包括装配和分解状态：每个法兰、三通、弯头、管夹、阀门、波纹管、绑带、鞍座、球接头和交叉点，每个弯曲体（无色调阶梯），每个纹理结束的位置（在边缘处或淡出），带有接缝的平面盒体面，每个纹理化的软管在分段连接处，每个滑动杆在静止和满行程状态下，以及每个包含文本或着色器内容的窗口。 - 着色器： 使用
["slow", 0.05]在每个过渡状态下生成慢速播放的缩略图接触印相；确保没有突现效果，没有颜色跳跃，边缘读数为0。在浅色主题下，还要记录每个过渡状态下每帧的油墨量（它必须随光照单调变化），并在8-16倍放大下检查油墨与描边交汇处（references/verify.md，“浅色主题着色器”）。 - 将你的PNG图片放在示例旁边，然后问自己：它是否立刻看起来像一个真实物体，充满小型零件且具有立体感，每条线条都终止于某个东西？在1倍视图下是否高度精细，在4倍视图下仍然耐人寻味，没有任何裸露的面或空白的角落？反复迭代直到答案是肯定的。检查清单：
references/verify.md。
设置
工具包位于 kit/ 目录中：
| 文件 | 用途 |
|---|---|
kit/iso-kit.ts | 整个核心功能集中在一个文件中：摄像机、实体、零件库、SVG字符串渲染器、卡片和页面构建器以及CSS（ISO_CSS）。将其复制到TypeScript项目中。 |
kit/iso-kit.mjs | 相同的核心功能编译为纯ESM，用于Node脚本。直接导入即可。 |
kit/iso.css | 导出的 ISO_CSS 文件。导入一次，并在包装元素上添加 class="iso"（对于浅色主题，再加上 data-theme="light"）。 |
…
[截断以进行翻译]