じゅころぐAR

ARのブログ

トップ > A-Frame > ここまで来た！今だからこそ押さえておきたいA-Frame

ここまで来た！今だからこそ押さえておきたいA-Frame

A-Frame

この記事は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 Day14の記事になります。
Day14ってことは、アドカレももう後半に入ってる？ 12月ももうすぐ半分終わるってことですか？ 早いな、おい...

自己紹介

はじめましての方もいるかと思いますので、少しだけ自己紹介を。

@jyuko（じゅこ）と言います。2年前にXR転職を行い、2020年1月から株式会社Gugenkaでエンジニアをやっております。
WebXRもやってはいますが、フロントエンドでReact書いたり、クラウドでサーバ立てたりもしますし、たまにBlender使ったり、イベント運営のお手伝いをしたりとフルスタックという名の何でも屋さんです。

趣味も雑食なのですが、アニメ、音楽、スポーツ全般好きです。XR（主にAR）の個人開発もGugenkaに入社する前から行っていて、ARではUnityを使うことが多いです。本ブログへの投稿、技術同人誌の頒布など、XRを普及させる活動も細々と続けております。

本記事の題材にしているA-Frameは、個人開発で2016年12月から使い始めました。実務歴ではないですけど、一応A-Frame歴5年になります。その前に1年くらいthree.jsもやってました。

まえがき

この記事で伝えたいことは1つ。今、A-Frameがめっちゃ熱いということです。曲がりなりにも5年前からA-Frameを知っている身からして、A-Frameを始めるなら今しかないと言えます。

根拠となる部分はこの記事に書いていきますが、

  • A-Frameを活用する機会がかなり増えた
  • 2020年末に重要なアップデートがあった
  • 今後も体験の向上が見込まれる

というのが大きな理由です。

A-Frameで何ができるようになっていて、現在どのように活用されているのか、今後どうなっていくのか、など、1年のまとめとしてぎゅぎゅっと濃縮してお伝えできればと思います。

A-Frameとは

A-FrameはHTMLマークアップでWebVRに対応した3Dシーンが簡単に作れるフレームワークです。

aframe.io

・・・という説明は、もはや少し古いのかなと思います。

現在はVRだけでなくARにも活用できますし、A-Frameを深く理解していくと、拡張性・保守性に優れており、学習コストが低いように見えて奥が深く、それでいて扱いやすいことがわかります。

A-Frameは、three.jsをベースにしたEntity-Componentシステムが強力な3D表示からVR、ARまでオールラウンドに対応したWebXRフレームワークです。

2021年のA-Frame利用動向

A-Frameが熱いという一番の根拠で、2020年の後半くらいから2021年にかけて実務レベルでA-Frameを利用する機会＝A-Frameのスキルが活かせる機会が圧倒的に増えたという実感があります。

前提として、対応するデバイスが多くアプリをインストールさせずに使えるというWebXR共通の利点がありますが、それ以上にA-Frameを取り巻く環境が整ってきた印象です。

AR領域

ARでは、8th Wall WebやAR.js（いずれもA-Frameと組み合わせてWebARが実装可能）を使ったAR広告が認知されてきたように思います。

多方面で優れたAR広告の事例ができたのもあるでしょうし、ARKit/ARCoreがリリースされてから3年以上経っており、スマートフォンの買い替えでARに適したスペックのデバイスが普及した影響もありそうです。

いい意味で、ARでの広告が特に珍しいものではなくなったという印象です。

VR領域

より大きな変化は、VRにおけるHubs Cloudの台頭です。Hubsの表面的なUIはReactですが、3D空間はA-Frameで構築されており、A-Frameの経験・スキルがあるとないとでは理解度やカスタマイズ範囲に差が出てきます。

