anima

Anima

这项技能可制作生物结构与功能的可视化讲解。准确呈现真实结构，并展示其作用机制。神经元、心脏、细胞和器官等结构应按真实解剖形态呈现；如果机械类比有助于理解过程，可使用明确标注的机械类比（例如，将受体和配体比作锁和钥匙，或将离子通道比作闸阀）。切勿让人误以为类比就是实际的生物学机制。

此技能附带六个生物学示例。开始前，请先打开最接近你需求的示例。每个示例都可以通过 node examples/<name>/build.mjs 构建；该命令会在脚本旁生成一个独立的 HTML 页面；添加 --light 可使用浅色主题。

• examples/neuron/ 展示了一个神经元，包含分支树突、有髓鞘轴突、动态动作电位读数和可悬停查看的突触。这是一个示意图，图中的代表性电压值引用了教育资料。
• examples/dopamine-receptors/ 展示了多巴胺突触连接到纹状体中型棘状神经元的平面剖面：D1 样受体与 Gαs/olf 偶联并提高 cAMP，D2 样受体与 Gαi/o 偶联并降低 cAMP；图中还展示了完整的 G 蛋白循环、多巴胺水平滑块和通用 D2 拮抗剂切换开关。
• examples/stimulants-dat/ 展示了突触前多巴胺末梢的剖面图，并提供 NONE、COCAINE 或 AMPHETAMINE 选择器：涵盖多巴胺转运体介导的再摄取、转运阻断，以及安非他明的转运、囊泡泄漏和反向外流。骨架式来自 PubChem 记录。
• examples/reward-addiction/ 展示了脑部正中矢状面的示意图，显示中脑边缘通路（从 VTA 到伏隔核，以及前额叶皮层、杏仁核和海马体），并提供首次暴露与重复暴露模型切换开关及线索序列。每项论述都明确标注为一种主流模型，并附有资料来源。
• examples/semaglutide-glp1/ 展示了 GLP-1 受体激动剂（semaglutide）作用于胰腺 β 细胞的过程，涵盖葡萄糖依赖性胰岛素分泌、分子的工程化特征，以及食欲和奖赏相关背景。
• examples/estrogen-aggression/ 展示了睾酮经芳香化酶转化为雌二醇，再作用于杏仁核样神经元中的雌激素受体 α 的过程，并提供芳香化酶阻断切换开关。页面明确指出，人类研究证据较弱（14 项研究的合并 Fisher z 为 0.16）。

每个示例都包含资料来源区块、教育用途而非医疗建议的说明、由一个小型模型驱动的实时读数、暂停控件、悬停或聚焦说明，以及减少动态效果时显示的静止画面。可以复制最接近需求的示例作为模板。

此技能所引用的机械类示例（火箭发动机、波纹水槽、街机机柜等）不包含在此处；相关引用仅用于描述这些示例。

关键理念

真实结构本身就是解释。 忠实绘制相关的生物结构，再运用运动、剖面和克制的标注，揭示其工作原理。机械类比是可选的解释层，而不能取代生物学本身。选择适合需求的模式：

模式	用途
真实解剖结构	神经元、心脏、器官、组织、细胞、细胞器或分子结构。保留可识别的形状、空间关系和相关尺度。
机械类比	适合用类比解释的过程或相互作用，例如将受体–配体结合比作锁和钥匙，或将离子通道比作带闸阀门。标明这是类比，并解释其与生物学实际情况的不同之处。

准确性优先于装饰细节。不要虚构解剖结构、暗示缺乏证据支持的机制，或让绘制的尺度看起来像定量数据，除非它确实如此。每个展示的数字——包括大小、浓度、膜电位、速率和剂量——都需要在图注或来源区块中注明引用。引用一手或权威来源，并清楚标出引用所涉及的条件和单位。图示用于科普，不构成医疗建议；对于药物和剂量，尤其要强调这一警告。

先找来源。 绘图前先收集可信参考资料。协调相互矛盾的测量结果，在相关情况下明确物种、组织和条件；无法核实的数字应注明不确定性或省略。请参阅 references/bio.md 和领域指南。

