====== VRプラネタリウムで作る星空 ======

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

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

  * [[aframe:top]]
  * [[aframe:basic]]

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

----
==== 講義で使用するファイル ====

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

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

^  ファイル名  ^  内容                                ^
| test.html    | 座標のテスト用のHTML（A-Frame）      |
| p.html       | VRプラネタリウム用のHTML（A-Frame）  |
| grid.png     | p.html のスカイに貼り付ける画像      |
| lines.ods    | 星座線のデータ                       |
| stars.ods    | 恒星のデータ                         |
===== 座標系 =====


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

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

----
==== 平面の座標系 ====

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

{{ :chokai:2d-plane.png?nolink |平面の直交座標系}}

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

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

{{ :chokai:2d-plane_polar.png?nolink |平面の極座標系}}

上で述べた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 の座標系 =====

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

{{ :chokai:3d-vr.png?nolink |A-Frame の座標系}}

A-Frame では Web ブラウザ上で <key>C-A-i</key> で__**インスペクター**__を開いてオブジェクトの位置を確認することができる。

{{ :chokai:inspector.png?nolink |インスペクター}}

----
==== 座標のテスト1 ====

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

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

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

球体オブジェクトのタグ
<code html>
<a-sphere color="red" radius="5" position="0 0 -490"></a-sphere>
</code> 
これで球体を $(x,y,z)=(0,0,-490)$、つまり $z$ 軸のマイナス方向の 490 メートルの位置に置いている。
スカイの半径は 500 メートル（既定値）なので、球体はスカイのすぐ内側に位置する。

----
==== 座標のテスト2 ====

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

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

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

<fc #ff0000>**※ test.hmtl を更新しても Web ブラウザで変わったように見えない場合はキャッシュが残っている可能性があるので、
<key>C-S-r</key> でスーパーリロードするとよい。**</fc>

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

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

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

----
==== 赤道座標系 ====

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

  * [[https://edu.web.nhk/school/watch/clip/?das_id=D0005401819_00000|星の1日の動き（NHK for School）]]

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

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

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

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

赤道座標系の天体の座標は__**赤経**__ $\alpha$ ((ギリシア文字で「アルファ」という。)) と__**赤緯**__ $\delta$ ((ギリシア文字で「デルタ」という。)) という2つの角度を用いて $(\alpha, \delta)$ で表す。
地球上の__**経度**__と__**緯度**__をそのまま天球上に貼りつけたようなものである。


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

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

===== VR プラネタリウムの赤道座標系 =====

{{ :chokai:equatorial.png?nolink |赤道座標系}}

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時間表示）((赤経は日周運動と直接関係するので、地球が自転で一周する360度を24時間で表す。))」、赤緯 $\delta$ は角度を「度」で表すことが多い。
表計算ソフトなどの三角関数で $(x,y,z)$ を計算するためには、角度を「ラジアン」に変換する必要がある。
  - $\alpha$ を「時間」から「度」に変換する。
    * $度=時間\times\frac{360}{24}=時間\times 15$
  - $\alpha, \delta$ を「度」から「ラジアン」に変換する。
    * $ラジアン=度\times\frac{\pi}{180}$
    * 表計算ソフトでは ''radians(度)'' という関数でも変換できる。
  - $(x,y,z)$ を計算する。
    * 表計算ソフトでは ''cos(ラジアン)'', ''sin(ラジアン)'' という三角関数を使う。

時間、度、ラジアンの対応の例
^  時間  ^  度     ^  ラジアン                     ^
|  $0$   |  $0$    |  $0$                          |
|  $6$   |  $90$   |  $\frac{\pi}{2}=1.57\cdots$   |
|  $12$  |  $180$  |  $\pi=3.14\cdots$             |
|  $18$  |  $270$  |  $\frac{3\pi}{2}=4.71\cdots$  |
|  $24$  |  $360$  |  $2\pi=6.28\cdots$            |

===== 天体の明るさ =====

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

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

{{ :chokai:magnituide.png?nolink |等級の違い}}

^  天体      ^  見かけの等級  ^
|  北極星    |  2.0           |
|  ベガ      |  0.0           |
|  シリウス  |  -1.44         |
|  太陽      |  -26.75        |

===== VR プラネタリウムの恒星 =====

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

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

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

----
==== 恒星のデータ ====

^ ファイル  | stars.ods                                   |
^ 恒星      | カシオペヤ座、黄道12星座に属する明るい恒星  |

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

----
==== VR プラネタリウムの表現 ====

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


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

^  HIP番号\\ hip  ^  赤経\\ $\alpha$   ^  赤緯\\ $\delta$  ^  V等級\\ vmag  ^
|             746 |  0.1532704823 時間 |    59.14897756 度 |           2.28 |

一般的に恒星の位置は赤道座標系で赤経 $\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 でこの球体オブジェクトのタグは以下のようになる。
<code html>
<a-sphere id="746" mixin="star" radius="1.93" position="251.1 420.7 -10.1"></a-sphere>
</code>

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

===== 星座 =====

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

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

^  星座名      ^  略符  ^  西洋占星術で使われる\\ 生月日  ^
|  おひつじ座  |  Ari   |  3月21日〜4月19日             |
|  おうし座    |  Tau   |  4月20日〜5月21日             |
|  ふたご座    |  Gem   |  5月22日〜6月20日             |
|  かに座      |  Cnc   |  6月21日〜7月23日             |
|  しし座      |  Leo   |  7月24日〜8月22日             |
|  おとめ座    |  Vir   |  8月23日〜9月22日             |
|  てんびん座  |  Lib   |  9月23日〜10月22日            |
|  さそり座    |  Sco   |  10月23日〜11月21日           |
|  いて座      |  Sgr   |  11月22日〜12月21日           |
|  やぎ座      |  Cap   |  12月22日〜1月20日            |
|  みずがめ座  |  Aqr   |  1月21日〜2月18日             |
|  うお座      |  Psc   |  2月19日〜3月20日             |

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

===== VR プラネタリウムの星座線 =====
==== 星座線のデータ ====

^ ファイル  | lines.ods                 |
^ 星座線    | カシオペヤ座、黄道12星座  |

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

----

==== VR プラネタリウムの表現 ===

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

^  始点の恒星                                  |^  終点の恒星                                  ||
^  赤経\\ $\alpha_{1}$  ^  赤緯\\ $\delta_{1}$  ^  赤経\\ $\alpha_{2}$  ^  赤緯\\ $\delta_{2}$  ^
| 0.1532704823 時間     | 59.14897756 度        | 0.6751494264 時間     | 56.53718811 度        |

始点の恒星から終点の恒星まで 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 でこの星座線のタグは以下のようになる。
<code html>
<a-entity mixin="cline" line="start:251.1 420.7 -10.1; end:266.0 408.8 -47.5;"></a-entity>
</code>

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

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

アセットとして、恒星の属性を ''id="star"''、星座線の属性を ''id="cline"'' のミックスインで設定する。
<code html>
<a-assets>
  <a-mixin id="star" material="color: white; shader: flat;"></a-mixin>
  <a-mixin id="cline" line="color: blue;"></a-mixin>
</a-assets>
</code>

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

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

===== VR プラネタリウムの天球の変更 =====

VR プラネタリウムでは A-Frame のスカイを天球とみなしている。
p.html のスカイには画像を貼り付けているが、これを見えなくしたい場合には
<code html>
<a-sky src="grid.png"></a-sky>
</code>
から
<code html>
<a-sky color="black"></a-sky>
</code>
に変更する。


===== 自主課題 =====

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

===== 発展 =====

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

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

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