VR(Virtual Reality) とは、コンピューターによって作り出した仮想的な空間（仮想空間）を現実の空間のように見せて疑似体験できるものである。 VR を体験するためのデバイスに VR ヘッドセットがある。

VR を Web ブラウザ上で実現する技術を WebVR という。 WebVR で VR プラネタリウムを作るためにA-Frame を利用する。

• A-Frame
• A-Frame の基礎

VR プラネタリウムで星を表現するには2通りある。 一つはスカイに貼り付ける画像に星を描く方法、もう一つは星を球体オブジェクトとして配置する方法である。 ここでは後者の方法で説明する。

https://kd2.koeki-prj.org/index.php/s/TLTH2qJMJjSBXMn

それぞれのファイルをダウンロードして、第1回本講義で使用した A-Frame 用のディレクトリ（フォルダ）に入れておくこと。

平面や空間である点の位置を示すために数値の組で表したものを座標といい、その座標の決め方を座標系という。 座標を表すために必要な数値の組の最低限の数を次元という。

• 0次元：点
• 1次元：線
• 2次元：平面
• 3次元：我々の住む空間

平面は縦と横の2つの数値の組を与えれば点の位置が決まるので2次元である。 例えば、下図の点 P の位置は原点 O から横方向（$x$ 方向）に 3、縦方向（$y$ 方向）に 4 進んだ位置なので $(x,y)=(3,4)$ と表すことができる。

この座標系では横方向に $x$ 軸、縦方向に $y$ 軸をとっており、$x$ 軸と $y$ 軸は直交する（直角に交わる）ので直交座標系という。

また、OP の距離 $r$ と OP が $x$ 軸と成す反時計回りの角度 $\theta$ ¹⁾ で表すこともできる。 この座標系を極座標系という。 例えば、下図の点 P の位置は $(r,\theta)=(5,53.1^{\circ})$ と表すことができる。 $r=5$ であることは三平方の定理（ピタゴラスの定理）から分かる。

上で述べた2つの座標系の座標は以下の式で変換することができる。 \begin{eqnarray} x&=&r\cos\theta\\ y&=&r\sin\theta \end{eqnarray} ここで $\cos\theta$ ²⁾, $\sin\theta$ ³⁾ は三角関数である。 例えば、$(r,\theta)=(5,53.1^{\circ})$ は \begin{eqnarray} x&=&5\times\cos 53.1^{\circ}\simeq 5\times 0.6 = 3\\ y&=&5\times\sin 53.1^{\circ}\simeq 5\times 0.8 = 4 \end{eqnarray} となり、$(x,y)=(3,4)$ であることが分かる。

ここで述べた座標系は数学で一般的に使われる座標系であるが、別の座標系を作って用いることもできる（例えば、横方向に $y$ 軸、縦方向に $x$ 軸をとる座標系）。

A-Frame の仮想空間は3 次元空間なので3 つの軸を持つ直交座標系で表される。 $x$ 軸と $z$ 軸が地面に平行な方向、$y$ 軸が地面に垂直な方向の座標軸となるように定義⁴⁾されている。 仮想空間におけるオブジェクトの位置は $(x,y,z)$ の 3 つの数値（単位はメートル）の組によって指定する。

A-Frame では Web ブラウザ上で Ctrl+Alt+I でインスペクターを開いてオブジェクトの位置を確認することができる。

test.html を GitBucket に ciPush した後、PC の Web ブラウザでアクセスすると、灰色の背景の中に赤い球体が見えるだろう。

次にインスペクターを開いてオブジェクトの位置を確認する。 トラックパッドかマウスでスクロール操作をするとズームができるので、ズームアウトすると全体が確認できる。

赤い球体は灰色のスカイ（大きな球面）の少し内側にあることが分かる。

球体オブジェクトのタグ

<a-sphere color="red" radius="5" position="0 0 -490"></a-sphere>

これで球体を $(x,y,z)=(0,0,-490)$、つまり $z$ 軸のマイナス方向の 490 メートルの位置に置いている。 スカイの半径は 500 メートル（既定値）なので、球体はスカイのすぐ内側に位置する。

test.html の a-sphere の position を “0 0 -510” に変更する。

<a-sphere color="red" radius="5" position="0 0 -510"></a-sphere>

test.html を更新して Web ブラウザをリロードすると球体は見えなくなるだろう。

※ test.hmtl を更新しても Web ブラウザで変わったように見えない場合はキャッシュが残っている可能性があるので、 Ctrl+Shift+R でスーパーリロードするとよい。

インスペクターを開いてオブジェクトの位置を確認すると、球体はスカイの外側に位置しているため、 スカイでさえぎられて見えなくなっていることが分かる。

地球上のある場所から天体を観測するときに、 観測者は大きな球体の中にいると仮定し、 夜空を見上げたときに見える天体は、その大きな球体の内側に貼り付いていると考えても差し支えない場合が多い。 この仮想的な球体を天球という。

