Unity WebXR Exporterで自前ゲームをWebに乗っけてみた話

jsが分からないのでUnity WebXR Exporterで自前ゲームをWebにアップしてみた話株式会社リクティー永山大志

自己紹介永山大志：twitter→@busido90 早稲田大学ラグビー蹴球部→本田技研→ギークス(ゲーム)→心と身体の健康を考える会社、リクティーCTO→なぜかCEOに Unity歴5年(の割に実力不足）、UE歴皆無リクティー：https://rikuty.com/ 2018年6月起業。2019年1月Tokyo XR Startup第5期に採択。腰痛や肩こりの方向けのVRアプリ開発
あまり売れずにチーム解散←イマココ！！

今日話すこと Unity(フロント側）しか触ったことない人(私)が WebXRよくね？って思って挑戦しようと思ったけど、 JavaScriptできないと無理ゲーじゃね？って気づいて悩んだ挙句、Asset(Unity WebXR Exporter）で AWS(なにそれおいしいの）にファイルを上げて苦しみながらも自前プロジェクトを動かせた話。同感してくれたら役に経つかも ※技術力の高い方にはなにを今更、みたいな話になるかもですが、
暖かく見ていただけると幸いです。技術的間違いの指摘もお願いします。

今作っているもの OnePunch https://sidequestvr.com/app/1081 今回のやつ https://one-punch.s3-ap-northeast-1.amazonaws.com/OnePunch/index.html

参考にしたもの Unity WebXR ExporterでVR刺身タンポポを動かしてみた / Challenge to use Unity WebXR
Exporter for VR Sashimi Tanpopo できる方はこの資料だけで大丈夫です。これでもわからない、それぞれどんなところに落とし穴あるのー、っていうのを話していきます。

Unity WebXR Exporter WebXRというとA-FrameやらBabylon.jsやらJavaScriptの知識が必要だが、そこに現れた救世主。

Webブラウザで見れるようになるまで ①新規プロジェクトに自前のゲームをインポートする。 ②WebXR Exporterを入れる ③Editor上で動作確認する。 ④ビルドして、ブラウザ(ローカル）で動くか確認する ⑤Web上に上げる(今回はAWS）

詰まったところ① Universal Render Pipeline(URP)で開きましょう Unity2018 のLTSを使ってる自分からすると、URPなにそれ状態でした。 URPのShader以外のほとんどはリンク切れを起こします。（Graphicsに登録すれば大丈夫？）→今回はURPのShaderにして、Texture貼りなおして対応。 ※ちなみに新規プロジェクトで立ち上げるとなぜか自分はブラウザに両眼が映ってしまい、VRデバイス側に映らず。Gitのサンプルプロジェクトに自分のゲームを入れる方法で
対処しました。（何か知ってる人いたら教えてください。URPの問題じゃないかも。。。

詰まったところ② Chromeのバージョンに注意が必要です。私は最新のChrome84だとchrome://flagsで設定しなければいけないWebXRの設定が出てきませんでした。→ダウンデートしてChrome81にしたら出てきた。いっこうさんの記事などにお世話になりました。 https://dev.to/ikkou/chrome-79-webxr-device-api-oculus-hmd-8b https://qiita.com/arika_nashika/items/e194ede7ed89a7e591a7

詰まったところ③ Oculusのライブラリはなるべく削除しましょう。 Oculusで開発している勢の人は必ず使っているライブラリですが、スクリプト上で Oculusのライブラリ使ってるとビルドエラーになります。(私は振動に使うOVRHapticsを使っててエラーになりました。）

詰まったところ④ Microphoneをそのまま使おうとするとエラーになってビルドできません。今回は結局マイクロフォン使っていなかったのでスクリプトを削除しました。 WebGL用のライブラリアセットがあります(未検証） https://assetstore.unity.com/packages/tools/input-management/microphone-webgl-library-79989?_ga=2.63193255.926528929.159825 9270-523860060.1578279586 https://forum.unity.com/threads/webgl-and-microphone.308197/

詰まったところ⑤ AWSとは仲良くしましょう。今回はS3に上げるだけだったので初心者の自分でもできました。下はまだやってません。 https://recipe.kc-cloud.jp/archives/11067 https://recipe.kc-cloud.jp/archives/11489 https://recipe.kc-cloud.jp/archives/11256

細かいTips Unity2018は使わず、2019.4以降を使いましょう →URPが2019から本格導入されているから VRモードでブラウザのページ閉じちゃダメ！ →ブラウザのアプリごと落ちます。（下書きメモが何回も消えた、、、 WebGLTemplateをWebXRにしないとVRモードになりません →Unityroomとかでよく見るやつになります

WebXRの使用用途色々と細かい制約はあるものの、やはりURLで友達にVR体験をしてもらえることは正義！ WebXRで自分のVRアプリをデモ体験してもらって、ハマってもらったら、ローカルにアプリを落としてもらってやってもらう。的な呼び水的な使い方にもってこいだと思います。

参考文献こりんさんの記事 Unity WebXR ExporterでVR刺身タンポポを動かしてみた / Challenge to use Unity
WebXR Exporter for VR Sashimi Tanpopo 自分の作業実況 https://note.com/busido90/n/nc8256f775f4d

Unity WebXR Exporterで自前ゲームをWebに乗っけてみた話

Unity WebXR Exporterで自前ゲームをWebに乗っけてみた話

busido90

Other Decks in Technology

Featured

Transcript

jsが分からないのでUnity WebXR Exporterで自前ゲームをWebにアップしてみた話株式会社リクティー永山大志

今作っているもの OnePunch https://sidequestvr.com/app/1081 今回のやつ https://one-punch.s3-ap-northeast-1.amazonaws.com/OnePunch/index.html

参考にしたもの Unity WebXR ExporterでVR刺身タンポポを動かしてみた / Challenge to use Unity WebXR

Unity WebXR Exporter WebXRというとA-FrameやらBabylon.jsやらJavaScriptの知識が必要だが、そこに現れた救世主。

参考文献こりんさんの記事 Unity WebXR ExporterでVR刺身タンポポを動かしてみた / Challenge to use Unity