Polar Coordinates

This explanation is currently available in Japanese.

ひとことで

画面や UV 上の位置 $(x, y)$ を、中心からの距離 $r$ と角度 $\theta$ に変換してから模様を作る手法です。距離を使えば同心円、角度を使えば放射状の線や回転が簡単に表現できるので、魔法陣、渦、ポータル、レーダー、時計の針、放射状のワイプなど、「丸いもの・回るもの」のシェーダーの基本になります。

ゲームでの使いどころ

• 魔法陣・召喚陣：同心円のリングと、角度で区切ったルーン文字の帯が回転する。
• 渦・ポータル・ブラックホール：角度に距離を足してねじると渦巻きになる。
• UI：円形のゲージ（クールダウン表示）、レーダーの走査線、放射状のワイプ遷移。
• エフェクト：衝撃波のリング、集中線、花火の放射状の光。

しくみ

中心を原点とした座標 $\mathbf{p} = (x, y)$ から、

を求めます。$\theta$ は $-\pi$〜$\pi$ なので、$\theta / 2\pi + 0.5$ で 0〜1 に正規化して使うと扱いやすくなります。

直交座標のまま同じ式を使うと、同心円のかわりに縦縞、回転のかわりに平行移動になってしまいます。デモの「直交座標で同じ式」でこの違いを確認できます。

実装のポイント

• 角度の継ぎ目：$\theta$ は $-\pi$ と $\pi$ の境界（多くの場合 $-x$ 方向）で不連続です。fract(theta * N) のように $N$ が整数なら継ぎ目は消えますが、テクスチャを極座標でサンプリングすると、ミップマップの計算で境界に 1 画素の線が出ることがあります。textureGrad で微分を指定するか、ミップマップを使わないことで回避します。
• 中心の特異点：$r = 0$ では角度が定義できません。中心付近は別の模様で隠すのが定番です。
• テクスチャの極座標サンプリング：長方形のテクスチャを $(\theta, r)$ で参照すると、帯状の模様を円環に巻き付けられます。ルーン文字の帯を 1 枚の横長テクスチャで作れます。

つまずきやすい点

• アスペクト比：画面全体を対象にする場合、縦横比を補正しないと円が楕円になります。
• 中心ほど模様が詰まる：角度方向の模様は、中心に近いほど細かく詰まり、エイリアシング（ちらつき）が出やすくなります。
• atan の引数の順序：atan(y, x) の順です。逆にすると 90° ずれ、向きも反転します。

デモで試すこと

1. 「距離 r と角度 θ を色で表示」をオンにすると、赤（中心から外へ増える r）と緑（一周で 0→1 に増える θ）の変換そのものが見えます。
2. 「渦（ポータル）」で「ねじれ」を 0 にすると、腕がまっすぐな放射状になります。値を上げるほど強く渦を巻きます。
3. 「直交座標で同じ式」に切り替えると、同じ計算がただの縞模様になることを確認してください。