WebXR Tech Tokyo #0に参加しての学び

ご覧いただきありがとうございます。

先日cluster、Youtube Liveで行われたWebXR Tech Tokyo #0に参加しました 。

イベントでは、WebARの実例やフレームワークについての学びが多くありました。

私はAR開発ではWebではなくUnityで開発を行っていますが、「AR」という単語に興味を惹かれた感じです。

今回はWeb一切触ったことない開発者がWebARイベントで得た学びについて書いていこうと思います。

１．[8thWall x three.js] お家で楽しむWebARを作る(@a_hancho)

このセッションでは、8thWallとThree.jsを使って、WebARを作るもので、制作での躓きや、注意点なども発表されていたため、非常にわかりやすかった。

8thWallとは

スマホで空間トラッキングができるライブラリでWebARライブラリとしても優秀。

UnitySDKも存在する。

また、Three.jsもサポートしている。

Powering the world's WebAR | 8th Wall

注意点など

・下記GitHubのプロジェクトをクローン後、htmlファイルのappKeyを設定する（しないとエラー）

8thwall/web

・httpsでないと動かない（デモ環境としてGitHubなどを使う）

・OnStart、OnUpdate、OnCanvasSizeChangeなどは8thWall側が用意した関数で、UnityでいうMonoBehaviorのUpdateやStartのようなもの

・Custom pipeline modulesで出現物、位置、角度などの見た目がいじれるみたいです

２．WEBARを施策で実装してみた所感（ @hinatanana7）

このセッションでは、WebAR開発を行った結果、良かった点、悪かった点などを具体的に話されてました。

実例

カルビーAR神社

受験勉強中のみなさまをカルビーが応援します。 ｜ カルビー株式会社

QRコード読み取り→AR神社でお参り→絵馬作成、ツイート→ASMR動画を流すというもの

使用フレームワーク

　・jeelizFaceFilter (顔認識)

　・A-Frame

　・Vue.js(ページ遷移)

注意点など

・jeelizFaceFilter顔認識が安定しない

・jeelizFaceFilterはいくつかの演出面のプラグインが使えない、らしいです...

WebAR開発の学び

・Web中で完結させないようにしよう(別サイトに飛ばすなど)

・眺める以外の体験（写真を撮るなどの参加行為）

Unity WebXR ExporterでVR刺身タンポポを動かしてみた(@korinVR)

このセッションでは、自作VRアプリをUnity WebXR ExporterでWebXRにビルドすることについてお話しされてました。

個人的にUnityでWebXRがビルドできるとのことで、一番注目して聞いてました。

MozillaReality/unity-webxr-export

開発の注意点など

・Unity実行時とブラウザ実行時では、コントローラーの角度が大きく異なる（プラットフォームを判定して設定する必要がある）

・SceneManager.LoadSceneをしないこと（VRモードが解除または止まってしまう）

・WebXRCameraSetの名前を変えない（WebXRManagerでエラーがでる）

開発の学び

Webを一切触ったことがない私にとって、Unity WebXR Exporterは開発の幅が一気に広がるものだと感じました。

OculusQuestに対応しているとのことで、今後、サンプルシーンでも動かしてみたいです。

全体を通して

WebXRはアプリのインストールコストを省く画期的なものですが、フレームワークやライブラリはまだまだ発展途上なものが多い印象でした。

しかし、WebARは興味があったため、どんなものを使って何ができるのかを知れましたし、htmlやjsなどWeb言語を学ぶきっかけにはなったと思います。