Design & Motion · iart-ai/webgl-animation-skills
shader-glsl
This skill should be used when the user asks to "write a fragment shader", "make a GLSL gradient/noise/plasma background", "create an image transition (dissolve, displacement, glitch)", "add distortion or chromatic aberration", "build an SDF shape shader", "wire up a Three.js ShaderMaterial with uniforms", or "do GPU post-processing". Covers GLSL fragment shaders, noise/fbm, SDFs, domain warping, transitions, and Three.js integration.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The foundation is the GPU parallel model of "evaluating a color per pixel": establish this premise first, then write all effects as fragment shaders (pure functions of uniforms).
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.
What is being done here: Explains why shaders are the optimal solution for fullscreen generative motion graphics, rather than merely providing syntax.
Fix the skeleton as "normalized coordinates → aspect ratio correction → color", and provide the IQ cosine palette as the shortest path (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.
What is being done here: Condenses dynamic, aesthetically pleasing gradients into a single tunable formula, preventing the model from manually hand-rolling interpolations.
Four basic building blocks make up the entire recipe: smoothstep+mix (paired with fwidth for 1-pixel-wide antialiased edges), textureless hash/value noise and fbm, SDF shapes, and domain warping (feeding noise into noise).
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:
What is being done here: Solidifies shader primitives into composable parts upon which subsequent SDFs and the three transition types are built.
Unify image transitions into a "two textures + one u_progress" model: noise threshold dissolve, UV pushing via displacement map, and glitch (scanline hash displacement + RGB channel split).
skills/shader-glsl/SKILL.md
Sample two textures and blend per pixel by a progress uniform `u_progress` (0→1).
What is being done here: Three visually distinct transitions share the identical progress parameter, allowing all of them to be frozen into deterministic frames via ?t=N.
Provide a runnable, complete Three.js wiring skeleton (uniforms + ShaderMaterial + 2×2 plane covering clip space + projectionless camera), distinguishing between "fullscreen pass directly outputting position" and "actual geometry requiring 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;
What is being done here: Solves the most common stumbling block of "how to mount a finished shader onto Three.js", covering resize and pixelRatio.
Mobile and performance rules are hard constraints of GLSL ES rather than stylistic recommendations: loops must have constant upper bounds, octaves ≤5–6, avoid branching in hot paths, minimize texture2D and dependent texture reads, choose highp/mediump as needed, and outline ES 3.00 migration points.
skills/shader-glsl/SKILL.md
Loops must have **constant bounds** in GLSL ES — no dynamic loop counts. Keep fbm octaves ≤ 5–6.
What is being done here: Surfaces the root causes of mobile execution lag or compilation failures early to reduce futile debugging, highlighting migration points like `#version 300 es`, in/out/fragColor, and texelFetch in the same section.
Determinism stems from "shaders are pure functions of uniforms": all animations are driven solely via u_time (plus u_progress for transitions), and shader randomness inherently originates from deterministic hash(uv) without needing per-frame seeding.
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.
What is being done here: Roots reproducibility firmly in shader semantics (identical uniforms → identical pixels), making ?t=N frame freezing naturally valid.
2Core Capabilities
01Generative backgrounds: cosine palette gradients, hash/value noise, fbm, and plasma/aurora-style organic textures
02SDF shapes and boolean/rounded geometries (resolution-independent + fwidth antialiasing)
03Domain warping (feeding noise into noise) to produce fluid/marble patterns
04Three image transitions: noise threshold dissolve/wipe, displacement map UV pushing, and glitch (scanline displacement + RGB channel shift/chromatic aberration)
05Three.js ShaderMaterial wiring (uniforms, fullscreen quad, setPixelRatio, resize, setAnimationLoop)
06Frame-freezing harness: direct assignment of u_time via ?t=N (pinning u_progress simultaneously for transitions), rendering a single frame without entering loops
07Performance/mobile discipline and ES 3.00 migration path (constant loop upper bounds, octaves ≤5–6, hot-path branch avoidance, texelFetch)
08Pre-completion checklist: non-black screen/zero compilation errors, ?t=N reproducibility, three-timestamp screenshots (no banding/NaN), dispose handling, and reduced-motion support
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| 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（产物期，浏览器端拉取） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Local script or command execution: (SKILL.md instruction) npx playwright screenshot --wait-for-timeout=600 "file://$PWD/
- 网络端点: External network access declaration: The skill directory contains no network-calling code; runtime network surface only stems from fetching tools via `npx playwright` (npm registry + Chromium binary download)
- 本地工作目录: File I/O and artifact output: Core deliverable: single shader.html (created by agent per output contract)
Audit Notes: Evaluation target = skill directory itself, containing only SKILL.md and references/glsl-cookbook.md (along with a 0-byte README.md): no bundled scripts, no credential access, no endpoint invocation, and no outbound exfiltration of user assets. The deliverable is a local single-file HTML, running shaders directly inside the user's browser. Runtime only involves local tools (`npx playwright screenshot` capturing file:// local pages, ffmpeg image stitching); artifact HTML fetching Three.js via importmap from CDN is client-side browser fetching (per standard paradigm: "artifact-time references are not graded", recorded in reason only). Remote textures referenced by transition examples are also browser-side operations. Notes: (1) `npx playwright` pulls remote packages and downloads Chromium on first run (supply chain surface, unpinned version); (2) scripts/seek-shot.sh and scripts/contact-sheet.sh reside in the repo root, resulting in dangling references if only the skill directory is installed; (3) GLSL ES constant loop bounds and precision limits mean certain constructs will fail to compile on mobile, which is a platform constraint rather than implementation freedom. Meets neither Yellow (no regular outbound traffic) nor Orange (no credentials, no third-party backend asset exfiltration) criteria; full-repository scan confirms no red-flag behaviors such as disabling sandboxes, disabling TLS, or bypassing automated detection.
5Second-Pass Verification
- [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 末尾能力清单对得上。
6Verdict & Scenarios
Best for: Ideal for those creating GPU generative motion graphics: dynamic gradients/noise/plasma/aurora backgrounds, dissolve/displacement/glitch transitions, chromatic aberration and distortion, SDF shapes, and post-processing passes for Three.js scenes. Outputs directly viewable single-file HTML, doubling as a long-term GLSL reference card (cookbook covering noise, SDF, palettes, and warping). Well-suited for workflows using headless screenshots for visual verification.
Not for: Not suitable for: (1) Non-WebGL rendering pipelines (engines other than Three.js, native OpenGL/Vulkan, film-grade offline rendering); (2) Algorithms requiring dynamic loop counts or complex control flows (GLSL ES constant upper bound limitation); (3) High-resolution real-time rendering on systems without a GPU that are sensitive to frame times (software rendering is noticeably slower); (4) Strictly offline releases requiring zero network dependencies (must self-host Three.js with version locking); (5) Environments that only install the skill directory expecting repo-root scripts/ to work (references will be broken/dangling).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload shader-glsl.tar.gz
sha256:
Option B · Copy Guide for Agentb6013fd669696c7f…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 50697d659f.