unity WebXR ExporterでWebVRを動かしてみたメモ。ブラウザに埋め込みできた

Unity

バーチャル3Dクリエイター神部まゆみです(*^-^*)

 

この記事は、unityのアセットWebXR ExporterでWebVRを動かしてみたメモです。

このアセットを使うと、ブラウザ向けのVRコンテンツがビルドできるらしい。

WebXR Exporter | 機能統合 | Unity Asset Store
Use the WebXR Exporter from Mozilla on your next project. Find this integration tool & more on the Unity Asset Store.

まだやってる途中だけど、一応サンプル動くところまで進めたから公開しておきます。

————-PR———————-

現在、2021年の新作人気アセットが50%オフで買えるunityアセットリフレッシュセールをやってるみたいです(日本時間2021/10/02 PM15:59まで)。

unityアセットリフレッシュセール50% off

欲しいアセットはこの機会に買っておくと良いかも。

————————————-

 

動作するUnityバージョンは?

こちらの先輩によると、unity2019.3系がいいらしい?

WebXR ExporterでUnityプロジェクトをWebVRにする【失敗?】 - トマシープが学ぶ
WebXR Exporter 参考 使う 環境設定 アセットを入れる カメラ設定など Inputの設定 6. Add Input Manager settings to your project. ビルド アップする 動かす 最後に WebVR WebXR Exporter Unityで作ったコンテンツをWebXRとし...

こちらの先輩も2019.3でやってるみたい。

UnityでWebXR(WebVR)対応したWebページをつくる - Qiita
概要 Unityで、アプリをVRに対応させるなら、 PackageManagerから、VR関連のパッケージをいれたりすれば、対応自体はかんたんにできる(調整難しい) しかし、 UnityでWebGL履くときにVR対応させるのはち...

 

とりあえずSTYLYで使ってる2019.3.6でやってみます。

URPで新規プロジェクトを作る

「Universal Project Template」ってやつを選べばいいっぽい。

この後webGLにスイッチして、VirtualRealitySupportにチェックを入れればいいらしい。

Virtual Reality Supportはプレイヤー設定にあった。

私は日本語化してるので「VRサポートあり」ってやつになってた。

アセットをインポートする

これアセットストアにもあるんだけど、Githubのと違うらしい?

WebXR Exporter | 機能統合 | Unity Asset Store
Use the WebXR Exporter from Mozilla on your next project. Find this integration tool & more on the Unity Asset Store.

Githubから持ってこないとOculusでは動かないらしい?

MozillaReality/unity-webxr-export
Assets for creating WebXR-enabled Unity3D projects. - MozillaReality/unity-webxr-export

 

とりあえずGithubのほうでやってみます。

zipをダウンロードします。

解凍したらunitypackageが二つあったけどどっちだろ?

WebXR-Exporter.unitypackageのほうをインポートしてみる。

インポート後のフォルダに砂漠のサンプルシーンが入ってたから、これで合ってるっぽい。

その後プレイヤー設定のWebGLテンプレートをWebXRに変える。

これだけでもビルドすればいけそう?一回やってみる

ちょっと時間かかったけど、ブラウザが立ち上がって動いた!

ビルドするシーンの設定を変えなかったからか、URPのサンプルシーンだけど( ̄▽ ̄;)

視点変更も移動もできませんが、一応ブラウザで見れたのでビルドはできてるみたいです。

 

ビルドしたいシーンを開いて、ビルド設定で「ビルドを追加」でシーンを追加すればいいみたい。

 

これでビルドしたら動いた!

localhostで動いてるっぽい。

普通にサーバーに上げればいけるのかな?エックスサーバーでもいける?

先輩たちはGithubやAWSに上げてるみたいだったけど、これサーバーなら何でもいいのかな?

このブログはエックスサーバー借りてやってるんだけど、エックスサーバーのファイルマネージャーでビルドしたプロジェクトをアップすればいけるかな?

 

…んー、一回zipに圧縮してからアップロードして、展開すればいけるっぽい。

……あ、動いた!

| webVR

これなら適当な無料サーバーとかでも行けるかも?

 

Oculus Quest2でも見てみたけど一応動いた。

でも、向かって右下にあるVRアイコンを選んだら真っ黒になった…。試したのはOculusブラウザとFirefox Realityです。

でも他の先輩たちが上げてたやつは大丈夫だった気がするから、設定次第だと思う。

こちらの先輩によると、unity2019.3.9ならいけるのかな?

WebXR ExporterでUnityプロジェクトをWebVRにする【失敗?】 - トマシープが学ぶ
WebXR Exporter 参考 使う 環境設定 アセットを入れる カメラ設定など Inputの設定 6. Add Input Manager settings to your project. ビルド アップする 動かす 最後に WebVR WebXR Exporter Unityで作ったコンテンツをWebXRとし...

 

でも、WebGLってこんな簡単に動かせるものなんだ。

URPのサンプルがWebGLでビルドできたってことは、WebGLさえインストールされてればいけるってことかな。特別なコンポーネントとか使う必要もなく。

WebGLはブログにも埋め込めるみたい

こちらの先輩の記事が参考になりました。

ありがとうございます(*^-^*)

WebGLプレイヤーを埋め込んで、クリックしてから読み込む : ねぎたまらぼ
WebGLプレイヤーの埋め込みと、クリックしてからロードする設定です。

 

埋め込めた!

あれ、allowfullscreenにしたのにフルスクリーンのボタンが出ないな…。VRだからか?

あと、スマホだと埋め込んだ↑は真っ暗で見れない…これも設定次第なのかな?

 

ただページが読み込まれた瞬間にLoadが始まってしまうので、ちょっと重くなってしまう可能性があるかも。

