Unity 2020.3で作るWebVR

概要

• Unity 2020.3でカンタンなWebVRのサイトを作ります
• Unity-WebXR-Exporterを使用します
• 作る上のパッケージに関する情報や手順などをまとめています
  • 最初はサンプルのデモを動くようにしてホスティングサイトにデプロイします
  • 次にサンプルを元に少しカスタマイズして違うサイトとしてデプロイします
    • 森を散歩するVRをつくります

環境

• Windows 10
• Unity 2020.3.8f1

完成物

• パッケージにあるサンプル
  • https://unity-webvr-demo.netlify.app/

• 少しカスタマイズしたモノ
  • https://unity-webvr-custom.netlify.app/

使用するパッケージ

• UnityでWebGLでWebVRのコンテンツを作ることができるパッケージです
• Mozillaが提供しているUnity-WebXR-Exporterだと 2020.3で動作しません
  • 2020.2以降でXRDevice.isPresentが削除されておりエラーが表示されます
• 2020.2以降で動作させるためのパッケージが公開されておりそれを利用します
  • https://github.com/De-Panther/unity-webxr-export
    • Mozillaのパッケージでマウスをドラッグして視点を変えることができなくなっています
    • XRDeviceを使用しなくなったことで機能的になくなったモノだと思われます

XRDevice.isPresentの削除

2020.1だとあまり使われていないので削除されたようです。

削除されたことが上部に記載（Removed）

あまり使われていないことが上部に記載（Method group is Obsolete）

サンプルを元にWebVRをつくる

新規のプロジェクトを作成する

• 新規で3Dのプロジェクトを作成します

Unity-WebXR-Exporterのパッケージを取り込む

パッケージのダウンロード

• 以下のGitHubのURLからUnity用のパッケージを取得します
  • https://github.com/De-Panther/unity-webxr-export
