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

maskin

8年前

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レンダリングエンジンを利用したり