スキル shader-programming-glsl
📦

shader-programming-glsl

安全

GLSL で GPU シェーダーを記述する

GPU シェーダーで豪華な視覚効果を作成し、グラフィックスレンダリングを最適化します。このガイドでは、GLSL 構文、頂点シェーダーとフラグメントシェーダー、リアルタイムグラフィックスのためのシェーダー数学を解説します。

対応: Claude Codex Code(CC)
📊 70 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「shader-programming-glsl」を使用しています。 画面中央にパルスする発光効果を作るシェーダーを作成してください

期待される結果:

smoothstep と時間ベースの sin 関数を使用したフラグメントシェーダーで、中心から端までのカラー補間を持つ放射状グラデーションアニメーションを作成

「shader-programming-glsl」を使用しています。 100 回イテレーションを実行するこのシェーダーループを最適化するにはどうすればよいですか？

期待される結果:

イテレーション回数を減らし、早期終了を使用し、CPU で定数を事前計算し、分岐を step/mix 関数に置き換えて GPU パフォーマンスを向上させる推奨事項

セキュリティ監査

安全
v1 • 2/25/2026

All 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.

1
スキャンされたファイル
122
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
31
コミュニティ
100
セキュリティ
83
仕様準拠

作れるもの

インタラクティブなビジュアルを作成する Web 開発者

Three.js プロジェクト向けに、アニメーション背景、パーティクルシステム、ウェブサイト用のポストプロセッシング効果を含むカスタムシェーダーを構築します。

カスタムエフェクトを実装するゲーム開発者

Unity または Unreal Engine 用のシェーダーを記述し、独自のビジュアルスタイル、地形生成、リアルタイムライティング効果を作成します。

ジェネレーティブアートを探求するクリエイティブコーダー

SDF、レイマーチング、フラグメントシェーダー技術を使用したプロシージャル生成を実験し、デジタルアートインスタレーションを制作します。

これらのプロンプトを試す

基本的なフラグメントシェーダーのセットアップ 
Three.js で使用するための UV 座標に基づいてカラーグラデーションを作成する基本的な GLSL フラグメントシェーダーの記述を手伝ってください。
変換を適用する頂点シェーダー 
time uniform と sin/cos 関数を使用してメッシュに波の変形を適用する頂点シェーダーを生成してください。
レイマーチング SDF シーン 
複数の SDF 形状（球体とボックス）を含み、スムーズユニオン演算で結合されるレイマーチングフラグメントシェーダーを作成してください。
ポストプロセッシング効果 
明るいピクセルを抽出し、ガウスブラーを適用し、元の画像に合成するブルームポストプロセッシングシェーダーを記述してください。

ベストプラクティス

  • if-else 分岐の代わりに、補間には mix() を、閾値処理には step()/smoothstep() を使用する
  • シェーダー内で計算するのではなく、定数値は CPU で事前計算して uniform として渡す
  • 関連データを vec4 にパックしてメモリ帯域幅を最小化し、GPU ベクトルユニットを活用する

回避

  • ループ内の重い条件分岐は GPU 並列性を低下させ、スレッドの分岐を引き起こす
  • CPU から事前計算された uniform を渡す代わりに、静的値をフラグメントごとに計算する
  • 不要な精度（mediump で十分な場合に highp を使用）はモバイルで帯域幅と電力を浪費する

よくある質問

頂点シェーダーとフラグメントシェーダーの違いは何ですか？
頂点シェーダーは 3D 頂点位置を 2D 画面座標に変換します。フラグメントシェーダーは各ピクセルの最終色を決定します。頂点シェーダーは頂点ごとに 1 回実行され、フラグメントシェーダーはピクセルごとに 1 回実行されます。
シェーダーが黒い画面を表示するのはなぜですか？
gl_Position.w が 1.0 であることを確認し、ホストアプリケーションから uniform が設定されていることを確認し、UV 座標が 0-1 の範囲にあることを確認し、シェーダーがエラーなくコンパイルされたことを確認してください。
GLSL での swizzling とは何ですか？
Swizzling は .xyzw、.rgba、.stpq などの接尾辞を使用してベクトル成分を並べ替えたり選択したりする機能です。例えば、color.zyx は vec3 の RGB チャンネルを逆順にします。
頂点シェーダーからフラグメントシェーダーにデータを渡すにはどうすればよいですか？
varying キーワードを使用します。両方のシェーダーで varying を宣言し、頂点シェーダーで値を代入し、フラグメントシェーダーで読み取ります。値はプリミティブ全体で補間されます。
レイマーチングとは何で、いつ使用するべきですか？
レイマーチングは符号付き距離関数を使用して光線に沿ってステップすることで 3D シーンをレンダリングします。プロシージャルジオメトリ、有機的な形状、従来のラスタライゼーションでは困難な効果に使用します。
モバイルデバイスでシェーダーのパフォーマンスを向上させるにはどうすればよいですか？
可能な場合は mediump 精度を使用し、テクスチャルックアップを最小化し、ループイテレーションを減らし、動的分岐を回避し、複雑な計算を CPU で事前計算します。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl

参照

main

ファイル構成

📄 SKILL.md