MRが楽しい

MRやVRについて学習したことを書き残す

VRChatの始め方をまとめる(自作アバター登録編)

本日は VRChat の調査枠です。
VRChat で自作アバターを利用する方法についてまとめます。

前提条件として VRChat のアカウントと Unity のアカウントを取得済みの手順となります。

アバターの作成について

2万ポリゴン以下のモデルである必要があります。
また、人型アバターの動きを反映させる場合、Humanoid リグに紐づいたボーン構造が必要です。

アバターそのものの作成手順についてはこの記事では触れません。
以下で作成したホロ恋子モデルを利用します。
bluebirdofoz.hatenablog.com

Trust システムの解除

VRChat には Trust システムという成りすまし防止用のシステムがあります。
2018/5/5 以降にアカウントを作成した新規ユーザーはアバター、ワールドのアップロード制限がかかります。
この制限が解除されるまでは自作アバターのアップロードはできません。

禁止解除の条件は公開されていませんが、フレンド数とプレイ時間が関係するようです。
筆者はフレンド数 3 人。プレイ時間 5 時間ほどで解除されました。

環境の準備

以下の環境とパッケージが必要になります。
・Unity (5.6.3)
・VRChat SDK

最新の Unity には SDK が対応していないので、過去バージョン(5.6.3)の Unity を取得します。
bluebirdofoz.hatenablog.com

VRChat SDK は自身のログインページの Download から取得可能です。
[Download SDK]をクリックして VRCSDK-YYYY.MM.DD.XX.XX_Public.unitypackage を取得します。
f:id:bluebirdofoz:20181022051536j:plain

アップロードの準備

アバターのアップロードは Unity 上で実施します。
新規 Unity プロジェクトを作成します。
f:id:bluebirdofoz:20181022051544j:plain

Unity を起動した状態で、ダウンロードした VRCSDK-YYYY.MM.DD.XX.XX_Public.unitypackage を実行します。
インポートダイアログが開くので、そのまま[Import]をクリックします。
f:id:bluebirdofoz:20181022051554j:plain

インポートが完了すると、ダイアログが表示されます。
また、メニューバーに[VRChat SDK]の項目が追加されます。
f:id:bluebirdofoz:20181022051606j:plain

メニューから VRChat SDK -> Settings をクリックします。
f:id:bluebirdofoz:20181022051615j:plain

アカウント情報の入力ダイアログが表示されるので、アカウント名とパスワードを入力し、[Sign In]をクリックします。
f:id:bluebirdofoz:20181022051627j:plain

これでログインが完了し、VRChat にアバターをアップロードする準備が整いました。
f:id:bluebirdofoz:20181022051638j:plain

アバターの設定

アップロードを行うアバターを設定します。
別途作成したアバターを Unity の Assets フォルダにドロップして読み込みます。
f:id:bluebirdofoz:20181022051648j:plain

読み込んだモデルを選択し、Inspector パネルを開きます。
[Rig]タブにある[AnimationType]を[Humanoid]に設定して[Apply]ボタンをクリックします。
f:id:bluebirdofoz:20181022051700j:plain

Humanoid リグが正常に割り当てられたかどうか[Configure]ボタンをクリックして確かめます。
f:id:bluebirdofoz:20181022051710j:plain

Humanoid リグの構造については以下の記事を参考にしてください。
bluebirdofoz.hatenablog.com

ただし注意点として、VRChat は Upper Chest のリグを設定しているとアップロード時に以下のエラーが発生します。
UPPERCHEST に設定しているリグを CHEST に設定しなおすか、解除することで回避できます。

Your rig has the UPPERCHEST mapped in the Humanoid Rig.
This will cause problems with IK.

ボーンの割り当てが正しく設定出来たら[Apply]ボタンをクリックし、[Done]ボタンで閉じます。
f:id:bluebirdofoz:20181022051732j:plain

次にマテリアルの設定を行います。
デフォルトでは Standard のシェーダが設定されています。
Standard シェーダは人の肌よりも光を反射するため、人型モデルの場合は光沢が目立ってしまいます。
テクスチャの色彩をそのまま表示したい場合は Unlit -> Texture のシェーダに切り替えておきます。
f:id:bluebirdofoz:20181022051744j:plain

