Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@RyoyaHase(長谷 良夜)

「VR（仮想空間）上に曲面ディスプレイを作成して大画面で広角カメラ映像を見る」【ヘッドマウントディスプレイとUnityでVRとかARの開発をやってみる．】

Last updated at Posted at 2021-05-13

#はじめに

Unityでモノづくりをする上で欠かせないもの...3Dオブジェクト...

普通にゲームを作る分には配布データが大量に出回っていますがXR開発用のものはまだまだ数や種類が少ないため簡単なオブジェクトを作っていきます．

やはり湾曲ディスプレイは首を動かすことで臨場感を感じられるのでVR上で超巨大ディスプレイを作りたいなと思い立ったはいいが何も知識がなかったので0からメモしていきます．
初心者なので非効率な部分や雑な部分も多いですがご容赦ください．

環境一覧
SteamVR 1.16.10
Unity 2019.4.27f1 or 2020.1.17f1（動作確認済み，非対応なSDKあり）

SteamVR Plugin 2.7.3
Vive SRanipalRuntime Plugin 1.3.2.0

追加アクセサリー
VIVEトラッカー2018
Ovrvision Pro（ステレオカメラ）
Leap Motion

使用PCスペック
インテル® Core™ i7-7700K
NVIDIA GeForce GTX 1070

  • 環境作成編

#1 Unityのセットアップをする　2021年 1月更新

#2 プロジェクトを作ってみる　2021年 1月更新

#3-α Unity2019でVR開発のための環境を整える（SteamVR Plugin2.7.Xをインストールする）：推奨　2021年 6月更新

#3-β Unity2020でVR開発のための環境を整える（SteamVR Plugin2.7.Xをインストールする）　2021年 5月更新

#3-おまけ UnityでVR開発のための環境を整える（SteamVR Pluginの最新版をインストールする）：非推奨　2021年 2月更新

#4 SteamVRのダウングレードと自動アップデートの停止（上級者向け）　2021年 5月更新

  • コントローラの入力やトラッカー，HMDの位置座標，回転座標を得る＋α

#5 VIVEコントローラのボタン入力を取得する　2021年 2月更新

#6 トリガーの押し具合やトラックパッドの位置情報の入力を取得する　2021年 2月更新

#6-おまけ VIVEコントローラを使った開発をする時のおすすめ設定（独断と偏見）　2021年 5月更新

#7 ヘッドマウントディスプレイとコントローラの位置座標と回転を取得する　2021年 2月更新

#8 VIVEトラッカー2018を有効化してUnity上で位置座標と回転を取得　2021年 5月更新

#9 VIVEコントローラの振動機能を開発してみる　2021年 4月更新

  • VIVE Pro Eyeのアイトラッキングを使ってみる

#10 VIVE Pro Eyeの視線トラッキングを有効化（セットアップ）する　2021年 4月更新

#11 VIVE Pro Eyeのアイトラッキングを使ってUnity上で瞬きや視線のデータを取得する　2021年 4月更新

#11-おまけ VIVE Pro Eyeのアイトラッキングで計測できるデータについて（適宜更新）　2021年 4月更新

  • VIVE Pro Eyeのカメラを使ってみる

#12 VIVE Pro Eyeのフロントカメラの解像度（性能）とAR機能を有効化について　2021年 5月更新

  • 小技

プレイエリアの境界線（シャペロン境界）が表示されないように設定を変更する　2021年 6月更新

Unity上でカメラを複数台追加してHMDやコントローラの動きを見る　2021年 6月更新

  • Ovrvision Pro（ステレオカメラ）を使ってAR開発してみる

＄1-1 Ovrvision Pro（ステレオカメラ）のセットアップをして実際に動かしてみる　2021年 6月更新

＄1-2 Ovrvision Pro（ステレオカメラ）とHMDを使ってARアプリ開発する　2021年 6月更新

  • Leap Motionを使ってハンドトラッキングしてみる

＄2-1 Leap Motion（ハンドトラッキング）のセットアップをして実際に動かしてみる　2021年 6月更新

＄2-2 Leap Motion（ハンドトラッキング）とHMDを使ったインタラクティブなアプリ開発する　2021年 6月更新

今回の記事では，

1．Blenderでプロジェクトを作成する．
2．ベジエ曲線から曲面ディスプレイを作成していく．
3．UVエディターでテクスチャ（映像描画をする場所）を設定する．
4．実際にUnity上で動かして確認してみる．

という流れ．

#1．Blenderでプロジェクトを作成する．

ゲーム作成の強き味方であるオープンソースの統合型3DCGソフトウェアBlenderを今回は使用します．
まずは公式サイトからダウンロードしてインストールしてください．

Blender.jp←ここから

この記事で使用しているのは2.91.2です．

起動すると何を作るか聞かれるのでとりあえず「全般」を選びます．
01.png

唐突に箱が目の前に現れます．
02.png

とりあえず今回は選択して右クリックからかDeleteボタンで削除しちゃいます．
03.png

これで作り次始める準備は完了です．初期設定などは特にいじらなくても簡単なものは作れますのでここまでは比較的優しいです．

#2．ベジエ曲線から曲面ディスプレイを作成していく．

