本文へジャンプ

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

Posted by EMI

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

そんなわけで私は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行ですよ、奥さん。なんてお手軽!


  

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

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

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

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

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

検証結果

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

とはいえ…

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

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

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
2017年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
スマートフォンやタブレットに最適化されたWebサイトを制作します。
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr