Unity同士で別のPCにセンサーデータや入力データを送りたい時のMirrorを使うサンプル

こんにちは。 SHOWROOM xR Lab エンジニアの @izm です。

Unityを使ってハードウェア絡みのプロジェクトを作っていると、例えば端末を2台用意して

• PC1: メインPC、表示を行う
• PC2:サブPC, ViveTrackerをぶら下げてPC1にデータを送る

というようなことがしたくなります。

特に OculusTouchは1PCに2個までしかペアリング出来ないとか、Noitom Hi5は1PCに1個しかペアリング出来ないとかの制限があったりするため、こういう需要は結構あります。 他にはOculusGoに外部機器を無理やり外付けするかのような処理、などでも使い道がありそうです。

一番定番の方法としてはUdpClientを使ってSendとReceiveをするのですが、双方向性を担保したり、GUIを拵えたりするのが結構面倒くさいです。

このエントリは、Unityアプリ同士でこういった通信を（比較的）簡単に実現する手法を解説します。
普通のUNETやPhotonを使ったネットワークゲームを作る場合は、同一のシーンであることを前提にした各種チュートリアルがありますが、今回の用途だと送り手側と受け手側で、別のシーンを使う事が多いと思います。
なので今回のサンプルも送り手と受け手が別シーンという前提です。（もちろん同一シーンでも動きます！）

ネットワークライブラリにMirrorを使う

通信するためのネットワークライブラリにはUNET後継のMirrorを使います。

assetstore.unity.com

MirrorはほとんどUNETと同じような使い勝手で、別途NobleConnectなどのRelay&NAT PunchThroughソリューションと組み合わせることで、インターネット越しに処理を送ることも出来ます。

つまり、LTE回線のiPadをコントローラとして使ったVJアプリ、とかお客さんが手元のスマホから情報を送る、などの使い道もあります。

(NobleConnectやMirrorの説明については拙blogエントリにまとめてあります)

izm-11.hatenablog.com

単純なセンサー情報を送るためのMirrorの使い方

最初に注意点

大事な点を一個先に書きます。シーン上で NetworkIdentityとNetworkBehaviourを使わない ようにしましょう。

なぜかというとUNETやMirrorのNetworkIdentityというのはネットゲームを想定した作りになっていて、

PC1とPC2が 同一シーンに置いた ゾンビ発生器 の発生確率パラメータを同期する、などの時に有用なのですが、同一シーン同士でないと意味がありません。

今回のように送り手と受け手が別シーンになると、NetworkIdentityの同一性チェックが失敗します。 (シーンID+GUIDが完全一致していないと動かないので)

代わりに MonoBehaviour内でNetworkClient.SendとかNetworkServer.isConnected みたいに直接staticなNetworkClientとかNetworkServerクラスを叩いてください。

//PhotonのPhotonViewは別シーンでもPhotonViewIDを揃えれば動いた気もします！

具体的な作り方

前置きが長くなりましたが作り方です。

送るデータはこんな感じでクラス定義します。 MessageBaseクラスを継承するのを忘れないようにしましょう。

SendData.cs

[System.Serializable]
public class SendData:MessageBase{
    public string name;
    public Vector2 axisData;
}

送り手.unity

送り手側はクライアントとして振る舞います。

NetworkManagerを置いてNetworkManagerHUDを付けておきます。

送り手スクリプトは別GameObject(Sender)を作って SendTest.csを以下のように書きます。簡単！！！

public class SendTest : MonoBehaviour
      void Start()
        {
           
            //ここで、センサーの初期化をする
            //DoSomethingInitSensors();

        }

     void Update()
        {
            //接続してない時はセンサーデータを送らない
            if (NetworkClient.isConnected)
            {
                //ここでSendDataを作る、センサー情報を差し込む
                SendData data = new SendData();
                data.name = "Hoge";
                data.axisData= new Vector2(Random.Range-3f,3f),0);
            
                //NetworkIdentityとか無視して、直接送信する！！！
                NetworkClient.Send(data);
            }
        }
}

受け手側.unity

受け手側はサーバとして振る舞います。 NetworkManagerを置いてNetworkManagerHUDを付けておきます。

受け手スクリプトは別GameObject(Receiver)を作って ReceiveTest.csを以下のように書きます。

public class ReceiveTest : MonoBehaviour
{
        public static Action<SendData> OnReceivedSensorData;
        
      void Start()
        {
           
            //サーバ側でイベントデータを登録しておく
            NetworkServer.RegisterHandler<SendData>(ReceivedInfo);
        }

        private void ReceivedInfo(NetworkConnection conn, SendData data)
        {
            
                Debug.Log(JsonUtility.ToJson(data));
            
                //ここでActionを生やす
                OnReceivedSensorData?.Invoke(data);
            
          }
}

受け手シーン側では

ReceiveTest.OnReceivedSensorData+= 何かAction

みたいな感じで使いましょう。

注意点

