$30 off During Our Annual Pro Sale. View Details »

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

busido90
August 24, 2020

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

busido90

August 24, 2020
Tweet

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. 詰まったところ②
    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

    View Slide

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

    View Slide

  11. 詰まったところ④
    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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide