webでARを作るときに使えるツールとできることをまとめてみた

こんにちは!フロントエンドエンジニアの@DragonTaro1031です。今回はLevettyのメディアに寄稿させていただいております。

ARがどんどんと盛り上がってきている今日この頃ですが、やはりまだまだネイティブアプリがAR開発の基本となっているのが現状です。ただ、ダウンロードの障壁が高いのでwebで実現できるに越したことはありません。

そこで、現在のwebのARでどのようなツールがあってどこまでできるのかを調べてみることにしました。

ARを実装できるライブラリ/サービス

AR.js

jsで3Dを扱うことのできるThree.jsとARをjsで扱うことができるJSARToolKitを元に開発されているライブラリです。決められた形のマーカーを認識してWebGLを使って2Dや3Dを画面上に描画することができます。

https://github.com/jeromeetienne/AR.js

上記のような特定のパターンの画像をマーカとして動作します。

webでARといえばこれというぐらいには有名なライブラリです。難しい部分をライブラリがラップしてくれているのでとても簡単に作ることができます。実際に例として提示されているものはたった10行ほどのjsのコードです。

ただし、マーカーはこの類の黒の枠で囲まれたものしか使えないので拡張性には欠けます。

大元のJSARToolKitがNFT(Natural Feature Tracking)という普通の写真をマーカーにしたARアプリが開発できるしようと、issueが立ったりコントリビュートしている人が見受けられたので対応されるのは時間の問題かもしれません。

“jsartoolkit5 nft”などで検索するとその様子を見ることができます。実際にこの記事を書いている途中にリアルタイムで更新されているPull Requestもありました。

Argon.js

Argon.jsはArgon4という専用のブラウザでARアプリを作成するためのライブラリです。Argon4を使わなくても通常のブラウザで動作するように設計されているのですが、一部の高度な技術に関してはVuforiaというARを作成することのできるSDKを使っていてArgon4でしか動作しないのが現状です。

https://docs.argonjs.io/tutorial/

サンプルとデモが用意されていますが、試してみてもいまいちよくわかりませんでした。。

公式サイトによると先ほどのAR.jsのような特定のマーカでなく、NFTに対応したARアプリの開発や位置情報を用いたARが作成できるようになるようです。ただし、これらのNFTなどはVuforiaの機能を使っているのでArgon4でしか動作しないようです。

サンプルの動画をみたりArgon4を入れて試してみましたが、あまり安定感がなくアプリインストールのハードルが追加されただけの印象でした。また、iPhone10以降のUIに対応していないあたり最近も開発されているのかは怪しいです。GitHubも2017で更新が終わってるので。。

8th Wall

マーカレス・画像マーカなど先進的なAR開発が可能なライブラリで、2018年ごろに彗星のごとく現れたライブラリです。かなり高機能でデモを見る限りかなり安定性もあってwebとは思えないARのアプリケーションが作れそうな印象を受けました。

ただし、このプラットフォームを使うにはライセンス料が必要でこれが最低でも1万円はかかりそうなのです。しかもよく見るとおそらく5万以上は月ごとにかかりそうでなかなか趣味開発どころかスタートアップでも導入が厳しそうというのが現状です。

有料なだけあって特にNFTはネイティブに匹敵する安定感でした。

https://github.com/8thwall/web/tree/master/examples/aframe#marker-based

ぴったりと画像をトラッキングできていてかなりすごいなという印象です。上記のリンクからサンプルを試せるのでぜひ手元のスマホで試してみてください。

ただ、マーカレスの方は少し残念な印象でした。あまりワールドを認識できていないのか固定されている感が全然なくネイティブのARに比べるとかなり劣るなぁという印象です。

https://github.com/8thwall/web/tree/master/examples/aframe#8th-wall-web-examples—aframe

上記のリンクからマーカレスのARが試せます。

個人的な感想としては、モダンなシンタックスで書けないのとTypeScriptに対応してなさそうで辛いのとライブラリの中身を見れないのと有料なのにドキュメントが雑なのが残念だなlという感じです。現状は勝るライブラリがないものの将来的に出てきたら淘汰されそうかなとは思います。

AR開発によく使われている周辺ライブラリ

Three.js

言わずと知れたJavaScriptで3Dを扱う古き良きライブラリです。様々なフォーマットに対応しており複雑な操作も可能にしてくれます。WebGLにレンダリングすることも可能でパフォーマンスもどんどん改善されてきています。

https://threejs.org/

ただし、簡単に扱うことができる訳ではないので苦労する点も多い印象です。。笑

この記事で紹介している様々なツールもThree.jsをベースに作られている(AR.jsしかりA-Frameしかり)ので避けて通ることはできなさそうです。

ちなみに筆者はプロダクトで使ったことがあるのですが、ライブラリがモダンな設計になっておらず巨大なjsファイルがバンドルされて、「Oh…」となった経験がありますw

A-Frame

HTMLで宣言的に3Dオブジェクトをレンダリングすることができるライブラリです。簡単に3Dオブジェクトを扱うことができるのでよくサンプル等に用いられています。

jsで3Dを扱うときはThree.jsが有名ですが、A-FrameだとそのままHTMLに埋め込むことができるので好んで使われている印象があります。プロダクトレベルでインタラクティブな操作に対応したりリッチなアニメーションを追加したときに対応できるのかは不明です。

https://aframe.io/

babylon.js

Three.js同様にWebGLで3Dを扱うことのできるMicrosoftが開発しているライブラリです。Three.jsの方が広く利用されていて有名で、こちらはゲーム開発色が強いライブラリという印象を受けました。

https://www.babylonjs.com/

Three.jsはTypeScriptのサポートがいまいちなのですが、babylon.jsはMicrosoftが開発していることもあってTypeScriptのサポートが充実しています。

ゲームに強いこともありアニメーションやパーティクルが充実しおりAR開発においても好まれる傾向があるようです。実際に8th WallのチュートリアルとしてもThree.jsのものとbabylon.jsのものの両方が紹介されていました。

また、XR系の機能が現在開発中で将来的には他のライブラリを使わずに単独でARが開発できるようになる日がくるかもしれません。

https://doc.babylonjs.com/how_to/webxr

tracking.js

物体をトラッキングすることができるライブラリです。これを使うと顔や写真のトラッキングができるようになります。

上の記事ののような実装を行うことで画像の特異点を検知しそこに同じ画像を被せて表示させてアニメーションさせるといったことは可能になるかもしれません。

Amazon Sumerian

ブラウザ上で簡単に3Dアニメーションが作成できるツールです。AWSにホッスティングして簡単に扱うことができるようですが、ARに関してはネイティブのみの対応となっているみたいです。今後のアップデートに期待です。