LoginSignup
7
3

More than 5 years have passed since last update.

東大VRサークルが忘年会をVRChatでやる話:会場制作編

Last updated at Posted at 2018-12-07

この記事は、UT-Virtual Advent Calendar 2018の為に執筆されました。

どうも、Qiita初投稿です。東大理系1年のところと申します。Twitterは@RKTokoroでやってます。

大学に入るまでAdobeのソフトもUnityもBlenderも触ったことがなかった私がこの1年間で勉強してきたことの集大成として、今回記事を書こうと思います。

※この記事は以下の内容を含みます

・Blenderを使った実寸大のモデリング
・VRChatのワールド作成(基礎)
・VRChat内でYouTubeLiveを見る方法(VRC_SyncVideoStreamの使い方)
・その他

ちなみに会場制作編と銘打っていますが、他に〇〇〇〇編がある訳ではありません。僕が勝手に書いているだけです。

モデリング編

今回作成するVRChatワールドは、Realの方の忘年会会場(Edgeof渋谷)を元にして作成します。

机1

完成図
スクリーンショット 2018-12-07 17.07.55.png
ビジュアル的に一番楽しそうなので、先に作っていきます。

寸法はこんな感じ。(撮り忘れたんですが、奥行きは1mです)
スクリーンショット 2018-12-07 17.10.14.png

見づらいんですけど、オレンジ色の辺に実際の長さが数字で書いてありますね。
Blenderを3DCADソフトのように使うことも一応可能で、Edit Modeでプロパティシェルフの下の方にあるMesh DisplayのEdge infoでLengthにチェックを入れると選択した辺の長さが表示されるようになります。

スクリーンショット 2018-12-07 17.15.17.png

曲面は細分割曲面モディファイアーを追加して滑らかにしています。
細分割曲面を使うと基本的に全ての角が丸まってしまうので、尖らせたい辺はループカットで辺を2重にしましょう。レンダー・ビューの値はどちらも2にしています。
スクリーンショット 2018-12-07 17.19.51.png
↑そのまま
↓手前の辺が2重になっている
スクリーンショット 2018-12-07 17.20.53.png

一通り形ができたら、UV展開して、ロゴをテクスチャで貼って完成です!

机2

完成図
スクリーンショット 2018-12-07 17.26.43.png

木とコンクリートを組み合わせたテーブルですね。よくお食事がここに並んでいるのを見かけます。
この机には曲面がないのでわりかし簡単です。寸法通りにチャチャッと作っちゃいます。
寸法はこちら
スクリーンショット 2018-12-07 17.32.15.png

木とコンクリートのテクスチャは現地で撮影したものをphotoshopで加工して用いています。
シームレス(あんまり上手にできていませんが)なテクスチャを作る方法はこちらのウェブページから。
https://liginc.co.jp/web/design/photoshop/144195
https://designcolor-web.com/2016/01/26/seamless-pattern/

IMG_3463のコピー.png
↑元となった写真の一枚(別々の4枚の写真を元に作ってます)
↓生成したシームレス()なテクスチャ
table2.png

寸法通りにモデリングして、テクスチャを貼りました。テクスチャを設定しても真っ黒になって反映されなければObjectModeでツールシェルフのShadingをGLSLに変更してみてください。
スクリーンショット 2018-12-07 17.35.58.png

あと、一回UV展開しておかないとテクスチャは反映されないので注意しましょう。

机3

完成図
スクリーンショット 2018-12-07 17.39.59.png

これは西側の壁にある音響機材がたくさん乗っている机です。基本的には机2と同じ材質ですが、黒い手すりがついているのでそこだけ違うマテリアルを当てる必要がありそうです。
木の部分のモデリングをしてテクスチャを貼りました。ここは机2の天板と同じ作り方で大丈夫です。
まずは手すりと机をつなぐ金具の部分を作っていきます。まず別レイヤーに移動してShift+Aで円を追加。頂点数は16にしました。押し出し等を駆使して簡単に整形します。また、円形部分は滑らかな曲線にしたいので細分割曲面を追加して、ObjectModeでツールシェルフのシェーダーもスムースにしておきます。机1でも説明しましたが、エッジをつけたい部分の辺は2重にします。
スクリーンショット 2018-12-07 17.44.10.png
形が完成したら、オブジェクトモードに移行してShift+Dで複製、写真の位置に配置していきます。真ん中以外にはミラーモディファイアを追加します。(ここでオブジェクトの原点が(0,0,0)に無い場合ミラーの挙動がおかしくなるので注意。原点を(0,0,0)に設定するにはObjectModeでCtrl+A→Locationと選べば良いです。)
最後に手すり本体のモデルを作ります、と言ってもこれはただの円柱ですので特に難しい場所はないです。直径3.5cmまで細くして、長さと場所を調節します。これで完成です。

