1实现原理 · 为什么它能做到
能力基础是「每像素算一次颜色」的 GPU 并行模型：先立这个前提，再把所有效果都写成 fragment shader（uniform 的纯函数）。
skills/shader-glsl/SKILL.md
Write GPU fragment shaders for generative motion, gradients, transitions, and post-processing. Fragment shaders run once per pixel in parallel — the most performant way to do full-screen generative motion.
注：这里在做什么：解释为什么 shader 是满屏生成式动效的最优解，而不是只给语法。
骨架固定为「归一化坐标 → 宽高比校正 → 颜色」，并把 IQ 余弦调色板作为最短路径给出（a + b*cos(2π(c*t+d))）。
skills/shader-glsl/SKILL.md
The cosine-palette line above (Inigo Quilez palettes) is the fastest route to a good-looking animated gradient: `a + b*cos(2π*(c*t + d))` with tunable `a,b,c,d` vec3s.
注：这里在做什么：把好看的动态渐变压缩成一行可调公式，避免模型手写插值。
四个基本积木构成全部配方：smoothstep+mix（配 fwidth 做一像素宽抗锯齿边）、无纹理 hash/值噪声与 fbm、SDF 形状、domain warping（噪声喂噪声）。
skills/shader-glsl/SKILL.md
**smoothstep + mix** are the workhorses. `smoothstep(e0, e1, x)` gives a smooth 0→1 ramp; `mix(a, b, t)` linearly blends. Antialias an edge by the width of one pixel:
注：这里在做什么：把 shader 原语固化成可组合零件；后续 SDF 与三种转场都建立其上。
图像转场统一成「两张纹理 + 一个 u_progress」模型：噪声阈值溶解、按位移图推 UV、glitch（按行 hash 位移 + RGB 通道偏移）。
skills/shader-glsl/SKILL.md
Sample two textures and blend per pixel by a progress uniform `u_progress` (0→1).
注：这里在做什么：三种外观不同的转场共享同一进度参数，因此都能被 ?t=N 冻结成确定性帧。
Three.js 接法给到可跑的完整骨架（uniforms + ShaderMaterial + 2×2 平面覆盖裁剪空间 + 无投影 camera），并区分「全屏 pass 直接输出 position」与「真实几何才需要 vUv」。
skills/shader-glsl/SKILL.md
For a full-screen pass with a plain camera, write the vertex shader to output `position` directly and skip projection (as above). For shaders applied to real geometry, pass `vUv` from the vertex shader via `varying vec2 vUv;
注：这里在做什么：补上「shader 写完怎么挂到 three 上」这个最常见断点，含 resize 与 pixelRatio。
移动端/性能规则是 GLSL ES 的硬约束而非风格建议：循环必须常量上界、octave ≤5–6、热路径避免分支、少 texture2D 与依赖式读取、按需 highp/mediump，并给出 ES 3.00 迁移要点。
skills/shader-glsl/SKILL.md
Loops must have **constant bounds** in GLSL ES — no dynamic loop counts. Keep fbm octaves ≤ 5–6.
注：这里在做什么：把「为什么移动端跑不动/编译失败」的根因前置，减少无意义调试；同段给出 `#version 300 es`、in/out/fragColor、texelFetch 等迁移点。
确定性来自「shader 是 uniform 的纯函数」：全部动画只经 u_time（转场再加 u_progress），shader 内随机本就来自确定性 hash(uv)，无需逐帧播种。
skills/shader-glsl/SKILL.md
The shader is a pure function of uniforms — drive everything from `u_time` (and `u_progress` for transitions). All animation flows through one uniform you can pin.
注：这里在做什么：把可复现性建立在着色器语义上（同 uniform → 同像素），使 ?t=N 冻结帧天然成立。
2核心能力
01生成式背景：余弦调色板渐变、hash/值噪声、fbm、plasma/aurora 类有机纹理
02SDF 形状与布尔/圆角几何（分辨率无关 + fwidth 抗锯齿）
03domain warping（噪声喂噪声）得到流体/大理石纹
04三种图像转场：噪声阈值溶解/擦除、位移图推 UV、glitch（行位移 + RGB 通道偏移/色差）
05Three.js ShaderMaterial 接线（uniforms、全屏 quad、setPixelRatio、resize、setAnimationLoop）
06帧冻结 harness：?t=N 直接设 u_time（转场同时钉 u_progress），渲一帧不进循环
07性能/移动端纪律与 ES 3.00 迁移路径（常量循环上界、octave ≤5–6、避免热路径分支、texelFetch）
08完成前清单：非黑屏/无编译错误、?t=N 可复现、三时刻截图（无 banding/NaN）、dispose 与 reduced-motion
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | npx playwright screenshot（验证回路：截 file:// 页面在 ?t=2.0 的冻结帧） |
| cli | 仓库根共享脚本 scripts/seek-shot.sh、scripts/contact-sheet.sh（截图与接触表拼图；不在 skill 目录内） |
| cli | ffmpeg / ffprobe（contact-sheet.sh 与 probe-mp4.sh） |
| network | 交付 HTML 经 importmap 从 CDN 取 three（产物期，浏览器端拉取） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 验证回路依赖 npx 远程获取 Playwright 与 Chromium — SKILL.md 内联 `npx playwright screenshot`（仓库根 seek-shot.sh 为 `npx -y playwright screenshot`）：首次运行会安装远程包并下载浏览器二进制，版本由上游决定。
- GPU/无头渲染差异会造成「像 bug」的输出 — 无 GPU 时走 swiftshader 软件渲染：大 fbm/高分辨率下可能变慢或精度不同，banding/NaN 判读需区分「着色器写错」与「后端差异」。
- 产物期从 CDN 取 three、可能还有远端贴图，均未锁定版本 — 输出契约要求 importmap 指 CDN；转场用的 tex0/tex1/dispTex 若指向远端地址，长期在线的产物需自托管并固定版本，否则会出现 404 或静默变更。
- 仓库根脚本不在 skill 目录内 — scripts/seek-shot.sh、scripts/contact-sheet.sh 位于仓库根；只装 skills/shader-glsl 时引用悬空，需自行改用等价的 playwright/ffmpeg 命令。
风险提醒：蓝色，知晓即可。判级对象＝skill 自身目录，只有 SKILL.md 与 references/glsl-cookbook.md（另有 0 字节 README.md）：无自带脚本、无凭证读取、无端点调用、无用户素材外发；交付物是本地单文件 HTML，着色器在用户浏览器里跑。执行期只涉及本地工具（`npx playwright screenshot` 截 file:// 本地页面、ffmpeg 拼图），产物期 HTML 经 importmap 从 CDN 取 three 属浏览器端拉取（按范式「产物期引用不判级」，仅记入 reason）；转场示例引用的贴图若来自远端，也属浏览器侧行为。注意点：① `npx playwright` 会拉取远程包并首次下载 Chromium（供应链接触面，版本不锁定）；② scripts/seek-shot.sh、scripts/contact-sheet.sh 位于仓库根，单装 skill 目录会引用悬空；③ GLSL ES 的常量循环上界与精度限制意味着部分写法在移动端直接编译失败，属平台约束而非实现自由度。均不满足黄色（无常规网络外发）与橙色（无凭证、无第三方服务后端素材出网）特征；另经全仓扫描确认无关沙箱、关 TLS、绕过自动化侦测等红档行为。
5第二遍独立确认
- [ok] 「skill 目录内无脚本」是否成立（蓝档的关键前提） — 文件清单实证：skills/shader-glsl/ 下只有 SKILL.md、README.md(0 B)、references/glsl-cookbook.md。SKILL.md 引用的 `scripts/seek-shot.sh` 属仓库根资产，已在 reason/risks 记录为「单装 skill 目录会悬空」。
- [ok] 凭证/环境变量读取是否存在 — 本仓（webgl-animation-skills）全仓 `process.env|API_KEY|TOKEN|SECRET|Authorization` 零命中；本 skill 的 credential_reads 为空成立。
- [ok] 是否有更高的触发条件被漏掉（红档特征） — `sandbox|automationcontrolled|no-verify|stealth|bypass|ignoreHTTPSErrors|dangerously` 全仓零命中；无任意代码执行面（交付物是浏览器沙箱内的 GLSL/JS）。
- [ok] 「shader 是 uniform 的纯函数 → ?t=N 可复现」是否与 harness 代码相符 — harness 段在 `?t=N` 分支直接 `frame(parseFloat(t))`（同时把 u_progress 钉到 N），非冻结分支才用 clock + setAnimationLoop；与「只有一个时钟来源」的声明一致，无夸大。
- [ok] GLSL ES 限制类声明是否确实写在文档内（非推测） — 原文 'Loops must have **constant bounds** in GLSL ES — no dynamic loop counts. Keep fbm octaves ≤ 5–6.'；移动端精度段（mediump/highp、pixelRatio 上限、低分辨率 RT 上采样）亦可逐条定位。
- [ok] reference 内容与 SKILL.md 描述是否一致 — glsl-cookbook.md 开篇 'Complete, copy-pasteable GLSL for noise, SDFs, palettes, domain warping, transitions, and Three.js wiring.'，随后逐节给出 IQ 调色板、hash21/hash22/valueNoise、SDF 与 domain warping 实现，与 SKILL.md 末尾能力清单对得上。
6结论
适合：适合要做 GPU 生成式动效的人：动态渐变/noise/plasma/aurora 背景、dissolve/displacement/glitch 转场、色差与畸变、SDF 形状，以及给 three 场景加后处理 pass；输出为可直接打开的单文件 HTML，也适合当作长期查阅的 GLSL 参考卡（cookbook 覆盖 noise/SDF/调色板/warping）。适合以无头截图做视觉验收的流程。
不适合：不适合：① 非 WebGL 渲染管线（Three.js 之外的引擎、原生 OpenGL/Vulkan、影视级离线渲染）；② 需要动态循环次数或复杂控制流的算法（GLSL ES 常量上界限制）；③ 无 GPU 且对帧时间敏感的大分辨率实时渲染（软件渲染明显变慢）；④ 想要零网络依赖的严格离线发布（须自托管 three 并锁版）；⑤ 只安装 skill 目录、指望仓库根 scripts/ 可用的环境（引用会悬空）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 shader-glsl.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentb6013fd669696c7f…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 为实时上游，内容可能已更新。