2017.3.10 Android AR・VR iOS WEB 技術開発

VRを5分で導入！？フレームワーク『A-Frame』を紹介

aframe_top

こんにちは、今回が初の投稿になりますエンジニアのニャンちゅうです。

サーバサイドやWebフロントエンドの情報に根をはっていつも何かしら面白い技術がないかを探索しています。そんな中で見つけてきたので今回ご紹介する『A-Frame』というVRのフレームワークです。

FireFoxでおなじみのMozillaですが、そのMozillaのVRチームが開発したWeb専用のVRフレームワークです。VRに必要となるツールをひとまとめにした上で扱いやすくしてあり、3Dに馴染みがない初心者でも大丈夫なフレームワークとなっています。大きな特徴としてDOMベースで3Dオブジェクトを配置することができ、HTMLやXMLをマークアップするかのようにアプリを作成することができます。専用のアプリが不要でURLを共有するだけでブラウザ上で簡単にVRコンテンツを楽しむことができます。またレスポンシブ対応しており、iPhoneやAndroidでも利用できます！

3Dの基本

初心者でも大丈夫とはいっても3Dの考え方や知識がないとつまづくポイントがあります。まずはアプリを作る前に3Dの基本について簡単に説明します。

座標

3Dを扱う上で座標系は大事なポイントです。OpenGLでは画像のようになります。OpenGL以外ではこの座標系が変わることがあるため注意する必要があります。

カメラ

ゲームでおなじみのカメラの説明です。いわゆるプレイヤーの視点にあたるもので3Dならではの特徴的な考え方があります。

画像のようにnear、farとあります。これは3Dオブジェクトを生成する範囲を指定するものです。nearとは、カメラの位置から指定した距離より奥の方向に3Dオブジェクトを投影します。farとは、カメラの位置から指定した距離より手前の方向に3Dオブジェクトを投影します。ゲームをよくプレイする方であればキャラクターを3Dオブジェクトに接近させると視界から3Dオブジェクトが消えたり、遠くの3Dオブジェクトが急に現れたりする経験があるのではないかと思います。

fovはField of Viewの頭文字を取ったもので、視野を指定することができます。同じ画面幅でも3Dオブジェクトを投影する範囲が広がります。

導入

それでは実際に導入してみましょう。A-FrameでいうところのHello World!を導入として用います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! • A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>

      <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#ECECEC"></a-sky>
      <a-entity position="0 0 3.8">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>

これをブラウザで表示すると以下のようになります。JavaScriptを1行も書くことなく3D表示ができてしまいました！しかも、右下のボタンをタップするとVRモードに移行します。