Playerは念のためEmptyPlayerみたいなprefabを作る ようにしてください。NetworkManagerのAutoSpawnPlayerをオフにするのは、要らぬバグを踏むリスクがあります。

また、送るカスタムメッセージ定義はGenericsを含められません。JsonUtilityでシリアライズ可能でも、Mirrorのカスタムメッセージ定義では失敗します。 つまりListはダメで string[] はオッケーです。このあたりは最初にテストを書いてください。

最後に、C++アプリとUnityの通信とか、Unity同士ではない組み合わせだと破綻するので注意してね！！！

サンプルプロジェクト

コントローラの入力を送る最小サンプルプロジェクトを以下に公開しています。
GitHub - neon-izm/MirrorOtherSceneServerClientSample

まとめ

毎回UdpClientやNetworkReaderをスレッド分けて書くのも大変なので、こういったお手軽通信方法を覚えておくと、モックを作ったりデモを作る時に便利です。

今回使用したMirrorは情報自体はそれほど多くないものの、UNETと基本的な書き方は変わらないです。そのためUNET解説記事を参考にすることが出来るので、安心して使えると思いました。

SHOWROOM xR Labはリアルタイムネットワークで苦しんだ経験があるエンジニアも募集、歓迎しています。 よろしくお願いします。お問い合わせはお気軽に！

【xR事業部】Unityエンジニア | SHOWROOM株式会社

try! Swift Tokyo 2019 に行ってきたお話（#tryswiftconf）

こんにちは！ SHOWROOMのiOSアプリを担当している 植村 (@working_doggy) です。

2019年3月21~22日に渡って行われた、「try! Swift Tokyo 2019」 に参加してきました。 今年の開催場所は ベルサール渋谷ファースト です。去年は ベルサール新宿グランド でしたね。
※ SHOWROOM株式会社はカンファレンスや勉強会等の参加費を積極的に支援してくれます！

僕は２週間ぐらい前にチケットを購入したのですが、その１週間後には既にチケットは売り切れでした。
ギリギリで購入しようと思ってたので、早めに購入することを忘れないようにしないとですね。危ない危ない...。

それでは本題へ！

try! Swiftとは

try! SwiftはSwift言語での開発における最新の応用事例について集まる国際コミュニティです。このイベントは世界中から人々が集まり、Swiftのスキルを向上させるための、高度な知識やテクニックを共有し、協力しあうことを目的としています。

ざっくり説明すると、こんな感じです！

• 世界で開催される国際的なカンファレンス
• 主に日本(Tokyo), アメリカ(New York)で開催されていて、過去にはインドのBangaloreやSan Joseでも開催
• スピーカーは日本人問わず、様々な国の有名な方が参加（中にはAppleで働いている人も）
• シングルトラック（他の公演は無く、大きな公演１つのみ）で、大体が英語セッション
• 英語が聞き取れない人でも翻訳機があるため、安心して聞く事が出来る
• 海外の方が多いので、まるで海外カンファレンスに来たかのような雰囲気を味わえる

毎年そうだと思うのですが、海外の方が多くて驚いてしまいます。

www.tryswift.co

ブース

色々な企業がブースを出していました。
担当の方とお話をしたり、ノベルティをもらえたり（ステッカー、お菓子等）します。
やはり、iOSを担当している人と直に話せるので、それが大きいと思います。

セッション

どのセッションもオススメしたいのですが、数多くのセッションがありました。 なので、今回は個人的にお気に入りのものをピックアップして書いていこうと思います。

⚡️🎤限定的なimportの明示とその効果

普段、importは使っていると思いますが、そのimportについて詳しく説明したセッションでした。
限定的なimportをあまり業務で使ったことは無かったので、今後そういう場面があったら使う、良い機会になりました！
また、Basic import vs Kind import のビルド時間計測のお話が中でも面白くて、結論的に Basic import のが早いと...。
つまるところ、「普段通り書いた方がいい」というところも良かったです。笑

speakerdeck.com

ARKitのアプリを作ろう

ARKitに関しては、僕自身あまり使った事がなかったのですが、そんな僕でも分かるセッションでした。
サンプルアプリは、ゲームの「Portal」の様な空間を作るARアプリを作っていました。あのゲーム面白いですよね。
ARアプリを作るに当たってのお話がメインでした。
エレベーターの様な動く場所では使わないで欲しい旨を伝えるやバッテリーを多く消費するので、バックグラウンドに入ったら解放する 等、注意する事についても話していました。
面白いと思うので、とりあえず触ってみるのも良さそうですね！

t.co

魔法の法則

このセッションはコード部分のお話というより、意識することについてのお話だったので感想として書きます。
タイトルから「魔法...？」ってなると思うのですが、聞いている内に「ああ、そういう繋げ方ね」となるのが面白いところですね。
個人的に、公演の中でいくつかエモい名言だと思った言葉がありました。
十分に高度な技術は魔法と区別がつかない と できないことは出来ることよりも面白い は中でも心にきましたね。笑
所々、話が難しくて分からなくなってしまう部分も多々ありましたが、まとめにはこう書いてありました。

