LoginSignup
15
12

More than 1 year has passed since last update.

@tamoco

Unity 2020.3で作るWebVR

Last updated at Posted at 2021-05-21

概要

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

環境

image.png

  • Windows 10
  • Unity 2020.3.8f1

完成物

Screenshot_2021-05-21-14-51-48-12.jpg

Screenshot_2021-05-21-12-52-30-83.jpg

使用するパッケージ

  • 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）

image.png

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

image.png

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

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

image.png

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

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

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

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

image.png

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

image.png

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

WebGLのテンプレートの作成

image.png

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

image.png

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

image.png

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

Sample Scene をインポート

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

Build Settings の設定

image.png

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

image.png

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

image.png

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

Player Settings の設定

XR Plug-in Management

image.png

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

Player の設定

WebGL settingsのタブを開きます

Resolution and Presentation

image.png

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

Publishing Settings

image.png

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

サンプルをビルドする

image.png

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

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

image.png

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

少しカスタマイズする

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

EnvironmentのAssetを取り込む

image.png

image.png

image.png

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

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

image.png

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

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

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

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

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

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

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

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

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

image.png

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

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

image.png

  • 今回は「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を設定する

image.png

  • 今は浮遊している状態なので重力と物理的な機能をつけて地面を歩くような形します
  • それぞれのコンポネントを追加します
    • 「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する

image.png

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

ふりかえり

  • Asset Storeにある「Unity-WebXR-Exporter」だと2020.3では動作しない
  • 有志で作成しているパッケージをインストールすることでカンタンにつくれる
  • なぜ動作しないか原因を知ることができた
    • 2020.2以降でXRDevice.isPresentが削除されていたため

- 一度作り方を覚えればいろいろ工夫してVRのコンテンツを作れそう

15
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
12