もなふわすい～とる～む in the VRChat


この記事は、[もなふわすい～とる～む Advent Calendar 2020](https://adventar.org/calendars/5183)の7日目です。

6日目の記事は、izmさんによる「[東京都内おすすめグルメマップ （推しの勧めてた店に行ってみた）](https://izm-11.hatenablog.com/entry/2020/12/06/000840)」でした！
ねこねこチーズケーキは通販もやっているので、ぜひクリスマスのケーキなどに食べてみてください！

#TL;DR
　~~VRChatのアバター・ワールドアップツールである~~Unityのインストールから、ワールドを作成しVRchatへワールドをアップロードするまでのワークフローを解説する記事です。
　この記事は、[公式のドキュメント](https://docs.vrchat.com/)に含まれる内容を、日本語に訳し図を加えて解説したものです。[Creating Your First World](https://docs.vrchat.com/docs/creating-your-first-world)に、この記事に書いてある内容はすべて書いてあります。
　リンク先の内容より、日本語での解説＋画像のキャプチャによる補足で、少しだけわかりやすくなっています。

#前提
　ワールドをアップロードすることができるのは、Trust LevelがNew User以降なので、VRChatを始めてから少しだけ経っている人向けの記事となります。
　また、この記事では静的なワールドの作成及びアップロードにとどまり、UDONやVRSDKのコンポーネントを用いたワールドギミックなどについては取り扱いません。

#環境設定
VRChatのワールドを作成して、作成したワールドをアップロードするための環境を整えます。
## Unity Hub、Unityのインストール
1.　Unityのアカウント登録を行います。
2.　[Unity Hub](https://unity3d.com/get-unity/download)をダウンロードおよびインストールをします。
![unityhub_download1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/d8e3996b-5002-2756-fc52-b81ca0bd770a.png)

3.　後述する[VRCHAT SDK3に対応するUnityのバージョンのインストーラ](https://docs.vrchat.com/docs/current-unity-version)（今回は[2018.4.20f1](https://unity3d.com/unity/qa/lts-releases?version=2018.4)）をダウンロードおよびインストールします。
![unitydl1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/4585dde4-61ab-0de3-1a4f-ed3d7e659ca7.png)

![unitydl2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/b87b969d-7279-cb64-f370-f60e9867f6f4.png)

4.　画面の指示に従って、インストールを進めます。

![unityinstall1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/4e86c4d4-d258-cf63-e991-b38f14e43adf.png)

5.　Unity Hubを起動し、インストールしたUnityのバージョンを追加する設定をします。

![unity_version_add1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/a11811cd-dc26-a2a2-2360-2199016568b0.png)

6.　インストールしたUnityのディレクトリ以下にある「Unity.exe」を指定します。
![unityinstall4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/10d01f8e-be91-f863-feec-8ed506a5c082.png)

## VRCHAT SDK3のダウンロード
1. ブラウザで[VRChat](https://vrchat.com/home)にログインします。

2. ブラウザ上の画面左に表示されているメニューの[__Download__](https://www.vrchat.com/home/download)をクリックします。

![download1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/b4273476-7853-364e-1423-ff15114ca269.png)

3. __VRCHATSDK3__の__Download SDK3 - World__をクリックし、SDKをダウンロードします。

![download2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/827e65ec-c5f7-7d92-8418-f50045cbc464.png)

 
## Unityプロジェクトの作成
1. UnityHubを起動しプロジェクトをUnity2018.4.20.f1で新規作成します。
![create1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/8b0a99dd-ee29-4bf7-6b17-7f2eac20c9d8.png)

![create2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/aefbaced-8972-1a7d-ca61-4c705f494ae4.png)

2. __VRCHAT SDK3のダウンロード__の項でダウンロードしたSDKのファイルをダブルクリックしてプロジェクトにインポートを行います。

![create3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/d6715124-df50-c07d-a45b-8f15735e6389.png)

スプラッシュ画面が表示されるので閉じます。
![create4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/d27b03f8-deb0-bd4e-a459-580657e14b40.png)

#ワールドの作成
1. シーン上にVRCWorld(Assets/VRChat Examples/Prefabs/VRCWorld.prefab)というプレハブを配置します。
画面下部の青枠に囲われた、青色の~~まｍ~~立方体のアイコンを、画面左のタブ内にドラッグアンドドロップをすることで配置することができます。
![VRCWorld1_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/382ecf8a-b649-8c99-0d68-e08383e74006.png)


2. シーン上にPlaneを配置します（作成時の状態がPositionが0,0,0以外の場合があるので、注意してください。）
画面左のHierarchyタブ内で右クリックをし、表示されたメニューの「3D Objects ＞ Plane」を選択することで配置することができます。
![VRCWorld2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/b5acba8d-62c4-aa7e-253a-50f3ccdb65bc.png)

ここまでで、VRChatにアップロードする最低限の要素はそろいました。

#ワールドのアップロード
1. メニューバーのVRChat SDKメニューからShow Control Panelをクリックします。
![update1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/2ed83e60-3199-b892-3972-75533336fe54.png)

2. 表示されたVRChat SDKウィンドウのAuthenticationタブを開き、VRChatのアカウントでログインをします。
![upload2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/c7437af7-c699-b6eb-739c-1904303b9e19.png)

3. Builderタブを開き、ウィンドウ下部のBuild & Testをクリックします。

![upload3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/988c981e-c083-cce7-4288-6f047f8649ff.png)

4. 表示された入力フィールドに、ワールドの説明などを入力したりし、チェック項目を確認しチェックを入れたりし、最後にUploadをクリックします。

![upload4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/c2048694-8cf9-1924-8550-6f597418d655.png)

#ワールドに入ってみる
### テスト
アップロードする際に、Builderタブの「Online Publishing」ではなく、その上の「Local Testing」の「Build & Test」をクリックすることで、アップロード前に自分だけが入ることができるワールドでテストをすることができます。
![testworld1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/66b05c7d-33da-e450-5353-31aecc7029af.png)


これはシェーダーエラーのブラシ（なんで？）
![testworld2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/8692a162-b3d3-0f04-0771-3b2fa81d5027.png)

### Private

SteamでVRChatのクライアントを起動し、WorldタブからMineの欄を探します。
![world1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/126f5826-8136-1df8-36ee-fba96b0d8d3c.png)

![world2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/ae260e1d-ea06-56ac-5827-cf5492d48161.png)

シェーダーエラーのブラシなんてなかったんだ。
![world3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/bb1d7443-8baa-53ec-9eeb-ffaa7a3cde51.png)

### Public
New Userだと、Publicにアップロードできません。。。
下記の画像の緑色の枠内の部分に、チェックを入れられるようになり、チェックを入れることでPublicでアップロードすることができます。
![upload5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/883c3562-f878-d12c-6c86-d61e7d756bf5.png)

VRChat+に加入すれば、すぐにアップロードできるようになるのかな？試したら記事更新します。
https://docs.vrchat.com/docs/vrchat-community-labs

#感想
~~いかがでしたか？~~
解説する記事と言いながら、VRChatのワールドのアップロードは初めてだったので、わからないことは調べながら書きました。
ギミックを実装しなければノンコーディングで完結するので、Clusterと同様に簡単にできますね！

Unity AssetStoreやBoothの3Dモデルを組みあわせて、君だけの最強のもなふわすい～とる～むを作ろう！
（年末年始の休暇中にPublicでもなふわすい～とる～むをアップロードしなおします。よろしくお願いします。）

本当は、もなふわすい～とる～むに由来するものを置いたワールドを作成しPublicで公開するまで終えたかったですが、ひとまずここまで（随時更新していきます。）

もなふわすい～とる～む Advent Calendar 2020の8日目の記事は、バーチャルHigh Performance C#erもとい[スーギ・ノウコ自治区](https://twitter.com/pCYSl5EDgo)さんの「[C# Source GeneratorによるAOSOAを活用したDOTSプログラミング補助の試みとそのUnityにおける敗北](https://github.com/pCYSl5EDgo/pCYSl5EDgo/blob/main/Monafuwa.md)」です。
果たして、彼女は敗北の先に何を見たのか？

# 最後に推し語り
　[巻乃もなかさん](https://twitter.com/monaka_0_0_7)に出会って、大体１年くらいが立ちました。
　はじめの出会いは、Twitterの人が「たすけて！！！もなふわすい～とる～む！！！」と言っているのを見て、[そのひと](https://twitter.com/SebasAi)が貼っていた配信のリンクから飛んだのが始まりだと記憶しています。

　配信を開いて１分くらいは「ふーん、おもしれー女」くらいの感想だったんですが、あいさつしたら「あ、サンマックスさんだ～！」と言われ、その印象は一瞬で「やべー女」に変わりました。たぶん、ふぁぼかRTか何かの通知から名前を見かけられていたんでしょうけど、すごいですよね。すごい。。。配信に来るかどうかもわからない人の名前を覚えられる・・・？

　たしか、その初めましての配信ではバイクだったか工具だったかの話題に触れられていて、自分の前職がその手の職だったり、趣味でバイクに乗っていたことも併せて、とても惹かれる配信内容でした。

　息継ぎもせずに語られるそのフルスロットルなトーク、その趣味に通じている人なら「こいつ、わかっている」と思わせる、浅くない内容。僕が「バイクの排ガスのにおい良いよね」とコメントすると「2stのにおいすき～！」と返される。思わずニヤリとしてしまいました。

　そのほかにも、女の子らしい（最近はこういう表現は憚られますが、前述の話題とのギャップもあって、あえて女の子らしいと表現します）「最近みつけたコンビニスイーツ」や「動物の話（猫やカニ、ゴリラ（どうして？））」、「お星さまの話」など様々なジャンルでトークを展開しています。

また、「お星さまの話」といえば、巻乃もなかさんの趣味の一つに「天体観測」もあります。
これも前述のバイクと同じように「オッ」と思わせる内容です。以下、参考リンク

[初めての天体撮影入門](https://www.youtube.com/watch?v=2hlgyKq3Irw&list=PLhFTn9KGUjG8OMTbq_C_2hO9jjZZqB2IL&index=5)

~~みんなもハマろうレンズ沼~~

端書ですが、これにてもなふわアドベントカレンダーの7日目の記事を締めたいと思います。

# 後日談というか今回のオチ

もなふわアドベントカレンダー　26日目です。
25日目は[巻乃もなかさん](https://twitter.com/monaka_0_0_7)の記事でした！

以下、7日目の続き。

VRChat＋に登録したら、「New User」から「User」を飛び越え「Known User」になりました！
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/99e90ab2-74d9-9251-d089-ccce9678e787.png)

ということで、さっそく作成したワールドをPublicにアップロードしてみました！（アップロードの仕方については前述のとおりです！
）
[パブリックリンクはこちら](https://www.vrchat.com/home/launch?worldId=wrld_fb901ec2-b8bd-4060-a4ae-847a8949a399)で、ワールドの様子は以下のような感じです！

・羊の国の一角
![VRChat_1920x1080_2021-01-02_10-31-44.043.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/59ecd030-de16-9af4-94b5-599e49ab5f65.png)

・バイクに腰掛けられます。
![VRChat_1920x1080_2021-01-02_10-36-25.678.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/e1f8be27-0ab1-97e2-3888-7ff34291ccab.png)

・みんな大好きミラー
![VRChat_1920x1080_2021-01-02_10-37-04.200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/14c490b4-0dfd-297d-e199-610b6d4cb909.png)

・家の中にある矢印を追うと・・・
![VRChat_1920x1080_2021-01-02_10-37-59.641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/9e1aa5cb-191a-10ee-d236-5570c696deec.png)

・親の顔より見たもなふわすい～とる～む
![VRChat_1920x1080_2020-12-31_18-16-18.792.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147257/f4a2df11-00ac-d248-2118-0cd07bdc9b42.png)

# 使用したアセットについての紹介
+ [Suburb Neighborhood House Pack (Modular)](https://assetstore.unity.com/packages/3d/environments/urban/suburb-neighborhood-house-pack-modular-72712)
    + 家の概観（屋根、床、壁など）、道路などを構成しているアセットです。年末年始セール中で＄69→＄34.5になっているので、気になった方はぜひ。
+ [House Furniture Pack](https://assetstore.unity.com/packages/3d/props/house-furniture-pack-88646)
    + 上記と同じパブリッシャさんのインテリアのパックです。上記同様年末年始セール中で半額になっています。
+ [Farm Animals FullPack](https://assetstore.unity.com/packages/3d/characters/animals/farm-animals-fullpack-164114)
    + かわいい動物たちのアニメーション付きのモデルが入っているパックです。
+ [Animating Bunting Flags](https://assetstore.unity.com/packages/3d/props/exterior/animating-bunting-flags-121749)
    + もなふわすい～とる～むの背景をかざるフラッグです。
+ [Dessert Heaven Pack](https://assetstore.unity.com/packages/3d/props/food/dessert-heaven-pack-9838)
    + もなふわすい～とる～むの背景を飾るアイスです。
+ [JSGorilla](https://assetstore.unity.com/packages/3d/characters/animals/mammals/gorilla-75796)
    + もなふわすい～とる～むの背景をかざるゴリラです。
+ [【無料】ゲーミング発光シェーダー Gaming RGB](https://sh1mc.booth.pm/items/2296573)
    + ゴリラさんをゲーミング化するために使用しました。
+ [Snow Crab (Chionoecetes)](https://assetstore.unity.com/packages/3d/characters/animals/snow-crab-chionoecetes-53168)
    + + もなふわすい～とる～むのゆかいな仲間たちのカニです。探してみてね。年末年始セール中で半額。
+ [Next-gen Camera](https://assetstore.unity.com/packages/3d/props/electronics/next-gen-camera-37365)
    + もなふわすい～とる～むにおいてあるカメラです。
+ [Cloudy Day Skybox - Vol. 2](https://assetstore.unity.com/packages/2d/textures-materials/sky/cloudy-day-skybox-vol-2-131490)
    + スカイボックスに使用しました。年末年始セール中で30%オフ。
+ [14 Arrow Animations](https://assetstore.unity.com/packages/3d/props/14-arrow-animations-95037)
    + 矢印です。家の中にある矢印を追うといいことあるよ。
+ [Deserted Village](https://assetstore.unity.com/packages/3d/environments/historic/deserted-village-86290)
    + ガレージを抜けた庭にある机に使用しています。年末年始セール中で半額。
+ [Old Motorcycle PBR](https://assetstore.unity.com/packages/3d/vehicles/land/old-motorcycle-pbr-134349)
    + ガレージにあるバイクです。
+ [BMW R75](https://assetstore.unity.com/packages/3d/vehicles/land/bmw-r75-140940)
    + BMW・R75は、BMW製のサイドカー付きオートバイである。
        + 概要
            + 主に第二次世界大戦中のナチス・ドイツ軍において使用された。その出自はやや特殊で、オートバイではあるがサイドカーの装着を前提としている。サイドカー側の車輪もレバーで駆動させることができる「パートタイム二輪駆動」構造になっていて、不整地走破性能は当時のサイドカー付きオートバイとしては、非常に高いものであった。
            + 戦後、本車両のデザイン、二輪駆動構造を模倣・参考にしたソ連-ロシア製「IMZ・ウラル」や、現ウクライナ製「KMZ-DNEPR」が現在でも製造されている。また、戦後の東ドイツでは、本車のエンジン改良型「AWO-700」というサイドカーも製造されていた。
            + なお、後年BMW・R75/5と呼ばれる車種が生産されたが、これは、上記車種とはエンジンのシリンダーレイアウトなどに共通性を見出すことができるものの、実質的には別の車両である。
+ [Garage Props Collection](https://assetstore.unity.com/packages/3d/props/industrial/garage-props-collection-3358)
    + ガレージ内のツールや棚などに使用しています。
+ [ビール](https://booth.pm/ja/items/1594435)
    + ガレージを抜けた庭にあるビールに使用しています。
    + <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">酒やめろ</p>&mdash; 巻乃もなか⛄️ (@monaka_0_0_7) <a href="https://twitter.com/monaka_0_0_7/status/1343062986630447106?ref_src=twsrc%5Etfw">December 27, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+ [オリジナル3Dモデル　Rgray【アルグレイ】](https://booth.pm/ja/items/1935911)
    + 前述のワールド紹介に使用しているアバターです。僕の愛用のアバターでもあります。
    + 期間限定でベルガモッド（バイク）が付属していました。どこかZX-10Rみのあるバイク。
    + Kawasakiはいいぞ。