1实现原理 · 为什么它能做到
能力全部落在「内联可运行代码 + 规则」上：SKILL.md 正文直接给出每颗粒子的状态推进循环、受力函数、流场/curl 噪声、空间网格连线与 GPU Points 着色器片段，照抄即得，不需要任何库或构建步骤。
skills/particle-system/SKILL.md
Drive many small elements with simple per-particle rules to get emergent, organic motion. Use 2D canvas for hundreds, GPU `Points` for thousands.
注：这里在做什么：把「粒子效果」拆成一条主线（每颗粒子推进）加若干可组合零件；正文即配方，references 再给完整可跑系统。
稳定性靠积分格式而非调参：明确要求半隐式欧拉（先更速度、再用新速度更位置）并钳制 dt，理由分别是弹簧/阻尼力下的稳定性与标签页卡顿后仿真不炸。
skills/particle-system/SKILL.md
Prefer **semi-implicit Euler** (update velocity first, then position with the new velocity, as above) — it is stable for the spring/drag forces particles use. Use a fixed or clamped `dt` (`Math.min(dt, 1/30)`) so a stalled tab does not explode the simulation.
注：这里在做什么：给「为什么这么写」而不只给代码；reference 的 canvas 样板把同一条写成注释 `const dt = Math.min((now - last) / 1000, 1 / 30); // clamp dt`。
性能瓶颈被点名并给出数据结构解法：连接点网络不做两两比较，而是按半径分桶、只比相邻 8 格，复杂度从 O(n²) 降到接近 O(n)。
skills/particle-system/SKILL.md
Naively checking every pair is O(n²) and dies past ~300 particles. Use a **uniform spatial grid**: bin particles by cell, only compare against the 8 neighboring cells.
注：这里在做什么：给出量级阈值（约 300 颗以上必须换算法）并附可复制实现，使「该不该换实现」成为可判定问题。
上万粒子的路径是把动画搬进顶点着色器：位置进 BufferGeometry 渲染成 Points，并交代「看起来像发光点」的两个开关——叠加混合 + 关闭深度写入、用 gl_PointCoord 距离 discard 把方块剪成圆点。
skills/particle-system/SKILL.md
`AdditiveBlending` + `depthWrite: false` gives the glowing-particle look. `discard` on `gl_PointCoord` distance makes square points round.
注：这里在做什么：GPU 版改变的是数据位置（每粒子属性进 attribute、时间只传一个 uniform），故单列一段，而不是「更快的同一件事」。
交付物限定为单文件 HTML 并禁止打包器：canvas 2D 内联，或 GPU 用 importmap 把 three 指到 CDN，一个渲染循环、零构建步骤。
skills/particle-system/SKILL.md
For a self-contained particle effect (constellation background, confetti burst, flow field, GPU points) the deliverable is **one HTML file that opens directly in a browser** — canvas 2D inline, or Three.js from a CDN via an importmap for GPU `Points`, one render loop, no build step.
注：这里在做什么：把 tier 写死（单文件就是正确档位），避免为粒子效果搭脚手架。
确定性是可验证的前提：用种子化 PRNG（mulberry32）替换裸 Math.random，使 `?t=N` 冻结帧可复现——同一 N 出同一像素，截图验证才成立。
skills/particle-system/SKILL.md
**Seed the RNG** — replace bare `Math.random()` with a seeded PRNG (e.g. mulberry32) so spawn positions, angles, and bursts reproduce frame-for-frame.
注：这里在做什么：harness 段配套给出 `let rng = mulberry32(1234);` 与固定步进（`const step = 1 / 60`）后渲单帧。
2核心能力
012D canvas 粒子特效族：confetti / snow / smoke / sparks（以重力、阻尼、寿命、旋转与形状区分）
02可组合受力系统（重力、阻尼、吸引/排斥、归位弹簧），力＝返回加速度的函数
03流场与 curl 噪声（无散度、流体感），并可随时间演化
04连接点/星座网络：空间网格 + 按距离淡出的连线，接近线性复杂度
05GPU 粒子（Three.js Points + ShaderMaterial，顶点着色器内动画，支持每粒子属性如 life/seed）
06发射模型二选一：一次性 burst（锥形随机 + 上抛偏置）与连续发射（稳态速率 + 死亡回收重生）
07确定性冻结 harness（?t=N 重播种 + 固定步进 + 渲单帧 + window.__ready）与完成前清单（含 reduced-motion 降级与 dispose）
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npx playwright screenshot（验证回路：打开本地 file:// 页面并截冻结帧） |
| cli | 仓库根共享脚本 scripts/seek-shot.sh、scripts/contact-sheet.sh（截图与拼图；不在 skill 目录内） |
| cli | ffmpeg / ffprobe（contact-sheet.sh 用 hstack 拼图；probe-mp4.sh 读编码参数） |
| network | 交付 HTML 经 importmap 从 CDN 取 three（GPU Points 分支）——产物期引用，由浏览器拉取 |
| package | simplex-noise（流场/curl 噪声示例引用的噪声库，注释中点名） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 验证回路依赖 npx 远程获取 Playwright 与 Chromium — SKILL.md 内联 `npx playwright screenshot`（仓库根 seek-shot.sh 为 `npx -y playwright screenshot`）：首次运行会安装远程包并下载浏览器二进制，版本不由本 skill 锁定。环境已有 Playwright/浏览器时可用本地二进制替代同一回路。
- 仓库根脚本不在 skill 目录内，安装方式决定引用是否悬空 — scripts/seek-shot.sh 与 scripts/contact-sheet.sh 位于仓库根（插件根）。只安装 skills/particle-system 时两条命令会找不到文件；等价替代是自行写 playwright 截图与 ffmpeg 拼图。
- 无 GPU 环境会因软件渲染差异出现「看着像 bug」的画面 — 无头 WebGL 走 swiftshader，粒子量大或混合模式复杂时可能变慢/掉帧；SKILL.md 已列为环境前提，验收时应区分「实现错误」与「渲染后端差异」。
- GPU 分支的 three 来自 CDN，属未锁定的供应链引用 — importmap 指向 CDN（URL 由实现者自选，源码未钉版本）。产物长期在线时建议自托管并固定版本。
风险提醒：蓝色，知晓即可。判级对象＝skill 自身目录，只有 SKILL.md 与一份 markdown reference（另有 0 字节 README.md）：无自带脚本、无凭证读取、无端点调用、无用户素材外发，指令面全是「写一份本地 HTML」。执行期只涉及本地工具（`npx playwright screenshot` 打开的是 file:// 本地页面，仓库根脚本做本地截图与 ffmpeg 拼图）；产物期 HTML 经 importmap 从 CDN 取 three 属浏览器端拉取（按范式「产物期引用不判级」，仅记入 reason）。注意点：① `npx playwright` 会拉取远程包并首次下载 Chromium（一次性工具获取、版本不锁定，属供应链接触面；改用本地已装 Playwright 可完全消除）；② 引用的 scripts/seek-shot.sh、scripts/contact-sheet.sh 位于仓库根而非 skill 目录，只安装 skill 目录时引用悬空；③ WebGL/GPU 依赖：无头环境需 swiftshader，否则粒子页面可能整片空白，应据 SKILL.md 的伪影清单判因，而不是直接判定实现有错。均不构成黄色（无常规网络外发）与橙色特征；经全仓扫描确认无关沙箱、关 TLS、绕过自动化侦测等红档行为。
5第二遍独立确认
- [ok] 「skill 目录内无脚本」是否成立（决定蓝而非黄/橙的关键） — 文件清单实证：skills/particle-system/ 下只有 SKILL.md、README.md(0 B)、references/particle-recipes.md。SKILL.md 提到的 `scripts/seek-shot.sh` 实际位于仓库根 scripts/，并非 skill 自有资产；因此判级对象内确实没有可执行代码。已在 reason/risks 记录「单装 skill 目录会使引用悬空」。
- [ok] 是否存在凭证或环境变量读取 — 全仓正则 `process.env|API_KEY|TOKEN|SECRET|Authorization` 在三个 iart 仓内零命中（唯一命中在 javascript-animation-skills 的 soundtrack/references/ai-music.md，属另一 skill）。本 skill 的 credential_reads 为空成立。
- [ok] 是否有比蓝更高的触发条件被漏掉（红档特征） — 对 `sandbox|automationcontrolled|no-verify|stealth|bypass|ignoreHTTPSErrors|dangerously` 全仓扫描零命中；不存在关沙箱、关 TLS、绕过自动化侦测或任意代码执行面。
- [ok] GPU / 无头渲染前提是否真的写进文档（任务特别提示项） — SKILL.md 验证段原文承认这是环境前提并把归因从代码上摘开：'For GPU points, WebGL needs a GPU context; Playwright/Chromium supplies one (swiftshader) headless.'；完成清单第 1 条也要求无 WebGL 错误。
- [ok] 「O(n) 连接点」与「?t=N 可复现」两条能力声明是否与代码相符 — 空间网格实现（`cell = radius` 分桶、只查 3×3 邻域）与声明一致；harness 要求 seeded PRNG + 固定步进（`const step = 1 / 60`）再渲单帧，确实保证同 N 同像素。无夸大。
- [ok] reference 描述是否逐条落地 — references/particle-recipes.md 开篇即 'Complete, runnable systems for canvas and GPU particles.'，与 SKILL.md 末尾列出的能力项（confetti/snow/smoke、鼠标吸引排斥、simplex 流场与 curl、空间网格星座、GPU Points）在文件内可逐节验证。
6结论
适合：适合要做粒子/星座背景、confetti/sparks 爆发、雪花雨、烟雾、流场或 curl 噪声漩涡、以及上万粒子的 GPU 点云这类「以代码生成运动」的场景；交付形态是可直接双击打开的单文件 HTML，也适合嵌进已有页面（文档另给 dispose 与取消 rAF 的清理要求）。适合接受无头浏览器截图作为验证、且环境有（或能用软件渲染替代）WebGL 的用户。
不适合：不适合：① 需要真实素材或视频合成的粒子（本 skill 只产 HTML，不涉及编码输出与 mux）；② 需要后端或集群算力的超大规模仿真（GPU 分支仍限于着色器内逐顶点动画）；③ 需要严格版本锁定与离线构建的商业发布（须自行自托管 three 并固定版本）；④ 只安装单个 skill 目录而不带仓库根 scripts/ 的环境（验证脚本引用悬空，需自行替换命令）；⑤ 把粒子当纯装饰但要求零动效可访问性的场景，静态场取舍须自行决定（文档只要求 reduced-motion 降级）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 particle-system.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentd8271a602d6dd44b…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/webgl-animation-skills
原始 GitHubiart-ai/webgl-animation-skills ↗
Stars14
最近推送2026-06-22
本 skill commit
50697d659f许可MIT（仓库根 LICENSE 为 MIT License / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 亦声明 "license": "MIT"）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。