当能够展示可识别的结构时，避免使用抽象的方框和箭头。使用详尽且有明确用途的组成部分，但不要添加会损害准确性或模糊机制的细节。

每项创作都必须高度详尽。 无论构想或需求多么简单，这一点都适用于每幅图。随规模变化的是（工作流第 1 步）细化的程度：Figure 要对主题和机制进行 4× 全面检查，Hero 或 Epic 则要检查整幅图。

• 阅读参考资料。 保留真实结构、空间关系和功能；细节只应在有证据支持时添加。
• 两种观看尺度。 在 1× 下，机制应清晰易懂。在 4× 下，每个细节都应准确且有明确用途。
• 有目的，绝不堆砌。 只包含有助于解释生物学的组成部分；不要为了填满空间而虚构细节。
• 最后检查。 放大到 4×（Figure 检查主题和机制；Hero 或 Epic 检查整幅图），并根据来源核实细节。

工作流

按此顺序开展工作。先写出概念和组成部分清单，再绘制任何几何形状。大部分质量在这一步就已决定。

1. 开始前先估算规模。 在开始任何其他工作前，告诉用户请求属于哪种规模，以及大致需要多长时间。
   • Figure：一个机构、40–80 个部件、SVG，最多包含一个 WebGL 图层。约需 30–90 分钟。无需询问，直接制作。
   • Hero：一个复杂物体、多个 WebGL 图层或一个 3D 主体、80–150 个部件。约需 2–4 小时。先说明情况，然后制作，除非用户要求快速完成。
   • Epic：完整的器官系统、生物体、组织场或包含许多相互作用结构的多尺度生物过程。至少需 6 小时。不要开始制作。给出预估时间，提出一个保留核心构想的 Hero 版本，并列出完整版本还会增加哪些内容。只有用户选择后才制作 Epic。
   • 无论规模如何，都要在第一小时内做出可在浏览器中打开的可用页面，然后再逐步完善。开始时及每个步骤都运行 date；当某个步骤耗时超过其预估时间的两倍时，告知用户目前进度和剩余工作。
2. 先找资料。 收集真实的结构、行为及有来源的数据。将引用与模型数据一并记录。图中或读数中显示的每个数字都必须能追溯到来源；不要暗示超出来源的精确度。如果可行，将模型写成小型纯模块，并由它驱动所有运动和读数。
3. 选择呈现方式。 说明这是写实解剖结构还是机械隐喻。对于解剖结构，指出必须呈现的结构及其关系。对于隐喻，说明映射关系及其局限；不要将其与生物体混淆。
4. 部件清单。 根据所选规模，列出适用的结构、组织、分子、通道、配体、标签和动态元素。按解剖结构和功能分组，并确保每项都有明确用途且可追溯至参考资料。查阅 references/bio.md 和领域指南。
5. 规划场景。 确定合理的比例，或注明图示为示意图。统一设置 x、y 和 z 轴，保留关键的空间关系，并明确标示任何比例断层。选择等距相机，并让构图适配卡片。
6. 几何体只构建一次。 使用工具包在几何模块中预先计算所有静态路径。平滑有机形态使用 kit/blob.mjs，分支和可变半径结构使用 kit/branch.mjs，分子、螺旋和带状结构使用 kit/chem.mjs。机械隐喻仍可使用现有的 kit/lathe.mjs 和 kit/tube.mjs。移动部件在静止位置构建一次，并由共享模型驱动；仅重建每帧都会变化的形状。
7. 按从后到前、从下到上的顺序绘制。 使用 depthOf 对重复部件排序。将任何环绕其他部件的物体拆分为后半部分和前半部分：例如杆周围的弹簧、滑架周围的框架横杆。移动部件应绘制在其实际所在的位置。参见 references/craft.md 中的 “Painter's order”。图中出现管道、电缆和圆形部件后，不要再凭感觉调整键值：将每个项目的形状记录到 A.recorder(P, { order, spring })，让 A.settle(R, P) 测量重叠项目之间的真实深度并设置键值，最后用 A.auditOrExit(R, P) 结束构建。绘制管道前先规划走向：两端接真实接口，管腿沿结构布置，交叉处位于直管段上，套环与管道之间留有间隙（references/craft.md，第 8 节）。如实记录所绘形状：用替代形状绕过审计属于错误，审计会将其判定为失败。从密封套滑出的杆，应是由 G.rodOut 生成的同一根杆，并用 A.slide 记录。
8. 设计画框。 将图形放入卡片：左上角标注 Fig n，右上角放置简短标题，左下角放置交互提示，右下角显示实时读数。在卡片下方或来源区块中添加简洁说明，以及每个显示数字的引用。加入教育用途、非医疗建议的说明，尤其涉及药物和剂量时。
9. 让图形动起来。 使用平缓、基于时间的运动：指数跟随或真实弹簧。无人操作时循环播放待机导览。图形响应指针和键盘输入，离开视口时停止，并在启用减少动态效果时保持静止。将属性写入 refs，不要逐帧重新渲染。参见 references/motion.md。
10. 以批判者的标准验证。 负责人会放大检查并找出问题，因此你要先放大检查。核对每个标签与部件清单和参考资料的一致性，确认比例声明，并对生物图形运行 kit/bio-audit.mjs 检查。