S字の椅子

超マイナーなやつなので、実際にEdgeofに行った人の中にもこの椅子の存在を覚えている人は少ないと思います。個人的に気に入ったので作ってみました。
モデリング前提で写真をとったので、ちゃんと正面図があります。
曲線はベジエカーブを用いて枠取りをしました。だいたい外枠ができたら、ObjectModeでAlt+C→MeshfromCurveでベジエカーブをメッシュに変換します。あとは足りない部分を結んで、Y方向に押し出して細分割曲面を設定してエッジを二重にして終了です。
BezierCurve.png
椅子寸法.png

その他

四方の壁と、後ろのクローゼット、ステージもモデリングしましたが、特に目新しいこともせず机のモデリングの延長線上だったので割愛します。
壁ごとに違うテクスチャを当てたかったので別々の.blendファイルとして製作しましたが、ぶっちゃけ統合しておけばよかったと後悔してます。Blender内で別オブジェクトとして設定しておけば、Unityでも別々のオブジェクトとして読み込まれるので統合した一つの.blendファイルにした方がUnity内で位置の微調整とかしなくて済みます。

VRChatワールド作成編

以下のサイトを参考にさせていただきました。
VRChat 技術メモ帳 ワールド作成入門

近頃VRCSDKのUnity2017へのアップデートがくるらしく、いつバージョンが変わるのかとヒヤヒヤして作業しておりますが、現状はUnity5.6.3p1で作成していきます。

まず、モデリング編で作った諸々のオブジェクトを簡単に配置していきます。
ここで注意。importしたblendファイルのメッシュにはコライダーが設定されていないので、配置後に個別にコライダーを当てる必要があります。
(もしかしたらインポートのセッティングでなんとかなる?筆者は最初気づかなくて、無限に落下するワールドを生成していました)
スクリーンショット 2018-12-07 18.43.44.png
SkyBoxはAVIONX Skybox Series Freeをお借りしています。
なにやら窓の外に螺旋階段が見えますが、未完成なのでここではすっ飛ばします。
スケール感がわかるように、ステージの横にUnityちゃんを置いています。Blender場での寸法がきちんとUnityでも反映されていますね。

参考サイトを見れば、VRCWorldのPrefabを置くとワールドになることやアップロードの方法などがわかります。
わからなくて検索したことを少しだけここでは書き加えておきます。

自作の椅子に座る

VRCSDK内のPrefabsのVRCChairからメッシュ部分を取り除けばOKです。
スクリーンショット 2018-12-07 20.34.13.png
スクリーンショット 2018-12-07 20.38.11.png
ステージ上に並んで座れるようにしてみました。(記念写真とかで役立つといいんですけど、、、)
ちなみにちゃんとステージ上に登れるようにコライダーを設定してあります。BoXColliderをInspector上で斜めに配置することはできなかったので、空の子オブジェクトを斜めに配置して階段を登れるようにしました。

ジャンプする方法

VRCWorldにAddComponentでVRC_Player Modsを加えます。Add Modで開いたウインドウでjumpを選択してAddModをクリックで完了です。JumpPowerがデフォルトで3になってます。試しに1にしてみたら10cmくらいしか浮かなくなったので、3~5が適正値だと思います。
スクリーンショット 2018-12-07 20.25.53.png

VRChat内でYouTubeLiveを視聴する

ここからリアル会場と接続するためにYouTubeLiveをワールド内で見れるようにしていきます。
公式リファレンスはこちら
公式のリファレンスも死ぬほどわかりやすいですが全て英語なので、ここでは日本語訳も兼ねて過程を紹介します。

1

空のGameObjectをCreateします。ここでは"LivePlayer_main"と命名します。Add ComponentでVRC_SyncVideoStreamを追加します。

2