天体の位置は赤道座標系か地平座標系で表されることが多い。 天体の位置はまず赤道座標系で表され、そこから地平座標系に変換される。 地平座標系は方位と高度で表す座標系で、地上で観測するには便利だが、計算が複雑なので、ここでは赤道座標系を用いることにする。

地球上から太陽や星をずっと見ていると東から西へ動いているように見える（日周運動）。

• 星の1日の動き（NHK for School）

赤道座標系とは日周運動によらない天体の絶対位置を表す極座標系である。

座標の中心に地球（観測者）があるとしよう。

地球の自転軸（地軸）を北に伸ばした天球との交点を天の北極、南に伸ばした天球との交点を天の南極という。 天の北極の方向には北極星がある。

地球上の赤道を天球に延長したものを天の赤道という。

赤道座標系の天体の座標は赤経 $\alpha$ ⁵⁾ と赤緯 $\delta$ ⁶⁾ という2つの角度を用いて $(\alpha, \delta)$ で表す。 地球上の経度と緯度をそのまま天球上に貼りつけたようなものである。

• 赤経 $\alpha$：春分点を 0 度として、天の赤道の東回りに測る角度である。
• 赤緯 $\delta$：天の赤道を 0 度として上下方向に測る角度で、天の北極が 90 度、天の南極が −90 度である。

春分点とは、黄道（天球で太陽が通る軌道）と天の赤道の交点の一つで、 太陽が天の赤道を南側から北側へ横切る点である。

VR プラネタリウムでは、A-Frame の座標系を元に $y$ 軸を天の北極方向、$x$ 軸を春分点方向に取ることにする。 この座標系では北極から観測しているようなものである。

また、A-Frame のスカイを天球とみなす。

$(x,y,z)$ は $(r,\alpha,\delta)$ から以下で計算できる。 \begin{eqnarray} x&=&r\cos\alpha\cos\delta\\ y&=&r\sin\delta\\ z&=&-r\sin\alpha\cos\delta \end{eqnarray} ここで $r$ は観測者から天体までの距離である。

赤経 $\alpha$ は角度を「時間（24時間表示）⁷⁾」、赤緯 $\delta$ は角度を「度」で表すことが多い。 表計算ソフトなどの三角関数で $(x,y,z)$ を計算するためには、角度を「ラジアン」に変換する必要がある。

1. $\alpha$ を「時間」から「度」に変換する。
   • $度=時間\times\frac{360}{24}=時間\times 15$
2. $\alpha, \delta$ を「度」から「ラジアン」に変換する。
   • $ラジアン=度\times\frac{\pi}{180}$
   • 表計算ソフトでは radians(度) という関数でも変換できる。
3. $(x,y,z)$ を計算する。
   • 表計算ソフトでは cos(ラジアン), sin(ラジアン) という三角関数を使う。

時間、度、ラジアンの対応の例

天体の明るさは等級で表される。 特に地球から見たときの等級を見かけの等級という。

天体が明るいほど等級の値は小さくなる。 1 等級小さいと約 2.512 倍明るく、 5 等級小さいと 100 倍明るいと定義されている。

VR プラネタリウムでは恒星を球体オブジェクトで表す。

恒星の見かけの等級の違いは球体オブジェクトの大きさの違いで表すことにする。 球体オブジェクトの半径 radius は以下で計算する。 \[ \mathrm{radius}=(10-\mathrm{vmag})\times 0.25 \] ここで vmag とは、天体を V バンドフィルタ（緑色っぽいフィルタ）を通してカメラで観測した等級（V 等級）のことで、肉眼で見たときの明るさに近い。 恒星の vmag が小さい（明るい）ほど球体オブジェクトの半径が大きくなるような計算にしている。 大きさの度合いを変えたければ 0.25 を変更すればよい。

ただし、現実の恒星は vmag が小さいほど半径が大きいわけではないので注意。

このファイルは表計算ソフトで開くことができる。

p.html を GitBucket に ciPush した後、PC やスマホの Web ブラウザでアクセスするとカシオペヤ座が表示される。

例として、カシオペヤ座ベータ星（固有名：カフ）について解説する。 stars.ods を表計算ソフトで開くと最初に以下のデータがある。

一般的に恒星の位置は赤道座標系で赤経 $\alpha$ と赤緯 $\delta$ で表される。 HIP番号はヒッパルコス星表というカタログでつけられている恒星固有の番号である。

このデータから A-Frame で恒星を球体オブジェクトとして天球（スカイ）の少し内側に配置する。 天球（スカイ）の半径は $500メートル$（既定値）なので、恒星までの距離は $r=490 メートル$ とする。

与えられた距離 $r$、赤経 $\alpha$、赤緯 $\delta$ から A-Frame の座標系の座標 $(x,y,z)$ を求める。 この計算は表計算ソフトで行っている。

