Shadertoy シェーダ開発

概要

Shadertoy は WebGL を使用してブラウザで実行される GLSL フラグメントシェーダを作成・共有するプラットフォームです。このスキルは GLSL ES 構文、一般的なパターン、数学的テクニック、およびリアルタイム手続き型グラフィックス特有のベストプラクティスを含む包括的なシェーダ作成ガイダンスを提供します。

このスキルを使用する時期

以下の場合にこのスキルを有効にしてください:

• .glsl シェーダファイルを作成または編集する
• 手続き型グラフィックス、ジェネレーティブアート、またはビジュアルエフェクトを作成する
• Shadertoy.com プロジェクトまたは WebGL フラグメントシェーダを操作する
• レイマーチング、距離フィールド、または手続き型テクスチャを実装する
• シェーダコードをデバッグするか、シェーダパフォーマンスを最適化する
• GLSL ES 構文リファレンスまたは Shadertoy 入力変数が必要

基本概念

シェーダエントリーポイント

すべての Shadertoy シェーダは mainImage 関数を実装します:

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // fragCoord: ピクセル座標 (0 から iResolution.xy)
    // fragColor: 出力色 (RGBA、通常 alpha = 1.0)

    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(uv, 0.0, 1.0);
}

Shadertoy ビルトイン入力

シェーダで常に利用可能:

型	名前	説明
vec3	iResolution	ビューポート解像度 (x, y, アスペクト比)
float	iTime	現在の時間 (秒) (プライマリアニメーションドライバー)
float	iTimeDelta	1 フレームをレンダリングする時間
int	iFrame	現在のフレーム番号
vec4	iMouse	マウス: xy = 現在位置、zw = クリック位置
sampler2D	iChannel0-iChannel3	入力テクスチャ/バッファ
vec3	iChannelResolution[4]	各入力チャネルの解像度
vec4	iDate	年、月、日、時間 (秒) (.xyzw)

座標系の設定

座標を正規化するための標準的なパターン:

// アスペクト比補正された、原点を中心とした UV (-1 から 1、アスペクト比を保持)
vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.y, iResolution.x);

// 別のコンパクト形式:
vec2 uv = (fragCoord * 2.0 - iResolution.xy) / min(iResolution.x, iResolution.y);

// シンプルな正規化 (0 から 1)
vec2 uv = fragCoord / iResolution.xy;

一般的なシェーダパターン

1. 手続き型カラーパレット

スムーズなカラーグラデーションに Inigo Quilez のコサインパレットを使用:

vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
    return a + b * cos(6.28318 * (c * t + d));
}

// 使用例:
vec3 col = palette(
    t,
    vec3(0.5, 0.5, 0.5),    // ベース
    vec3(0.5, 0.5, 0.5),    // 振幅
    vec3(1.0, 1.0, 0.5),    // 周波数
    vec3(0.8, 0.90, 0.30)   // 位相
);

2. ハッシュ関数 (疑似乱数)

ノイズとランダム性のためのシンプルな 2D ハッシュ:

float hash21(vec2 p) {
    p = fract(p * vec2(234.34, 435.345));
    p += dot(p, p + 34.23);
    return fract(p.x * p.y);
}

3. レイマーチング

スフィアトレーシングによる 3D レンダリングの標準パターン:

// 距離フィールド関数
float map(vec3 p) {
    return length(p) - 1.0;  // 原点にあり、半径 1 の球
}

// 法線の計算
vec3 calcNormal(vec3 p) {
    vec2 e = vec2(0.001, 0.0);
    return normalize(vec3(
        map(p + e.xyy) - map(p - e.xyy),
        map(p + e.yxy) - map(p - e.yxy),
        map(p + e.yyx) - map(p - e.yyx)
    ));
}

// レイマーチングループ
vec3 render(vec3 ro, vec3 rd) {
    float t = 0.0;
    for (int i = 0; i < 100; i++) {
        vec3 p = ro + rd * t;
        float d = map(p);
        if (d < 0.001) {
            // ヒット - ライティングを計算
            vec3 n = calcNormal(p);
            return n * 0.5 + 0.5;  // 法線可視化
        }
        if (t > 10.0) break;
        t += d * 0.5;  // ステップ (安全性のため 0.5 係数)
    }
    return vec3(0.0);  // ミス
}

4. 回転

2D 回転:

mat2 rot2d(float a) {
    float c = cos(a), s = sin(a);
    return mat2(c, -s, s, c);
}
// 使用: p.xy *= rot2d(iTime);

3D 軸角回転 (インプレース修正):