• 使用 scripts/capture.mjs 截取桌面端、手机端（宽 390）、悬停状态和多个运动时刻；使用 scripts/drive.mjs 测试序列、分解姿势和 --no-webgl 降级模式。
• 确保审计问题归零。 对于包含管道、电缆或圆形部件的图形，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。
• 在两种主题下，将每个连接处放大至 4× 检查（也构建 --light 版本），包括装配和分解状态：每个法兰、三通、弯头、夹具、阀门、波纹管、带箍、鞍座、球形关节和交叉处；每个曲面主体（不得出现色调阶梯）；每个纹理的结束位置（必须落在边缘处或逐渐淡出）；带接缝的平面箱体表面；每个纹理软管的段落连接处；每根滑动杆在静止位置和全行程位置的状态；以及每个包含文字或着色器内容的窗口。
• 着色器： 使用 ["slow", 0.05] 减慢每个过渡并生成联系表；不得出现突然跳变或颜色切换，边缘读数须为 0。在浅色主题中，还要记录每帧过渡期间的墨色值（必须随明度单调变化），并将墨色与笔画交界处放大至 8–16× 截图（references/verify.md 中的 “Light-theme shaders”）。
• 将 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。导入一次，并在包装元素或 <body> 上添加 class="iso"（浅色模式还要添加 data-theme="light"）。
kit/react/draw.tsx	适用于服务端的 React 组件：Solid、Line、Wire、Dots、FaceText、IsoFigure、Plate。
kit/react/live.tsx	"use client" 钩子：useReadout、useLoop、useEased、useInView、useStillness，以及 spring 和 follow。
kit/lathe.mjs	沿任意轴创建圆形部件：frameAlong、lathe（任何含有平滑节点的轮廓都会自动启用平滑着色）、solidOf、disc、ringBand、sphereOf、saddleOf、bandsOf（将一个弯曲实体切成可按深度排序的多个带状部分，它们共享一个表面，并由 sidesOf 提供一个轮廓）、可见弧线、圆形表面上的筋条和螺栓圆（ribsOf 和 dotsOf 接受 fade，ribsOf 接受 seams）、用于从填料函中滑出的杆件的 rodOut，以及用于管道线路的 fillet。
kit/tube.mjs	tubePieces 将 3D 管道或电缆拆分成可按深度排序的块（支持 breaks、套环和夹具下方的 gaps、椭圆端盖，以及可沿每个接头的横截面延伸的编织、波纹或缠绕纹理 rings）；tubeSvg 用于绘制管道；crossingsOf 查找线路穿过夹具的位置，runsOf 获取绘制的线路。其 .tb-* 填充样式定义在 ISO_CSS 中。
kit/audit.mjs	用于验证几何结构。recorder(P, { order, spring }) 在辅助函数绘制时收集项目、形状（旋转实体、板块、棱柱、盒体、球体、管道、被宿主切割的垫块）和线路；settle(R, P) 对每对重叠对象进行射线投射，验证静止、分离和重放爆炸状态下的真实深度，并设置绘图器的键（overlapsOf、orderKeys）；auditOrExit(R, P) 是 --audit 钩子，会运行所有检查（clearances、solidClearances、terminals、looseEnds、supports、folds、selfOverlaps、crowding（将细长实体视为线）、coverage（用于替代形状）、wobble、seats、depthOrder），发现任何问题时都会以非零状态码退出。A.slide 用于记录从填料函中滑出的杆件。参见 references/kit.md 第 12 节。
kit/blob.mjs、kit/branch.mjs、kit/chem.mjs	用于生物图示的有机形体、可变半径分支段和分子基元。
kit/bio-audit.mjs	检查生物膜交叉、标签目标，以及声明的每微米单位比例与已知尺寸是否一致。
kit/gl.mjs	用于绘图中着色器的 WebGL 层：GLSL_ISO（GLSL 中的相机，包括 rayOf 和 pixelOf）、glCamera(P)、glLayer(...)，以及 JS 包装函数 smooth、burst 和 settle。对于 3D 图示，GLSL_TURN 和 glslPose(name) 可将世界坐标点带入运动组，并使用 coverOf 遮罩前景画布。
kit/turn.mjs、kit/turn-build.mjs、kit/turn-audit.mjs	可选的 3D 模式。turn-build.mjs 提供 turning(P, { recorder })：群组（旋转、滑动、铰接、自由）、实时图层、带材质的凸形部件，以及 T.build。turn.mjs 是运行时：包含 TURN.mount、控制器、TURN.cover、TURN.poseUniforms 和 TURN_CSS。turn-audit.mjs 提供 orbitOrExit，可对所有旋转角度和运动片段执行轨道检查。参见 references/3d.md。
scripts/capture.mjs	使用启用 WebGL 的无头 Chrome 截取屏幕截图、特写并检查控制台。使用 node 运行。
scripts/drive.mjs	使用 WebGL 的脚本化无头 Chrome：移动、点击、按键、慢动作、等待条件、求值、截图和联系表，可检测突变；支持 --no-webgl 和 --preload。
scripts/lines.mjs	在无头 Chrome 中检查构建后的页面线条末端：每条纹理线都必须终止于描边、点或轮廓。使用 --out 标出失败处；出现任何失败时以状态码 1 退出。
scripts/inline-kit.mjs	kitScript()、glScript() 和 turnScript() 分别以源码形式返回工具包、WebGL 层和 3D 运行时，以便内联到独立页面中。
scripts/turn-check.mjs、scripts/turn-bench.mjs	3D 图示：与工具包构建器进行保真度比较、检查 z 缓冲区顺序、检测像素突变、检查 24 个角度下的线条末端和浏览器中的帧耗时；以及按部件类型统计 Node CPU 耗时。
选择适合项目的路径：

