今年のVRの盛り上がりは留まるところを知らず、連日のニュースや新聞でも様々な業種やビジネスでのVRの話題が数多く飛び交っております。ハードウェア・ソフトウェア共に将来性の期待できる商品が生まれてきており、今後もますますVRの進化が進んでいくことが予測されます。

これだけ注目をされているVRですが、Web制作業界ではWebVRという言葉がようやくちらほら使われ始めてきたものの、まだまだWebサイト上でVRコンテンツが有効活用されるような魅力的な事例も少なく、業界としてVRの活用はこれからに期待といったところでしょう。

これまでWebGLやThree.JSなどHTML5を活用したフレームワークは出てきていたもの、Web上でVRコンテンツを作る場合ためには、3Dプログラミングなどの専門的な知識が必要となるため、Web制作を専門に制作している人達にとっては導入に当たって一つの障壁になっておりました。
しかし、昨年末にMozilla VRチームから発表されたA-Frameでは、HTMLタグベースでWeb上に3Dコンテンツを配置できるフレームワークを提供しており、専門的なスキルが無くても容易にWebVRコンテンツを作成することが可能となりました。
しかも、Three.jsをベースとしているため、速度面やクオリティについても信頼できる性能をもっており、今後のWebVR用ツールのデファクトスタンダードとしてWebVR制作を先導していくでしょう。

aframe

A-Frame Webサイト

 

今回は、このA-Frameを実際に使って、超簡単にプログラミングレスWebVRコンテンツを作ってみましょう。

 

まずは、A-Frameのライブラリをダウンロードします。
A-Frameのサイト（https://aframe.io/）からGitHub上のjsファイル（aframe-v0.3.0.min.js）をダウンロードしましょう。

次にVR背景に利用する360度パノラマ画像を用意します。
amanaimages.comの写真・イラスト素材(http://amanaimages.com/photo/)から「VRパノラマ」と検索してみましょう。
いくつかのVRパノラマ画像が表示されますので、その中から気に入った作品を選択して、作品の詳細画面のカンプデータをダウンロードしましょう。

 

必要な素材はこれだけです。
後は、以下のHTMLを書きますが、たったこれだけです。
なんとこれだけで、VRコンテンツとして使えるようになるのです。簡単ですよね。
（VRビューアとして表示するためには、スマートフォンなどをご利用ください）

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<script src="aframe-v0.3.0.min.js"></script>
</head>
<body>
<a-scene>
	<a-assets>
		<img id="sky" src="10247019891.jpg">
	</a-assets>
	<a-sky src="#sky"></a-sky>
</a-scene>
</body>
</html>

 

▶こちらから実際にご覧いただけます

webvr_sample_1

(c) Mitsushi Okada/a.collectionRF /amanaimages

 

 

次に、3DモデルデータもVRコンテンツに掲載してみましょう。

3Dモデル素材の無料サンプルは下記の記事を参考にしてみてください。好きなサンプル素材をダウンロードしてみましょう。

3Dクリエイター必見！無料の3Dモデル素材ダウンロードサイト【５選＋１】

※注意1　A-Frameで利用できるモデルデータはOBJ形式となります。
※注意2　A-Frameで利用できるテクスチャデータはPNGなどのブラウザで表示できる画像のみとなります。

そして先ほどのHTMLにモデルデータの宣言を追加してみましょう。
なんとこれだけのタグを記載するだけで先ほどの風景の中に3Dモデルデータを表示することができました。

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<script src="aframe-v0.3.0.min.js"></script>
</head>
<body>
<a-scene>
	<a-assets>
		<img id="sky" src="10247019891.jpg">
		<a-asset-item id="crate-obj" src="house_obj.obj"></a-asset-item>
		<a-asset-item id="crate-mtl" src="house_obj.mtl"></a-asset-item>
	</a-assets>
	<a-sky src="#sky"></a-sky>
	<a-obj-model src="#crate-obj" mtl="#crate-mtl" position="0 0 -15 " scale="0.01 0.01 0.01"></a-obj-model>
</a-scene>
</body>
</html>

 

▶こちらから実際にご覧いただけます

webvr_sample_2

(c) Mitsushi Okada/a.collectionRF /amanaimages

 

 

今回は、A-Frameを使ってプログラムなしでWeb上にVRコンテンツを作成してみました。

VRコンテンツは様々な分野で広がりを見せておりますが、どうしても作成するのに特別なスキルを必要としていました。しかし、A-Frameのようなツールを活用することで、WebVRの実現が容易になります。

今回はA-Frameのさわりだけをご紹介しましたが、A-Frameは今回以外にも様々な機能が備わっております。是非皆さんのWeb制作における表現方法の一つとして活用してみてはいかがでしょうか。

 

A-FRAME
amanaimages.com  A.CollectionRF　VRパノラマコレクション