モデルを Hierarchy パネルにドロップして追加します。
Hierarchy パネルに配置されたモデルを選択し、Inspector パネルを開きます。
[Add Component]を開き、[VRC Avatar Descriptor]を検索して追加します。
f:id:bluebirdofoz:20181022051753j:plain

VRC Avatar Descriptor スクリプトはプレイヤーの視点の位置を設定するスクリプトです。
[View position]の値を設定し、視点の位置を決定します。
[Scene]上に灰色の球体が表示されるので、これを目安にキャラクタの両目の間辺りに設定するのが良いと思います。
f:id:bluebirdofoz:20181022051801j:plain

更に VRC Avatar Descriptor スクリプトの[Default Animation Set]で基本の男性または女性モーションが設定できます。
男性アバターの場合は[Male]、女性アバターの場合は[FeMale]に設定します。
f:id:bluebirdofoz:20181022051812j:plain

VRC Avatar Descriptor スクリプトと同時に、Pipeline Manager スクリプトが自動で追加されています。
これはアバターのIDを設定するスクリプトのようです。
新規アバターをアップロードする際は Blueprint ID は空白のままで問題ありません。
f:id:bluebirdofoz:20181022051824j:plain

以上でアバターの設定は完了です。

VRChat へのアップロード

最後にアバターのアップロードを行います。
メニューから VRChatSDK -> Show Build Control Panel を選択します。
f:id:bluebirdofoz:20181022051847j:plain

ダイアログが開きます。モデルに問題がある場合、ここでエラーメッセージが表示されます。
アップロードするゲームオブジェクトが選択されていることを確認します。
[Build & Publis]ボタンをクリックします。
f:id:bluebirdofoz:20181022051855j:plain

ビルドが完了すると、Game パネルに設定画面が表示されるので各種設定を行います。
1.[Avatar Name]にそのアバターの名称を入力します。
2.[Description]は説明文です。空欄でも構いません。
3.[Content Warnings]はアバターにセクシャル表現や流血表現などがある場合に適切なチェックを行います。
4.[Sharing]は共有設定です。個人的なアバターとして利用する場合は[Private]を選択しておきます。
5.[The above ~]の注意文を確認し、チェックを入れます。
設定が完了したら[Upload]ボタンをクリックします。
f:id:bluebirdofoz:20181022051902j:plain

アバターのアップロードの手順は以上です。アップロードにはしばらく時間がかかります。
アップロードが完了すると、ダイアログが表示されます。
f:id:bluebirdofoz:20181022051912j:plain

アップロードしたアバターの利用方法

アップロード完了後、VRChat にログインします。
システムメニューから[AVATAR]画面を開くと、アップロードしたアバターが選択できます。
f:id:bluebirdofoz:20181022051945j:plain

VRChatの始め方をまとめる(初期設定編)

本日は VRChat の調査枠です。
設定しておくと VRChat が少し楽しくなる初期設定があるのでまとめます。
version w_2018.3.3 での設定項目になります。

設定手順

VRChat にログインしたら、Esc キーでクイックメニューを表示します。
[Settings]ボタンを選択し、[Settings]画面を開きます。
f:id:bluebirdofoz:20181021223823j:plain

[Comfort and Safety]パネルの[PERSONAL SPACE]のチェックを外しておきます。
これが有効になっていると、一定距離より近い他人のアバターが非表示になってしまいます。
かなり近い距離で触れ合えるようになるので、VR を利用していると没入感が向上します。
f:id:bluebirdofoz:20181021223830j:plain

次に[SAFETY]画面を開きます。
[Shield Level]の選択肢を[Normal]から[None]に設定しておきます。
f:id:bluebirdofoz:20181021223838j:plain

[Shield Level]の設定項目は Version w_2018.3.2 から追加されました。
本項目がデフォルトの Normal だと、フレンドではないまたは TrustedUser 以外のアバターのパーティクルやシェーダが無効化されます。
そのままだと VRChat にはシェーダやパーティクルを使って視覚的に面白いアバターを作っているユーザがいますが、それらの特殊効果が見えなくなってしまいます。
VRChat を最大限楽しみたいのであれば有効にしておきましょう。

