shader-art-coding

シェーダーアートのコーディング

シェーダー制作をビジュアルエンジニアリングとして扱います。まず目指す画像を定め、それを生成できる最小の数学モデルを選び、各段階を確認できる形で構築し、デバッグビューで各段階を検証します。

ワークフロー

1. 目標。 画像を明確にします。被写体、カメラとフレーミング、主要な形状、素材、光、動きを定めます。
2. 手法。 references/subject-routing.md からレンダリングモデルと開始用テンプレートを選びます。2D距離場（ポスター、アイコン、パターン）、SDFレイマーチング（物体、キャラクター）、ハイトフィールドマーチング（風景）、ボリューム積分（雲、煙、炎）があります。
3. ライブラリから組み立てます。 python3 scripts/glsl_tools.py search <words> または references/library-index.md で構成要素を探し、名前で呼び出します。ライブラリのコードを貼り付けたり、再導出したりしないでください。テスト済みです。
4. まずは素早く画像を作ります。 座標、背景、プリミティブを1つ、ライトを1つ用意します。その後、デバッグビューを追加します。
5. 次の順に調整します。 プロポーション、構図、素材の分離、ライティング、雰囲気、色、アンチエイリアス、パフォーマンス。
6. バンドルして確認します。 python3 scripts/glsl_tools.py bundle shader.glsl -o out.glsl は、使用している関数だけをインライン化します。python3 scripts/glsl_tools.py check out.glsl は構文をチェックし、glslangValidator がインストールされている場合はコンパイルします。すべてのエラーを修正してから、out.glsl を納品します。

スクリプトはこのスキルのディレクトリから実行してください。必要なのは Python 3 だけです。

規約

• 座標： vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; を使います。1ピクセルは 2.0 / iResolution.y です。
• シーンの契約： vec2 map(vec3 p) は vec2(distance, materialId) を返します。raymarch、calcNormal、softShadow、calcAO、sdfThickness はすべてこれを使います。
• デバッグ： #define DEBUG_MODE 0 を指定します。0は最終表示、1は距離場、2は法線、3はID、4はステップ、5はマスク、6はライティング項目です。
• カラーパイプライン： 光はリニア空間で扱い、選択した色は srgbToLinear でデコードします。次に露出を適用し、トーンマッピング（デフォルトでは tonemapAgX）を各AAサンプルに適用してから平均化します。その後、一度だけ linearToSrgb を適用し、最後に ditherTPDF を適用します。
• 距離： @exact／@bound／@approx タグを守ります。変形によってリプシッツ定数が1を超える場合は、距離を割るか、raymarch の stepScale を下げます。

厳守事項（Shadertoy／WebGLで問題になります）

• #version 行、独自のuniform、gl_FragColor／texture2D／iGlobalTime は使用しないでください。
• 構造体に ?: を使用しないでください。vec2(distance, id) または if を使います。
• 浮動小数点リテラルを記述してください。例：2.0 * PI、clamp(x, 0.0, 1.0)。
• fract(sin(...) * 43758.5453) のハッシュは使用しないでください。整数PCGを使う hash12／hash22／hash33 を使います。「見た目を維持」する移植の場合も置き換えてください。正弦ハッシュはGPUごとに正確なパターンが異なりますが、同じ整数セルIDにPCGハッシュを適用すれば、ノイズの見た目は同じになります。check は正弦ハッシュをエラーとして報告します。
• NaNの原因となる入力を保護してください。atan(0, 0)、負数に対する pow、負数に対する sqrt、normalize(vec3(0)) が該当します。
• 非一様な分岐やループ内では dFdx／fwidth を使わないでください。代わりに明示的なピクセルサイズを使います。

参照先の振り分け

タスクに必要なものだけを読みます。

