1時間でできる，VRChat ワールド制作手順書．with Revit


#はじめに
このページは，Unityを知らない人のための，RevitからVRChatにワールドをアップロードするまでの手順を示したものです．
１時間で終わらせるため，影響が少ない手順は省いています．
すでに3Dモデルを持っている方は，手順2から作業してください.

#対象読者
建築関係者でVRに興味があるが，VRの技術的なことが分からない方向けです．この記事を読むと、VRChatにRevitデータを持ち込めるようになります。実際の建物として設計したものをVR空間で表現できます。実際に建設しなくても、実寸大で建築のスケールを実感できます。自分で作った家を離れたところにいる友達と一緒に談笑しながらまったり楽しめます！！！！！

##注意事項
[VRChat](https://hello.vrchat.com/)と[Unity](https://unity.com/ja)のアカウントが必要です．
VRChatには，信用スコア(トラストランクと呼ばれている)システムがあります．
VRChatで数日遊ぶ 又は課金しないと，ワールドをアップロードできません．
[Oculus Quest](https://www.oculus.com/quest-2/)単体用のワールドには対応していません．
VRChatへのアップロードは，データの転載となります．権利・ライセンスの確認をしておきましょう．
この記事で生じた事故・事件・その他トラブルには，著者は一切責任を負いません．

##前提条件
- Windowsの基本操作ができる
- [Revit](https://www.autodesk.co.jp/products/revit/overview)(2016以降)をインストールしている(既にfbxや.daeなどの3Dファイルを持っている場合は必要なし)
- Revit(.rvt)ファイルを持っている(既にfbxや.daeなどのファイルを持っている場合は必要なし)

##後々必要になるもの (有料)
[Bakery - GPU Lightmapper]
(https://assetstore.unity.com/packages/tools/level-design/bakery-gpu-lightmapper-122218)
影や光の反射をラッピングするツール．
値段は$55．半額セールを狙って買ってもいいでしょう．
![Bakery](https://assetstorev1-prd-cdn.unity3d.com/key-image/4a4be31a-d00f-4326-a9d1-32bf3fe4eef2.webp)

##目次
1. 環境構築
1. Revitからモデルを出力
1. Unityへインポート
1. マテリアル(表面の模様・壁紙)をつける
1. Skybox(空や背景)をつける
1. コライダー(当たり判定)を設定する
1. ライトを設置する
   1. 基本設定
   1. Mesh Renderer
   1. UV Map
   1. ライト設置  
   1. ライトの明るさなどの設定
1. ライトベイク(照明の反射を計算)する
1. アップロードする

##環境構築
###Unityセットアップ
####Unity Hubをインストール
Download Unity Hub をクリック
https://unity3d.com/get-unity/download
![unity hub download.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/4ef707f6-8833-1cda-3dbf-957fb029df72.png)
UnityHubSetup.exeを実行
Run Unity Hubにチェックが入っていることを確認して，Finishを押す．
![Unity Hub Install.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/54b18e23-185e-4cbf-9dc8-28ce55b500a5.png)
自動的にUnity Hubが起動します．
![Unity Hub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/8d7bc25b-6d7c-e8a0-e986-db8f6782134c.png)
右上のアイコンをクリックして，Sign inをクリックします．
![Unity Login 2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/c63f8924-4ca6-08b0-67a4-f2c5d7972be3.png)
Unity IDにサインインします．
Unity IDを持っていない場合は，create oneからアカウントを作成します．

https://docs.vrchat.com/docs/current-unity-version にアクセスします．
Click here to install the current version of Unity via Unity Hub.　をクリックして，Unity Hubを開きます．(ブラウザがUnity Hubを開くかを聞いてくる)
![docs.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/4ce4982d-3fa8-a563-aa00-8731957d8a6d.png)
Unity Hubが開きます．
INSTALL を押して，Unityをインストールしましょう．
Unity 2018.4.20f1がインストールされます．(2020年12月時点)
![Unity Install.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/c13c12f7-99f0-b2c3-1983-1d85081d488c.png)
インストールしている間に，ライセンス認証を済ませましょう．
![license.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/c9eebbc8-2f37-4f8c-c6f8-210ec238b82b.gif)

##Revitセットアップ (3Dファイルを持っている場合は次の項目へ)

Lumion® LiveSync® for Autodesk® Revit® をダウンロードします．
https://apps.autodesk.com/RVT/en/Detail/Index?id=1257010617153832891&appLang=en&os=Win64

Revitが起動していないことを確認して，ダウンロードした Act-3DBVLumionLiveSyncforAutodeskRevit_〇〇.msiを実行します．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/c0dd91ef-a880-aeeb-73fc-4e6c3fc496d8.png)

アドオンの警告が出ます．
Always Loadをクリックして，Lumion® LiveSync®を常に読み込むように設定しましょう．
![lumion.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/5f73d9a2-0e4e-d1eb-af2b-a135a23e5966.png)

##Revitからモデルを出力
VRChatにアップロードしたい.rvtファイルを開きます．
Lumionタブ > Expotをクリック．
Surface smoothing を low に設定して，Exportを押す．
![Lumion Ex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/7ccefc9a-7f8b-c79d-fdd8-47f0b69de47c.gif)

##Unityへインポート
Unity Hubを開きます．
NEWをクリックして，Templateが3Dになっていることを確認し，任意のProject NameとLocation(ファイルの場所)を設定して，Createをクリック．
![UnityOpen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/a3ec9876-cdcb-ad66-63f0-3b7eaa0a129d.gif)

出力した.daeファイルを，UnityのProjectウィンドウ(下の方)にドラッグアンドドロップします．
読み込んだ.daeファイルをSenceウィンドウ(中央)にドラッグアンドドロップします．(一軒家以上の大きさだと，引いて見ないと全体が見えません．)
![ezgif-7-caed3d798619.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/537a745d-32df-6fc0-533f-14cf032a6204.gif)

##マテリアル(表面の模様・壁紙)をつける
Projectウィンドウ上で右クリックし，Create>Materialを選択．
ここで，マテリアルの名前が変更できます．(後からでも変更可能)
Ctrl + D で，マテリアルをコピペできます．なるべく少なめにしましょう．マテリアルが多すぎると，VRChat上での処理が重くなります．
![mat.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/dd21f3c8-52ba-d829-7fb7-fee3421d56e7.gif)

マテリアルは，Senceウィンドウの建物にドラッグすると，その面に適用されます．
![matmove.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/3dfa80eb-d0de-0883-daba-18ffa60e8bbc.gif)

木目の画像や壁紙の画像をダウンロードしてきましょう．
おすすめのサイトは，[Texture Haven]
(https://texturehaven.com/textures/)と[CC0 Textures]
(https://cc0textures.com/)．

textureフォルダを作って，ダウンロードしてきた画像をフォルダごとドラッグアンドドロップします．
![tex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/0d107958-a71b-251c-5d69-22e27656e114.gif)

先程 壁にドラッグしたマテリアルを選択します．
Inspectorウィンドウにマテリアルの設定画面が出てきます．
Albedo，Metallic，Smoothnessに先程ダウンロードした画像を適用します．
画像が多すぎて見つけられない場合はSelect Textureウィンドウから検索できます．

```
[画像名と適用先の"例"]
画像名_Color → Albedo
画像名_Normal → Normal Map
画像名_AmbientOcclusion / 画像名_AO → Occlusion

AlbedoとNormal Map以外は用意されてない場合があります．必須項目ではないのでない場合は適用しなくて構いません．
```

![texstet.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/deb11cbb-f009-ba55-06b1-b6c2363389ed.gif)

```
Albedo：表面の色・模様
Metallic：表面がどれくらい”金属的”かを表す
Smoothness：表面の滑らかさを表す
Normal Map：凹凸，傷，溝などのディテールを表す．
```
> [ [Metallic](https://docs.unity3d.com/ja/2018.4/Manual/StandardShaderMaterialParameterMetallic.html)と[Smoothness](https://docs.unity3d.com/ja/2018.4/Manual/StandardShaderMaterialParameterSmoothness.html)の解説 ]
0 から 1 の Metallic 値の範囲
1に近づくほど金属的な反射をする．
![Metallic](https://docs.unity3d.com/ja/2018.4/uploads/Main/StandardShaderMetallicGraduationTable.jpg)
0 から 1 の Smoothness 値の範囲
1に近づくほど表面がツルツルになる．
![Smoothness](https://docs.unity3d.com/ja/2018.4/uploads/Main/StandardShaderSmoothnessGraduationTable.svg)

###ガラスのマテリアルを作る
InspectorウィンドウのRendering ModeをFaldeに設定し，MetalicとSmoothnessを1にします．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/7af1551e-14b5-bc50-b2b5-2f5f9f60f96e.png)
Albedoの右の白い長方形を選択し，Colorウィンドウの一番下のAを0に近い値にします．画像では14に設定しています．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/235bbfa9-4e2e-199c-bb0a-e46b12354948.png)
作ったガラスマテリアルを，ガラス部分にドラックすればガラス窓の出来上がりです．

全部の面にマテリアルを付けるとこうなります．好みのテクスチャとマテリアル設定にしてください．
![mat off.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/34388bf0-6ea1-b723-8ea8-6b4248a26f13.png)


###簡易的に地面をつける(地面がない場合)
GameObject > 3D Object > Cube
InsoectorウィンドウのScaleのXとZの値を変更し，大きさを調節する．
![yuka.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/43889ed5-6ae0-b408-70bc-a6da53da3847.gif)

##Skybox(空や背景)をつける
背景を追加してみましょう．
[HDRI Haven]
(https://hdrihaven.com/hdris/) から，好きな背景をダウンロードしましょう．

今回は，[Noon Grass](https://hdrihaven.com/hdri/?c=outdoor&h=noon_grass)を選びました．

ダウンロードした〇〇.hdrをProhectウィンドウにドラックし，InspectorウィンドウのTexture ShapeをCubeに変更し，Apllyを押す．

![hdri.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/0f039d62-3940-8d53-efb5-316a573ce452.gif)
Projetcウィンドウ内で右クリックし，Create > Material を選択．
InsoectorウィンドウのShaderをStanderdからSkybox > Cubemapに変更．
Cubemapに〇〇.hdrを適用する．
出来上がったMaterialをSenceウィンドウにドラックする．
![skybox.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/dc2564d0-a63a-d95b-c1f7-77dcf57e9775.gif)

##コライダー(当たり判定)を設定する
コライダーを付けたいパーツを選択し，Inspectorウィンドウ内のAdd Comportnentを押し，Mesh Coliderを適用する．
![colider.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/9c3caefe-9baf-fea3-6a91-2b4531f288ef.gif)

##ライトを設置する
[Bakery - GPU Lightmapper]
(https://assetstore.unity.com/packages/tools/level-design/bakery-gpu-lightmapper-122218)のライトを使用します．Unity標準のライトは使用しません．(処理が遅すぎる，扱いにくいなどなどの理由)


###基本設定
Hierarchyウィンドウ内のDirectional Lightを消去します．Deleteで消えます．
エラーが出る場合は，水色の立方体アイコンを右クリックしてUnpack Prefab Completelyします．これで消せるようになります．
![Screenshot (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/78134f8e-a9eb-b3f0-c515-730a0ffd741f.png)
次に，window > Rendering > Lighting Settingを開き，一番下にあるAuto generateをオフにする．
![Screenshot (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/015c0bcd-21a6-8017-f62b-587ed58186f1.png)
![Capture.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/b6698929-c687-216d-72fe-c8224887d364.png)
###Mesh Renderer
オブジェクトを全て選択して(ライトなどは選択しないように注意)，Inspectorウィンドウ内の
LightmapStaticをオン
Cast Shadowsをオン
Receive Shadowsをオン
Scale in Lightmapを4に設定．
![bakeryopen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/09e8ccd6-b343-d325-9115-4b97157971e7.gif)
###UV Map
Hierarchyウィンドウの3Dファイル(.fbxとか)を選択し，Inspectorウィンドウの中のGenerate Lightmap UVsにチェックを入れる．
###ライト設置  
Bakery > Create から置きたいライトの種類を選んで設置していきます．

- Directional Light：太陽光．すべてを均一に照らす．
- Skylight：環境光．全体を明るくしたい場合は，これのIntensityの値を大きくする．
- Point Light：電球のような光．周囲を照らす．距離の2乗離れると暗くなる．
- Area Light(Example)：片面が光る板
- Spotlight：スポットライト．車のライトのようなもの．

###ライトの明るさなどの設定
#####Directional Lightの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/62fc87e9-107a-60a8-ff47-8a65d7781407.png)

- Intensity：ライトの明るさです。大きくすれば明るく、小さくすれば暗くなります
- Shadow spred：値を大きくすると影がぼやけます．
- Shadow samples：影を計算するサンプル数．ベイク結果がザラザラしている場合は，この値を大きくする．
- Indirect Multiplier：間接光．1未満では、跳ね返るごとに暗くなります．1より大きい値では跳ね返るごとに明るくなります．

####Skylightの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/25aa846f-90a3-70db-dd5b-2258b387c7bc.png)
- Intensity：ライトの明るさです。大きくすれば明るく、小さくすれば暗くなります
- Samples：光を計算するサンプル数．ベイク結果がザラザラしている場合は，この値を大きくする．
- Indirect Multiplier：間接光．1未満では、跳ね返るごとに暗くなります．1より大きい値では跳ね返るごとに明るくなります．

####Point Lightの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/f46d6896-2324-a990-fb31-b06ccf45657c.png)

- Intensity：ライトの明るさです。大きくすれば明るく、小さくすれば暗くなります
- Shadow spred：値を大きくすると影がぼやけます．
- Range：光の到達距離．大きいほど明るい．小さい空間だと影響を受けやすい．Intensityとのバランスが大事．
- Samples：光を計算するサンプル数．ベイク結果がザラザラしている場合は，この値を大きくする．
- Indirect Multiplier：間接光．1未満では、跳ね返るごとに暗くなります．1より大きい値では跳ね返るごとに明るくなります．

####Area Light(Example)の場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/cc18216e-65b4-4d0e-75a5-9875a3c095a0.png)

- Intensity：ライトの明るさです。大きくすれば明るく、小さくすれば暗くなります
- Cutoff：光が到達する距離．値が大きいと光が遠くまで届く．
- Samples (Near/Far)：光を計算するサンプル数．ベイク結果がザラザラしている場合は，この値を大きくする．

####Spotlightの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/61ac9d8a-2c66-79c3-1495-947e3ccfafe4.png)

- Intensity：ライトの明るさです。大きくすれば明るく、小さくすれば暗くなります
- Shadow spred：値を大きくすると影がぼやけます．
- Projection mask:Coneはスポットライトのように照らし，Omniは全方向を照らします．
![spot.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/9876147c-469c-0194-8bb4-39321f51f8cf.png)

##ライトベイク(照明の反射を計算)する
有料の[Bakery - GPU Lightmapper]
(https://assetstore.unity.com/packages/tools/level-design/bakery-gpu-lightmapper-122218)を使用します．
Asset Storeタブ > My Asset からBakery - GPU Lightmapperを探して Downloadを押した後，Importを押します．(画像はDownloadした後の画面)
![aaaaa.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/4ba6af7f-e818-1a27-0f75-cbfeece2f42e.png)

Bakery > Render Lightmap を開く
Renderを押す．
![Screenshot (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/af9e4cc6-c408-1e2a-a360-10a08ee2d008.png)
![dfadas.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/c955a3b8-384c-d822-8f9d-8745d2358ffc.png)
####もっと綺麗にしたい場合．
SettingをSimpleからExperimentalに変更．
画像と同じ設定にしてください．
PCのGPUがRTXシリーズ以外の場合は，RTX modeのチェックを外して構いません．
![bakery1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/573e527a-8a31-7592-660b-c3caab24825d.png)
画像と同じ設定したら，一番下のRenderを押します．
終わったら Crtl + S で上書き保存しておきましょう．

##アップロードする
VRChatのアカウントが必要です．
https://vrchat.com/home/download からVRCHAT SDK3 -World をダウンロード
![sdk.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/2ae87be8-79b8-a7c3-9dd6-b4db6eee5a7d.png)
VRCSDK3-WORLD-〇〇〇.unitypackage をUnityのProjectウィンドウにドラッグ．
![sdkimport.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/daf5b423-192c-d44e-3f1b-e6bad395bae7.gif)
インポートするか聞かれるので，全てにチェックが入っていることを確認してAplyを押す．
VRChat SDK > Controlを押す．
VRChatにログインする．
![login.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/88c3457e-9ee0-b188-f318-192d2c0d7314.gif)

Allowed to publish worlds と書いてあればOK．アカウントにワールドをアップロードする権限があります．
うまく行かない場合は，一度保存してからUnityを再起動しましょう．


<details><summary>[Not yet allowed to publish worlds が表示された人へ]</summary>
アカウントを作って間もないため，VRChat内の信用スコアが足りていません．数日遊んでフレンドを増やすと，スコアが上がりワールドをアップロードする権限が得られます．課金してスコアを得る方法もあります．
[VRChat Safety and Trust System](https://docs.vrchat.com/docs/vrchat-safety-and-trust-system)
[VRchat 日本wiki トラスト(Trust)](https://vrchatjp.playing.wiki/d/%A1%DA%C9%AC%C6%C9%A1%DB%A5%C8%A5%E9%A5%B9%A5%C8%28Trust%29%A5%B7%A5%B9%A5%C6%A5%E0)</details>

VRChat SDK > Show Control Panel を押す．
Balderタブを選択し，Setup layers for VRChat 及び Set Collision Matrix を押す．
Bild & Publish for Windows を押す．
![sdkset.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/0bf4419f-319b-700a-10c1-5a2ec7741536.gif)

以下を入力します．
World Name：ワールドの名前
Player Capacity：同じワールドに存在できる人間の数
Description：ワールドの説明文（必須ではない）
![name.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/c177f197-4f99-3b27-9c02-081bb5eb15f9.gif)
The abroad information is~ にチェックを入れ，Publish to Community Labs にもチェックを入れる．
#####ワールドのサムネイル画像を作る
左上のSenceを押して，カメラ(VRCCam)を選択します．
右下のCamera Previewを見ながら，サムネイル画像にしたい位置にカメラを移動します．
Inspectorウィンドウ内のFiled of Viewで，カメラをズームできます．
終わったら，右上のGameタブを押しましょう．
右下のUploadを押すと，アップロードが開始します．(数分かかります)
![samune.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/71aab284-ea67-99f4-6ccc-f8c9790e9e0f.gif)
アップロードが終わると，このウィンドウが出ます．
![scusess.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/2da6aeed-e621-178d-3287-d5a4a53d8608.png)

###VRChat(デスクトップモード)で見る
####Steamをダウンロード
https://store.steampowered.com/about/
####VRChatをダウンロード
https://store.steampowered.com/app/438100/VRChat/
VRChatを起動してログインします．
VRヘッドセットの場合は，上のLanch VRChat in Steam VR Modeを選択．
PCのモニターで見る場合は，下のLanch in Desktop (Non-VR) modeを選択．ここでは このモードで説明します．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/9bd4ec0e-1254-1db2-9b1b-02a63c7b7db0.png)
起動したら，Escキーを押して右上のWorldを選択．
Mineタブに移動し，アップロードした自分のワールドを選択．
Goを押す．
![done.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363528/07bcdaa6-9968-2139-104c-79f0c375460c.gif)

完成です．よくがんばりました．えらい

# 使用例
この手順書を応用して作ったワールドのUnityアセットを販売しています.
Unityに入れてすぐ使えるタイプのUnityPackageです.
買ってね！
[Michigari BOOTH - https://michigari.booth.pm/] (https://michigari.booth.pm/)

![MichigariSeaHouse1.PNG](https://booth.pximg.net/c2db9388-0aa1-4436-b363-36706416e801/i/3173572/01fbe982-a80a-4b23-a43f-d97a7520718d.jpg)
![MichigariSeaHouse2.PNG](https://s2.booth.pm/c2db9388-0aa1-4436-b363-36706416e801/i/3173572/2865a2b0-78a8-47d4-b661-e2ebc85425c5_base_resized.jpg)
![LouverHouse4VRChat.PNG](https://s2.booth.pm/c2db9388-0aa1-4436-b363-36706416e801/i/2370029/035a08e3-64c5-4a32-bc83-458529dd868a_base_resized.jpg)
![TheVirtualTakeStudio.PNG](https://s2.booth.pm/c2db9388-0aa1-4436-b363-36706416e801/i/2831948/9965cd9d-9cc6-4027-b27c-e4d4b99b64bb_base_resized.jpg
)