• 独立 HTML、静态 SVG、博客文章或任何非 React 网站。 编写一个 Node 构建脚本，例如 examples/neuron/build.mjs。它导入 kit/iso-kit.mjs，使用 solidSvg、lineSvg、dotsSvg、wireSvg 和 faceTextSvg 拼装字符串，用 figureSvg 和 plateHtml 包装，然后通过 pageHtml({ script: kitScript() + live }) 写入页面；如果页面包含着色器，则使用 kitScript() + glScript() + live。如果只有一个 .svg 文件，则使用 figureSvg({ standalone: "dark" | "light" })，它会嵌入样式。
• React 或 Next.js。 将 kit/ 复制到项目中（例如 components/iso/）。将几何图形放在纯 .ts 模块中，使用 draw.tsx 组件在服务端组件中构建静态图稿，并将其作为元素属性传给一个用于移动元素的 "use client" 实时组件。references/react.md 说明了这种拆分方式，以及大型页面中的一个陷阱。

制作规则（简要版）

这些规则决定了一幅图稿是精心制作的作品，而非示意图。references/craft.md 提供了完整的原理说明和制作方法。

• 实体，而非线框。 每个部件都以纸张颜色填充，并按顺序绘制，因此前面的物体会遮住后面的物体。不要有透明边缘或虚线隐藏线。
• 让工具集负责着色。 extrude 会根据朝向返回四种侧面色调，顶部则更亮。任何有高度的部件都应使用它；只有地面和厚度小于 1 个单位的镶嵌才使用 flat。
• 色调层级。 底座和支脚用 lo，结构用 mid，主体用 hi。恰好用一种强调色 lit（深色模式下为白色，浅色模式下为黑色）：用于读者应该关注的部件。凹槽用 faint，次要刻度用 lo，主要刻度用 mid，零刻度用 hi。只有在颜色本身是主题时才使用颜色，例如红、绿、蓝通道。
• 细节要精致明确，绝不杂乱。 倒角宽度为 0.4–1.6；凹槽距边缘 3–5；螺钉用直径为 0.4–0.55 的点表示，并在板件角落加圆环；旋钮上加滚花；尺刻度每隔 4–5 个单位设置一条，每 5 条设一条主刻度；铭牌上加三条横线。每个细节都应属于某个部件。
• 线条要有落点。 每条线的末端都应落在某个面、另一条线上或终端点上。连接线应为末端点落在物体上的 Wire。不要使用引线、气泡、尺寸箭头或悬空标签。
• 管道或电缆不能穿过任何物体。 静止、分离状态以及爆炸图的任何帧中，都不能穿过其他管道、电缆或实体。除线自身的连接处外，与所有物体保持约 1.5 倍半径的间距；线条应沿结构旁边走，而非横穿主体表面；法兰、带箍、波纹管、卡箍或阀门包覆管道的位置都要留出管道间隙。部件应齐平、相切或以边缘贴在表面上，绝不能嵌入：法兰的背面应贴合其接口（如果接口是曲面，则贴在鞍形垫片上，即 G.saddleOf）；支管应从球形三通接出；每个端头（包括分离状态下）都必须接到法兰、接头、连接器外壳或终端点上。
• 每处交叉都要按真实深度顺序绘制。 两个物体在屏幕上重叠时，较近的物体应绘制在上方，并通过 A.settle 和审计来验证，而非凭肉眼调整。线条应在深度相隔足够远的直线段处交叉：弯头、端头或卡箍若落在另一条线的轮廓上，就会看起来像连接处（杆、拉杆、立柱或横杆也算线：管道的最后一段绝不能在屏幕上沿着它们延伸）；朝向观察者再转弯的支腿会挤成 V 形（应通过弯头球接出这种接口）；路径绝不能在屏幕上折返。无法确定前后顺序的一对物体会互相穿插，解决方法应是切断或相切接触，绝不能靠偏移来处理。
• 曲面着色应平滑，绝不能呈阶梯状。 将曲面节点标记为平滑（[s, r, 1]），并让 lathe 根据同一条单调曲线着色和绘制轮廓；任何尺寸超过管件的曲面主体都应使用带 smooth: { slope } 的解析轮廓，用 G.bandsOf 将长主体分段，并用 G.sphereOf 绘制球体。色调带应逐渐收窄至消失，而不是在直线切口处结束；接缝应置于轮廓之下（inner）。
• 纹理应在真实边缘处结束，或逐渐淡出。 肋条、螺栓圆周、横线、接缝和凹槽在平面或曲面上都不能戛然而止：ribsOf 和 dotsOf 接受 fade（淡出的肋条用 fadedSvg 绘制）；一排肋条应在接缝处结束（ribsOf(…, { seams: true })）；盒体上的接缝或焊缝应绕过棱角（像板件的 inner 一样使用 k.sideSeam）；单个表面上的线条应从一边延伸到另一边；通风口应为封闭槽；刻度应从尺条边缘延伸出来；必须停止的单条线应使用 fadeLineSvg 逐渐淡出；朝上的一排特征（例如环顶的孔）应从四周都能看到（all: true）。管道上的纹理（编织层、波纹、包覆层）应贴合其横截面，并贯穿每个分段接头：使用 tubePieces(…, { rings })，绝不能沿中心线画虚线。管道的高光和阴影应延伸到端盖上，并贯穿每个分段接头。只有表示印刷文字的横线、指针的尾部和指针尖端可以在裸露表面上结束，并标记为 free。
• 着色器绝不能突然跳变或截断。 每个 uniform 都应带有包含起始和衰减阶段的包络；相位变化应由物理量驱动并进行交叉淡化；每个项都应在任何边界或画布边缘前归零；效果应处于图形自身摄像机的世界空间中（见下文）。
• 贴在表面上的内容要适配表面。 机器显示的文字应按最宽字符串适配其显示窗口，并裁剪到窗口范围内；开口后方可见的内容应同时按开口和自身所在平面裁剪，并绘制凹槽侧壁。
• 体积感。 让物体具有真实厚度，使其立在其他物体上，并在底座下方和任何抬起的物体下方加柔和光晕。
• 构图。 将图形居中，并让其占据卡片约 55–65% 的空间。同一组图形应保持比例一致，并确保在 390 px 宽时仍清晰可辨。

