title: "Hello World" description: "最初のフラグメントシェーダーを書いて画面に色を表示します。GLSLの基本構文とmain関数について学びます。" chapter: "01-introduction" order: 2 challenge: description: "左半分を青、右半分を緑に塗り分けるシェーダーを書いてみましょう。gl_FragCoord.x と u_resolution.x を使って画面の左右を判定します。" hints:

• "ピクセルのx座標は gl_FragCoord.x で取得できます。"
• "画面の中央は u_resolution.x * 0.5 です。if文やstep関数で左右を判定できます。"
• "if (gl_FragCoord.x < u_resolution.x * 0.5) で左半分を判定し、それぞれ異なる色を設定しましょう。"

Hello World

最初のシェーダーを書こう

プログラミングの世界では、最初に「Hello World」を表示するのが伝統です。シェーダーの世界では、画面に色を表示することがHello Worldに当たります。

右のプレビューを見てください。シンプルなグラデーションが表示されているはずです。これがあなたの最初のシェーダーです。

GLSLの基本構文

#version 300 es
precision highp float;

最初の2行はお約束です：

• #version 300 es — WebGL2で使うGLSL ES 3.0を指定
• precision highp float — 浮動小数点数の精度を高精度に設定

出力変数

out vec4 fragColor;

out キーワードで出力変数を宣言します。fragColor にセットした値がそのピクセルの最終的な色になります。

main関数

void main() {
    fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

シェーダーのエントリーポイントは main 関数です。この中で fragColor に色をセットします。

vec4 と色

vec4 は4つの float 値を持つベクトル型です。色として使う場合：

| 成分 | 意味 | 範囲 | |------|------|------| | 第1成分 | Red（赤） | 0.0 〜 1.0 | | 第2成分 | Green（緑） | 0.0 〜 1.0 | | 第3成分 | Blue（青） | 0.0 〜 1.0 | | 第4成分 | Alpha（不透明度） | 0.0 〜 1.0 |

いくつかの色の例：

• vec4(0.0, 0.0, 0.0, 1.0) — 黒
• vec4(1.0, 1.0, 1.0, 1.0) — 白
• vec4(1.0, 1.0, 0.0, 1.0) — 黄色

座標を使ったグラデーション

エディタのコードでは、ピクセルの位置に応じて色を変えています。gl_FragCoord は現在処理しているピクセルの座標を持つ組み込み変数です。

vec2 uv = gl_FragCoord.xy / u_resolution;

この行で、ピクセル座標を 0.0 〜 1.0 の範囲に正規化しています。これにより画面サイズに依存しないコードが書けます。

float リテラルの注意点

GLSLでは 1 と 1.0 は別の型です。float 型の変数には必ず小数点をつけましょう：

float x = 1.0;   // OK
float y = 1;     // エラー！

まとめ

• fragColor に vec4 を設定してピクセルの色を決める
• vec4(R, G, B, A) で色を指定（各値 0.0〜1.0）
• gl_FragCoord でピクセルの座標を取得できる
• GLSLの float リテラルには小数点が必要