2021年、コロナ禍でリアルな展示会がオンライン化していく中、OSSベースでカスタマイズ性があり、WebブラウザでアクセスできるHubs Cloudの利用事例が増えています。 Gugenkaも技術協力やイベント利用をしているNTTのDOORをはじめとして、バーチャルオートサロン2021（終了）、池袋ミラーワールド、VR EXPO（終了）、集英社XR - VIRTUAL BOOTHなど、一時的な利用から中長期の運用まで幅広く使われています。

f:id:jyuko49:20211214030936p:plain

A-Frameの最新機能

最新といってもA-Frameは更新サイクルが比較的長めで、機能面のアップデートは年1回ペースです。

最新バージョンはv1.2.0なのですが、このバージョンはバグフィックスをメインに1年サイクルの途中でリリースされたもので、2020年12月のv1.1.0でリリースされたWebXR Device APIへの対応が実質的な最新アップデートになります。
非常に将来性の高い内容を含むため、ぜひ押さえておいていただきたいです。

WebXR Device APIについては、本アドカレDay1で公開されているikkouさんの記事が詳しいです。 まだ読んでいないという方は、目を通しておくべきかと思います。

zenn.dev

WebAR対応

WebXR Augmented Reality Moduleがサポートされ、WebXR Device APIを用いたWebARができるようになりました。従来も8th WallなどでWebARに対応できていましたが、このアップデートで正真正銘A-FrameはWebVRフレームワークからWebXR対応のフレームワークになったと言えるでしょう。

機能的には、Hit test（床や壁の検知）を行って3Dオブジェクトを配置する利用がメインになります。UIと組み合わせることでアニメーションの実行なども行えます。

現状、このタイプのARでは8th Wallを利用するケースがほとんどです。8th Wallは有償なため、簡易的なARであればA-Frameのみで実装できるようになります。 ただし、普及のためには、iOS SafariがWebXR Device APIをサポートすることが条件になります。このあたりの事情もDay1の記事で確認してもらえればと思います。

ハンドトラッキング対応

hand-tracking-controlsというコンポーネントが追加されており、対応のデバイスからハンドトラッキングの情報を取得することができます。回りくどく対応のデバイスと書きましたが、現状での利用シーンはほぼOculus Quest改めMeta Questのハンドトラッキングになります。

A-Frameで用意された手のモデルをシーン上に表示させるだけなら、hand-tracking-controlsコンポーネントを付けた<a-entity>をシーンに配置するだけで簡単です。

<a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>

また、pinch（指をつまむ動作）に関するイベントが用意されています。

ドキュメントには記載されていないですが、コンポーネントからbones（指の骨の関節など）の情報を取得できます。こちらを使えば、デフォルト以外の手のモデルを動かしたり、指をつまむ以外のジェスチャーイベントを独自に実装できます。

var rightHand = document.getElementById('rightHand');
var bones = rightHand.components['hand-tracking-controls'].bones;

A-Frameに関連する技術

A-FrameはEntity-Componentシステムを採用しているため、サードパーティ製のコンポーネントを取り込みやすくなっています。また、A-Frameのコアになっているthree.js向けにも多くのプラグインがOSSとして存在します。

これら多数のOSSのうち、今後のA-Frameで特に重要と思われるものを2つピックアップして紹介します。

Networked A-Frame（NAF）

HubsのコアになっているOSSで、WebRTCを使って複数のユーザー間でA-Frameのentityを共有する仕組みです。リポジトリにはlocalhostで実行できるサーバサイド（express）のコードも含まれています。

github.com

基本的な使い方はシンプルになっており、<a-scene>にはnetworked-sceneコンポーネントを追加します。connectOnLoadをfalseにしなければ、Webページをロードした際に自動的にサーバに接続します。

<a-scene networked-scene="
  serverURL: /;
  app: <appId>;
  room: <roomName>;
  connectOnLoad: true;
  onConnect: onConnect;
">
  ...
</a-scene>

entityを共有するには<a-entity>の構成をHTMLの<a-assets>内に<template>として用意しておき、networkedコンポーネントに<template>のidを渡します。

