先日、以下のようなツイートがありました。
AR.js Studio is a web-based tool that allows you to easily create, deploy, and share custom AR projects with the world! Supports images, videos and 3D models.
— Fabio Cortes (@fabiojcortes) June 16, 2020
All without coding. All free and Open Source.https://t.co/5HeGPmr5Tc
Built with @ARjs_Library and @aframevr pic.twitter.com/jUMqwBuzrr
今回は、ここで紹介されているAR.js Studioについて、簡単に使い方をまとめてみました。
検証は以下の環境で行っています。
AR.js Studioの使用
Microsoft Edge (Chronium ) : 83.0.478.54
AR.jsの体験
Safari (iOS 13.5.1) on iPhone8
1. AR.jsとは？
こちらに説明があります。
AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking.
WebブラウザだけでAR表示ができるライブラリです。3つの機能があります。
Image Tracking ：任意の画像をマーカーとしてAR表示
Location Based AR：GPS情報と連動してAR表示
Marker Tracking：特定の図形をマーカーとしてAR表示。Image Trackingよりも安定
AR.jsの使い方自体は多数記事があるので省略します。たとえば以下の記事が参考になります。
2. AR.js Studioとは？
AR.jsを使ったWebARを実現するには、簡単な体験といっても少しコーディングが必要でした。AR.js StudioはコーディングなしでWebARを気軽に体験できる仕組みです。
Webベースのツールですので、Webブラウザがあれば利用できます。
3. AR.js Studioを試す手順
3.1 データアップロード手順
AR.js Studioにアクセスすると、このような画面になります。ログインや会員登録などは不要です。
Location-BasedかMarker-Basedを選んでStart Buildingを選択します。
ARと書かれたマーカーを選ぶか、任意の画像をマーカーとするかを選択します。今回は自分の画像を使うことにしたので、アップロードしました。
次はAR表示させたいメディアデータをアップロードします。対応フォーマットは以下の通りです。
3Dモデル：.gltf、.glb、(gltfをzipにしたもの) (50MBまで)
画像：.jpg、.png、.gif (15MBまで)
動画：.mp4 (25MBまで)
3Dモデルについてはzipとありますが、.gltfや.glb以外はダメのようです。試しに.objと.mtlをzipで固めてアップロードしてみましたが、"no gltf file in the zip" というエラーが表示されてアップロードできませんでした。
今回は3Dモデルをアップロードしました。
3DモデルはBlenderで作って、glbに変換したものを使用しています。
次に進むと、自分のGithubに登録するか、htmlファイルをダウンロードして自分でサーバを立てるかという画面になります。
それぞれやり方を説明します。
3.2 Githubにホストする手順
3.1最後でPublish on Githubを選択すると、新規のGithubプロジェクトの名称を入力する欄が表示されます。ここに任意の名称（URLの一部になります）を入力してから進めるとGithubと連携することの確認画面が出ます。承認すると、数分程度で自分のGithubリポジトリが追加され、Github Pagesによるリンクが表示されます。
このリンクにアクセスすることで自分で指定したマーカー上に、自分で指定した3DモデルがAR表示されます。
3.3 ローカルサーバで動かす手順
3.1最後でDownload packageを選択すると、ar.zipというzipをダウンロードできます。この中には、先ほどアップロードしたメディアデータおよびindex.htmlが入っています。これらをhttps対応のサーバに入れればAR体験ができます。
サーバがない場合、ローカルサーバを立てることになります。方法はいろいろありますが、今回はNode.jsのExpressパッケージを使って立てました。
詳しくは下記のリポジトリをご確認ください。
・publicフォルダの中に、AR.js Studioから取得したassetsフォルダとindex.htmlを入れてください
・certkeysフォルダの中に、証明書ファイルを入れてください
証明書の作り方は以前書いた記事をご参考ください。
4. 動作させてみた結果
iPhone8で表示させた結果です。
5. おわりに
少し話がずれますが、ARKitやARCoreにはWebブラウザだけでAR体験をするため、Quick Look (Apple)、scene-viewer (ARCore) という仕組みがあります。
ただ、私の調べた限りでは、これらは単独のWebページとして表示され、AR表示をjavascriptから制御する方法が見つけられませんでした。
そのため、ARKitやARCoreなどと比べると精度は低いですが、今回のようにWebだけでマーカーベースのARを手軽に作れて改修もできると、いろいろとやれることが増えそうだと思いました。
