MD-Blog_Web Creative

どうもどうも。『Pokémon GO』が流行ってますね。ポケモンボールを投げるのが下手すぎるマークアッパーです、こんにちは。だいたいどんなゲームをやらせても間違いなく下手くそです。やんなっちゃいますね。

そんなわけで私はOffにしてるんですが、ARモードによるリアルとバーチャルの融合が『Pokémon GO』のひとつの特徴ですよね。AR（拡張現実）がググッと身近な技術になった感じがします。よね？

と、ARの話題を振っておいてなんですが、話をVR（バーチャルリアリティ・仮想現実）に変えます。強引ですよね、そうですね。

VR元年？

今年（こそ）はVR元年だと言われてますね。各社からVRヘッドセットが発売になったり、VR体験ができるエンターテインメント施設がオープンしたり、勉強会などのイベントも多数開催されています。

私もずっと気になっている技術ではあるのですが、すごく難しいんでしょ...っていうイメージが拭えず、どうにも手が出せずにいました。でも...

そんなんじゃダメだ！！！

そうですね、食わず嫌いはよくないですよね。

スマホを箱に入れて気軽にVRを楽しめる「あの箱」（ハコスコとかCardboardとかそういう類のアレ）を手に入れてしまったことですし（ある朝出社したらデスクの上にポンと置いてあったのです）、ここは私も(Web)VR元年するしかない！

...とはいえ、プログラムほとんど書けない＋WebGLの知識もない＋数学ちんぷんかんぷん＝ポンコツな私には、本格的なVRなんてまず無理です。
なので、簡単に試せるWebVRのためのフレームワークを利用してみることにしました。

「A-Frame」でWebVR入門

「A-Frame」とは、MozillaのVRチーム「MozVR」によって設計・メンテナンスされているオープンソースのWebVR用フレームワークです。
WebGLの知識がなくても、HTMLマークアップ（タグの記述）で簡単なVR対応のWebページが作れてしまうというウワサ。なんと素晴らしいツールでしょうか！

• 「A-Frame」公式サイト

WebVR入門にはちょうど良さそうですが、さて、WebGLの知識も、3Dの知識も、数学の知識もないポンコツに、どこまでできるんでしょうか。検証(？)してみましょう！

360°画像を表示してみよう

まずはじめに、おそらく最も簡単であろう、だがしかし「おぉ！」となれそうな、360°画像の表示にチャレンジです。

• サンプル1 - 360°画像編

おぉ...できた！
ブラウザでぐりぐり動かせる！スマホなら360°くるっと回転しながら見回せる！（当然ですが、WebVR対応ブラウザのみです）
これを実現するために書いたコード、たった3行ですよ、奥さん。なんてお手軽！

<a-scene>
  <a-sky src="./images/sample.jpg"></a-sky>
</a-scene>

※ちなみに写真は取り急ぎ近所の公園で撮ってきたものなので、特に見応えはないです。

くるくる回るキューブを作ってみよう

次に、簡単なサンプルにありがちではありますが、キューブ（直方体）を作ってくるくる回してみます。

• サンプル2 - くるくるキューブ編

おぉ...できた！
右に、左に、キューブがくるくる回っています。
キューブにはMONSTER DIVE（弊社）のロゴまで入れちゃいましたよ。
さらに、注視点カーソル（画面中央にある小さな丸）をキューブに合わせると、キューブの色と大きさが変わりますよ。

検証結果

ウワサに違わず、WebGLの知識がまったくなく、プログラムもほとんど書けない私でも、見事WebVR入門を果たせました！
今回書いたのはHTML数行〜数十行程度。ホントに簡単ですね！？

とはいえ…

このくらいまでならポンコツな私でも実装できましたが、これ以上となると、やはりそれなりに知識がないと難しいかな...というのが正直な感想です。（私がポンコツすぎるだけかもしれないですけど...）

ただ、公式のドキュメント（記事公開時点ではv0.2.0）やサンプルがしっかり用意されているので、勉強はしやすいです。簡単なところからはじめて、少しずつレベルアップしていけばいいのだと思います。

私もようやくWebVRデビューを果たしましたし、もう少し勉強してみたいなーと。思って。。思っ。。。（心が折れる音）
とっ...とりあえずもっとちゃんとしたVR体験をしてみたいよぅ！同行者求ム！＞＜