魔法の法則

1. 作者が魔法で満⾜のいくように葛藤を解決する能⼒は、読者がその魔法 をどれだけよく理解しているかに正⽐例します。
2. 制限は権力よりも重要です。
3. 新しいものを追加する前に、すでに持っているものを拡張してください。

※ 資料は公開されていなかったみたいなので、文章のみになります。

Swift Type Metadata

今年高校を卒業という若さ、トークは英語、そして内容もCoreな部分のお話でした。
あの若さで本当に凄い...。現在はメルカリでインターンをしているみたいですね。
僕自身、Type Metadata については知らないことが多かったので、知見になりました。

speakerdeck.com

モバイルのデザインシステムを構築する

スピーカーさんは海外の方のようで、声が枯れていたのですが前日にカラオケを楽しみすぎたらしいです。笑
デザインをどのようにコードベースに落とすかを、わかりやすいスライドで解説してくださりました。
業務でやっている内容に近いこともあって、「なるほど」と思わされることも多々。

UIColorをAssetsとして定義出来るのは初耳でした。近い内、SHOWROOMのアプリにも組み込んでみます。

speakerdeck.com

SwiftCheckで始めるProperty-based Testing

UnitTestについてのセッションで、SwiftCheckを使ったProperty-basedのことを公演してくださりました。
SwiftCheckは、HaskellのQuickCheckを元に作ったライブラリのようです。
乱数に頼るのは、言い換えると確立に頼ったものであるため最初は抵抗感があった と言っていたのですが、共感できますね。
ですが、乱数によってテストに漏れがないかの不安を軽減出来るので、そこはいいですよね。

t.co

お弁当

３種類の内から選んで食べる感じでした。
お弁当がいくつか余っており、２つ３つと食べる人も居たようですね。笑

2日目 最後のParty

最後はtry! Swiftお決まりのParty！
去年もですが、豪華なバイキング形式です。
海外の方が多いのもあって、日本料理というよりは洋食がメインでした。
中でも、マスコットキャラクターが書かれた大きなケーキは手が込んでいました。

また、ここでも開発者の方々と交流が出来ます。
お酒を飲みながら、ラフに話せるのですぐ仲良くなれちゃいます。

最後に

という感じで、色々見て楽しんで来ました！
毎年行われているので、来年は参加してみては如何でしょうか。

また、SHOWROOM株式会社は iOSエンジニア を募集しております！
同じ仲間になって働いてみませんか！

LINE ClovaからSHOWROOMの配信操作ができる配信者向けツールを作ってみた

こんにちは。SHOWROOM Tech Studioインターン生の伊藤です。

昨年末に社内でスマートスピーカーハッカソンが開かれるなど、スマートスピーカーを使用してSHOWROOMをより便利にできないかという取り組みをしていました。 今日はその成果物についてブログを書いて行きたいと思います。

どんなアプリか

SHOWROOMの配信操作 (配信スタート/ストップ、テロップの変更) をClovaに話しかけるだけで可能にするアプリ

(リリースするかは未定です)

誰の何を解決するか

• 楽器を使用した配信で、両手が塞がっている配信者さん

• ダンスなどのパフォーマンスでカメラ(配信端末)から離れたところで配信する配信者さん

• カメラに顔を近づけることが億劫な配信者さん

• その他、何らかの理由で手を使用することができない配信者さん(配信中に手が汚れる等)

などが、「声だけで」「配信端末から離れた場所から」配信操作ができるようになる。

技術仕様

Python 3.7

Flask 1.0.2

line-bot-sdk-python 1.8.0

clova-cek-sdk-python 1.0.1

シーケンス図

利用手順と技術解説

1. Clovaスキルのインストール

LINE Clovaアプリのスキルストアから「SHOWROOM 配信サポート」というスキルをインストール(利用開始)します。

ちなみにClovaスキル自体は、GUIツールを使って、1行もプログラムを書くことなく作成可能になっていました。

具体的には、まず「カスタムスロットタイプ」と呼ばれる「Clovaが認識できる単語」を設定します。

その後、カスタムスロットタイプを使用して、実際にトリガーとなる文章を設定していきます。

この文章がインテントと呼ばれ、ユーザーが Clovaに話しかけると、アプリのサーバーに、「呼ばれたインテントの種類」と「そのインテントに含まれるカスタムスロットタイプ」をパラメータとして保持したリクエストが飛んでくるという仕組みになっています。

2. LINE Botを友達追加

Clovaスキルの詳細画面もしくはQRコードなどからLINEのメッセンジャーアプリで、「SR配信者向けBot」を友達追加します。

アカウント連携メニューは、Rich menuという機能を使用して表示しており、この機能は、画像上のユーザーがタップする場所によって、異なるリクエストをサーバーに飛ばすことができると言うものです。 詳細はLINE Messaging API 公式リファレンスをご覧下さい。 今回はPostback messageを使用しました。