今回は巨大曲面ディスプレイを作りたいので骨組みとなるベジエ曲線を追加します．
Blenderの画面上にカーソルを置いて「Shift+A」で追加のタブを開けるのでカーブのベジエを選びます．
04.png

するとなんとも弱々しい感じの線が出てきます．
05.png

ベジエカーブを選択状態にした状態でビュー画面右上のしまわれているタブを開きます．
06.png

するとトランスフォームというパラメータ調整画面が出てきます．
07.png

まずは大きさを変更し，押し出しがしやすいように位置を上にあげます．
08.png

大きさを変更したら左上のタブから編集モードに切り替えます．
09.png

編集モードにするとベジエそのもののサイズから曲線の設定に変わります．
10.png
11.png

今回は線そのものではなく直線の位置を変えることで歪みをきれいに出すので頂点を選択して位置を整えていきます．
12.png

ベジエカーブの2つの線を同じ角度で置くときれいな曲線ができます．
13.png

左上のタブからオブジェクトモードに戻し，ベジエを選択した状態で右クリックをしてメッシュに変換します．
14.png

再び編集モードに戻すと点と線のデータに変換されています．
15.png

範囲選択ですべての点を同時に選択した状態で編集モードの状態で左側に表示される押し出しを選択します．
16.png

押し出しを選択すると上にどのように押し出すか選択できるのでXYZモードに切り替えます．
17.png

まずはモニターの大きさを出します．
18.png

ペラッペラだとモニターっぽさがなくなるので先ほど同様点をすべて選択して厚みを出しておきます．
19.png

こんな感じのものが完成しました．一応大きさはトランスフォームから変更できます．
20.png

#3．UVエディターでテクスチャ（映像描画をする場所）を設定する．

テクスチャを張りたい範囲を囲むように頂点を選択するか，モード切替タブの右に選択方法切り替えがあるので囲むように辺を選択をする．
21.png

選択した状態で右クリックをしてシームをマークを選択する．
22.png

シームとは切り込みのことで，赤い線でマークがつきUV展開するのが楽になります．
問題なくシームが入っていればモード切替タブの右に選択方法切り替えがあるので囲テクスチャを貼る面を選択する．
23.png

"U"キーか右クリックの面をUV展開から「展開」を選択します．
24.png

このままでも編集できますが分かりやすいように画面左上をつまんで右にスライドして2画面に分割します．
25.png

こんな感じで分割されます．
26.png

左側の画面をモード切替からUVエディターに変更します．
27.png

すると先ほど展開したUVがオブジェクトの頂点と辺に合わせて表示されます．39.png

基本綺麗にいきませんがシームをマークするとだいぶましになります．
28.png

頂点を選択して右上の隠れたタブから座標を数値で見れるので綺麗にUVを調整していきます．（この作業が地獄）
29.png

こんな感じで隙間なく綺麗に調整し直します．
30.png

あとは出力するだけなのでファイルからエクスポートの「FBX」形式を選びます．
31.png

出力の設定としては「エンプティ」「アーマチュア」「メッシュ」「その他」を選択します．
32.png

もしサイズ感が違ったりした場合にはトランスフォームからサイズの調整はできます．メッシュ貼り直すのは地獄なのでワンチャン調整できます．
33.png

サイズを変えてもテクスチャは歪まないです．（場合によっては歪むので頑張って再設定してください）
35.png

#4．実際にUnity上で動かして確認してみる．
とりあえず作ったオブジェクトをUnityプロジェクト上から見えるところに追加しておきます．
36.png

VR用のカメラを設定したうえでオブジェクトを追加します．
37.png

正面に来るように位置を調整しておきます．
38.png

正面から見るとこんな感じ．
39.png

歪みに影ができると綺麗に映像が映らないのでPointライトを等間隔に4つほど設置します．
40.png

最後にいつもどおりC#スクリプトを作成してこの湾曲ディスプレイに落とし込みます．

こんかいはとりあえずWebCameraTestというスクリプトを作成します．

WebCameraTest.cs
using UnityEngine;
using UnityEngine.UI;

public class WebCameraTest: MonoBehaviour
{

    void Start()
    {  
        //PCに接続されているカメラデバイスをすべて配列に格納
        WebCamDevice[] devices = WebCamTexture.devices;

        //1台以上検知されれば処理，されなければebカメラが検出できません！とログに出す
        if (devices.Length > 0)
        {
            //配列に格納されたデバイスから使いたいカメラを選択する，devices[数字].nameとなっているが動かなければ数字を変えてみる．
            WebCamTexture myWebCameTexture = new WebCamTexture(devices[0].name);
            //どのゲームオブジェクトのテクスチャに貼るかを選択，今回造ったオブジェクトはcurvedという名前なのでcurved
            GameObject curved = GameObject.Find("curved");
            //テクスチャへの描画処理，オブジェクト名.GetComponent
            curved.GetComponent<Renderer>().material.mainTexture = myWebCameTexture;
            myWebCameTexture.Play();
        }
        else
        {
            //エラーログ
            Debug.LogError("Webカメラが検出できません！");
        }
    }
}

実際に動かすとこんな感じ．部屋が汚いのは許してください...
ここに前回の視線計測システムをいれるとVR上でもしっかりとどこを見ていたのかを記録できますし，瞳孔などのデータをとれば動眼反射なんかも計測できるので色々と使えそうではあります．
41.gif

4
2
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
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?