WebXRへの移植～100日社長149日目～
現在開発している音楽アクションゲーム「OnePunch」はSideQuestにリリースしていますが、今後Steamへも公開を検討していました。
そんな時に
こんなイベントが立ち上がっていることに気づきました（遅い
前々からWebXR周りは調べようと思いつつサボっていた分野だったので、調査しつつ、Webにも「OnePunch」を移植し、そこで得た知見を共有すれば一石三鳥くらいはあるなと思い、「登壇者枠」をポチリ。
OnePunchのアップデートが遅れている中で若干後悔しつつ(笑)、今回WebXRへの移植作業の様子を書き記していきながら、情報共有したいと思います。
まず、
WebXRとはなんぞや
ブラウザでVRやらARを体験できるようにしたやつだよねぇ。くらいしか知らないので改めて調べてみることに。
あーJavaScriptだったねぇ(素人
なんかChromeでの開発終了示唆されてるけど大丈夫かいな。
心配なのでここは追加調査。
調べていくと、「WebVR API」から「WebXR Device API」にAPIの仕様変更があった模様。取り越し苦労。というか読解力、、、
まずはWebXRでググって上位に出てきた日本語サイトを参照
このへんとか
このへん。先駆者の皆様ありがとうございます。まあWebでVRやらARやらを体験できるようにする規格という当初の想像通りなので、WebXRとはの調査終了。ざっくりでごめんよ。
WebXRでどうやってUnityアプリを動かすか
今回のゴールは
Oculus(Rift及びQuest)で動くアプリをWebブラウザ上で動くようにする
なのでまずはサンプルコードでも動かしてみよう。誰かサンプルコードの動かし方とか解説してくれてる人いないかなぁ(サボるきしかない
そういえば前回のWebXR Tech Tokyoの動画残ってたな。
結論、かはくVRすげぇ(笑)
この登壇者たちを見ていて、思ったこと、サーバー側というかjsがわからないとWebXRにUnityで作ったゲームの移植って結構むりげーなんじゃないのか、、、、？いまさら(笑)
無理ゲーっぽいとわかりつつ登壇することになったので引き下がるわけにもいかず、調査継続
最後の人の登壇が
「Unityを知っている人がBabylon.jsを使ったゲーム開発Tips」的なのを発表していたので、Babylon.js調査するしかないかぁ、と思いつつ、これだと移植どころか一から書き直しだなぁ、ということで躊躇。
さくっとUnityで作ったものからWebXRに移植するのを挑戦した人がいないのかググる。
XR界の有名人こりんさんのこんな記事が！そういえばこれ後で読もうと思って読んでなかったやつだ！(おい
こりん御大まじありがたや、、、この記事にそって今回は進めていくことを読む前から決めた(おい
ってかこの記事の中に自分が今回シェアしたかったことは大概書いてありそうな気もするが、くじけずにやる。
VR刺身たんぽぽに負けないコンテンツを作る！
Unity WebXR Exporterを使う
とりあえずサイトを見る。
とりあえずサンプルを動かしてみることに。Blogでは2018.4でも動かせると書いてあるので試してみる。AssetStoreでは2019.3以降しかダウンロードできないのでblogのリンクからUnityPackageを落とす。
あ、リンク切れちゃってるー。まあたぶん2019.3以降にしたら大丈夫なんだろうなぁ、と思い、即Unityバージョン変え。
何も変わらない、、、ふぅ
ちょっと戻って、githubの設定周りの記事を読みに行く
これのサンプルプロジェクトを落として来たらWebGLのモジュールがないと怒られたので追加。
UnityEngine.XR.InputDevices' does not contain a definition for `GetDevicesWithCharacteristics'うーむ、これはなにゆえのエラーか。サンプルコード動かすまでが長い。
2018.4がプロジェクトバージョンに指定されてたのに、2019.3にしたらエラー解消。ふぅ(苦笑い
いけたぁ！！
何で行けたのかすごく気になるのでなんのSharderが切れていたのか確認。
あ、、、、
こりんさんが最初に書いてくれてたやつだ、、、すみません。。。
そもそもUniversal Render Pipelineとはなんぞや。
要するに、いろんなデバイスの対応するにあたり、軽量で汎用的なレンダリング制御をできるものってことかな。2018.4をメインで使ってた勢としてはあまり触れてこなかった分野だけど、WebXRはWebにアクセスできるすべてのデバイスでの使用が前提となるからURPを使う必要があるって感じかな。(間違ってたらすみません
とりあえずこれで新規に作れってことか。人間のなれとは恐ろしいもので、ここにURPの設定があることを初めて認知しました(おい
とりあえずEditorで走らせることができました！
さてここからおそらく鬼門のWeb上で走らせるテストをしていきます。
ローカルで走らせてみる(鬼門)
まずはサンプルシーンをそのままBuildしようと試みる。
エラー。うーむそんなに甘くないか。。。。
と思ったけど、単純にWebGLモジュールがちゃんとインストールされてなかったらしく、Unity再起動したらビルドし始め、ビルド自体は完成。
だが、Chromeで立ち上げてもVRでうまく動かない。でもこれはかはくVRでもそうだったのでおそらくChrome側の問題っぽい。。。
このへんの設定かなぁ。あ、これいっこうさんの記事だ、ありがたやありがたや。
もう一つ。
しかし、Experimentsの設定がChrome84にはない。。。なぜ消えたのかもわからず。
こことかの設定みながらコマンドラインでオプションに入れて起動してもうまく動かない。。詰んだ。。
ただ悔しいので最終的にChrome81にダウングレードしたらExperimentsの設定出てきたので正しく設定を行ったら動きました。最新のChrome84で動かす方法知ってる人いたら教えてください。。。
(ローカルでRift S上で動かすとChrome側には映ってる映像は描画されないようなので動画は撮ってません)
ワンチャン Unityroomとかで動かないか試してみる
さて、ローカルで動くところまで確認したので、この後はWebGLでビルドしたファイルをサーバー側に上げる作業があるのですが、ドメイン取得したり、サーバー立てたりがめんどい。。。
Unityroomって確かWebGLのファイルを上げるはずなのでそこにファイル上げれば動くんじゃね？(たしか前にVRのゲーム上げてる人いたし）
ってことで挑戦。
もりもりこのへんのファイルをアップしていきます。
あ、普通に動いて、マウスで操作できる！！
だが、ここで気づいた、、あれVRに切り替えるボタンでなくね？UnityroomはVR対応してなくね？(笑)
他のゲーム探してもVRと名がついてるのは一人称視点で行うゲームをVRと呼んでるものしかなかった、、騙された（おい
なんか裏技的にやる方法あるのかもしれないけど、とりあえず早々に撤退。
サーバー(S3）に上げる
こりんさんに従ってAWS上に上げていこうと思います。
こりんさんの記事だとS3と後はドメイン管理系だけで大丈夫そうで、お、EC2とか使わないの？って思ったけど、どうやらWebGL自体がクライアント側ですべて動作するようになっているらしいので、要はファイルにアクセスさえできればサーバーは必要ないよう。（このへんすら知らず。。。
とりあえずS3に作ったWebGLファイルたちを上げていく。
さてこのあと毎回よくわからなくなるアクセス制限周りをやっていこうかと思ったけど、とりあえず気にせずパブリックにして動かすことにした(おい
おお、Questのブラウザでついに自分がビルドしたやつがうごくぅぅと油断したのもつかの間、httpsじゃないから再生できないよ、と怒られました。
ああ、これもこりんさんのやつに書いてあったなぁ（おい
独自ドメインと証明の取得
ということでhttpsにするために独自ドメインとCertificateの取得を。
ほんとサーバー周りは人に任せてきたから苦手なんだよなぁ。。（白目
といっても誰も助けてくれないのでしぶやっていく。
まず、Route53でドメイン「one-punch.net」を取得。
次にこれで証明するには、と。どなかたのブログをいつも通り拝見しに行く。
https://recipe.kc-cloud.jp/archives/11067
AWSでHTTPS化するにはどうすればいいのかはこのへんかな。ドメインを使う場合はこりんさんの記事にもある通りパターン5なんだろうけど、今はまだ実験段階なので、パターン９のS3のみでhttps化できるという方に興味がひかれた(ドメイン取った意味w
https://recipe.kc-cloud.jp/archives/11489
↑S3のみでHTTPS化する方法。
完成
でけた！！！これはかなり感動！！
とりあえずWeb上に自分のUnityプロジェクトを上げて公開するところまでわかったので今日はこれまで。
WebXR Tech Tokyoの登壇までに自分のプロジェクトを上げていこうと思います。ロード時間とかプロジェクト自体の重さとかかなりネックになりそう。。。
VRゲーム制作がんばります！ありがとうございます♪