概要

ちゅらデータ 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

Onirixにログインして SDK の Token を取得してください。(参考 URL)

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する話」です！