关于 threejs-procedural-motion-systems
用于设计 Three.js 程序化运动系统的技能,强调明确的状态所有权、确定性计时和坐标系安全的变换。涵盖解析与递归运动、GPU 表示选择、生命周期规则和验证。
主要功能
- 01每个运动通道仅设一个写入者
- 02解析式与固定步长时间模型
- 03确定性重放与跳转
- 04坐标系感知的变换与重设父级
- 05运动历史与重置策略
- 06CPU/GPU 表示选择
适用场景
- 01创建可跳转的程序化运动
- 02使递归模拟与渲染同步
- 03重设 Actor 父级并保持世界姿态
- 04验证不同呈现帧率下的运动
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ linegel/ threejs-complete-set-of-skill --skill threejs-procedural-motion-systems安装后在 Claude Code 中输入/threejs-procedural-motion-systems确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
LICENSEagents/openai.yamlreferences/procedural-motion-and-docking-systems.md详细介绍
程序化运动系统
语义状态是真实数据源;变换是它的呈现形式。每个位置、方向、速度、阶段和事件通道都只保留一个写入者。
流程
1. 声明状态及其写入者
说明可观察的运动、SI 单位、坐标系、稳定的 Actor 标识、初始状态、阶段/事件状态,以及时长约定:有限时长,带终止姿态和速度/交接规则;周期性,带循环规则;或无限时长,带停止/重置策略。为每个动画通道指定一个写入者;片段、程序化根节点、实例存储、摄像机架和外部求解器只能通过明确的分层顺序拥有不同通道。
当另一个模拟系统提供运动或对运动做出反应时,声明:
- 交换的量、单位、坐标系/原点、状态所有者、生产者、消费者、版本和发布顺序;
- 时间戳或左闭右开区间、频率、采样阶段、插值或外推方式,以及不连续行为;
- 支持/滤波、有效性、过时状态、误差界限和缺失值行为;
- 速率与区间积分语义,以及单向或双向反应的所有权和顺序;
- GPU 生产者/消费者通道、资源代次、队列顺序和实际完成凭据;
- 不可变的上一帧/当前已提交样本、稳定标识,以及重置、复用、退役和释放规则。
将帧关键状态保留在其所属设备上;在状态推进和呈现之外,异步安排诊断性回读。
**完成条件:**每个动画通道恰好有一个写入者、一套坐标系和单位约定、一个稳定标识,以及明确的初始状态和有限、周期性或无限时长约定;每个跨系统边界都满足上述所有适用声明。
2. 选择时间模型和表示方式
先根据状态依赖关系选择,再考虑 Actor 数量:
| 运动 | 时间模型 | 表示方式 |
|---|---|---|
| 可跳转的设计变换 | 基于权威秒数的闭式计算 | 少量 Actor 使用 Object3D;大量 Actor 使用顶点 TSL |
| 分阶段的设计序列 | 闭式计算加离散事件状态 | 阶段局部时间和可重放的事件日志 |
| 弹簧、约束、碰撞或其他递归状态 | 固定步长,使用上一帧/当前状态 | 根据实测交叉点选择 CPU 数组或 GPU 存储 |
| 感知式跟随 | 与 dt 正确匹配的指数响应 | 渲染时状态,明确声明为非物理状态 |
对重复的相同拓扑使用 InstancedMesh。对材质状态兼容但拓扑各异的模型使用 BatchedMesh。只有在超过实测 CPU 遍历/上传交叉点时,才使用存储和计算。
标准路径通过 three/webgpu 初始化 WebGPURenderer,使用 await renderer.init(),并验证 renderer.backend.isWebGPUBackend === true。
**完成条件:**每个运动分支都有一个时间模型和一种表示方式;每条 GPU 路径都说明其适用的实测工作负载阈值。
3. 让时间保持确定性
直接从权威的已流逝秒数采样解析运动。以固定步长推进递归状态,保留不可变的前一状态和当前状态,并将每个完整的未处理步长移入单独的欠账状态,这样在呈现前可确保 0 <= accumulator < fixedStep,并使用 alpha = accumulator / fixedStep。为整个运动所有者统一定义原始增量限制、最大子步数、欠账处理、暂停/恢复和重播行为。丢弃欠账或按计划追赶,与重置不连续状态是两项独立决策。耦合状态按其仿真所有者的节奏推进,而不是按渲染回调的节奏推进。
对于感知跟随,将目标声明为在区间内积分的连续函数、带时间戳的零阶保持,或带时间戳的插值样本。在对应时间戳应用变化;呈现节奏永远不会改变底层目标信号。
使用已存储的种子、计数器和一次性事件标志。直接跳转会重建与重播至该时刻相同的相位和事件状态。AnimationMixer 要么按固定步长更新,要么遵循已声明的动作状态重置/跳转重播方案;仅调用 setTime() 无法重建已完成的动作或事件计划。它不会采样独立时钟。
**完成标准:**发生卡顿后,解析时钟和递归时钟不会分离;插值状态对会以有界累加器夹住呈现时间;欠账和重置决策可分别观测;相同的初始状态以及所有适用的种子、固定步长、事件计划和目标信号,能在每种测试的呈现节奏下重现匹配时刻的相同状态。
4. 实现适用于任意帧的变换
为每个位置、方向、速度和四元数标明源帧和目标帧。对轴进行归一化,处理平行和反平行向量对齐,为最短路径四元数分支规范化符号,保留创作指定的长弧/整圈旋转绕数,声明乘法顺序,并归一化累积旋转。
重设父级时,通过 M_local_new = inverse(M_world_newParent) * M_world_old 保持世界姿态。仅在残差通过检查时才分解为 TRS;非均匀祖先变换产生剪切时,保留仿射矩阵或包装器。释放的子级会继承移动帧速度,包括旋转父级的 omega cross r,以及已在移动的子级经过变换后的相对速度。停靠误差要在当前停靠帧中分解,而不是在过时的世界帧中分解。
**完成标准:**每个变换都声明了帧链和四元数顺序;重设父级后,世界矩阵在容差范围内保持不变;零向量/反平行输入不会产生非有限值;移动帧释放包含所有输运项。
5. 发布、重置和释放
发布不可变的上一代/当前代姿态,并保持 Actor 身份稳定;渲染姿态、边界和阴影均从同一对姿态推导。运动矢量还会保留上一帧已呈现的采样和相机;它们不会用上一模拟刻替代上一已显示姿态。发生剪切、瞬移、生成/销毁、重新设定父级、拓扑或变形变化、LOD/质量变化、存储槽复用或身份变化时,会开启新的有效性周期,并重置受影响的历史记录,而不是推导出极端速度。
只有语义运动重置时,才同时重置阶段时间戳、累加器和欠账记录、种子计数器、事件标志、有限运动终止锁以及上一帧/当前帧缓冲区。相机剪切或其他仅涉及时间的重置,只清除受影响的呈现历史,不重启语义运动。释放时,系统拥有的存储、计算资源、回读暂存区、监听器、计时器和渲染器循环都会被释放。
**完成标准:**每种不连续情况都为每个历史记录使用者选择保留、迁移或重置;仅涉及时间的重置会保留语义状态;语义重置会原子地恢复已声明的初始状态;旧身份无法访问复用的存储槽;释放后不再存在活动的所有者、监听器、缓冲区或动画循环。
6. 验证不变量
对每个选定分支,只运行适用的检查。解析式运动在 30、60、120 和 240 Hz 呈现频率下,将直接求值与回放结果进行比较。递归运动在这些呈现频率下保持同一固定步长计划,并通过步长减半测试。感知跟随使用一个带时间戳或经过解析积分的目标信号,并比较共享的墙钟时间检查点。有限运动会到达精确的终止姿态以及已声明的速度或交接状态;终止锁要求在其已声明的坐标系中,相对残余速度为零,同时继承任何移动接口的速率。周期性和开放式运动会验证其已声明的回绕或停止/重置转换。
如有选择,还要检查四元数范数和符号连续性、重新设定父级前后的世界矩阵相等性、实例身份稳定性,以及每种不连续情况下的重置行为。GPU 运动会记录调度次数、热路径字节数、p50/p95 耗时和零帧关键回读。节点后置处理证明只有一个呈现/输出所有者。
**完成标准:**每个选定分支都通过其节奏、所有权、坐标系、重置、生命周期和可见故障检查;涉及性能声明时,需记录阈值和目标硬件。
条件引用
- 如需了解解析插值、相位事件、发射路径、分离或碎片,请阅读解析相位、发射与级段释放。
- 如需了解循环计时、弹簧、回放、
AnimationMixer或终端锁定,请阅读时间与状态模型。 - 如需了解
InstancedMesh、BatchedMesh、存储属性、TSL 计算或 GPU 完成,请阅读r185 表示与 GPU 驻留。 - 如需了解对接坐标系、四元数顺序、重新挂载或旋转父级上的释放,请阅读移动坐标系、对接与四元数。
- 如需了解由水体、地形、天气、接触或求解器驱动的角色,请阅读环境驱动的角色,并应用步骤 1 中的交接要求。
- 如需了解时间呈现、重置范围、输出所有权、清理或故障诊断,请阅读呈现、重置、输出与生命周期以及故障特征与验证。
路由边界
处理相机运动与交接时,请使用 $threejs-camera-controls-and-rigs;交付内容为池化特效时,请使用 $threejs-particles-trails-and-effects;处理环境状态时,请使用相关的水体或地形技能。请求涉及运动以及渲染、几何体、材质、阴影、后期处理或其他模拟时,请使用 $threejs-choose-skills。