title: "座標系" description: "フラグメントシェーダーの座標系を理解し、正規化座標の扱い方を学びます。アスペクト比の補正も行います。" chapter: "01-introduction" order: 4 challenge: description: "画面の中心を原点とし、アスペクト比を補正した座標系で、中心からの距離に応じたグラデーション（中心が白、端が黒）を描いてください。" hints:

"中心を原点にするには uv = uv * 2.0 - 1.0 とします。"
"アスペクト比の補正は uv.x *= u_resolution.x / u_resolution.y; です。"
"中心からの距離は length(uv) で求められます。1.0 - length(uv) で中心が白くなるグラデーションが作れます。"

座標系

gl_FragCoord

gl_FragCoord は組み込み変数で、現在処理中のピクセルの座標を持っています。

gl_FragCoord.x  // ピクセルのx座標（左端が 0）
gl_FragCoord.y  // ピクセルのy座標（下端が 0）

注意: WebGLの座標系では、y軸は下から上に向かって増加します。これはCSSやCanvasの座標系（上から下）とは逆です。

正規化座標

gl_FragCoord の値はピクセル単位なので、画面サイズによって範囲が変わります。画面サイズに依存しないコードを書くために、0.0 〜 1.0 の範囲に正規化します：

vec2 uv = gl_FragCoord.xy / u_resolution;

これで：

左下が (0.0, 0.0)
右上が (1.0, 1.0)

になります。

中心を原点にする

多くの場面で、画面の中心を原点 (0.0, 0.0) にしたい場合があります：

vec2 uv = gl_FragCoord.xy / u_resolution;
uv = uv * 2.0 - 1.0;

これで：

中心が (0.0, 0.0)
左下が (-1.0, -1.0)
右上が (1.0, 1.0)

になります。

アスペクト比の補正

画面が正方形でない場合、上記の座標系では図形が歪んで表示されます。円を描いても楕円になってしまいます。

アスペクト比を補正するには：

vec2 uv = gl_FragCoord.xy / u_resolution;
uv = uv * 2.0 - 1.0;
uv.x *= u_resolution.x / u_resolution.y;

x座標にアスペクト比を掛けることで、x方向とy方向のスケールが揃います。

距離の計算

座標系が定まったら、length 関数で原点からの距離を計算できます：

float d = length(uv);

右のプレビューでは、中心からの距離を使ったグラデーションを表示しています。

swizzling（スウィズリング）

GLSLではベクトルの成分を柔軟にアクセスできます：

vec4 color = vec4(1.0, 0.5, 0.2, 1.0);
color.rgb   // vec3(1.0, 0.5, 0.2)
color.rg    // vec2(1.0, 0.5)
color.yx    // vec2(0.5, 1.0) — 順序を入れ替え
color.xxx   // vec3(1.0, 1.0, 1.0) — 同じ成分を繰り返し

xyzw、rgba、stpq のいずれの記法も使えます（意味は同じ）。

まとめ

gl_FragCoord でピクセル座標を取得（左下が原点、y軸は上向き）
u_resolution で割って 0.0〜1.0 に正規化
* 2.0 - 1.0 で中心を原点に
アスペクト比の補正で図形の歪みを防ぐ
length() で距離を計算できる