绘图中的 WebGL

只在线条无法绘制时才使用着色器：火焰和排气、水和焦散、真实的灯光、辉光、蒸汽。其余部分保留为 SVG。核心规则源自第一个着色器图例：它在不同阶段之间的颜色变化看起来像是切换，而非交叉淡化：

• 三层结构。 背部 SVG 承载被效果遮挡的内容，画布承载效果（pointer-events: none），前部 SVG 承载遮挡效果的内容。如果某个部件或效果位于前后两侧，就将其拆分。
• 同一摄像机下的世界空间。 从 onFloor、onWallX 和 onWallY 构建每个着色器点，或沿像素的射线 rayOf(vb) + t·towardViewer() 进行步进。所有尺寸都使用世界单位乘以 uK。位于平面上的内容会与该平面的 SVG 线条精确对齐。
• 绝不突变。 每个 uniform 都遵循带有渐入和渐出的包络（事件使用工具包的 burst，持续状态使用 settle）。阶段变化采用交叉淡化，颜色随物理量连续变化；淡出时只会变暗。
• 没有硬截断。 每一项都必须在任何 if、边界或画布边缘之前，以及单元噪声的每个单元边缘之前归零。
• 通过开口观察，进行双重遮罩。 开口后方的内容要先在自身平面上遮罩，再由正面平面的开口遮罩，最后将两者相乘（references/webgl.md，第 5 节）。
• 混合。 使用 tonemap() 并添加抖动。在深色主题中，仅增加亮度的画布使用预乘输出和 mix-blend-mode: screen；必须同时能变暗的画布（如波纹水槽中的水）则保持普通混合。
• 浅色主题随产品一同发布，其着色器针对纸面效果设计。 使用普通预乘 Alpha，绝不使用 screen。应绘制纸面需要呈现的颜色，并反推出墨色。辉光应是饱和的主体，带有浅色核心、彩色边缘和 Alpha 下限，绝不能使用深色主题中调暗后的颜色：那会让火箭发动机参考图出现“红墨烟雾”。
  • 光照落在的表面要带有色调，容纳光线的空腔则要呈现更暗的物理底色（烟灰、耐火材料、水深）。
  • 热物体遵循一套与回退方案共用的黑体墨色表。
  • 墨色只随光照增强：对最终墨色统一淡化一次，绝不要逐项淡化。
  • 墨色应在每条笔画的内缘结束。
  • 逐帧测量墨色。references/webgl.md 第 8 节提供了配方以及审查人员发现的问题。
