WebVRフレームワーク「A-Frame」で3Dコンテンツを作成してみよう

2016年11月 4日

2016年は、VR(バーチャルリアリティ)元年と言われています。このブログでも、様々なVRコンテンツやVRがどれだけ注目を集めているのかという情報について、紹介をしてきました。

ただ、VRというと、GoogleのCardboardのようなVRビューワーを使って見るもの、というイメージが強いかと思いますが、特別なビューワーなどのデバイスを使わなくとも、ブラウザ上でVRの体験をすることができます。
その表現技術を「WebVR」といいます。

ブラウザ上でVRを再現するという考え方ですから、当然私たちWebクリエイターが慣れ親しんだHTMLとJavaScriptだけで作ることができます。

WebVRフレームワーク「A-Frame」とは

Webブラウザ上で3Dの表現をするための標準仕様に、「WebGL」があります。 WebGLは、HTML5から登場したcanvas要素を元に、JavaScriptとOpenGLと呼ばれるAPIの技術を使っています。
そんなWebGLの表現を使って、優れた3Dコンテンツがたくさん登場しました。過去のブログ記事でもWebGLを使ったサイトの紹介をしています。

WebGLの紹介ブログ記事

「WebGLで海を操る!?Webコンテンツ」written by ささくらはなび
「レーシングカーの格好良さをブラウザで堪能」written by ささくらはなび
「東京メトロのアートで最先端を行くWebアプリ「metrogram3D」」written by ささくらはなび
「10万光年の宇宙遊泳が楽しめる「100,000 Stars」」written by ささくらはなび

WebGL上に構築される考え方が、「WebVR」です。ただ、WebGLを理解してVRコンテンツを開発しようとすると、難易度の高い知識と技術が求められます。
そこで、MozillaがWebGLを知る必要のない開発者のためにWebVRフレームワークとして開発をしたのが、「A-Frame」なのです。HTMLとJavaScriptの知識さえあれば、A-Frameを使って誰でも気軽にWebVRコンテンツを作成することができるようになったのです。

「A-Frame」の特徴

「A-Frame」は、MozillaのMozVR開発チームが、Web開発者向けのオープンソースのフレームワークとして開発しました。一番最初の公開は2015年12月で、そろそろ1年になります。
公式サイトは英語版のみですが、日本語でも解説ページ「A-Frameを使った基本的なデモの作成」のコンテンツが用意されています。

A-Frameの特徴は、次の通りです。