天体観測していて星座探したいとき、「星と星が線で結ばれていたらいいのになぁ」って思ったことありませんか？それをHMDで実現きたらいいのに。と思ったのがキッカケで、VRでプラネタリウムを制作することに挑戦。まだ、制作途中ですが、ひと段落したので載せたいと思います！

　WebVRプラネタリウム制作ですが、まず、VR星空写真の撮り方を調査。機材を買って、VR星空撮影に挑戦しました。動画撮影では撮影後の編集（＝ポスプロ）を意識して撮影する事が基本ですが、VR撮影の場合は、撮影後のスティッチングを意識して撮影します。このとき重要な要素は、ノーダルポイントと、撮影した複数枚の写真の領域が被っていること。また、最初失敗したこととして、フォーカスをしっかり合わせること。天の川が見れる環境になると、暗すぎるので、フォーカス合わせが大変になります。後々後悔しないためにも、しっかり時間をかけて星にフォーカスを合わせた方がいい、ってことを経験しました。

　撮影後は、スティッチング作業。暗い写真なので「スティッチングは大変」って思われるかもしれませんが、星座知ってると同じ星見つけて「ココ一緒！！」って教えてあげればいいので、星が多く写っている写真であれば、スティチングは割と簡単。その後のレタッチは慣れていないので、修行中。。。笑　VR写真上の線やテキストは普通に描くとVR表示したとき歪むので、PhotoshopのVR機能を使用して描画しています。

　VR星空写真ができた後は、Web表示するためにコード書き。WebVRに関しては、今まで「A-frame」や「pangolens.js」を使用して制作していましたが、この2つは、「簡単にVR写真をWebブラウザで閲覧できる」という長所があるものの、「写真切り替えの条件分岐が自由でない」「音声ボタンの作り方がわからない」という欠点があったので採用を見送りました。（VR写真１枚表示だけなら、断然この2つの方法を採用します！）

　別の方法を調査してみたものの、1ヵ月経っても見つからず。。。奥の手「Unity」で制作かなーって感じで、諦めかけていましたが、あるとき、Webアプリで俄かに注目を浴びている「React Native」のVR版である「ReactVR / React360」に出会いました。「VR」ってついているのでWebVRプラネタリウムが作れるかも、という淡い期待を込めて調査開始。（Reactは、FaceBook社が開発していて、さらにHMDメーカーであるOculus社を傘下に治めているので、VR技術開発に力入れてそう、という淡い期待がありました。）

　「ReactVR / React360」は使っている人が少ないからか、本を探しても見つからなかったので、ネットの情報だけで使ってみたものの、情報が少なすぎて挫折。ダメ元で、React Netiveの本買って軽く読んでみると、HTML/CSSとPythonを一緒にした印象を受けたので、流し読みして再度挑戦。すると、 ローカルでは、VR写真の表示が可能に！（でも、座標軸がわからず位置が自由に変えられない。。。）

　ローカル表示に成功したので、次に、それをサーバー上で表示しようと考えて、試しにデータをサーバー上にアップロード。そして、アクセスしてみると失敗。。。Webアプリは独特の方法があるのかなって調べてみても、失敗した理由が全然わからず。ここでも挫折しそうになりましたが、1ヶ月くらい粘って調べていると、Webアプリはサーバー上で行うデプロイと呼ばれる計算してからWeb表示を行うことがわかり、またまた調査開始。

　それから、いろいろと調べた結果、GitHub + Netlifyの組み合わせで、デプロイできると知ったので実験開始。しかし、、、なかなかうまくいかず。コードや設定変えてはデプロイすること数日。ここでも原因がわからず諦めかけましたが、「yarn.lock」ファイル（これがなくてもローカルでは表示されるらしい）がデプロイに必要と記載しているWebサイトが見つけ、試しに「yarn」をインストールしてから、Rect360で１から制作。そして、デプロイしてみると、あっけなく成功。

って感じで、長きに渡るWeVRプラネタリウム制作はひと段落。これからは、星空案内のボタンつけたり、モーダルっぽい感じの写真を挿入したりして、完成度を上げていく予定です。