void rot(inout vec3 p, vec3 axis, float angle) {
    axis = normalize(axis);
    float s = sin(angle), c = cos(angle), oc = 1.0 - c;
    mat3 m = mat3(
        oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,
        oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,
        oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c
    );
    p = m * p;
}

5. ドメイン反復と折り畳み

フラクタルのような構造を作成:

vec3 foldRotate(vec3 p, float timeOffset) {
    for (int i = 0; i < 5; i++) {
        p = abs(p);  // ミラー折り畳み
        rot(p, vec3(0.707, 0.707, 0.0), 0.785);
        p -= 0.5;    // 翻訳
    }
    return p;
}

6. ポストプロセッシング

ビネット:

float vignette(vec2 uv) {
    uv *= 1.0 - uv.yx;
    return pow(uv.x * uv.y * 15.0, 0.25);
}

フィルムグレイン/ディザリング (バンディングを減らす):

float dither = hash21(fragCoord + iTime) * 0.001;
finalCol += dither;

ガンマ補正:

finalCol = pow(finalCol, vec3(0.45));  // ~1/2.2

マルチパスレンダリング

時間的フィードバックまたは複数のレンダリングステージが必要な複雑なエフェクト:

バッファ A (計算):

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    // 値を生成または計算
    fragColor = vec4(computedColor, 1.0);
}

バッファ B (フィードバック/ブレンディング):

#define BUFFER_A iChannel0
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec4 current = texture(BUFFER_A, uv);
    vec4 previous = texture(iChannel1, uv);  // 自己参照
    fragColor = mix(previous, current, 0.1);  // 時間的ブレンド
}

メイン (最終出力):

#define BUFFER_B iChannel1
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = texture(BUFFER_B, uv);
}

クリティカル GLSL ES ルール

コンパイルエラーを避けるために常に以下のルールに従ってください:

1. f サフィックスなし: 1.0f ではなく 1.0 を使用
2. saturate() なし: 代わりに clamp(x, 0.0, 1.0) を使用
3. pow/sqrt を保護: pow(max(x, 0.0), p)、sqrt(abs(x)) として引数をラップ
4. ゼロ除算を回避: 分母をチェックするか、イプシロンを追加
5. 変数を初期化: デフォルト値を想定しない
6. 名前の競合を回避: 関数を変数のような名前にしない
7. 対話型コマンドなし: find、grep を回避 - 代わりに Glob/Grep ツールを使用

ワークフローガイド

新しいシェーダの作成

1. 座標系を設定 - 適切な UV 正規化を選択
2. コア効果を定義 - メインビジュアルアルゴリズムを実装
3. アニメーションを追加 - 時間変動に iTime を使用
4. カラーパレットを適用 - コサインパレットまたはカスタムスキームを使用
5. ポストプロセッシングを追加 - ビネット、ディザ、ガンマ補正
6. 最適化 - イテレーション数を減らし、早期終了を使用、ブランチを最小化

一般的なタスク

複素数の可視化:

• references/common-patterns.md の複素数数学関数を使用
• cx_log()、cx_pow() または多項式評価でプロット
• パレットを介して複素結果をカラーにマッピング

3D シーンの レイマーチング:

• map() 関数で距離フィールドを定義
• カメラを設定 (レイオリジン ro、レイ方向 rd)
• 標準ループパターンを使用してマーチ
• 四面体法を使用して法線を計算
• ライティングと材質プロパティを適用

ノイズ/有機効果の作成:

• ランダム値に hash21() を使用
• 自然変動に fbm() (フラクタルブラウン運動) を実装
• sin()/cos() と組み合わせて構造化パターンを作成
• 有機的歪みに ドメインワーピングを適用

マルチレイヤー合成:

• 異なるパラメータで複数パスをレンダリング
• mix() またはカスタムブレンドモードを使用してレイヤーをブレンド
• レイヤー差を比較してインターフェアレンスパターンを追加
• スムーズな遷移に smoothstep() を使用

デバッグ戦略

中間値を可視化:

fragColor = vec4(vec3(distanceField), 1.0);  // 距離を表示
fragColor = vec4(normal * 0.5 + 0.5, 1.0);   // 法線を表示
fragColor = vec4(fract(uv), 0.0, 1.0);       // UV タイリングを表示

段階的に簡略化:

• ポストプロセッシングをコメントアウト
• イテレーション数を減らす
• 複雑な関数をシンプルなプレースホルダーに置き換え
• 座標変換をステップバイステップで確認

NaN/Inf をチェック:

• ガードを追加: if (isnan(value) || isinf(value)) return vec3(1.0, 0.0, 0.0);
• 除算と根を検証

