島根大学附属図書館は2020年9月23日に「VR図書館ツアー」を公開しました。「VR図書館ツアー」は360度パノラマ写真に館内施設等の説明を加えたもので、インターネット上で館内ツアーを疑似的に体験できるコンテンツです。
この記事では、「VR図書館ツアー」の基本の作り方などを紹介します。
「VR図書館ツアー」をまだご覧になったことがない方はこちらをどうぞ（FirefoxやChromeでご覧ください）
ぐりぐり動かして見てみてください。
それでは作り方を順番に説明していきます。
1. 360度パノラマ写真を撮る
360度カメラを使って、360度パノラマ写真を撮影します。手に持って撮ると自分が映ってしまうので、三脚とアプリで撮影者が隠れた後に撮影するのがよいと思います。
三脚は、屋外で撮影したときに風で倒れてしまう場合があるので、特に屋外で使うときはしっかりしたものの方がよいかもしれません。
撮影された画像は、一枚4MB程度。このまま使うとページの表示がちょっと遅かったので、今回は画像編集ソフトを使って400～500KB程度まで画質を落としました。画質を落としても見た目にはそんなに変わらない印象です。
屋外の写真を撮るときは結構時間帯が重要になってきます。最初に図書館外観の写真を撮ったときは、時間帯が悪くて図書館が逆光で暗くなってしまいました。時間を変えて撮り直したのが上の写真になります。
2. A-Frameを使ってバーチャル空間を作る
A-Frameを使ってバーチャル的な空間を作っていきます。
A-FrameはMozilla VRチームによって開発され、現在は主にSupermedium社によって保守されているWeb VRフレームワークです。HTMLタグのような記述の仕方で、お手軽にVR的な何かを作ることができます。
また、A-Frameは公式ドキュメントがとても充実しているので、困ったときにすぐ参照することができます。英語ですが（白目）。
先ほど撮影した写真を使って、360度パノラマのバーチャル空間を作ってみます。例えば次のようなコードを書いて適当な名前（例えばblog01.html）で保存し、サーバーにアップロードします。ちなみに、今回使ったサーバーはhttps通信が可能なものです。写真のファイルも一緒にアップロードしておきます。
A-Frameのライブラリを読み込む方法は、外部ライブラリを読み込む方法と、ライブラリをダウンロードして、コンテンツと同じサーバーにアップロードする方法があります。以下では両方の例を示しています。実際に使ってみるときは、どちらかを選んで記述してください。うまく動かない場合は、レスポンスヘッダにCSP（Content-Security-Policy）が出力されているのが原因かもしれません。その場合は、CSPの出力をやめる設定をするか、ポリシー記述の見直しを行ってください。
また、構築する環境によってはCORSの設定が必要です。 具体的にはレスポンスヘッダに「 Access-Control-Allow-Origin: *」を出力するように設定します。
releases以下の数字（例でいうと1.0.4）は適宜最新のバージョンに変えていただいて大丈夫です。
blog01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ブログ用</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
//外部ライブラリを読み込む場合
<script src="../js/aframe.min.js"></script>
//同じサーバーにアップロードする場合
<!-- 使用したライブラリ等の情報およびライセンスは次を参照 https://da.lib.shimane-u.ac.jp/virtual_tour/about.html#used -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" cursor="fuse: false; rayOrigin: mouse">
<a-sky src="../img/background/1F_outside.JPG" rotation="0 0 1" position="0 0 0"></a-sky>
</a-scene>
</body>
</html>
サーバー上のディレクトリ構成は下のような感じ。imgフォルダの下にbackgroundフォルダがあって、その中に1F_outside.JPGがあります。imgフォルダと同じ階層にblogフォルダがあってその中にblog01.htmlがあります。
├─blog
│ └─blog01.html
└─img
└─background
└─1F_outside.JPG
ライブラリを同じサーバーにアップロードして読み込む場合は、例えば以下のような構成にします。以降は、js-aframe.min.jsの部分は省略します。
├─blog
│ └─blog01.html
└─img
│ └─background
│ └─1F_outside.JPG
└─js
└─aframe.min.js
作成されたページはこんな感じ。VR空間の背景が360度パノラマ写真になっています。
上の記述を少し解説します。
<a-scene></a-scene>まずシーンを作成（でいいのか？）します。その中に色々と設定していきます。
・vr-mode-ui="enabled: false"…VRモードの機能を表示しない。今回はVRゴーグル等を使うようなコンテンツではないし、なくてもいいかなと思ったので。
・device-orientation-permission-ui="enabled: false"…これをfalseにすると、ユーザーに許可を求めるようなメッセージが表示されなくなります。一部のタブレット端末等では、ユーザーが許可しないと傾きを検知するセンサーを使えないようです。しかし、私のタブレット端末でVR図書館ツアーコンテンツの動作チェックをしていたときに、モバイルサイトをリクエストするよう設定することなどを促すメッセージが、ページを移動するたびに表示されました。これが消えなかったので、メッセージが表示されないように設定しました。結果として一部のタブレット端末等では傾きを検知するセンサーを使うか許可を求めるメッセージが表示されなくなり、VR図書館ツアーを見ているときに端末を傾けて天井などを見ることができなくなっています。
・cursor="fuse: false; rayOrigin: mouse"…注視点カーソルを無効にし、マウスによるクリックが作用するように設定しています。A-FrameではVRゴーグルなどを使って楽しむVRコンテンツを作ることができます。この開発を行いやすくするためか、一点を見つめることでクリックイベント等が発火する注視点カーソルがデフォルトとなっています。見るだけでクリックになるなんてすごい。しかし今回は普通にマウスでクリックしたりタブレットなどでタッチしたりしたいので、注視点カーソルを無効にしつつこれらの動作を有効にするためにこの設定が必要でした。
<a-sky></a-sky>
は、VR空間の背景を定義する記述です。
・ src="../img/background/1F_outside.JPG"…画像の場所と名前を指定することで画像を呼び出します。写真や画像を背景にしたいときに使います。カラーコードを指定すると、その色の背景にすることができます。例えば
<a-sky color="#000000"></a-sky>
とすれば、真っ黒な背景にすることもできます。
・rotation="0 0 1"…このrotationと、後で出てくるpositionはとっっってもよく使います。rotationはそれを設定したものの回転角度を指定します。（例だとx軸0度、y軸0度、z軸1度回転）写真を撮ったときに少しずれてしまってもrotationやpositionで調整できます。blog01.htmlでは撮影した写真が少し傾いてしまったので、z軸方向に1度回転させて傾きを調整しています。例えばy軸180度回転すれば真後ろの光景を正面に持ってくることもできます。「VR図書館ツアー」では、これを利用して空間を行き来したときの見え方の違いを表現しています。
・position="0 0 0"…それを設定したものの位置を指定します。例だとx軸、y軸、z軸いずれの方向にも動いていません。VR空間に画像や図形などを置くときに活躍します。
長くなるのでとりあえずここまで！次回は画像や図形などを置く方法を説明します。
[mm]
