ARの体験をどうぞ
Web ARのライブラリ3種類(AR.js,MindAR,model-viewer)のサイトを作ってみました。まずは、使ってみてそれぞれの特徴を体験してください。
AR.jsの体験
Widndows、ChromeBook、iOS（iPad、iPhone）、Androidのブラウザで作動します。
AR.jsの体験用マーカー
※AR.jsでは通常「Hiroマーカー」ですが、「AR表示」を強調するため、このマーカーにしました。
MindARの体験
Widndows、ChromeBook、iOS（iPad、iPhone）、Androidのブラウザで作動します。
MindARの体験用マーカー
model-viewerの体験
iOS（iPad、iPhone）、Android用です。
Widndows、ChromeBookでは3Dモデルをマウスで動かすことはできますが、AR表示はできません。
マーカーなしでAR表示します。
Babylon.jsの体験
VR表示はできるのですが、手持ちのAndroidでAR表示の確認ができないので、体験サイトは作っていません。バージョンの関係かな？それとも教育委員会で配布されたAndroidにはロックがかかっているのかな？
4つのWeb ARの比較
| AR.js | MindAR | model-viewer | Babylon.js | |
|---|---|---|---|---|
| Windows(Chrome,Edge) | 〇 | 〇 | × | × |
| macOS(safari) | 〇 | 〇 | × | × |
| chromebook | 〇 | 〇 | × | × |
| iOS(safari) | 〇 | 〇 | × | × |
| iPadOS(safari) | 〇 | 〇 | 〇 | × |
| Android(Chrome) | 〇 | 〇 | 〇 | 〇（のはず） |
| マーカー | 必要（黒ワク） | 必要（ワクなし可） | 不要 | 不要 |
| 導入の難易度 | 簡単 | 簡単 | 簡単 | 簡単（コードは少し多い） |
| 日本語資料の多さ | 多い | ある | 少ない | 少ない |
まとめ（個人的感想）
AR.js
日本語資料がたくさん公開されており、利用事例も多いです。図の拡大縮小、移動や回転などのパラメータも指定できます。ARの表示は安定しています。マーカー認識をかなり厳密にしているようで、マーカーの一部を隠すとARは表示されなくなります。ただし、マーカーの黒ワクが気になります。
MindAR
日本語資料は多くありませんが、参考にするには十分な数が公開されています。AR.jsと同様に、図の拡大縮小、移動や回転などのパラメータも指定できます。「ワクなしマーカー」なので、配布する資料などにマーカーを入れても気にならないと思います。マーカーの一部を隠してもARが表示されますが表示が振動します。
model-viewer
日本語資料は少ないです。マーカーなしでAR表示できるのが大きな特徴です。キャラクターや物体が「すぐそこ」にARで表示されることはインパクトがあります。しかし、iPad、iPhone、Android用であり機器が限定されます。
Android用glbファイル、iPad・iPhone用usdzファイルの2種類の3Dデータを用意する必要があります。usdzファイルがない場合、Android用glbファイルからデータを自動変換してくれます。しかし、iPad・iPhoneでの表示がうまくいかない場合がありました。例として、Tinkercadで書き出したglbファイルでは正しくAR表示ができません。そのglbファイルをMetasequoiaで読み込んで保存したglbファイルでは、ARが正しく表示されました。理由について、どなたか教えてください。
Babylon.js
AR表示ができるのはAndroidのみなので、GIGAタブレット（Windows,ChromeBook,iPad）で利用ができません。となると、授業での活用は難しい状況です。Microsoftが開発しているようですので、もしかするとAR作動機種がこれから増えるのでしょうか？なぜ、Windowsで作動しないのか不思議です。表示のためのパラメータが多いので、プログラムが少しだけ長くなりますが、細かな設定までできるようです。
どれを使えばいいの？
どれを利用したら良いかは、「ARを利用して何をしたいか」によって異なる思います。3つのサイトは「中学校技術」の授業で活用してもらうために作成しました。AR表示の安定性、マーカーの有無などの違いの特徴から、生徒たちはどの方法を選ぶのでしょうか。とても興味があります。