3. SHOWROOMとのアカウント連携を行う

アカウント連携メニューをタップすると、SHOWROOMとのアカウント連携用のリンクが送られてくるので、リンクをタップするとSHOWROOMのOAuth認証に遷移します。

SHOWROOMのID、パスワードを入力してログインし、このBotアプリとのアカウント連携を許可します。

これでSHOWROOMとのアカウント連携完了です。

チャット画面に戻ると、Rich menuがアカウント連携済みのメニューに変更されているようにしています。

また、Clovaスキル起動時にRefresh tokenの利用によってAccess tokenが自動更新される処理を以下のように書いているため、アカウント連携済みでRefresh tokenが有効な状態であれば、いつでもClovaに話しかけるだけで配信サポートが利用できます。

@clova.handle.launch
def launch_request_handler(clova_request):
............
............

    if user_authorization and user_authorization.access_token_expired_at < now:
        refresh_token = user_authorization.refresh_token
        headers = {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
        .................
        .................
        .................

        user_authorization.access_token = access_token
        user_authorization.access_token_expired_at = access_token_expired_at
        user_authorization.refresh_token = refresh_token
        db.session.add(user_authorization)
        db.session.commit()

このSHOWROOMとのアカウント連携の細かい実装は、弊社エンジニア シミズさんの以下の記事が詳しいので、是非こちらも読んで見て下さい。

tech.showroom.co.jp

4. Clovaに話しかける

以下の動画のように「Clova、配信スキルを開いて」と話しかけてスキルを起動し、「配信を開始して/終了して」「テロップをコメント下さい！に変更して」などと指示をすることで配信操作が行えます。

youtu.be

また、操作の指示に対してClovaが返事をしてくれるのと同時に、LINE Botからも以下のように操作結果がメッセージで通知されるようになっています。

Clova開発してみた所感

良かった点

ClovaのVUI (Voice User Interface) のみからSHOWROOMとのアカウント連携を行うのは困難だと判断し、LINE Botから初めのアカウント連携を行う設計にしました。

Userは基本的には、LINE BotもClovaも同じLINE Accountを使用しているため、Bot側からLINE AccountのIDを取得すれば、その IDでClovaも操作できます。

課題

前述した通り、Clovaのスキル作成は、事前に

• ⑴ カスタムスロットタイプという「Clovaが認識できる単語」
• ⑵ Intentという「予想されるUserからの発話」

を設定しておかなければならない、つまり、Userの発言を変数として扱うことが出来なかったため、テロップの内容をUserが自由に変更することは実現できませんでした。

今回のアプリは、事前に「コメント下さい！」「初見さん歓迎！」「ガチイベ中！」などの文を設定しておいて、その中からのみテロップを作成・変更できるという仕様になっています。

最後に

今回作成したアプリは、SHOWROOM、LINE Clova、LINE Botと、多くのサービスとの連携が必要だったため、Open ID Connectなどの認証認可周りの理解を深めることができました。

一方で、スケーラビリティなどの課題があるため、このアプリをそのままリリースすることはできないです。 今後は、スケーラビリティのあるアプリを作れるようにインフラ周りの勉強もして行きたいと思います。

VRoidStudioでVRM形式のモデルを作る【モデルデータの軽量化編】

こんにちは。
SHOWROOM xR Labインターン生のはいえろです。
前回まで、４記事にわたりVRoid Studioでのモデル製作方法について記載してきました。
最終記事である今回は、モデルデータの軽量化について簡単に書きます。

データ軽量化方法

気が付くと作り込みすぎてポリゴン数がすごいことに・・・。
その場合のポリゴン数軽減方法をご紹介します！
服や体、顔のパーツについては変更ができないため、「髪」の部分で軽量化しましょう。
髪のパラメーターをみてください。

軽量化できるのは主に２つ
・滑らかさ
・断面形状

まずは滑らかさから

あまり見かけは変わっていないのに、「512」ポリゴン減りました！

続いて断面形状

こちらもあまり見かけは変わっていないのに「192」ポリゴン減りました！

こんな感じで、場所に合わせて形状や滑らかさを調整していきましょう！

ちなみに「比較的まっすぐなところ」は
・断面形状：直線
・滑らかさ：10
くらいでも問題ありません
今回の場合でいうと、前髪と後ろ髪あたりですね

逆に「細かく曲がっているところ」は
・断面形状：三角形、底なし三角形
・滑らかさ：20
くらいがおすすめです
今回の場合は編み込み部分になります 。 例えば、もともと滑らかさ「25」でこうだったものが「10」にすることでこうなります。

また、「頭から離れていて裏側もよく見えるところ」は
・断面形状：ひし形、三角形
にすると、きれいに見えます。
今回の場合は輪郭に沿った部分の髪になります 。

最後に「細かくひねっているところ」は
・滑らかさ：高め
にしましょう。
今回は三つ編み部分は他とくらべ少し高めに設定しています。
また、「つの」は「50」とかなり高いのですが、
「15」にするとこんなにカクカクとしてしまいます・・・。

場所に合わせて調整していきましょう！

まとめ

ということで、ユニコーンの女の子のモデル「ゆにこーんちゃん」が完成しました！
実際にVRoid Hubに投稿しているので、見てみてください！

hub.vroid.com

VRoid Studio気になった方はぜひ触ってみてください！
最後までお読みいただきありがとうございました！

VRoidStudioでVRM形式のモデルを作る【髪の毛を利用した小物編】

こんにちは。
SHOWROOM xR Labインターン生のはいえろです。
今回は、前回VRoid Studioで製作したモデルに髪の毛を利用してアクセサリーやしっぽを作ろうと思います。

髪で髪以外のものを作ってみる

髪を描く際に設定した「手描きガイド」ですが、あれをうまく設定すると髪以外のものを作ることができます。
今回はユニコーンということで「つの」と「みみ」。

「みみ」はガイドを上にひっくり返るまで緑いろの点を移動させます。

髪は「ガイドの上」にしか描くことができないので、この場合、ガイドの「内側」から髪を描くことになります。

耳の形はこう↓

底なし三角形を使用することで耳の丸みをだし、先端がきゅっと窄まるかたちに設定しています。

続いて「つの」。
これも「みみ」同様にガイドを変形させ、一部分に線をひきます。

その後、具合を見ながらパラメーターの「ひねり（強さ）」を設定します。

また、滑らかな「つの」になるよう、「滑らかさ」も大きめに設定します。

すると、ユニコーンらしいくるくるとした「つの」ができました！

他にも、
こんなお花のヘアアクセサリーや

ピアスも作ることができます！

しっぽを作る

外部ツールのBlenderとUnityを使用することで、「しっぽ」を作ることができます

１. 「髪の毛」でしっぽを作る

髪の毛を描くときに使用した「手描きガイド」を腰の位置まで下げ、そこにしっぽを描きます。

ここで揺れものボーンも設定します

▼しかしこの状態で、揺れものボーンをつけると、「髪の根本（描き始め部分）は頭のボーンに追従する」ため、キャラクターを動かすと頭の動きと連動してしまいます。

そのため、一度エクスポートをしてBlenderで調整します。

２. Blenderでウェイトを塗りなおす

VRoid StudioからVRM形式でエクスポートしたら、Blenderへインポートします。
▼BlenderへVRMをインポートするにはアドオンが必要になりひと手間かかるのですが、こちらの記事が大変わかりやすいです

https://www.cg-method.com/entry/blender-import-vrm/

Blenderへインポートできたら、
・しっぽの付け根（髪の毛の描き始め部分）にのっているHeadのウェイトを消す
・しっぽの付け根（髪の毛の描き始め部分）にSpineのウェイトを塗る
をします！

この後VRMでエクスポートしたいのですが、2019年2月現在だとおそらくエラーがでてしまいます。
そのため一度FBXでエクスポートし、Unityでさらに設定しましょう！

3. Unityで再設定する

UniVRMがインポートされたUnityに、BlenderからFBX形式でエクスポートした３Dモデルを読み込みます。
読み込んだFBXデータをSceneのHierarchyにもっていくと、元の見た目と異なっているでしょう。
　　

マテリアルや情報がすべて抜けてしまっているからです。
なので、まずはマテリアルを元に戻しましょう。

マテリアルは「VRMのマテリアルをFBXに割り当てる」ことになります。
まずはBlenderで編集していない「VRoid StudioからエクスポートしたVRMモデル」をUnityへインポートします。
VRMモデルがあるフォルダを開くと、中にマテリアルフォルダがあります。
今回の場合は「unicornchan3.Materials」です。

FBXデータをクリックするとInspectorビューに色々と表示されるので、「Materials」のタブに移動します。
「unicornchan3.Materials」の中にあるマテリアルをFBXデータの「Remapped Materials」の同じ名前のところへドラッグ&ドロップしていきましょう。

すべていれたら右下の「Apply」をクリック。
するとマテリアルが元に戻りました！

最後にしっぽのボーンを腰のボーンの子にして終了です。
しっぽのボーンは髪として作っているため、「skelton」の中の「J_Bip_C_Head」の中にあります。
その中からしっぽにあたるボーンを探して、「J_Bip_C_Spine」にドラッグ&ドロップで子にしましょう。

　　

一度VRMでエクスポートします。
UnityからVRM形式でエクスポートする方法は以下のページを参考にしてください。 UniVRMというUnitypackageをUnityへインポートしておく必要があります。

dwango.github.io

ちなみに、インポートするUniVRMのバージョンは、2019/2/9現在だと 現行のVRoid Studioから生成されるVRMと同じバージョンであるver0.44だと安全です。

次に、エクスポートしたVRMデータを再びUnityへインポートします。
もう一度Unityに読み込むという作業がポイントです。
VRMSpringBoneの設定などが抜けてしまっていないかを確認して完成です！

これで製作方法に関しての話は終わりです。
次回で最後ですが、モデルデータ軽量化について書いてみようと思います。

VRoidStudioでVRM形式のモデルを作る【体編】

こんにちは。
SHOWROOM xR Labインターン生のはいえろです。
VRoid Studioでのモデル製作、前回は髪型の編集について書きました！
今回は体の編集から服、最後に撮影までを書きたいと思います。

体型編集

体型と体のテクスチャを調整しましょう！
今回は先に服を変更して「ワンピース」になっています。
次の章で「ワンピース」への変更方法を紹介しています！

１. テクスチャを変える

肌テクスチャによって見え方が変わります。
例えば、デフォルト画像はよく描き込まれていて立体感がありますが、使用するテクスチャによってはのっぺりしていたり、アニメ風だったりします。
そのため先にテクスチャを変更してから体型を編集すると見栄えが良くなります！
顔や髪のテクスチャと同様に、画面左のタブを「テクスチャ」に切り替え、レイヤー部分にインポート。

ハイソックスやニーハイブーツ、タイツなどを履かせたい場合は、ここで肌テクスチャに描き込みます。
今回は「ニーハイ」を描きました！
さらに、パンツの処理もここで行います。
わたしは「真っ黒にする」もしくは「オーバーパンツ」を履かすことが多いので、今回は「オーバーパンツ」を描きました！

▼テクスチャはこんな感じ

さらに、「ネイル」や「指輪」も「爪」「指」の部分に描き込むこともできます！

２. パラメーターで体型を調整する

それでは「デザイン」タブに戻って体型を編集しましょう。
こちらも顔の編集と同様に、画面右のパラメーターをいじって調整します。

ポイント
・顔を小さくしすぎると首が太く見える
・胸を極端にいじると、服のテクスチャが入ったときに柄がゆがむ

ということで、こんな感じになりました。

今回は
・首、手足を気持ち長く
・手のひら小さめ
・身長低め
にしました！

また、「腰」の大きさでスカートの広がり具合が変わります。

これ、「制服」の時はスカートが短い都合上、太ももの太さが変わってしまうのですが、
「ワンピース」では太ももが見えないため、ふんわりしたスカートを作りやすくなります！

衣装編集

それでは衣装を変更していきましょう！ 「衣装編集」タブに移ります。

１衣装を選ぶ

2019年２月現在、VRoid Studioに入っている衣装は
３つです。
・制服
・ワンピース
・制服（ズボン）
それと服をきていない「素体」

「ワンピース」と「制服（ズボン）」は画面右にさらにパラメーターが表示され、形を多少変更することもできます。

VRoid Studioは、テクスチャを透過にするとその部分を見えなくすることができます。
そのため、作りたい服に近い形の衣装を選びましょう。
今回はワンピースで進めていきます。

２. テクスチャを描く

袖部分を透過にすれば「ノースリーブ」や「半袖」を作ることもできます！
今回は、袖部分を一部残して装飾にし、スカートの裾を透過して段をつけました。
▼テクスチャを読み込むとこんな感じ

透過を使えば、例えば「制服（ズボン）」で短パンにしたりすることもできます！
慣れないうちは、販売や配布されているテクスチャをも参考に調整してみると良いと思います！

靴も同様に、ヒールを作ったりすることができます。
今回は「ユニコーン」ということで、馬の蹄っぽくなるよう、一部透過しました！

共通設定

ここでは
・光の当たり具合
・目の可動域
を設定できます。

１. 光の当たり具合

些細な変化ではありますが、テクスチャやマテリアルの色合いが違って見えるため、わたしは基本すべて切っています。
また、VRoid Studioは立体的な表現をするために、すべてオフにしてエクスポートしても少しテカテカしています。
よりマットにしたい場合は、まずVRoid StudioからVRM形式で書き出し、そのVRMファイルをUnityというソフトで読み込んで、「MatCap」に割り当たっているテクスチャを外すとよりマットな表現にできます。

ちなみに、UnityでVRMを読み込む際には「UniVRM」というUnitypackageをUnity上でインポートしておく必要があります。
UnityでVRMファイルを読み込むところは、以下のページで詳しいので、そちらをご参照ください。

dwango.github.io

ちなみに、MatCapを外すかどうかは好みの問題ですので、気にならなければUnityを使った作業はしなくても大丈夫です。

２. 目の可動域

文字通り、目の動く範囲の設定です。
わたしはここは基本いじりません。
あまり極端な設定にすると、怖くなったり破綻することがあるからです・・・。

撮影・エクスポート

いよいよ撮影です！
撮影はもちろんしなくてもよいのですが、VRoid Studioと連携した、VRMモデルを公開できるサービス「VRoid Hub」にアップロードするは全身とバストアップの画像を入れる必要があり、そこで使用できるため、撮影をしておくと便利です！
「VRoid Hub」に使用できる写真のサイズは「1200×1600」です。
なので、まずは画面左の「撮影サイズ」タブに移動し、画面右で設定しましょう！

ここで他にできる設定は
・表情
　パラメーターで設定
・背景
　色設定、もしくは画像読み込み
・ポーズ&アニメーション
　アニメーションの場合は右下の停止で撮影するときれいに撮れます
・照明
　光の角度や色味など
　雰囲気が作りやすいですが、色味が変わってみえるので注意
・ポストエフェクト
　色々な効果をつけられます
・撮影サイズ
　撮影データのサイズ変更
・エクスポート
　VRMでエクスポート
　ここでポリゴン数、マテリアル数、ボーン数が確認できます

・VRoid Hubにアップロード
　認証コードを使用して連携し、Vroid StudioからVRoidHubにアップすることができます

ということで、ポーズを作って撮影しました
1200×1600のため、VRoid Hubでも使用しています。

これでようやくモデルの完成です！
次回では、髪の毛を使用したアクセサリーやしっぽについて書こうと思います。

VRoidStudioでVRM形式のモデルを作る【髪型編】

こんにちは。
SHOWROOM xR Labインターン生のはいえろです。
前回は基本操作から顔編集までを書きました！
今回は一番の山場でもある髪型編集です。

髪型編集

VRoid Studioが一番話題になったのはこの部分ではないでしょうか？
ペンタブを使用して、文字通り「髪を描いていける」動画を見たときは驚きました！

▲使っていくのは画面左のこの部分

下の段のヘアーリストを主に使用していきます。
「プロシージャルヘア」というのは、まとめて髪を配置して、調整していくことで簡単に制作できるよっていう機能なのですが、わたしは「手描きガイド」のみを使用しています。

髪を作るコツは「ブロッキングしていくこと」！
つまり、前髪のグループ、横髪のグループ、後ろ髪のグループ、と分けて作っていくことです。
この後髪揺れも追加するので、その際にもグループ分けしておくと良いです。
また、ベースヘアーは「ベースヘアー」の項目の上にマウスポインタを当てると、目のマークがでてくるので、それでオンオフを切り替えられます。

わたしは基本ベースヘアーあり、最終的になしにすることが多いです。
では髪の製作にはいっていきましょう！

１. 「手描きガイドを追加」して「手描きグループ１」を作る

モデルの顔にかかっている網目が「髪を描くことができる範囲」になります。
イメージとしては、この網の「上」に髪を置いていく感じ。
この網の「中」にも「外」にも髪は置けません、
「上」のみです。
そのため、これから描いていく髪の形をイメージして、網目を変形させる必要があるのですが、とりあえず前髪なのでこのままいきます。
後ほど変形するやり方も説明していきます！

この「手描きグループ１」は右クリックで名前を変更できるので、「まえがみ」としておきました。

２. これから描く髪の「ヘアーパラメータ」を設定する

▲髪の形状を画面右のパラメーターを使用して調整します 一番下のグラフが「髪の房の太さ」を表しています

例えばこの場合、

髪の房の太さのグラフ形状はそれぞれこうなっています。

つまり、パラメータの左が描き始め（生え際）右にいくにつれて描き終わり（毛先）の形状になっていきます。
縦軸が太さを表してて、①のグラフは生え際側は細く、毛先側が太い房ということを表しています。

この調整は、後ほど調整することもできるので、まずはなんとなくで大丈夫です。
今回は「ぱっつんの女の子」にしようと思うので、描き終わりも幅のあるようにしていきます。
では描いていきましょう！

まずはツールを「ブラシ」に変更します。

変更後は「つむじ」を意識して頭の中心から髪を描いていきます。

▲ちょっとがたがたしていますね

調整していきましょう。

３. 「制御点」ツールで調整していく

まずはツールを「制御点」に変更します。

するとこんな感じで、白い点（制御点）を繋ぐ線が表示されるので、この点をクリックして動かし、調整していきます。

この段階で、再びツールを「選択」ツールにして、編集したい髪を選択すると、
先ほどの画面右のパラメータをいじることができます！
ある程度髪を描く→パラメータで調整
を繰り返していきましょう！

▲前髪が完成しました！

ポイントは
・つむじ（生え始め）を意識して描くこと
・一束ずつパラメータを変更すること
・厚さは基本的に揃えること
です。

４. 「手描きガイドを追加」して「手描きグループ２」を作る

続いて横髪を作っていきます。
前髪同様に「手描きガイドを追加」してグループをつくり、名前を「よこがみ」に変更。

さて！ここで先ほど説明を後にした網目「手描きガイド」の変形です。
今回横髪は、少し内側に入るようにしたいと思うので、網目上にある「緑色の点」をクリックして動かします。
すると・・・

▲耳の下部分が変形しました！

こうやって網目を変形させていき、髪を乗っける土台を調整していきます。
これも髪と同様に、後ほど修正することもできるので、軽くで大丈夫です。

▲こんな感じに調整

ではここからは、前髪同様に横髪を描いていきましょう！

【ポイント】
①ウェーブ
制御点同士がスムーズにつながっていないと、急なカーブで髪が食い込んでしまうことがあります。
この場合は、ヘアパラメータの「滑らかさ」を上げることで解決するのですが、そうするとモデルデータが重くなってしまいます。
そのため、点同士を少し放してあげるとスムーズになります！

②ガイドの2重使い
同じ部分に動きを出したいときは、ガイドを２重で使うのがおすすめです！
たとえば、「よこがみ」にウェーブをだしたい場合、「よこがみ１」「よこがみ２」と形の違うガイドを２つ作って重ねることで、同じ部分でも違うガイドの形で髪を作ることができます！

③複製と反転
みつあみやおさげなど、左右対称の髪型は、片方のみ作ったあとに、ヘアーリストから右クリックでメニューをだし、「複製」。
その後複製したものを「反転」することで簡単に増やすことができます！

とはいえ、左右対称になるとリアリティがなくなるため、私は反転後に少しいじって、あえて非対称にしています。

５. 後ろ髪を作る

新たに「手描きガイド」を作成して、今度は後ろ髪を作っていきましょう！
今回はこんな感じのセミロングで製作しましたが、

たとえばロングヘアにしたい場合はガイドを長く下のほうへ引っ張り、髪を描きます。

すると、制御点が大量にできてしまい、調整するのが大変になります・・・。
その場合、制御点ツールで髪を選択している状態で「Shift ＋ S」で減らすことができます！

６. 髪色を変更する

画面右の「マテリアル」の色を変更することで、簡単に髪色を変更することができます。
たとえば、この↓ように色を変更すると

▼こうなります！

今は向って左上から光が当たっているため、左上が基本色、右下にかげ色がでていることになります。

マテリアルを「複製」して、色を変更したものをつくり
髪を選択した状態で

新たに作ったマテリアル（色を変更したもの）をクリックすると、選択していた髪のみマテリアルを変更することができます！

このやり方で、一部メッシュをいれたりすることも可能です。
また、「基本色」と「かげ色」は揃えたまま、ハイライトのみを変えたマテリアルを組み合わせると、
この↓ような髪をつくることもできます。

「マテリアル」の下にある「テクスチャパラメータ」をいじると、ハイライトの位置などを変更することもできます。
たとえば、
左ようなハイライトは横幅を太めにしてべた塗のような印象にしていますが、
右では横幅を狭めてみると筋っぽくなります。

７. 髪のテクスチャを変える

顔と同様に、髪もテクスチャを変更することができます。

たとえば、のっぺりとしたイメージにしたい場合は、このようなべた塗のテクスチャに変更すると

▼こう変化します！　ハイライト以外の部分に筋がなくなりました。

また、基本色やかげ色をシンプルにして、テクスチャで色をつけると
このように、好きなところに色をつけることもできます！

８. 髪に「揺れもの」をつける

最後に髪を揺れるようにしましょう！

▼ボーン未設定の中から、揺らしたい髪のボックスにチェックをつけます

チェックのついた状態で、「ボーングループを作成」をクリック。
すると、選択していた髪が「ボーン設定済み」に移動します。

これで髪が揺れるようになりました！
揺れ具合を確認するため、一度画面の上の帯から「撮影・エクスポート」のタブへ移動しましょう。

▼画面左から「ポーズ＆アニメーション」を選択し

▼画面右から「待機２」を選択します

するとモデルが動きだすのですが、その時髪の揺れ具合を確認することができます！

再び「髪型編集」タブに戻り「揺れもの」の調整をしていきしょう。
画面右のパラメーターを使用して調整できます。

調整項目
ボーン数
　増えると動きが細かくなる、データが重くなる
固定点
　揺れる付け根の位置
　生え際から揺らすとベースヘアーが見えてしまう
かたさ
　柔らかすぎるとゴムのようにべろんべろんします
重力
　軽すぎると落ちてくるのが遅くなります
衝突半径
　「他の髪や肌に触れた」判定をする範囲
　狭すぎると食い込んだり、広すぎると浮いてしまったり

複数選択してまとめて揺らすこともできますが、前髪や横髪は目立つため、１本ずつ入れたほうがきれいに揺れます。
逆に、後ろ髪は目立ちにくいため、データの軽量化のためにも複数ごとに揺らすと良い感じになります。

ポイント
・固定点は頭から離れているところから（はえている部分は揺らさない）
・前髪は揺らしすぎると生え際が見えてしまうので毛先のみ
・後ろがみは、一番後ろが短め（固定点低め）、サイドが少し長め（固定点高め）、のボーン設定にするときれいに揺れる

わたしは、基本的には
・かたさ：0.18
・重力:0.02~0.08
に設定して確認、その後微調整しています。

ということで、こんな感じに仕上げました。

ガイドは６個使用しています。

だいぶ個性をだせてきたのではないでしょうか？
次回は【体編】をお送りします。