VRC_SyncVideoStreamの中身をチェックします。ここではYouTubeLive用の設定を用います。
スクリーンショット 2018-12-07 19.38.29.png
Video Search Root: デフォルトで「youtube.com」になっていると思います。このままでOKです。
Max Stream Quality: ストリーミングの最高画質を変更します。デフォルトでは720になっていると思いますが、ここでは少し下げて480にしています。(遅延を回避するために下げていますが、検証の結果、144にしても遅延はあまり改善しなかったので数値は遅延に関係ないかもしれません。)
Video Texture Format: 特に弄らなくて大丈夫です。
Auto Start: チェックを入れます。(入れなくても動作するかもしれませんが未確認です)
URL: ここにYouTubeLiveのURLを入力します。
Playback Speed: 1で問題ありません。
Sync Type: Live Streamに変更します。
Sync Minutes: 0で問題ありません。
※URLはワールドのアップロード前に入力しておく必要があると思っていましたが、Publicの坪倉さんのワールドにURLを入力する場所らしきものがあったのでアップロード後にURLを入力する方法が存在すると考えられます。

3

Create→3DObject→Planeでスクリーンとなる平面を用意します。このスクリーンは、1で作ったVRC_SyncVideoStreamを持つ空のオブジェクトの子オブジェクトにしてください。ここでは"Screen_main"と命名します。
YouTubeLiveはこのスクリーンいっぱいに映し出されるので、縦横比を配信のアスペクト比と同じにしておくとよいでしょう。(ここでは16:9にします)
位置が定まったら、Add ComponentからVRC_VideoScreenをスクリーンに追加します。
スクリーンショット 2018-12-07 19.55.29.png
デフォルトではVideo StreamがNoneなので、親オブジェクトをここにドラッグ&ドロップします。ここではLivePlayer_mainを割り当てています。

4

新しいマテリアルを作成します。(ここでは"Screen"と命名しました)
ShaderをVideo/EmissiveGammaに変更し、タブを開いてApplyGammaにチェックを入れます。
マテリアルの設定が完了したら、忘れずにスクリーンにアタッチしておきましょう。
スクリーンショット 2018-12-07 19.57.14.png
これでスクリーンが完成です。

5

ここからはYouTubeLiveからの音声を出力するスピーカーを作っていきます。
VRC_SyncVideoStreamがアタッチされているオブジェクトの子として空のオブジェクトを作り(ここでは"LiveSpeaker_main"と命名しました)、音声を出力したい位置に配置します。Add ComponentからVRC_VideoSpeakerを追加します。

6

VRC_VideoSpeakerの中身を確認します。
スクリーンと同様にVideo StreamのデフォルトがNoneになっているので、VRC_SyncVideoStreamがアタッチされている親オブジェクトをドラッグ&ドロップします。(ここでは"LivePlayer_main"のこと)
スクリーンショット 2018-12-07 20.06.16.png
AudioSourceもひっついてくるので、Volumeなどの値を弄ることで音量を調節でき(ると思い)ます。

以上でVRC_SyncVideoStreamの設定は完了です。
配信を開始した後にインスタンスを生成してワールドに入らないと配信がスクリーンに映らないので注意してください!
スクリーンショット 2018-12-07 20.11.07.png
せっかくなので、壁に取り付けられているTVからも配信を見れるようにしました。
VRC_SyncVideoStreamの子オブジェクトとして2つ以上のスクリーン(もしくはスピーカー)を設定しても問題なく動作するようです。スクリーン間の映像や音声のズレはほぼありません。(少なくとも私は知覚できませんでした)
音量が過剰に大きくなることが予想されたので、各スピーカーのAudioSourceのVolumeの値を0.3に設定してあります。(全て1にした状態の検証を行なっていないので、効果があるかは未実証です。)

やり残したこと・今後追加するもの

・自己紹介カード
これは来場者同士の交流に使いたいです。イメージとしては手持ちの看板で、非表示のオブジェクト(自己紹介アイコン)がたくさんひっついていて、壁のトリガーで好きなアイコンをアクティブにできる、、、みたいな。
やれそうではあるんですが、ちょっとこの記事までに実装が間に合いませんでした
・1分LT用スライド
これは螺旋階段の側面にズラーーーーーっと並べる予定。うまく螺旋状に配置するのが大変そうです。あと、螺旋階段のコライダー設定がガバガバすぎて、現在1段登るごとに2%で落下する階段となっているので修正したいと思います。(200段)
・2階部分(何かにする)
これは未定、、、、忘年会のスケジュールに合わせて何か作ります。

7
3
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
7
3