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に比べるとかなり劣るなぁという印象です。 …