mcpField
G
glslviewer-shader-debug

glslviewer-shader-debug

github.com/openharmonyinsight開発3549 回インストール11 週間前に更新
リポジトリ

glslviewer-shader-debug について

glslviewer-shader-debugは、シェーダーの計算結果を再現可能なヘッドレスプレビューにするスキルです。シェーダー断片を標準GLSLに変換し、glslViewerでPNGをレンダリングして、形状やマスクを期待値と照合する手順を示します。

主な機能

  1. 01シェーダー断片をGLSLに変換
  2. 02ディスプレイなしでシェーダーを描画
  3. 03PNGプレビューの出力
  4. 04輪郭とマスクの可視化
  5. 05期待値と描画結果の照合

活用シーン

  1. 01符号付き距離関数の輪郭確認
  2. 02グラデーションや法線の向きの確認
  3. 03シェーダー計算と想定形状の比較

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/openharmonyinsight/openharmony-skills --skill glslviewer-shader-debug

インストール後、Claude Code で/glslviewer-shader-debugを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
sdf-contour-template.frag
references/
runtime-effect-to-glsl.md
scripts/
render_headless.sh

詳細

glslViewer シェーダーデバッグ

このスキルを使うと、シェーダーの数式を再現可能なヘッドレスプレビューに変換できます。

ワークフロー

  1. command -v glslViewer || command -v glslviewer を実行して、glslViewer が利用可能であることを確認します。
  2. 作業用の .frag ファイルを作成します。通常は assets/sdf-contour-template.frag をコピーします。
  3. 元のシェーダーを標準 GLSL に変換します。
  4. scripts/render_headless.sh を使ってシェーダーをレンダリングします。
  5. 生成された PNG を確認し、輪郭やマスクの形状が想定どおりか比較します。

変換ルール

  • ランタイムシェーダーや SkSL に似たスニペットについては、references/runtime-effect-to-glsl.md を参照します。
  • まず数式を同一に保ちます。動作を変える前に、構文を変更してください。
  • half4 や float2 などの標準外の型を、GLSL に相当する型に置き換えます。
  • main(vec2 fragCoord) を標準的なフラグメントエントリーポイント形式に書き換えます。
void main()
{
    vec2 fragCoord = gl_FragCoord.xy;
    fragColor = ...;
}
  • 生の SDF アルファ値を凝視するのではなく、輪郭またはマスクの可視化を追加することをおすすめします。テンプレートには再利用可能な previewColor() ヘルパーがすでに含まれています。

レンダリング

次のようにして、1 つ以上のフラグメントシェーダーをレンダリングします。

/root/.codex/skills/glslviewer-shader-debug/scripts/render_headless.sh path/to/a.frag path/to/b.frag

便利なオプション：

  • --output DIR：出力ディレクトリを指定します
  • --size WIDTHxHEIGHT：レンダリングサイズを指定します。デフォルトは 256x256 です
  • GLSLVIEWER_BIN=/full/path/to/glslViewer：特定のバイナリを強制的に使用します

スクリプトは、入力シェーダーごとに PNG を 1 つ書き出します。また、元のエクスポート済みフレームを含むフレームディレクトリも書き出します。

検証のヒント

  • 角丸矩形の SDF では、上下の走査線が角の近くで狭くなるはずです。
  • グラデーションや法線には、方向の変化がはっきり分かるよう、偽色表示を使うのがおすすめです。
  • ヘッドレスプレビューが正しく表示されてもデバイス上の出力が正しくない場合は、純粋な数式よりも、ユニフォームのバインディング、バックエンドでのシェーダー変換、または後続のしきい値処理を疑ってください。

リソース

コメント

Markdown 対応