%#!platex -kanji=%k reroad-paper

VRパートでは，現地で撮影した360度パノラマ画像をA-Frameを用いてバーチャル
リアリティ(VR)画像として表示している。以下ではA-Frameの概要と
%実際のソースコードをもとに
実装したインタラクションに関して説明する。

\subsubsection{A-Frame}
A-Frame\cite{www-aframe}は，WebVRの作成を行うオープンソースのWebフレーム
ワークで，HTMLの仕様内で実装されているため開発者並びに利用者が，特殊なハー
ドウェアを利用していなくてもVR技術を構築・体験できるライブラリである。利
用するためには，HTMLファイル内のscriptタグでA-Frameをロードする必要があ
る。その後，同じHTMLファイル内に専用のタグを記述していくことでVRの作成が
可能であり，そこに画像やオブジェクト，カーソル等を追加し容易にVR空間を作
成することができる。また，WebGLやWebVR対応のブラウザーがあればA-Frameは
動作するため，デバイスの互換性は高く，より多くの環境に対応させやすいのも
利点の一つである。

\subsubsection{VRの実装}
A-Frameを用いてWebVRを実装するにあたり，実際にVRパートに追加した機能を以
下に示す。

\begin{itemize}
\item 注視することでクリックイベントが呼ばれる視点カーソル
\item 視点カーソルのアニメーション
\item クイズページへ移行するオブジェクト
\end{itemize}

VRの実装はA-Frameを利用しつつJavaScriptで行った。3D画面の用意，
ユーザのクリック・タップに応じたページ移行の処理などを独自に開発した。

一般的なVRエンジンでは，ユーザがある一つの場所を見続ける\footnote{実際に
はモバイルデバイスに映っている画像の中央にその場所が映り続けるように持つ
手を固定する}ことで，その中に入り込んで行くような擬似体験を与えることが
できるが，本システムでもそのような注視行動によるイベント発火の仕組を
A-Frameにより実装し，施設にある特定の地物のさらに詳しい情報を知りたい場
合などに適用できるようにした。

また，VRの下地となる360度画像は安価な360度対応カメラ\footnote{RICOH
THETA S}を用いて誰でも容易に撮影できるものとした。A-Frameではこの画像を
直接読むことができるので特段の加工処理などは不要である。

\begin{figure}[tb]
 \centering
% \subfigure[3D画像内の注視点(中央の丸印)]{
 \includegraphics[bb=0 0 1280 591,width=0.8\columnwidth]{img/vr-1.jpg}
% }
 \caption{3D-VR画像(左右画面中央の丸印が注視点で各右端の丸が仮想目標物)}
\end{figure}

Webブラウザ上に開墾場現地の3D画像とともに，注視点が表示され，それを仮想
目標物と一定時間合わせることでそのオブジェクトに応じたクイズパートに移行
し，歴史的産業的背景の理解の促進へとステージが進む。

%以下にVR実装のソースコードを示す。
%
%
%\begin{itembox}[l]{VRの実装} 
%\begin{verbatim}
%<a-scene id="vr" embedded>
%//ページにWebVRを作成する
%
%  <a-assets>
%    <img id="360" src=　・・・>
%//画像を事前に読み込む
%  </a-assets>
%  <a-sky src=　・・・>
%//背景に画像を設定する
%  </a-sky>
%  <a-camera position="0 0 0">
%//カメラの初期位置を設定する
%   "x y z"軸で指定する
%    <a-entity cursor=　・・・>
%//カーソルのエンティティを設定する
%      <a-animation begin=　・・・>
%//カーソルがオブジェクトに触れた
%     時のアニメーションを設定する
%      </a-animation>
%    </a-entity>
%  </a-camera>
%  <a-sphere position ・・・>
% //オブジェクトを配置する
%  </a-sphere>
%  
%</a-scene>
%\end{verbatim}
%\end{itembox}