• GitHubのページにもありますが以下の２つリンクからパッケージをダウンロードします
  • [WebXR Export] (https://openupm.com/packages/com.de-panther.webxr/)
  • [WebXR Interactions] (https://openupm.com/packages/com.de-panther.webxr-interactions/)
  • 「Get installer.unitypackage」をクリックすることでダウンロードできます

パッケージのインストール

• 「Assets」→「Import Package」→「Custom Package」をクリックします
• 先程ダウンロードしたパッケージを選択します

• 「Import」をクリックします
• もう１つのパッケージも同様の手順でインストールします

WebGLのテンプレートの作成

• 「WebGL」→「Copy WebGLTemplates」をクリックします

• 既存のテンプレートを上書きするため確認のダイアログが表示されるので「Contienue」をクリックします

• WebGL Templatesが作成されていることを確認します

Sample Scene をインポート

• 「Window」→「Package Manager」でPackage Managerを開きます

• 「My Registries」で先程取り込んだパッケージを表示します

• 「WebXR Interactions」を選択しSamplesの「Import」をクリックします

• 「Sample」が追加されたことを確認します

• 「Sample」にある「Desert」のシーンファイルをダブルクリックで開きます

• 上部のツールバーの右向きの三角形のアイコンのボタンをクリックしてサンプルのシーンを実行します
• マウスでオブジェクトを掴んで動作することを確認します

Build Settings の設定

• 「File」→「Build Settings」をクリックします

• 「WebGL」を選択して「Switch Platform」をクリックします
• Platformが切り替わるとファイルが読み込まれます

• 「Add Open Scenes」をクリックして現在開いているサンプルのシーンを追加します
• 「Player Settings」をクリックします

Player Settings の設定

XR Plug-in Management

• 有効になっていない場合は画像のとおり設定します

Player の設定

WebGL settingsのタブを開きます

Resolution and Presentation

• 前の手順でCopy WebGLTemplatesしたモノが表示されています
• 「WebXRFullView2020」をクリックします

Publishing Settings

• 「Decompression Fallback」にチェックを入れます
• Player Settingsが完了したので画面を閉じます

サンプルをビルドする

• 先程の手順から「Build Settings」の画面が表示されているはずです
  • 開いていない場合は上記の手順から「Build Settings」を開きます
• 「Build」をクリックします
• 任意のフォルダを選択してファイルを出力します

Buildしたファイルをデプロイする

• 先程の出力したフォルダを確認すると「index.html」などが格納されているはずです
• それらのファイルをウェブサーバーに展開することでブラウザでWebVRとして動作します
• 今回はNetlifyというホスティングサービスにデプロイしました
  • https://unity-webvr-demo.netlify.app/

少しカスタマイズする

• Asset StoreにあるEnvironmentを使ってお散歩するようなVRコンテンツを作ります

EnvironmentのAssetを取り込む

• 今回は森のAssetを使用します
  • https://assetstore.unity.com/packages/3d/environments/fantasy/glowing-forest-79686
• 「Add to My Assets」をクリックして現在開いているプロジェクトに取り込みます
• 「Package」の画面が表示されたら「Import」をクリックして取り込みます

• Importされたことを確認します
  • 「SkythianCat」というフォルダが追加されています

WebVRのカメラを取り込んだアセットのシーンにコピーする

• WebXR ExporterのDesertのシーンにあるWebVR用のカメラをコピーします

  • 「WebXRCameraSet」を選択して「Ctrl」+「C」でコピーします

• 取り込んだアセットのDEMOのシーンを開きます

  • 「SkythianCat」→「Glowing_Forest」→「Demo_scene01」をダブルクリックします

• コピーしたカメラを取り込んだアセットのDEMOのシーンに貼り付けます

  • 「Ctrl」+「V」で貼り付けます

• 既存のカメラである「GROUP_Cameras」を削除します

  • 「GROUP_Cameras」を「Delete」キーで削除します

WebVRのカメラの位置を調整する

• 「WebXRCameraSet」を選択して位置調整をします
  • TransformのPosition以下のとおりに設定します
    • X:47 Y:150 Z:95
  • 実行してカメラが森の中にいることを確認します

カメラをコントロールするスクリプトを作成する

• 今回は「Assets」フォルダの直下にカメラをコントロールするスクリプトを作成します
  • 「CameraController.cs」というファイルを作成します
  • コードは以下の内容をそのままコピーしてください
• 作成したスクリプトを「WebXRCameraSet」にアタッチします
  • アタッチ後、Publicの変数で表示されたCam Followerにもアタッチします
    • 「WebXRCameraSet」→「Cameras」→「CameraFollower」をアタッチします
• 上記の設定が完了すると以下のように動作します
  • カメラが向いている方向に移動します
  • カメラの向きは画面中央よりクリックした位置で回転します

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraController : MonoBehaviour
{
    public GameObject camFollower;
    public float moveSpeed = 1;
    public float camRotateSpeed = 1;
    int screenW = Screen.width;
    void FixedUpdate()
    {
        ClickMove();
        DirectionMove();
    }

    void DirectionMove()
    {
        // VRだとFollowerのオブジェクトを参照する
        Vector3 velocity = camFollower.transform.rotation * new Vector3(0, 0, moveSpeed);
        gameObject.transform.position += velocity * Time.deltaTime;
    }

    void ClickMove()
    {
        // 左ボタンクリック
        if (Input.GetMouseButton(0))
        {
            float mousePositionX = Input.mousePosition.x;
            if (screenW / 2 > mousePositionX)
            {
                // 画面の中央より左側をクリックするとカメラが左に回転
                gameObject.transform.Rotate(new Vector3(0, camRotateSpeed * -1, 0));
            } else {
                // 画面の中央より右側をクリックするとカメラが右に回転
                gameObject.transform.Rotate(new Vector3(0, camRotateSpeed, 0));
            }
        }
    }
}

Rigidbody・Colliderを設定する

• 今は浮遊している状態なので重力と物理的な機能をつけて地面を歩くような形します
• それぞれのコンポネントを追加します
  • 「WebXRCameraSet」を選択し以下のコンポネントを追加します
    • 「Physics」→「Rididbody」
    • 「Physics」→「Box Collider」
• カメラの位置を調整します
  • このままだと床をすり抜けてしまうので若干高くします
  • カメラのposition　　X:47 Y:152 Z:90
• Box Colliderを調整します
  • 狭いところが通れないのでサイズを小さくします
  • Sizeを以下の設定にします
  • Box Collider Size　　X:0.5 Y:0.3 Z:0.5

Sceneを追加してBuildする

• 「File」→「Build Settings」をクリックします
• 「Add Open Scenes」で現在開いているシーンを追加します
• 最初に追加したシーンは選択して「Delete」キーで削除します
• 「Build」で出力します
• 以下の場所にデプロイしました
  • https://unity-webvr-custom.netlify.app/

ふりかえり

• Asset Storeにある「Unity-WebXR-Exporter」だと2020.3では動作しない
• 有志で作成しているパッケージをインストールすることでカンタンにつくれる
• なぜ動作しないか原因を知ることができた
  • 2020.2以降でXRDevice.isPresentが削除されていたため
• 一度作り方を覚えればいろいろ工夫してVRのコンテンツを作れそう