球座標でカメラを動かす・3Dを多角的に観察

前回で、3D空間上の物体に面をつけてさらに物体がより3Dっぽく表現することができました。しかし、カメラの操作方法が大変です。6つもの制御がありますが、今回でそれが簡単な操作に変化します。

Desmosにある動く点を利用して、カメラの移動を自由にしていきましょう。

この記事は、第108話？？？ 【グラフ計算機／Desmos】 をテキスト化したものです。

やりたいこと

3D空間で自由にカメラ制御ができている身近な例がDesmos 3Dです。

これを目指して独自3D空間のカメラの制御を行います。

球座標によるカメラ制御

今回はカメラの位置を球座標を使って制御します。球座標は、原点からの距離である半径 $rr$、水平面での角度を示す方位角 $\theta \backslash theta$ 、そして垂直方向の角度を示す仰角 $\varphi \backslash phi$ の3つのパラメータで構成されます。

※物理学では慣習として $\theta \backslash theta$ と $\varphi \backslash phi$ の意味が逆ですが、数学の慣習で話を進めます。Desmos 3Dも数学の慣習を採用しています。

これらのパラメータと、カメラの3次元座標 $(x,y,z)\backslash left(x,y,z\backslash right)$ との関係は、以下の数式で表されます。

$$x=r\sin (\varphi )\cos (\theta )y=r\sin (\varphi )\sin (\theta )z=r\cos (\varphi )x\; =\; r\; \backslash sin(\backslash phi)\; \backslash cos(\backslash theta)\; \backslash \backslash \; y\; =\; r\; \backslash sin(\backslash phi)\; \backslash sin(\backslash theta)\; \backslash \backslash \; z\; =\; r\; \backslash cos(\backslash phi)$$

スライダーで $\theta \backslash theta$ や $\varphi \backslash phi$ の値を動かすことで、カメラの位置を円周上や球面上に変化させ、様々な視点からオブジェクトを観察できます。

カメラの位置は以下のデモDesmos 3Dで確認できます。たった2変数でカメラが球面上の位置として表現できます。

なので、カメラの位置 $P_{os}P\_\{os\}$ を、

$$P_{os}=(r\sin (\varphi )\cos (\theta ),r\sin (\varphi )\sin (\theta ),r\cos (\varphi ))P\_\{os\}\; =\; (r\; \backslash sin(\backslash phi)\; \backslash cos(\backslash theta),\; r\; \backslash sin(\backslash phi)\; \backslash sin(\backslash theta),\; r\; \backslash cos(\backslash phi))$$

とすれば、カメラの位置は完成です。

視点移動による回転移動の変化

位置は決まりましたが、カメラの向きがまだ決まっていません。カメラを常に原点に向かうように回転します。

まず、第2話 投資投影とカメラ視点の準備にも合った通り、はじめカメラは $yy$軸正の方向を見ています。（見るように作りました。）

まず、方位角 $\theta \backslash theta$ から見ていきます。$xyxy$平面で捉え、カメラの向きを原点に向かわせるには $zz$軸で $\theta +\pi \mathrm{/}2\backslash theta+\backslash pi/2$ 回転すれば良いことがわかります。$zz$軸で回転させた後、カメラは常に $zz$軸を見ます。

次に、仰角 $\varphi \backslash phi$ です。$zyzy$平面で捉え、カメラの向きを原点に向かわせます。 原点を見るためには、仰角の回転の向きに注意して $x\text{軸}x軸$で $\varphi -\pi \mathrm{/}2\backslash phi-\backslash pi/2$ 回転すれば良いです。

よって、カメラの回転 $R_{ot}R\_\{ot\}$ は

$$R_{ot}=(\varphi -\frac{\pi }{2},0,\theta +\frac{\pi }{2})R\_\{ot\}\; =\; \backslash left(\backslash phi-\backslash frac\{\backslash pi\}\{2\},\; 0,\; \backslash theta+\backslash frac\{\backslash pi\}\{2\}\backslash right)$$

とすれば、カメラの回転が完成になります。

より直感的な操作

Desmosには自由に動かせる点があります。

$\theta ,\varphi \backslash theta,\; \backslash phi$ の2変数でカメラを制御できることが分かったので、例えば 点$({\theta }_0,{\varphi }_0)\backslash left(\backslash theta\_0,\; \backslash phi\_0\backslash right)$ とすれば、動く点でカメラが制御できます。（ $\theta ,\varphi \backslash theta,\; \backslash phi$ は特別な変数なため、定数化させます。）

さらに、ただの点ではまだ直感的ではないので、点のサイズを画面サイズ=$\mid (\mathrm{w}\mathrm{i}\mathrm{d}\mathrm{t}\mathrm{h},\mathrm{h}\mathrm{e}\mathrm{i}\mathrm{g}\mathrm{h}\mathrm{t})\mid \backslash left|\backslash left(\backslash mathrm\{width\},\; \backslash mathrm\{height\}\backslash right)\backslash right|$、点の透明度を0にすれば、画面のどこを触っても制御できる点ができます。

完成したのがこれです。