1. 赤経 $\alpha$ と赤緯 $\delta$ をラジアンに変換する。 \begin{eqnarray} \alpha&=&0.1532704823 時間\times 15\times\frac{\pi}{180}\simeq 0.04012611843 ラジアン\\ \delta&=&59.14897756 度\times\frac{\pi}{180}\simeq 1.032344408 ラジアン \end{eqnarray}

2. $(x,y,z)$ を計算する。 \begin{eqnarray} x&=&490\times\cos(0.04012611843)\times\cos(1.032344408)\simeq 251.1 メートル\\ y&=&490\times\sin(1.032344408)\simeq 420.7 メートル\\ z&=&-490\times\sin(0.04012611843)\times\cos(1.032344408)\simeq -10.1 メートル \end{eqnarray}

3. vmag より、球体オブジェクトの半径 radius を計算する。 \[ \mathrm{radius}=(10-2.28)\times 0.25=1.93 メートル \]

以上より、p.html でこの球体オブジェクトのタグは以下のようになる。

<a-sphere id="746" mixin="star" radius="1.93" position="251.1 420.7 -10.1"></a-sphere>

恒星を区別するために球体オブジェクトの属性 id には HIP番号をつけている。 属性 mixin（ミックスイン）については後述する。

星座とは、夜空の明るい恒星を神話の人物・動物・器具などに見立てたものある。 星座は古代より色々と考えられてきたが、人や地域によってバラバラで統一性がなかった。 そこで、1928年に国際天文学連合（IAU）によって全天を分ける88個の星座（88 星座）の領域が決められて現在広く使われている。

このうち、黄道（太陽の通り道）上にある12個の星座を特に黄道 12 星座という。 西洋占星術で使われる黄道 12 宮は、この黄道 12 星座と対応している。

星座は恒星同士を線（星座線）で結んで表現することが多い。 どの恒星をどう結んで引くかは特に決まっておらず、書籍やソフトウェアによって異なることがある。

このファイルは表計算ソフト（LibreOffice Calc など）で開くことができる。

例として、カシオペヤ座の2つの恒星の間の星座線について解説する。 lines.ods を表計算ソフトで開くと最初に以下のデータがある。

始点の恒星から終点の恒星まで A-Frame で線を引く。

始点の恒星の $(\alpha_{1}, \delta_{1})$、終点の恒星の $(\alpha_{2}, \delta_{2})$ から A-Frame の座標系の座標 $(x_{1}, y_{1}, z_{1})$ と $(x_{2}, y_{2}, z_{2})$ を求める。 どちらの恒星も $r=490 メートル$ とする。

計算結果は以下の通り。

• 始点の恒星の座標

\begin{eqnarray} x_{1}&=&251.1 メートル\\ y_{1}&=&420.7 メートル\\ z_{1}&=&-10.1 メートル \end{eqnarray}

• 終点の恒星の座標

\begin{eqnarray} x_{2}&=&266.0 メートル\\ y_{2}&=&408.8 メートル\\ z_{2}&=&-47.5 メートル \end{eqnarray}

以上より、p.html でこの星座線のタグは以下のようになる。

<a-entity mixin="cline" line="start:251.1 420.7 -10.1; end:266.0 408.8 -47.5;"></a-entity>

線の始点は start:x1 y1 z1;、終点は end:x2 y2 z2; で記述する。 座標の数値の間は半角スペースで区切る。

A-Frame で恒星と星座線の色などの共通した属性を使う場合、それぞれのタグに同じ属性を書くのは効率が悪い。 そこで、ミックスインを利用するとよい。

アセットとして、恒星の属性を id=“star”、星座線の属性を id=“cline” のミックスインで設定する。

<a-assets>
  <a-mixin id="star" material="color: white; shader: flat;"></a-mixin>
  <a-mixin id="cline" line="color: blue;"></a-mixin>
</a-assets>

このように設定しておくと、球体や線のタグの中で id を指定するだけでその属性を適用できる。

例えば、p.html で id=“star” のミックスインの color: white; を color: red; に変えてみよう。

VR プラネタリウムでは A-Frame のスカイを天球とみなしている。 p.html のスカイには画像を貼り付けているが、これを見えなくしたい場合には

<a-sky src="grid.png"></a-sky>

から

<a-sky color="black"></a-sky>

に変更する。

自分の生月日に対応する星座を VR プラネタリウムで描いてみよう。

ここで説明したのは VR プラネタリウムを作るために A-Frame でできる初歩的なところである。 A-Frame に JavaScript を組み合わせると、より多くのことができるようになる。

どのように改善したらもっとプラネタリウムらしくなるか考えてみよう。 例えば・・・

• より多くの天体を効率よく表示するには？
• 地面や風景を描くには？
• 任意の観測地、任意の時刻の星空を再現するには？
• 月や惑星を配置するには？