• 克制使用。 将设备像素比上限设为 1.5，并且只在效果处于活动状态且位于屏幕内时渲染。减少动态效果时只显示一帧静止画面，而且即使没有 WebGL，SVG 仍须清晰可读。

编写任何着色器之前，请先阅读 references/webgl.md。

3D：可转动的图形（测试版）

3D 是一种类似 WebGL 的选项。适合用于需要表现部件纵深运动的场景：转动的表盘或转台、弯曲的手指、脱落并坠下的部件。图形的其余部分保持为静态套件插图。

此功能仍处于测试版：引擎已在示例和一个测试图形上验证，但尚未用于生产级图形。一次只转动一个主体，并让周围的杂物保持静态。小型图形运行速度为 60 fps；在负载很重的机器上，一个包含 380 个部件的复杂手部图形在 1440 分辨率下测得约 20 fps，在手机配置（390 px，4× CPU 限速）下测得 13–15 fps。

• 动态部件使用套件自身的图像。 每一帧都会按照套件的规则重新投影并重新着色凸形套件基元（棱柱、圆形件、穹顶、带平面的球体、车削件、管件）。旋转 θ 时，套件会以方位角 a − θ 绘制图形。
• 通过分离平面确定顺序。 同组部件对使用固定在组内的平面，不同连杆上的部件对使用固定在其共同坐标系中的平面，其余部件对则在每一帧求解。审计可证明，在任何角度或动画帧中都不存在循环。
• 接触处必须齐平、相切或以边缘贴合平面。 关节是安装在子组上的同轴指节圆盘，与父组连杆接触；否则审计会将整个子组判定为松动。动态线条不会跨越两个移动组：线缆通过两侧各自的夹子穿过关节，或通过轮毂上的滑环连接到转台。
• 动态管件在近似水平的平面内弯曲，或在接头内部弯曲，且绝不沿视线方向延伸。 弯曲半径需满足 R ≥ 2r / sin²(e − θmax)，其中 θmax 包含管件所经过的每个铰链的俯仰范围：水平时的界限为 8r，在 ±12° 的铰链上为 21r。每条路径都从一个安装表面延伸到另一个安装表面，其端口位于 gaps 中。无论角度或姿势如何，这一规则都成立。
• 材质会重新映射色阶。 金色、铬色、钢色、枪灰色、橡胶色、黄铜色和铜色各有一组亮色和暗色；色调仍由朝向决定。
• 自由组可无跳动地脱落。 同轴部件是带有旋转纹理的固定图像。
• 着色器会跟随运动。 使用 controller.anchor 或 toGroup 将其锚定到某个组，使用 coverOf 遮挡前景画布，并让世界效果（烟雾、坠落的火花、工作台上的油）保持在组空间之外。
• 使用 --audit（turn audit passed）和 scripts/turn-check.mjs（--fidelity、--order、--pops、--lines、--perf）进行验证。使用 --quick --only=… 迭代。只有完整运行才能验证整个图形；30 个部件需要 15–20 分钟，因此请在后台运行。