ファイル	読むタイミング
references/subject-routing.md	対象（「クラゲ」「山」など）から始める場合：正式名称と対象の対応を確認します
references/library-index.md	関数を選ぶ場合：すべてのライブラリ関数について、シグネチャ、正確さ、用途を確認します
references/sdf-library-guide.md	モデリングする場合：正確さの段階、ブレンド、近傍チェック付きの反復、変形の制限、WebGL の落とし穴を確認します
references/rendering-pipeline.md	ライティング設定、影／AO、空とフォグ、ボリューム、トーンマッピング、AA、パフォーマンスを確認します
references/noise-use-cases.md	Perlin／value／simplex／cellular ノイズの選択、fBm／ridged／billow／warp／hybrid のレシピ、ゲームでの用途、一次資料のコードへのリンクを確認します
references/procedural-buildings.md	区画 ID、建物のマス構成、セットバック／屋根、ファサードのフィルタリング、都市の反復、ゲームへの統合を確認します
references/terrain-production.md	地形の表現、設計された谷、傾斜／高度に応じたマテリアル、レイマーチの制限、チャンク、LOD を確認します
references/water-quality.md	高品質な海洋／沿岸の水、波の微分、Fresnel／屈折／吸収、泡、プリセット、エンジン側での拡張を確認します
references/shader-workflow.md	複雑なシェーダーを最初から最後まで計画する場合：レビューチェックリストを確認します
references/composition-and-debugging.md	画像が見づらい場合や、見た目に問題がある場合に確認します
references/formula-cookbook.md	複数手順のレシピ：モジュラーなセル格子、地形合成、有機的な構図を確認します
references/formula-code-couples-sdf.md	有機的／モジュラーな SDF 特徴の式とコードの対応を確認します
references/formula-code-couples-terrain.md	高さ場、密度場、蓄積、大気を確認します
references/formula-code-couples-materials.md	マスク、パレット、ライティング項、仕上げ、動きを確認します

templates/ にあるテンプレートは、完全でレンダリング検証済みの出発点です（ギャラリーはリポジトリの README にあります）。 raymarch-sdf.glsl、terrain.glsl、ocean.glsl、volumetric-clouds.glsl、sdf-2d-poster.glsl、 pattern-swatches.glsl、noise-progression.glsl、noise-terrain-map.glsl、procedural-city.glsl、 alpine-valley.glsl、coastal-water.glsl。

出力に関する要件

シェーダーを作成する場合：

• mainImage(out vec4 fragColor, in vec2 fragCoord) を含む、Shadertoy に貼り付けてすぐ使える一式のコードを提出します。
• ユーザーから提供されない限り、テクスチャは使いません。
• DEBUG_MODE スイッチを含め、アート調整用の定数にはファイルの先頭で名前を付けます。
• 最後に、スケール、柔らかさ、色、光、動きを制御する定数を示す、簡潔な調整ガイドを記載します。
• シェーダーのコンパイルチェックを行ったかどうかと、その方法を記載します。
• 建物／地形／水では、実装済みの機能とエンジン側での拡張を分けて説明します。高さ場を洞窟ジェネレーターと呼んだり、マテリアル上の窓をモデル化されたくぼみと呼んだり、プロシージャルな泡／コースティクスマスクを流体／光のシミュレーションと呼んだりしないでください。
• 品質に関する要望には、目標と予算を示し、プリセット／デバッグ表示を用意し、レンダリング結果を確認します。重要なテンプレートのプリセットには // @variant QUALITY=3（または定義済みの別の整数マクロ）を注記し、CI でコンパイルおよびレンダリングできるようにします。ディテールを追加する前に、水平線／岸辺の接続と時間方向のフィルタリングを維持します。

既存のシェーダーを改善する場合：

• そのレンダリングモデルとボトルネックを特定します。
• 意図とインターフェースを維持します。
• まず正確さを修正し、次に読みやすさ、視覚品質、速度を改善します。
• リスクの高い変更（座標スケール、マテリアル ID、ループ回数）を明示します。