本文へジャンプ

WebGLの知識がなくてもWebVR用フレームワーク「A-Frame」を使えば本当にWebVRサイトを構築できるのかチャレンジしてみた

Posted by MONSTER DIVE

どうもどうも。『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°画像の表示にチャレンジです。

スクリーンショット:360°画像を表示したサンプルページ

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

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

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

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

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

スクリーンショット:くるくる回るキューブのサンプルページ

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

検証結果

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

とはいえ…

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

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

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

Recent Entries
MD EVENT REPORT
What's Hot?