请先阅读 references/3d.md。

生物学参考资料

• references/bio.md：生物学资料来源、比例和一般表现规则。
• references/neuro.md：神经元和神经信号传导。
• references/pharma.md：药物与靶点的相互作用及剂量－反应图形。
• references/molecular.md：分子结构、螺旋和蛋白质。

限制

这是一款用于教育的插图工具，并非经过验证的解剖图谱、诊断辅助工具或治疗指南。生物学会因物种、组织、个体和实验条件而异；应说明适用范围、呈现不确定性，且不要杜撰缺乏依据的细节。示意图或等轴测图无法呈现所有空间关系。药物和剂量图仅用于教育，不构成医疗建议或处方指导。

参考资料

按需阅读以下资料：

• references/craft.md：深入了解视觉风格，包括带代码的部件词汇表、色调表、绘制顺序模式、圆形部件、管线与线束、分解视图、表面屏幕，以及导致图示被拒的反模式。设计前请先阅读。
• references/kit.md：API、签名和示例。
• references/motion.md：实时行为（循环、弹簧、导览、指针、键盘、无障碍、减少动态效果），以及单次事件、分解视图、深度重新排序和启用的封装示例，涵盖原生 JS 和 React。
• references/react.md：React/Next.js 的服务端/客户端拆分、元素属性，以及大型载荷触发的键警告陷阱。
• references/verify.md：capture.mjs 和 drive.mjs 命令、审核清单（包括着色器）及常见故障。
• references/webgl.md：绘图中的着色器：何时值得使用、图层堆栈、相机约定、等距相机中的光线步进、含精简页面的完整 API、工艺规则及其经验教训（包括相关错误）、浅色主题（纸面上的墨色、各类现象的配方、审核人员指出的问题），以及如何验证。
• references/3d.md：可选的 3D 模式：组和姿态、实时图层、凸面部件及其规则、材质、自由组、铰链链、绘制顺序、转台周围的静态杂物、跟随转动的着色器、轨道审核、浏览器检查、性能和限制。