index.htmlを書き換えれば、クリックしてから読み込むようにできるみたい。

でもWebVRのアセットを使ってビルドしているからか、検索して出てくるWebGL用のコードとはだいぶ違っていて使えなかった。

まぁそんなに難しいわけじゃなさそうだから、自力でコード書くしかないかな。

スマホからの動作はサポートしていないらしいけど…

手持ちのスマホでは、動くのと動かないのがあった。

単にメモリが足りないのか、androidのバージョンなのか…?ジャイロセンサーの有無は関係ないか…?

ちなみに特に警告は出ず、動かない端末はずっとLoad中のままでした。

ただ、埋め込んだやつはどのスマホでも動かなかった。

 

あと一応動くことは動いたけど、視点変更がしづらいのと移動ができないっぽい。

これはUAを判別して振り分けるとかするしかないのかな?

ただデバイスによって動いたり動かなかったりするのはちょっと不安かも。

2021/05/24追記:2019.3.9f1でビルドしてみたけど…

| webVR

Oculus Quest2で見てみたけど、ウィンドウ表示なら見れるけどやっぱりVR表示にすると真っ暗になるみたい。

これはunityのバージョンの問題ではなく、何か設定の問題なのか…?

…というかこれ、unity2019.3.9で動いたって言ってた人は、そもそもunity2019.3系じゃないバージョンでビルドに失敗していたって話で、VR表示で表示できたって話ではない?

まぁそもそもOculus Quest2に正式対応しているわけではないか…。

 

もう少し設定調べてみるけど、Oculus Quest2でVR表示できないようなら、A-Frameとかをいじってみようかな。

私は手軽にブラウザ+Oculus Quest2でバーチャル男女と触れ合いたいだけなのですが(笑)、結構道は遠いかもしれない。

STYLYがアプリ必須じゃなければSTYLYでもいいんだけどな…。

2021/05/27追記:Oculus Quest2でも動くサンプルを見つけたので、設定によるっぽい

こちらの頭のいい先輩が公開してくれているページをOculus Quest2で見てみたら、VRモードでも真っ黒にならずにちゃんと表示されました。

UnityでWebXR(WebVR)対応したWebページをつくる - Qiita
概要 Unityで、アプリをVRに対応させるなら、 PackageManagerから、VR関連のパッケージをいれたりすれば、対応自体はかんたんにできる(調整難しい) しかし、 UnityでWebGL履くときにVR対応させるのはち...

とても参考になりました。ありがとうございます(*^-^*)

というか、この先輩のページ最初に見てたはずなんですが、サンプルがあるのを見落としてました(;^_^A

 

ということは、私の設定が間違っているということ!

恐らくunitypackageのあたりか、カメラに設定するWebXR用のコンポーネントあたりが原因なのかな?

でもOculus Quest2でもVRモードが使えることが分かったから、希望が出てきたよ。

もうちょっといじってみます。

2021/05/31追記:↑では結局動かなかったけど、WebXR Exporterの後継プロジェクトが進行していてそっちは動くみたい?

試行錯誤したけどOculus Quest2のVRモードでは真っ暗なまま、途方に暮れていたところ、

検索していたらトマシープ先輩の別のエントリを見つけて発見しました。

新unity-webxr-exportでWebVR再チャレンジ成功! - トマシープが学ぶ
以前使ったMozilaのWebXRExporter bibinbaleo.hatenablog.com 結局VRでうまく動かなかった。Unityのバージョン変えてもダメだった。 新unity-webxr-export 環境 インポート サンプルとカメラ ビルド (おまけ)エラー 新unity-webxr-export ...

WebXR Exporterの後継プロジェクトが進行していて、そっちはちゃんと動いたみたい。

 

諦めてA-Frameをいじろうかと思ったけど、いけそうかも。

ありがとうございます(*^-^*)

まだ入れてすらいないので、ちょっといじってみます。

Oculus Quest2のVRモードでちゃんと動いた!PC、スマホでも一応動いた!

Oculus Quest2のOculusブラウザでVRモードにして見れます↓。

Unity WebGL Player | WebVR

 

PCからはこのままだと視点変更はできないみたいだけど動きました。

あと良かったのは、これまでunity webGLが全く動作しなかった古いandroid7.0のスマホ(ジャイロセンサーなし)でも動作したこと!

いや、ジャイロセンサーの有無が原因なのか、単にスペックが低くてメモリが足りなかったのかはわからないけどね。

デバイスに依存せずブラウザだけで動作するってのはやっぱり良いね。

 

なんにせよ動いて良かった!

あとはアセットのコンポーネントの設定とかも見て、どういう設定ができるのか見てみたい。

 

でも後々unityバージョンが上がっていった時に、アップデートされていかないとまた動かなくなる可能性はどうしてもあるのか…。

とりあえず動いたということで良しとして、A-Frameとかも一応いじってみようかな。

おわりに

手軽にWebで動かせるようにビルドできることが分かって良かった!

できればLook Animatorを動かして、Oculus Quest2のヘッド部分が動いたら追従してキャラがこっちを見てくれる…ってのができたら最高なんだけど( *´艸`)

まだ試してないからわからないけど、アセットがWebGLでも動くならいけるかな?

 

でも有志の方が善意で開発してくれてるプロジェクトなので、これからもアップデートされていく保証はないんですよね( ̄▽ ̄;)

A-FrameとかThree.jsとかの、他の知識も入れておいた方がいいかも。

jQueryなら少しわかるからいけるかな?

 

でも動くことがわかって本当嬉しいです(*^-^*)

もう少しいじってみようと思います。

 

タイトルとURLをコピーしました