1仕組みと動作原理
能力の基盤は「1ピクセルごとに1回色を計算する」GPU並列モデルです。まずこの前提を確立した上で、すべてのエフェクトをフラグメントシェーダー（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.
ここで行っていること：単に構文を提供するのではなく、なぜシェーダーが画面全体のジェネレーティブな動的表現において最適解であるのかを説明します。
骨格を「正規化座標 → アスペクト比補正 → カラー」に固定し、最短経路として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.
ここで行っていること：美しい動的グラデーションを調整可能な1行の数式に凝縮し、モデルが手動で補間処理を記述するのを防ぎます。
4つの基本ブロックですべてのレシピを構成します：smoothstep+mix（1ピクセル幅のアンチエイリアス境界を作るfwidthとの組み合わせ）、テクスチャレスなhash/値ノイズとfbm、SDF形状、ドメインワーピング（ノイズにノイズを入力）。
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:
ここで行っていること：シェーダーのプリミティブを組み合わせ可能な部品として定型化し、以降のSDFや3種類のトランジションをすべてその上に構築します。
画像トランジションを「2枚のテクスチャ + 1つのu_progress」モデルに統合します：ノイズ閾値ディゾルブ、ディスプレイスメントマップによるUV変位、グリッチ（行ごとのhash変位 + RGBチャンネルシフト）。
skills/shader-glsl/SKILL.md
Sample two textures and blend per pixel by a progress uniform `u_progress` (0→1).
ここで行っていること：見た目の異なる3つのトランジションが同一の進捗パラメータを共有するため、すべて?t=Nによって決定論的なフレームとして固定できます。
Three.jsの連携コードを実行可能な完全な骨格（uniforms + ShaderMaterial + クリップ空間を覆う2×2平面 + 投影なしカメラ）として提供し、「画面全体パスで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;
ここで行っていること：resizeやpixelRatioを含め、「シェーダーを書いた後にThree.jsへどう組み込むか」という最も頻発するつまずきポイントを解消します。
モバイル／パフォーマンスの規則はスタイルの提案ではなく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などの移行点も解説します。
決定論的再現性は「シェーダーがuniformの純粋関数である」という性質に基づきます：すべてのアニメーションはu_time（トランジション時はさらにu_progress）のみを経由し、シェーダー内のランダム性は確定的な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、プラズマ／オーロラ風の有機的テクスチャ
02SDF形状とブーリアン／角丸ジオメトリ（解像度非依存 + fwidthアンチエイリアス）
03ドメインワーピング（ノイズにノイズを入力）による流体／大理石模様の生成
043種類の画像トランジション：ノイズ閾値ディゾルブ／ワイプ、ディスプレイスメントマップによるUV変位、グリッチ（行変位 + RGBチャンネルシフト／色収差）
05Three.js ShaderMaterialの連携（uniforms、フルスクリーンクアッド、setPixelRatio、resize、setAnimationLoop）
06フレーム固定ハーネス：?t=Nでu_timeを直接設定（トランジション時は同時にu_progressを固定）、ループに入らず1フレームのみ描画
07パフォーマンス／モバイル規律およびES 3.00移行パス（定数ループ上限、octave ≤5–6、ホットパスでの分岐回避、texelFetch）
08完了前チェックリスト：黒画面／コンパイルエラーなし、?t=Nでの再現性、3箇所のタイムスタンプスクリーンショット（バンディング／NaNなし）、dispose処理、reduced-motion対応
3外部依存関係
| 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（产物期，浏览器端拉取） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （SKILL.md内の指示）npx playwright screenshot --wait-for-timeout=600 "file://$PWD/
- 网络端点: 外部ネットワークアクセスの宣言: スキルディレクトリ内にネットワーク呼び出しコードは存在しません。実行時のネットワーク通信は`npx playwright`によるツール取得（npmレジストリ + Chromiumバイナリのダウンロード）のみです
- 本地工作目录: ファイルの読み書きと成果物出力: 提供される成果物本体：単一のshader.html（出力規約に従ってエージェントが作成）
監査ノート： 判定対象＝スキル自身のディレクトリであり、SKILL.mdとreferences/glsl-cookbook.md（および0バイトのREADME.md）のみで構成されています。内蔵スクリプトなし、認証情報の読み取りなし、エンドポイント呼び出しなし、ユーザーアセットの外部送信なし。成果物はローカルの単一HTMLファイルであり、シェーダーはユーザーのブラウザ内で実行されます。実行時はローカルツールのみが関係し（file://ローカルページを撮影する`npx playwright screenshot`、画像結合のffmpeg）、成果物HTMLがimportmap経由でCDNからThree.jsを取得する処理はブラウザ側の取得です（標準パラダイム「成果物生成時の参照は判定対象外」に基づき、reasonにのみ記録）。トランジションの例で参照されるテクスチャが外部のものである場合も、ブラウザ側の挙動に該当します。留意点：① `npx playwright`は初回実行時にリモートパッケージを取得しChromiumをダウンロードします（サプライチェーンの接触面、バージョン未固定）；② scripts/seek-shot.sh、scripts/contact-sheet.shはリポジトリルートに存在するため、スキルディレクトリ単体でインストールすると参照がリンク切れになります；③ 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ジェネレーティブ動的表現を作成したい方に適しています：動的グラデーション／ノイズ／プラズマ／オーロラ背景、ディゾルブ／ディスプレイスメント／グリッチのトランジション、色収差や歪み、SDF形状、およびThree.jsシーンへのポストプロセスパス追加。直接ブラウザで開ける単一HTMLファイルとして出力されるため、長期的に参照できるGLSLリファレンスカード（ノイズ、SDF、パレット、ワーピングを網羅したクックブック）としても適しています。ヘッドレススクリーンショットによる視覚的検証プロセスにも最適です。
不向きな用途： 以下には適していません：① WebGL以外のレンダリングパイプライン（Three.js以外のエンジン、ネイティブOpenGL/Vulkan、映画クオリティのオフラインレンダリング）；② 動的なループ回数や複雑な制御フローを必要とするアルゴリズム（GLSL ESの定数上限制約）；③ GPUがなくフレームレートに敏感な大解像度のリアルタイムレンダリング（ソフトウェアレンダリングで顕著に低速化）；④ 外部ネットワーク依存を完全に排除した厳密なオフライン配布（Three.jsをセルフホストしバージョン固定が必要）；⑤ スキルディレクトリのみをインストールし、リポジトリルートのscripts/が利用可能であることを前提とする環境（参照がリンク切れになります）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload shader-glsl.tar.gz
sha256:
Option B · Copy Guide for Agentb6013fd669696c7f…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 50697d659f.