ただ場合によっては非常に処理が重くなる要因にもなります。
不要と感じたら無効化しても、相手のアバターはデフォルトシェーダで表示されるので問題ありません。

VRChatの始め方をまとめる(アカウント作成とインストール編)

先日初めて VRChat を試してみました。折角なので VRChat の始め方についてまとめておきます。
前提条件として Steam のアカウントが作成済み、Steam のアプリケーションがインストール済みの手順となります。

アカウントの作成

VRChat にログインするには VRChat の公式ページで自身のアカウントを作成するか、steam のアカウントを利用します。
ただし steam のアカウントを利用する場合、自作のアバターやワールドのアップロードを行えません。
アバターのカスタマイズなどを行いたい方は VRChat でアカウントを作成しましょう。
vrchat.net

公式ページの LOGIN をクリックしてログインページに移動します。
f:id:bluebirdofoz:20181020221528j:plain

[Register]ボタンを選択すると、登録画面が開きます。
f:id:bluebirdofoz:20181020221538j:plain

各項目に登録情報の入力を行います。

a.[CHOOSE A USERNAME:]に利用するユーザ名を設定します。
  他のユーザが既に利用済みのものは設定できません。後から変更はできません。
b.[EMAIL:]に利用する Email アドレスを入力します。
  [RE-ENETER EMAIL:]には確認のため、 同じ Email アドレスを再入力します。
c.[CHOOSE PASSWORD:]に利用するパスワードを入力します。
  [RE-ENTER PASSWORD:]には確認のため、同じパスワードを再入力します。
d.[DATE OF BIRTH:]には自身の誕生日を入力します。
e.[I HAVE READ AND AGREE TO THE TEAMS OF SERVICE]は利用規約に関する同意です。
  [TEAMS OF SERVICE]から利用規約ページを確認し、チェックボックスにチェックします。
f.[KEEP ME UP-TO-DATE WITH THE AWESOME POWER OF YOUR EMAILS!]はアップデートのメール通知受け取りに関するものです。
  通知が不要であればチェックしなくても問題ありません。
g.[私はロボットではありません]は BOT 確認のチェック項目です。チェックを行います。

項目の入力が完了したら、最後に[REGISTER NOW]ボタンをクリックします。
f:id:bluebirdofoz:20181020221604j:plain

