概要
ちゅらデータ Advent Calendar 2023の2日目の記事です。
WebARを実装する際にiOS SafariがWebXR Device APIに対応していないため工夫が必要になります。よくある方法としては、WebXR Device APIを使わずに実装したり、8th Wallを使ったりすると思います。
今回は、解決策の一つとして、あまり知られていないWebAR SDK Onirixを使って開発する方法について取り上げます。OnirixのSDKを使えば、iOS SafariでもSLAMを使った6DoFを実装できるようになります。
Onirix
Webブラウザ上で動作するWebARをWebブラウザ上で作成、公開できるサービスを提供(Onirix Studio)しています。さらに、WebARに必要な機能をSDKとしてNPMパッケージ提供までしてくれています。同様のサービスとしては、8th Wallが有名かと思います。が、純粋にローカルで開発するだけなら、無料で使えるOnirixのSDKを使った方がいきなりお金がかかる8th Wallを使うより低コストなところが嬉しいポイントの一つですね。
互換性とブラウザのサポート
| OS | Version | Supported browsers |
|---|---|---|
| iOS | iOS 11+ | Safari, Safari view controller (SFViewController): iOS 13+, Safari web views (WKWebView): iOS 14.3+ |
| Android | Any※ | Chrome, Firefox, Samsung Internet, Edge, native android web views (Android 4.4+) |
※ 下記の性能を有するハードウェアである必要あり
- リアカメラが少なくとも VGA 解像度 (640x480px)
- ジャイロセンサー搭載
- 2GB以上のRAM
Three.js × Onirix SDKをローカルで動かす
今回は、ViteとDocker環境で公式のサンプルを動くようにしたリポジトリを用意しました。
git clone https://github.com/yoshiyasugimoto/onirix-sample
echo VITE_ONIRIX_TOKEN={取得したSDK Token} > .env
- コンテナ起動しましょう。
docker compose up
- OnirixのSDKはOnirixと契約したドメイン以外はアクセス制限がかけられています。ただし、開発用に
localhostや*.ngrok.ioがホワイトリストに登録されています。また、WebARはカメラ映像(getUserMedia)やデバイスの方向(deviceOrientatation)を取得するためにhttpsでアクセスする必要があります。ここでは、ngrokを使います。（※ngrokを立ち上げるとアプリケーションが公開されるので、扱いにはよくよく注意）
ngrok http 8000
- ngrokから発行されたURLにスマホでアクセスしてカメラを平面にかざして画面をタップするとクマが踊り始めましたね!
まとめ
本記事では、Onirix SDKを使って6DoFを行ってみました。正直な感想としては、6DoFの完成度に関しては、まだまだ8th Wallが圧倒しているので、もう少し精度が良くなれば、簡単なデモの開発をOnirix SDKを使うことのはアリですね！
ちゅらデータ Advent Calendar 2023の明日は @takumanken さんの「SnowflakeでORDER BYする話」です！