WebAR / WebVRの開発ライブラリ一覧【完全保存版】

Table of Contents

WebAR開発について

WebXR（WebVR / WebAR）開発には、開発を手軽にするライブラリがいくつかあります。
代表的なものはWebARではAR.js、WebVRにはA-Frameなどが挙げられます。

今回は開発に使われるライブラリについていくつかピックアップしてご紹介していきます。

・AR.js
・8th Wall
・A-Frame
・JSARToolKit
・Three.js
・Babylon.js

AR.js

AR.jsはWebでARを実現する代表的なOSS（オープンソースソフトウェア）です。
誰でも無料で使うことができ、簡単なコードでWebARを実装することができます。

AR.jsでできる主なこと
・マーカーベースWebAR
・マーカーレスWebAR（3DoF）
・ロケーションベースWebAR
・任意の画像マーカーを使ったWebAR（NFT）

元々はJerome Etienne氏という方の個人のリポジトリから誕生したAR.jsですが、2020年には新しい管理者Nicolò Carpignoli氏がドキュメントやツールを整備し、AR.js v3.0をリリースして再スタートを切りました。

AR.js v3.0の新機能として「AR.js Studio」と呼ばれるノンコーディングでAR.jsを使えるツールや、NFT（Natural Feature Tracking / 自然特徴追跡）も加わってこれからの開発にも注目が集まります。

AR.js org
AR.js github
AR.js Studio

https://webar-lab.palanar.com/developer/%e3%80%90ar-js-v3-0%e3%80%91image-tracking%ef%bc%88nft%ef%bc%89%e3%81%ae%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f/

8th Wall

8th Wallは8th Wall社が提供するWebARの有料ライブラリです。
OSSのAR.jsとは違い、アクセス数ごとに課金が必要であったりするいわば法人向けのライブラリです。

魅力は、他のWebAR OSSではできない6DoFやFace Trackingと言った独自の機能と圧倒的安定性。
2019年には世界一大規模なARのアワード「Auggie Awards」でBest Developer Tool賞を獲得しました。

8th Wallでできる主なこと
・マーカーベースWebAR
・マーカーレスWebAR（6DoF）
・任意の画像マーカーを使ったWebAR（NFT）
・フェイストラッキング

https://youtu.be/B7qj4qPRIj8

有料ライブラリではあるものの、他のライブラリにはない機能や安定性があるため企業とのコラボレーションに多く利用されています。
ただ個人の開発者には手が出しにくいのが難点ではあります。

8th Wall

A-Frame

A-FrameはWebVRをhtmlタグで簡単にコーディングできる、Mozilla社が提供しているライブラリです。

生のWebGLを書く必要なく、誰でも簡単にWebVRを作ることができるライブラリとして2015年に公開されました。
デスクトップ、モバイルの利用のみならず、VRのHMD（HTC VIVE、Oculus Quest、Daydream等）のコントローラー操作にも対応したコンポーネントが提供されています。

WebVRの実装を中心に使われますが、AR.jsでもA-Frameを活用していたりとWebAR/VR両方の開発に使われます。

A-Frameでできる主なこと
・WebVRの作成（3DoF）
・VR HMDのコントローラー操作対応

https://youtu.be/ktjMCanKNLk

A-Frame

https://webar-lab.palanar.com/developer/what-is-a-frame/

JSARToolKit

JSARToolKit（ARToolKit.js）はブラウザで動くARのライブラリの中でも初期に登場したものです。

元々はARToolKitと呼ばれる、C言語のARライブラリが奈良先端科学技術大学院大学の加藤博一教授によって開発されました。そのARToolKitをJavaScriptに移植したものがJSARToolKitです。

こちらのライブラリは多くの開発者にフォークされていて、源流のJSARToolKitのリポジトリは発見できませんでしたが、現時点（2020年）では、AR.jsのコントリビューターでもある開発者Walter Perdan（kalwalt）氏がNFTを実装したJSARToolKit v5.0などがあります。（JSARToolKit v5.0）

Three.js

Three.jsは生のWebGLを書く必要なく3DCGをリアルタイムレンダリングできるJavaScriptのライブラリです。

Three.jsは現在Webサイトでの3D表現に多く使われていますが、VRシーンを作成してVR HMDなどで楽しむこともできます。

https://youtu.be/db-7J5OaSag

How to create VR content
Three.js

Babylon.js

Babylon.jsもThree.jsと同じくWebブラウザ上で3DCGをレンダリングするライブラリです。Microsoftが提供しています。
ドキュメントや周辺環境が充実しており、その場で挙動の確認ができるplayground（オンラインエディター）やノードのマテリアルエディターなどが用意されています。

Use the WebVR Camera
Babylon.js