登録した EMAIL アドレスに登録確認のメールが送られてきます。
届いたメールのリンクページを開くと登録が完了します。
登録が完了したら[Okay. I've verified my email.]ボタンをクリックしてログインページに移動します。
f:id:bluebirdofoz:20181020221614j:plain

ログインページで[Username/Email:]に登録した EMAIL アドレスまたはユーザ名を入力します。
[Password:]に登録したパスワードを入力します。[LOGIN]ボタンをクリックしてログインします。
f:id:bluebirdofoz:20181020221622j:plain

以下のログインページが開いたら VRChat のアカウント作成は完了です。
f:id:bluebirdofoz:20181020221629j:plain

VRChat のインストール

次に VRChat のアプリケーションをインストールします。
以下の steam にある VRChat のページを開きます。
store.steampowered.com

ページ中央にある[ゲームをプレイ]ボタンをクリックします。
f:id:bluebirdofoz:20181020221645j:plain

Steam のアプリケーションがインストール済みかどうか確認ダイアログが開きます。
インストール済みであれば[はい、Steam はインストールされています]を選択します。
f:id:bluebirdofoz:20181020221652j:plain

未インストールであれば[いいえ、Steam をインストールする必要があります]を選択し、手順に従って Steam をインストールします。
Steam のインストール手順については以前、別記事にてまとめています。
bluebirdofoz.hatenablog.com

Steam のアプリケーションが起動します。
[アカウント名]にSteam のアカウント名を、[パスワード]にパスワードを入力します。
[ログイン]をクリックして Steam にログインします。
f:id:bluebirdofoz:20181020221714j:plain

ログインすると、そのまま VRChat のインストール案内が始まります。
[インストール先のドライブを選択:]でインストール先を選択し、[次へ]ボタンをクリックします。
ショートカットはお好みで作成してください。
f:id:bluebirdofoz:20181020221725j:plain

利用規約が表示されるので[同意する]ボタンをクリックします。
f:id:bluebirdofoz:20181020221732j:plain

ダウンロードが開始します。[ダウンロードの管理]でダウンロードの状態を確認できます。
f:id:bluebirdofoz:20181020221742j:plain

ダウンロード完了後、Steam のアプリケーションを起動すると[ゲーム]欄に VRChat が追加されています。
ページを開いて[プレイ]ボタンをクリックします。
f:id:bluebirdofoz:20181020221749j:plain

起動時に、VRモードで起動するかデスクトップモードで起動するか選択できます。
モードを選択して[プレイ]をクリックします。
f:id:bluebirdofoz:20181020221755j:plain

デスクトップモードで起動した場合、以下のように VRChat のアプリケーションが起動します。
f:id:bluebirdofoz:20181020221804j:plain

以上で VRChat のインストールは完了です。

CLIP STUDIOで絵を左右対称な状態に同期する

本日は CLIP STUDIO の技術調査枠です。
前回記事の関連記事です。
bluebirdofoz.hatenablog.com

前回のようなスナップ設定のミスをすると、絵が左右非対称な状態になってしまいます。
今回は左右非対称となった絵を左右対称な状態に同期する方法についてです。

消しゴムツールによるスナップの失敗で左右非対称となったサンプルを元に手順をまとめます。
f:id:bluebirdofoz:20181019091038j:plain

まず、左右の対称化を失敗してしまった方の絵を削除します。
選択範囲による削除を行いますが、そのままだと削除も左右対称の影響を受けてしまいます。
メニューから 表示 -> 特殊定規にスナップ のチェックを外し、対称定規を一時的に無効化します。
f:id:bluebirdofoz:20181019091046j:plain

選択範囲で削除を行う領域を選択し、[消去]ボタンをクリックします。
このとき、複数レイヤで同期を行いたい場合は対象とするレイヤを選択しておきます。
f:id:bluebirdofoz:20181019091053j:plain

メニューから 編集 -> 変形 -> 左右反転 をクリックします。
f:id:bluebirdofoz:20181019091104j:plain

ツールプロパティで[元画像を残す]のチェックボックスを有効にします。
次に[回転の中心]を[自由位置]に変更します。
回転の中心を示す十字アイコンをドラッグし、グリッド線に基づいてキャンバスの中央に配置します。
改めて[左右反転]ボタンをクリックすると、絵が左右反転されて表示されます。
f:id:bluebirdofoz:20181019091116j:plain

このとき、[拡大率]の項目が[横:-100]、[縦:100]など縦横比が変わっていないことを確認します。
問題がなければ、[確定]ボタンをクリックして変更を確定します。
なお、本操作も対象レイヤを選択することで複数レイヤを同時に編集可能です。
f:id:bluebirdofoz:20181019091123j:plain

以上でキャンバスを左右対称な状態に同期することができました。
再びメニューから 表示 -> 特殊定規にスナップ のチェックを行い、対称定規を有効化に戻しておきます。
f:id:bluebirdofoz:20181019091130j:plain

CLIP STUDIOで対称定規に消しゴムをスナップする

本日は CLIP STUDIO の技術調査枠です。
以前、CLIP STUDIO で上下左右対称なアイコンを作成する方法をまとめました。
bluebirdofoz.hatenablog.com

今回は CLIP STUDIO で対称定規を用いる際の注意事項についてです。

まずは前回記事の手順に従い、左右対称な絵を描くことができるキャンバスを用意します。
f:id:bluebirdofoz:20181018015211j:plain

ここで消しゴムツールを片方の絵に使ってみます。
すると、消しゴムによる変更は左右対称になりません。
f:id:bluebirdofoz:20181018015217j:plain

これは消しゴムツールがデフォルトでは「スナップ可能」の設定が無効になっているためです。
消しゴムによる編集も左右対称にしたい場合、以下の設定を行います。

1.消しゴムツールを開いた状態で、メニューから ウィンドウ -> サブツール詳細 を有効化する。
f:id:bluebirdofoz:20181018015222j:plain

2.[サブツール詳細]ウィンドウが表示されます。[補正]タブを開き、[スナップ可能]にチェックを入れます。
f:id:bluebirdofoz:20181018015229j:plain

これで消しゴムが対象定規にスナップされるようになります。
試しに編集を行うと、消しゴムによる変更が左右対称に反映されました。
f:id:bluebirdofoz:20181018015237j:plain

以下の記事で紹介したUV展開と合わせて利用すると、綺麗にテクスチャが作成できます。
bluebirdofoz.hatenablog.com

Visualstudioのテスト証明書の更新を行う

本日は VisualStudio の調査枠です。
Visualstudioの自己証明書の更新を行う方法についてです。
以下の記事の関連項目になります。
bluebirdofoz.hatenablog.com

VisualStudioでアプリパッケージを作成しようとすると以下のエラーが発生することがあります。
「指定された証明書は有効期限が切れています。証明書の更新の詳細については……」
f:id:bluebirdofoz:20181017230822j:plain

VisualStudioで生成される既定の証明書は、作成日の1年後に失効します。
証明書が失効した場合、マニフェストデザイナーを使用して、証明書を再作成する必要があります。

以下の手順で証明書を更新します。
1.appxmanifest ファイルのショートカットメニューを開き、[ファイルを開くアプリケーションの選択]を選択します。
f:id:bluebirdofoz:20181017230835j:plain

2.ダイアログが開くので[アプリケーション マニフェスト デザイナー]を選択して[OK]ボタンをクリックします。
f:id:bluebirdofoz:20181017230849j:plain

3.[マニフェスト デザイナー]が開くので[パッケージ化]タブを開きます。[証明書の選択]ボタンをクリックします。
f:id:bluebirdofoz:20181017230901j:plain

4.[証明書の選択]ダイアログが開きます。 [証明書の構成]プルダウンから[テスト証明書の作成]を選択します。
f:id:bluebirdofoz:20181017230910j:plain

5.[テスト証明書の選択]ダイアログが開きます。[発行者共通名]と[パスワード]を設定して[OK]ボタンをクリックします。
f:id:bluebirdofoz:20181017230920j:plain

6.[証明書の選択]ダイアログで[OK]ボタンをクリックします。
f:id:bluebirdofoz:20181017230928j:plain

以上で、新しい有効期限で証明書が再作成されます。

Blenderでミラーモディファイアを適用したまま左右別々のUV展開を行う

本日は Blender の技術調査枠です。
Blenderでミラーモディファイアを適用したまま左右別々のUV展開を行う方法についてまとめます。
f:id:bluebirdofoz:20181016004934j:plain

サンプルとして、以下のようなUV球にミラーモディファイアを適用したオブジェクトを作成します。
f:id:bluebirdofoz:20181016004941j:plain

まずはそのままUV展開を行います。
f:id:bluebirdofoz:20181016004947j:plain

この状態で以下のような画像をテクスチャとして反映してみます。
f:id:bluebirdofoz:20181016004953j:plain

結果、ミラーされたメッシュ側にも同じUV領域のテクスチャが反映されてしまいます。
f:id:bluebirdofoz:20181016004959j:plain

これではオブジェクトに左右非対称のテクスチャを反映できません。
左右別々のUV展開を行えるよう設定を行います。
ミラーモディファイアの「テクスチャ:」項目から[U]のチェックボックスをONにします。
f:id:bluebirdofoz:20181016005007j:plain

すると、ミラーされたメッシュ側はテクスチャの左側を参照するようになります。
「UV/画像エディタ」の表示パネルにある[モディファイアー]を有効にすると、ミラー側が参照するUVマッピングも確認できます。
f:id:bluebirdofoz:20181016005017j:plain

因みに[V]のチェックボックスをONにすると、上下対象にテクスチャを参照するようになります。
オブジェクトによって使い分けましょう。
f:id:bluebirdofoz:20181016005022j:plain

上手く使えばUV展開を行う際に、ミラーモディファイアを適用する必要がなくなります。
複雑なモデルをモデリングする際は手戻りしやすいという点で便利です。

記事の最初のHoloLensは今回の手法で作成してみました。
HoloLensの中央部分がUVの切れ目になっていますが、テクスチャを上手く作成すれば気になりません。
f:id:bluebirdofoz:20181016005029j:plain