<a-assets>
  <template id="my-template">
    <a-entity>
      <a-sphere color="#f00"></a-sphere>
    </a-entity>
  </template>
<a-assets>

<a-entity networked="template: #my-template">
</a-entity>

最低限の実装はこれだけで、entityの情報が<template>とともにWebRTCで他のユーザーに送信されます。また、networkedになっているentityはサーバに接続している間、position、rotationが他のユーザーと同期されます。

@pixiv/three-vrm

WebXRで扱う3DフォーマットとしてはglTF2.0をバイナリにしたGLBフォーマットがスタンダードになりつつあります。
モデルだけでなくマテリアルやテクスチャ、アニメーションなどの情報もバイナリファイルにまとめられる点、Dracoで圧縮が行える点などにメリットがあり、<model-viewer>（Quick Look除く）やHubsの対応フォーマットがGLBとなっています。そのため、GLBが用意できれば、WebARにおいてもWebVRにおいても利用可能となっている現状です。

A-Frameでも、three.jsで標準的に使われていたOBJフォーマットとともに、gltf-modelコンポーネントが拡張機能のaframe-extrasから標準機能へと取り込まれています。

上記の背景から、3Dフォーマットとして注目度が高まっているのがVRMです。VRMはglTF2.0をベースにしているため、技術的な面でWebXRと親和性が高く、HumanoidやBlendShapeなどの情報を拡張することができます。

A-FrameでVRMを扱うには、自作のコンポーネント内でthree.jsのGLTFLoaderと@pixiv/three-vrmを組み合わせて使う実装が有力です。

github.com

pixivさん本当にありがとうございます。

three.jsでの実装を学ぶにはnpakaさんのnoteが非常にわかりやすく、参考にさせていただいています。A-Frameのコンポーネントでthree.jsを扱うことは難しくないため、同等の処理を記述することが可能です。

note.com

A-FrameのハンドトラッキングとVRMを組み合わせて使っていくと、モデルの手足を動かすこともできます。全然実用レベルにはないデモですが、実験的にA-Frameで動かしたものはあります。

VRMモデルは、アリシア・ソリッド（ニコニ立体ちゃん）です。

A-Frameの今後

2022年は状況が変わるかもしれませんが、2020年から2021年の流れを見ているとA-Frameの利用機会はさらに増えていくと考えています。ARグラスやハイエンドなVRデバイスの普及には、まだ時間がかかりそうで、QuestやスマートフォンをターゲットにできるWebXRの利点は少なくとも今後数年間は無視できません。

技術面では、今回紹介したような機能を組み合わせていくと、Webのメリットを残しつつ、体験の質は（特にVR領域において）従来よりもよくなっていくことが容易に予想されます。
Hubsについても引き続き活発な開発が行われており、内部のthree.jsバージョンがアップデートされていたり、空間音響がより立体的になるなど、1年前の同時期に比べると、見えにくい部分で体験の質が確実に向上しています。

A-Frameを学習するタイミングとして、この成長期を逃すと機能や事例のアップデートに追い付くのが大変になるので、A-Frameに力を入れるべきは今！というのが結論です。

あとがき

師走は仕事がかなり忙しく、このアドカレに向けて新しいことをやる時間がなかなか取れなかったため、ここ1年くらいの情報の寄せ集めのような形になってしまいました。
NAFやthree-vrmを当ブログで扱うのは初めてですが、v1.1.0のハンドトラッキングやWebAR、8th Wallなどは、過去に詳細な記事も書いておりますし、初心者向けにA-Frameの技術同人誌も今年はじめて執筆してみました。この記事を読んで、A-Frameをやってみようかなと思った方がもしいましたら、あわせて読んでみていただけるとうれしいです。

最後に、A-Frameは明後日の12月16日がお誕生日🎉で6周年を迎えます。例年通りならA-Frame v1.3.0がリリースされるかもしれません。現状のWebXRを支えるA-Frameをお祝いしつつ、どんなアップデートがされるのか、楽しみに待ちましょう！