「A-Frame」数分で作れるWebVRフレームワーク、インストール不要で誰でも体験可能【@maskin】

maskin

8年前

About
Latest Posts

Editor In Chief at TechWave.jp

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。

Latest posts by maskin (see all)

VRの衝撃は体験しないと解らないが、現段階で全ての人が作り・楽しむ状態にあるとは決して言い難い。

米OculusのカンファレンスでFacebook CEO マーク・ザッカーバーグ氏らが強調したように(VRもウェブへ、米Oculusイベントの重要トピックの一つ【@maskin】)、一部の新しもの好きユーザーだけでなく、より多くの人が体験しシェアできることが重要だ。特定のハードウェアやソフトウェアをインストールする手間をできるだけ排し、誰もが楽しめ、コンテンツをシェアできる、それがVR黎明期における普及の条件の一つといっても過言ではないだろう。

その点で、先行する領域もある。スマホでパノラマ写真を撮影してFacebookにアップロードすればVR的映像として楽しむことができるし、YouTubeでもどんどんVR360度映像が投稿されている。この1年でVR体験の敷居は下げられたが、写真や映像以外で何かをやろうとすると急に壁に直面してしまう。

しかし例えば、このVR映像。PCやスマホのウェブブラウザで操作できるし、Google CardBoard等のVRヘッドセットを装着すればVRの世界を楽しむことができる。これくらいのことを数分で実現してしまうのが「A-Frame」というWeb技術で作成されたフレームワークがある。

このサンプルのHTMLソースコードはこれだけ。に要なJavaScriptライブラリを読み込み、あとはDOM(HTMLの各要素)にどんなオブジェクトを、どこに配置するかを記載するだけ。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! • A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="../../../dist/aframe.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>

このフレームワークは、WebVRというウェブブラウザでVRコンテンツを表現するためのAPIをより利用しやすくしたもので、IE以外のウェブブラウザ(Microsoft社Edgeは可能)であればPCでもスマホでも再生できる。(冒頭のスナップショットもウェブページを並べて表示しただけのデモ)

例えばウェブブラウザの3Dレンダリングエンジンを利用したり