パフォーマンス最適化

1. 固定イテレーション数 - 動的ループを回避
2. 早期終了条件 - しきい値に達したらブレイク
3. ステップ乗数チューニング - 品質と速度のバランス (0.5 から 1.0)
4. テクスチャ読み取りを最小化 - 繰り返しルックアップをキャッシュ
5. 条件文を回避 - if の代わりに mix()、step()、smoothstep() を使用
6. 精度を低下させる - 適切な場所で mediump または lowp を使用 (モバイル)

ネーミング規則

クリエイティブワークで観察されるパターンに基づく:

• 詩的/喚起的な名前 - "alien-water"、"heavenly-wisp"、"comprehension"
• 技術記述子 - "complex-plot"、"noise-circuits"、"ray-marching-demo"
• 複合フレーズ - "coming-apart-at-the-seams"、"form-without-form"
• 小文字とハイフン - my-shader-name.glsl

属性とフォーク

シェーダをフォークまたはリミックスする場合:

// Fork of "Original Name" by AuthorName. https://shadertoy.com/view/XxXxXx
// Date: YYYY-MM-DD
// License: Creative Commons (CC BY-NC-SA 4.0) [or other]

リソース

references/glsl-reference.md

以下を含む完全な GLSL ES 構文リファレンス:

• ビルトイン関数 (三角関数、数学、ベクトル、行列、テクスチャ)
• Shadertoy 入力変数仕様
• 型変換とスウィズリング
• 一般的な落とし穴と修正

検索: Read /references/glsl-reference.md で完全な言語リファレンスを表示。

references/common-patterns.md

以下を含む包括的なパターンライブラリ:

• 複素数数学 (cx_mul、cx_div、cx_sin、cx_cos、cx_log、cx_pow)
• カラーパレット関数 (コサインパレット、マルチレイヤーパレット)
• ハッシュ関数 (hash21、PCG ハッシュ)
• レイマーチングテンプレート (レンダリングループ、法線計算)
• 3D 変換 (回転、ドメイン折り畳み)
• 距離フィールド (球、ボックス、八面体)
• ノイズ関数 (シンプレックス、FBM)
• ポストプロセッシング (ビネット、ブラー、フィルムグレイン、ガンマ)
• ブレンドモード (ソフトライト、ハードライト、ビビッドライト)
• マルチパスレンダリングパターン

検索: Grep "pattern" references/common-patterns.md で特定のテクニックを検索。

references/example-compact-shader.glsl

以下を示す参照実装:

• コンパクトなアルゴリズムシェーダコーディングスタイル
• 最小限のコードでの効率的なレイマーチング
• 高度な行列操作と変換
• クリエイティブコモンズライセンス済みの例

クイックリファレンス

#define PI 3.1415926535897932384626433832795

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    // 1. 座標を正規化
    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / min(iResolution.x, iResolution.y);

    // 2. エフェクトを計算
    float d = length(uv) - 0.5;  // 円距離フィールド
    vec3 col = vec3(smoothstep(0.01, 0.0, d));  // シャープエッジ

    // 3. 時間でアニメート
    col *= 0.5 + 0.5 * sin(iTime + uv.xyx * 3.0);

    // 4. パレットを適用
    col = palette(col.x, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.0));

    // 5. ポストプロセッシング
    col = pow(col, vec3(0.45));  // ガンマ
    col *= vignette(fragCoord / iResolution.xy);

    // 6. 出力
    fragColor = vec4(col, 1.0);
}

コレクション内の一般的なシェーダタイプ

1. 数学的可視化 - 複素数プロット、関数グラフ
2. レイマーチ 3D - 距離フィールドレンダリング、折り畳みジオメトリ
3. 手続き型テクスチャ - ノイズベースパターン、有機効果
4. マルチパスエフェクト - 時間的フィードバック、バッファ合成
5. パーティクルシステム - ポイントベースシミュレーション
6. 2D パターン - 幾何学的、万華鏡、干渉効果

クリエイティブコーディングのヒント

• シンプルから始める - 基本構造を動作させ、反復
• 時間を創造的に使用 - sin(iTime)、mod(iTime, period)、smoothstep() トランジション
• エフェクトをレイヤー化 - 複数のテクニックを組み合わせてリッチさを実現
• 偶然を受け入れる - バグはしばしば興味深いビジュアルにつながる
• リファレンスから学ぶ - 既存のシェーダから学び、テクニックを理解
• 後で最適化 - まず視覚的品質を優先し、次にパフォーマンスを実現