海の底または近海を漂うナニカ?

きのむくままにいろいろかくですよー(≧◇≦)

VRchat アバターの瞬き!まばたき! blenderで作る君の瞳になんとやら!の巻その1Σ(゚Д゚)エッその1

アバターの瞬きについて―(>_<)

VRchatでふらふらしてますと、やっぱりよそ様のアバターは気になるですよね。

そんなこんなんでプラプラ眺めてると、ぴくぴく瞼が動いてらっしゃる方がいる。

これはこれはと思いながら、色々調べたりなんやかんやで、今回は瞬きについてでしたー!(≧◇≦)

 

てわけでblenderおよびunityでの手順!

ちなみに今回は、既存の人がアバターが完成してる前提でお話しするです。

完成したもののパターンを組み合わせるイメージですのであしからず!(>_<)

手順

1.瞬き用のシェイプキーを作ります。

2.unityで瞬きアニメーションを作ります。

3.瞬きアニメーションをアバターに適用します!

 

今日の三つでした!

というわけで、今日は色々書いてたら疲れたので(この一行は一通り書き終わった後で書き足しました)1.瞬き用のシェイプキーを作ります。までやりまーす!

 

1.瞬き用のシェイプキーを作ります。

必要なのは二つ!右目が閉じたやつ(>_・)と~左目が閉じたやつ(・_<)

別に両目同時でもいいですけどせっかくなら二つ作っとくと色々使いまわせそうでいいですよね。

ってわけで、シェイプキーに関しては下の記事をご参照!

deep-or-near-sea.hateblo.jp

 

まずは、アバターを用意して、ミラーの適用をしておきます。

シェイプキーを作ってしまうとミラー適用できなくなってしまうので、気を付けて!

作っちゃってる場合は-で消しときましょう。当然、作ったシェイプキーは消えるので注意です。(なんかよい手はないじゃろうか…)

またミラーが入ってる状態では左右同じものしか作れないため、今回のように左右同じじゃないモーションをさせたい場合は適用させておきましょう。

f:id:matasaburou1999:20180531201728p:plain

そして、顔のオブジェクトにシェイプキーを作成します。

f:id:matasaburou1999:20180531202312p:plain

+一回でベースができるですので、もう一回押してキー1を作成、まずは左の瞬きなのでcliping_lとでもしておきましょう。

では準備ができたですので、具体的に行くデス(@_@。

f:id:matasaburou1999:20180529195628p:plain

まず私の場合です。おそらくモデルによってちょっと変わることはあるですのでご注意を。

まず、一時的に邪魔なまつげをどけときます。

編集モードに入り、まつげのメッシュをクリック。そして Lキー のショートカットで、繋がってる部分だけを選択することで、まつげだけを選択します。そして、Hキーで隠しておきます。

最終的にはまつげもうごかしますが、まず瞼の方を動かして、形を作ってからまつげを動かしました。

 

では動かしてきまーす。(*´▽`*)

f:id:matasaburou1999:20180531202426p:plain


上の瞼に当たる部分を選択して、 G から Z で垂直に卸します。

f:id:matasaburou1999:20180531202450p:plain

地道におろしました。ちなみに端っこが目的の位置に降りたら、Shift + クリックで選択を解除、ってくのを繰り返してやりました。

ポイントは、目を閉じたときのイメージを作ってそのラインを作るようにって感じです。

微妙だったら一回プリントスクリーンして目を閉じてる風に上から線を描いた画像を用意して、下書きにしてみるとかもいいかもしれんです。

この時、目に瞼が埋まっちゃった!とかがあった場合は、そのあたりをG Y とかで前に押し出してって感じで微調整。ちゃんと横から見てあんま変な感じになってないことを確認するのも大事です。

 

で今度は下を上げます。

こちらも作業的には上まぶたと同じです。G Z で上にあげつつ、上とくっつく点があったらその点を選択解除、でまた上にあげる。を繰り返すですね。

f:id:matasaburou1999:20180531202931p:plain

f:id:matasaburou1999:20180531202943p:plain

f:id:matasaburou1999:20180531202952p:plain

 

 でまぁ大体閉じたら、微調整をば。

ちなみに色というかテクスチャはついてる方が雰囲気わかるですので、確認するときはテクスチャビューで見るといい気がするです。(特に目の周りの影なんかは入ってるメッシュ毎動かさないと影がすごいうえにある―!ってなるです。)

f:id:matasaburou1999:20180531203130p:plain

 

こんなかんじー!しっかり目が閉じてるように気を付けてくださいね。

で、私は最後に、まつげを目のラインに沿うように動かいました。

 

 f:id:matasaburou1999:20180531203233p:plain

まつげの端に当たる部分なんかはちょっと高さも調整してありますね。

まぁこの辺まで来ると微調整なのでちまちまやるしかないです。(ちなみに上の画像だと少しまつげ上の影が高い気がするのでこのあと軽く下げたような記憶があるです)

この時、使う操作としてはGGって二連打するとできる、点をメッシュに沿って動かすですね。これは微調整するときは便利ですのでよく使いました。

 

こんな感じで、左完成―!あとは右を作るだけだ!

ちなみに、左右対称の反対なのを作るのは割と楽ちんです。

上の前の記事でもちらっと書きましたが、

f:id:matasaburou1999:20180529201538p:plain

こちらの機能を使います。右側の+-の下にある黒い三角形を押すと出てくるメニューです。

まず、左目を閉じたシェイプキーを選択します。

そこで、新シェイプをミックスから作成をします。

すると左目が閉じたのが出てきます。その次に、シェイプキーをミラー反転します。トポロジーの方だったかも…?)

ちなみにこの違いが私はよくわかってないので知ってる方は教えてください。

 

とまぁ予断余談は置いといて、シェイプキーをミラー反転すると!

なんと左目を閉じていたのが右目を閉じているのになっちまったー!

ちょっと注意点ですが、左右反転するですのでもし左右非対称のパーツがあったりすると当然左右逆になります。(ミラー適用したパーツならよほど大丈夫だとは思うですが)選択してPキーで、オブジェクトを切り分けておきましょう。

というわけで完成です。

 

このモデルをunityに持っていくので、fbxで出力しましょう。

 

というわけで、左右反転はとても簡単でいいと思いました。

 

てっでーたぶんあしたにー(≧◇≦)/

 

続く!

続いた!

deep-or-near-sea.hateblo.jp

 

VRchat ワールドのお気に入りと履歴がついたよ!の巻

vrchatにお気に入りとか履歴が追加されたよ!

なんか今日(20180530)に、vrchatのアップデートがあったらしいですね。

ちなみにリリースノート(アップデート一覧的な?(@_@。)はこちらです。

VRChat20185月30日アップデート 

 

ざっと見てくですと、

  • Recent Worlds
  • Favorite Worlds
  • Inverted Mouse Option

この三つが目立つ変更みたいですね。

 

まず一つ目、Recent Worlds は待望のワールドの履歴機能。

待望の機能です(*´▽`*)

一度言ったはいいもののあそこ名前何だったっけ…ってなってたのがついに解決!

 f:id:matasaburou1999:20180530170332p:plain

Worldメニューの一番下に増えてるのが確認できました。

 

二つ目は、ワールドのお気に入り機能ですね。

待望のその2です。こちらもこれまでなんでなかったのかーってぐらい不便だったのが一気に解決ですね。いちいち名前覚えてけんさくしなくてもいいんだ……。

画像のとこに増えた favorite ってボタンを押すと登録、もっかい押すと解除みたいな感じらしいです。ちなみに20か所までらしいですのでご注意です。

f:id:matasaburou1999:20180530170619p:plain

 

三つめはマウスの操作を逆にするオプションのようです。

フライトシム愛好家(あの手のゲームは大体操作逆なのでそういう方向への対応かな?)

これは、あまり私には関係なさそうでした。

 

その他

あとはセキュリティ方面の不具合対応と、ビデオの再生でロードが終わらなかった不具合の対応とからしいですね。

今日心なしか入るの軽かった気がするですが、たぶん気のせいでしょう。

 

そういえば、SDK もバージョンも上がりました。

VRC_SynkVideoPlayer に関してトリガー?が追加された?とからしいですが、まだその辺触れてないのでよくわかりませんです。(ノД`)・゜・。

 

ちなみに私は何も知らず先ほどアバターをアップロードしましたが、普通にアップロードに成功してました。また後で更新しときたいと思います。

 

てっでー(≧◇≦)/

 

続く!

blenderでシェイプキー vrchatのリップシンクとか瞬きとか準備の巻

顔を動かしたい

vrchatをやっていますと、お話に合わせて口が動くアバターだとか、じっと見てたら瞬きしてるアバターさんだとかいらっしゃいますよね。

最初私は、やっぱViveとかってすごいんだなーと思いつつ、同時にデスクトップである私には関係ない話か……。とか思っていました。

しかし、こないだ調べてみたら実はそういうの、HMD関係なしで出来ちゃうということがわかりました。

ちなみに、喋りに合わせてアバターが口を動かすリップシンクは、マイクからの音から声を拾ってそれに合わせた口の形を作ります。そして、瞬きの方は、単純に定期的にアニメーションをかませているだけだそうです。

どちらを使うにしても、まず自作のモデルに顔の表情を作る必要があります。

 

今日はそれに関係した、blenderシェイプキーについてお話しします。

 

シェイプキーって?

というわけでシェイプキーです。

簡単に説明すると、オブジェクトのいろんな形を覚えておいて、それに合わせてモーフ(じわじわ変化させる)みたいなことができる機能らしいです。

f:id:matasaburou1999:20180529195628p:plain   f:id:matasaburou1999:20180529195833p:plain

 

まず、こんな感じで複数の顔のパターンを作っておく

ことができます。これがシェイプキーですね。そんでもって凄いのが、この顔のパターンをじわじわ変化させられるのです(モーフ)。要するに、この二つだけ顔のメッシュを作ることで口を開くアニメーションを作れるらしいのです。

 

ってわけで具体的にー!

作業内容

1.まず顔にミラーリング(左右対称)モディファイアが設定してある場合、適用しておきましょう。基本的には、ミラー状態でのシェイプキーはよろしくないらしいです。

また、ミラーリング適用が怖いのでちょっとバックアップ作っとくといいと思います。

 

2.でもって画面のここ!

f:id:matasaburou1999:20180529200429p:plain

ここにシェイプキーがあります。

 

f:id:matasaburou1999:20180529200625p:plain

初期状態では、base と書かれたものが一つだけあると思います。これは、今のオブジェクトの状態を保存しており、他の表情を作ったときの大本の表情になります。

では、まず右端の赤い四角のところにある、を押しましょう。

すると、新しいシェイプキーが作られているはずです。そこで、それを選択します。

あとは、オブジェクトを編集モードに変更、そして普段通りにメッシュを目的の形に変更します。笑顔などの形をここで作るわけですね。

ちなみに作ったシェイプキーは、で削除です。

 

少し動きの確認をしてみます。

f:id:matasaburou1999:20180529195628p:plain  f:id:matasaburou1999:20180529195833p:plain

ベースの表情が左、右側が新しく作ったシェイプとします。

f:id:matasaburou1999:20180529202342p:plain

この時、今回作ったシェイプの0になっている数字を0.5にしてみましょう。

すると、上のように、少しだけ口を開いています。このまま数字を1に変えると作った大きく口を開いた形になります。

このように、少しずつ変化させることが可能になったのです。シェイプキー凄いですね。

 

f:id:matasaburou1999:20180529201000p:plain

補足情報として、右下にあるこの二つが表示の際のオプションになります。

左側のピンを押した状態にすると、常時変形したメッシュが表示されます。

右側のは編集モードで変形する設定です。メッシュが動かせないときは、この辺の設定を変えてみてください。

また、数値を変えて動かす際にはピン止めされていないことを確認しましょう。常時口が開いた状態が表示されてしまうため、数字を変えても顔の変化が最大になってしまうからです。

 

それでは、メッシュキーの設定に関してはここまで。

最後に、少し便利な操作をば。

 

便利機能

f:id:matasaburou1999:20180529201538p:plain

シェイプキー作成の、+-の下にある下三角のボタン、これを押すと、様々な便利機能が入っています。

今回私が使って便利だった二種類をお伝えします。

 

一つ目は、シェイプキーをミックスから作成 です。

こちらは、一度作ったシェイプキーから別のシェイプキーを作ることができる機能です。後日やります、リップシェイプ、では、複数の顔のパターンを作ります。その時など、一度作った口を開いたパターンから、似た形を作る時などにこの機能が役に立ちました。

 

二つ目は、シェイプキーをミラー反転です。

この機能はその名の通り、片側だけ変化させたメッシュを左右反転させます。

例えば、右目だけ閉じてるメッシュを作ったときに、この機能を使うと簡単に左目を閉じたメッシュを作ることができるというわけです。

片側だけ変化させたい表情の左右パターンを簡単に作れる、というわけですね。

 

というわけで、今日はシェイプキーでした。

今度はアニメーション風に、シェイプキーが動いてる様のテストをしたいと思います。

 

続く!

 

続き! 瞬き作成編

 

続きその2!リップシンク(口パク)作成編

 

警告! Avatar feet are beneath the avatar's origin (the floor). That's probably not what you want.  blenderとvrchatその歪みが生んだ悲劇!の巻

 あばたーあっぷろーどのひげき

 unityからvrchatへGO!そんな時訪れる悲劇。なんかよくわからん、だけども何かがおかしい…(ノД`)・゜・。

 というわけで、とりあえず今回私が遭遇したのをご紹介。

 

 私のお話

 モデリングが終わり、unityにモデルを持ちこむ。そして、どうにか設定を終え、vrchatへアバターをアップロード。完了!

 しかしまだ油断はならぬ。何せさっき 最新のunity(20185月時点)を使用していたために、アップロード完了と言われたにも関わらずいざ入ってみたらアバターの姿はなし!を経験していたからだ。

 今度こそ、今度こそ、と思いながら Avatar タブを開く。Public ロード中。緊張の瞬間。

 そして……。あった!アップロード成功!大勝利!!

 

 喜々として、アップロードされたアバターに変更。

f:id:matasaburou1999:20180528192502p:plain

 悲劇が訪れたのは、まさに鏡の前に立ったその時だった。

 いや、正直に言うとなんかおかしいと思ってたですね。なんかカメラの位置が股下なんです。盗●アングルなんです。ちなみに上を見たらモデルは見えなかったので盗●ではありません。

 

 改めてunityを見てみます。

 例のカメラの灰色の玉は、ちゃんとアバターの額にある……。間違ってないわよね……?*1

  f:id:matasaburou1999:20180528192959p:plain

 疑心暗鬼の中、ひょっとしてアップロードの途中で何かおかしかったのだろうか、と再度アップロードを試みました。

 

 ひやひやしながらvrchat やっぱこのアングルだったよ!

 

 というわけで、今回こんな感じでカメラの位置がおかしいなって話です。

 

 原因

 無駄話が過ぎたので原因について

f:id:matasaburou1999:20180528193046p:plain

 これでした!

 Avatar feet are beneath the avatar's origin (the floor). That's probably not what you want.

 

 しょっぱい英語力で訳すと、

  アバターの足が原点(床)の下にあるよ。たぶん思った通りにならんよ!

 こんな感じらしいです。

 

 足がかなり下にある。カメラの位置は、それに合わせて低い位置。だけど、足が下にあるので床との当たり判定で、体全体は上にあがる。必然的に低い位置だったカメラは、股下あたりに……!みたいな感じだと思われます。(T_T)

 

 解決法

 今回のケースで問題だったのは、blender の出力時のモデルの位置でした。

  f:id:matasaburou1999:20180528193853p:plain

 見ていただくとわかると思うですが、体の腰より下がXYの平面(高さ0)の平面より下にいます。これは、私が作る位置を考えてなかったのがまずかったですね。

 そのため、このまま出力されたモデルは、常に体の腰から下が地面に埋まっている半地底人みたいな感じだったのです。(T_T)

 

 というわけで、これを解決します。

 下にあるからまずいので全部上にあげればいいのです。

 オブジェクトモード から A で全選択。 そして、G で移動します。 この時 Z軸(高さ)方向に動かしたいのでZを押します。そして、上に持って行ってー足の底が、XY平面に乗るあたりまで上げましょう。

  f:id:matasaburou1999:20180528194405p:plain

 これで晴れて地底人脱出、地上人の仲間入りです。おめでとうございます!

 

 というわけで改めてこのモデルを、unityへ!

 

  f:id:matasaburou1999:20180528194758p:plain

 確認すると、無事消えましたー(*´▽`*)

 ちなみにこの後アップロードしたらちゃんとカメラが顔の前位の高さになってました。

 おしまい!!

 

 おまけ

 今回他にも黄色いのが出てるのでなにかなーってのを軽くご紹介。

 上の方 Polygon:15507 なんとかかんとか!

 何となくわかりますね。ポリゴンが15507個あるけど大丈夫…?って感じです。上限2万なのでちょっと心配してくれてるですね。ちなみに無視して問題ないと思うです。

 下の方 the angle between なんとかかんとかー!

 こちらは、脇の角度がちょっとせますぎるよー!ってやつです。この状態だとフルボディトラッキング(全身でモデルを動かすVIVEとトラッカー?とかを使う。他芋方法あるらしい?よく知らない)がうまくできないよ!って言ってます。

 

 解決法としては、いわゆるT字ポーズ(両手を広げたポーズ)の形にすればよいはずです。blender側でポーズを腕上げる形にして出力しましたら、この警告は消えてるのが確認できましたので、たぶんあってます。

 ただ、私は当分VIVEすらないので、とりあえず当面は無視してます。やられる方はご注意を。

 

 てっでー、今日はこのあたりで。

 やっぱこの位の長さのが読みがすくてよさそうですねー≧◇≦)/

 

 続く!!!

 

 

 

*1:+_+

blenderで作った自作モデル vrchatへお出かけ方法の巻(*´▽`*)

 てとてと(>_<)

 おそらく昨日の段階でテクスチャの用意が終わりました。

 この段階でボーン付けも終わっていると、もうvrチャットに持ちこんで普通に動くアバターが作れます。(歩き走り等の基本的なモーションはvrchat側に用意されていますのでこちらで用意しなくても問題ないようです。(こだわりたい場合は別ですけれども(>_<)))

 ってわけで、vrchatへのデータの持ち込み方についてです。(これに関してはいろんなとこに情報があるのでわざわざ書かなくてもいい気はする(>_<))

 blenderで作ったモデルでのvrchatへお出かけ方法(*´▽`*)

 やっとvrchatタグのついた記事だ

 今回の概要です。 アカウントに関しては作ってある前提でお話しします。

 vrchatのソフト自体はsteamで無料入手できます(20180527現在)が、自作モデルの持ち込みには "vrchat でアカウント"が必要らしいですので登録しましょう。

 ちなみに私はデスクトップ(hmdなし)でプレイしてます。1050tiと6年前ぐらいのCPUで動いてるですので3Dのネトゲできるスペックなら問題なさそうです。(ただし、VRモードは、必要スペック段違いですのできちんとお調べください)

 

 1. blender から fbx形式でのモデルの出力

 2. unity および vrchat向けSDKの用意

 3. unityでのプロジェクトの用意 各種設定からアップロード

 

  大体こんな感じです。

 

 1. blender から fbx形式でのモデルの出力

f:id:matasaburou1999:20180527214823p:plain

 「ファイル」→ 「エクスポート」→「fbx」を選択します。

 

 f:id:matasaburou1999:20180527215204p:plain

 

 設定はこんな感じでやりました。基本的には初期設定のままですが、

 拡大縮小 での出力サイズ(これは各々サイズが違うと思われますので試したうえ対応するといいと思います)

 カメラ・ランプに関してはunityに持っていく必要がないので Shift + クリック で出力から除外(黒くする)といいと思います。(*´▽`*)

 

 であとはファイル名を決めて出力するだけです。

 

2. unity および vrchat向けSDKの用意

 で次に(最初にやっといてもいいかも)、vrchatへ出力するためのunityと、それのvrchat向けのアイテムを用意します。

 unityはなかなかサイズが大きいですので、ちょっと時間がかかりますのでお気をつけ。

 unityのバージョンは、Unity 5.6.3p1 。これ以外ですと最新のバージョンとかでもエラー出るのでこれを用意するようにしましょう(最新で余裕だぜーってやってめっちゃ怒られた)

 ちなみに Unity 5.6.3p1 および vrchatSDK は、vrchat公式サイトhttps://www.vrchat.net/ にログインするとそこから直接拾えますので、そちらから拾うと確実だと思います。ダウンロードには、アカウント登録からのログインが必要ですが、どのみち必要になりますのでやってない方はやっときましょう。

 

 ダウンロードしたunityのインストーラを使ってインストールしましょう。

 ちょびっと英語が多いですが、google翻訳なんかを頼りに頑張りましょう。

 

3. unityでのプロジェクトの用意 各種設定からアップロード

 インストールが完了しましたら、デスクトップのunityのアイコンをダブルクリックして、起動します。

 なんか最初いろいろ設定について言われるかもしれませんが忘れてしまったので、また今度書きます。流れで行けたような記憶があります。ごめんなさい(T_T)

 f:id:matasaburou1999:20180527220726p:plain

 

 ある程度行きますと、こんな雰囲気の画面が出てきますので 上の New を押しましょう。大体そのままでいいはずです。

 Project Name  は好きな名前(わかりませんがあまり日本語入れないほうがいいかも?)

 あとprojectの保存先だけ忘れないように気を付けてください。

 入力が完了しましたら Create Project をクリック。新しいプロジェクトが起動します。

 

 SDKのインポート

 unityでプロジェクトが開けましたら、vrchat向けのSDKのインポートを行います。

 こちらは簡単で、vrchatの設定を行うプロジェクトを開きながら、先ほどダウンロードしました、VRCSDK-2018.05.04.09.53_Public.unitypackage とかって名称になってるファイル(名称はバージョンアップとかで変わってるのでちょっと違うかも)をダブルクリックで起動すると大体終わります。

f:id:matasaburou1999:20180527221908p:plain

 具体的には、こんなん出てくると思うです。これは要するに何を入れるかって話なのですが、あんまり考えてもしょうがないので、初期設定のままでよいと思うです。

 Import を押すとばーっと始まりますですので、終わるまで待ちましょう。

 終わりましたら SDKのインポートは終了です。

 モデルのインポートから設定などなど('◇')ゞ

 こんな感じの画面出てると思うです。

f:id:matasaburou1999:20180527222457p:plain

 先ほどblenderで出力しましたモデルのfbxファイルをドロップするとモデルのインポートが可能です。

 

 まずモデルにアバターの設定を行います。

f:id:matasaburou1999:20180527222809p:plain

 インポートしたモデルをクリックしてから、画面右上の、Inspecter(図にはdebugって書いてありますが設定の違いです。たぶん最初はinspecterになってると思います)から Rig をクリックします。

  Animation type を Humanoid にしましたら、下の Apply をクリックします。終わるまでちょっと待ちます。

 Configure を見ますと、ちゃんとボーンの設定が入ってるか見れるはずです。

 追加のボーン(耳とか髪の毛用)がある場合、たまに、目のボーンの設定のところに知らないボーンがあったりしますので必要なければ外しとくのがよいかと思います。

 configure から抜けるときは下の Done をクリックでよいはずです。

 保存するとか聞かれることがあるのでその時は保存しましょう。

 補足:Humanoid は Humanoid のボーンがいれてある人型アバター用の設定です。他の物なんかの場合はGenericでいいらしいです。(やったことないので細かいことは知らないですごめんなさい(>_<))

 

 アバター用のモデルの設定を行います。まず、モデルを3D空間に置きます。

f:id:matasaburou1999:20180527224151p:plain ドラッグアンドドロップです。unityはこれで色々配置できるので楽です(*´▽`*)

 テクスチャがついてきてない場合、pngとかの形式で保存したテクスチャを先ほどのモデルと同じようにドロップすると下に表示されます。

f:id:matasaburou1999:20180527224627p:plain それを先ほど用意したモデルのところにあるオブジェクトにドロップするとテクスチャを張ってくれると思います。(当然ですが、blender側できっちりuv展開して対応したテクスチャが必要です。)

 色がついたと思います。ですが、おそらく影とかついてて思ったのと違う…ってなってると思うですので表示方法をかえます。

 モデルとかテクスチャがあるところ(初期設定だとたぶん下の方)に、Materials というフォルダがあると思うので入ります。入ると、中にはモデルに使っていたマテリアルが置いてありますのでクリックします。

f:id:matasaburou1999:20180527225145p:plain  マテリアルの設定が右上の方に出ると思うので、

 Shader → Unlit → Texture

 を選択します。これをしますと、影のないテクスチャそのままの色の表示になります。

 なお、複数表示用のマテリアルがある場合それぞれ設定が必要になると思います。

 補足:このシェーダーの設定によって見栄えが変わるので将来的にいろいろやってみるのも面白そうです。

 色に関する設定は終わりです。

 

 最後に、VRchat向けの設定を行います。

f:id:matasaburou1999:20180527225740p:plain

 左側からモデルを選択して、右側の AddComponent から

 Scripts → VRCSDK2.0 → VRC_Avatar_Descripter をクリックします。

 

 こちらがvrchat用アバターの設定になります。

 今回ここで二つ設定します。ほんとはもっといろいろありますが最低限しとくのはこの二つです。

 1.視点

 VRC_Avatar_Descripter を設定すると、画面に灰色の玉が増えてます。(たぶん体の正面のどこかにあります。モデルが大きいとめっちゃ小さくて探すの大変だったりします。モデルに埋もれてるケースもあるかもしれません?) これが、vrchatでのカメラの位置になります。

f:id:matasaburou1999:20180527230610p:plain

 ViewPositionが、その灰色の玉の座標になります。これのY座標を動かすと、高さが変わります。

 灰色の玉を、目と目の間の位置に置くとよいようです。

 ただし、この場所がカメラの位置になりますので、この位置が、アバターのvrchat内の概ねの大きさ(背の高さ)になります。

 私のイメージでは、この高さが大体vrchat内での メートル と同じぐらいな印象があります。ですので、まずこの灰色の点で目安の伸長を決めて、位置の調整は上の Scale のYでモデルの大きさを変えるといいと思います。ちなみにScaleYを変えると、モデルが物凄い伸びるので、高さが決まったらScaleのXとZもYと同じ値にしてあげましょう。

 

 2.モーションの男女

 Default Animation が男女の設定です。 Male が男性 Female が女性です。

 モデルは男、心は女とかいう場合でも別に問題ないので、心の向く方の性別を選択するとよいかと思います。('◇')ゞ

 

 で、これで大体設定終わりです!最後にvrchatにアップロードします。

 

 VRchatへのアップロード

 まず、SDKからログインします。

f:id:matasaburou1999:20180527231635p:plain

 上のVRchatSDK から Settings をクリックするとなんか出てきます。

 そこに Username と Passward (さっきvrchatに登録したもの)を入力してログインします。

 use APIReleaseにしましょう。(≧◇≦)

 ログインすると、Future Proof Publish ってとこにチェックが入ってます。私はこれの事はよく知りませんのであまり確証はない話ですが、外すとアップロードに失敗しにくくなるとか書いてある記事を読んだことはあります。もし後でトラブったら外してみるのもありかもしれません?ちなみに外すと一個処理がなくなるようですが、外さなくても通りましたので外さなくてもよいかもしれません?正直わかりません。(なら書くな!(≧◇≦))

 

次はいよいよアップロードです。

f:id:matasaburou1999:20180527231900p:plain

 VRChat SDKShow Build Control Panel をクリックするとまたなんか出てきます。

 こちらの Build & Publish をクリックするとアップロードの採集準備に入ります。

 ちなみに下に赤いのとか黄色いのとか出てます。今回出てるのは、ポリゴンがちょっと多い(上限が2万なので15000ほどあるため)問題はない。と、脇もうちょっと開いておかないとフルボディトラッキングできませーん!って感じのです。

 黄色でも無視するとダメなのとかありますが、まぁとりあえず出ててもアップロードしてみるといいんじゃないかと思います。失敗したらそん時考えましょう(≧◇≦)(でも赤いのは多分ほぼ失敗するので一回調べたほうがいいですね)

 やってみて、アップロードされてなかったりアップロードしたけどなんかおかしい時とかは、ここに書かれてることを調べてみるとよいと思うです。unityのバージョン違うとか、でかすぎるのでだめでーす!とか小さすぎて思ってるのと違うかもしれんけどええん?とか場合によっていろいろ書かれます。英語なのでgoogle翻訳とか使うといいと思います。

 

 で、話がちょいそれたですが、Build & Publish をおします

 

f:id:matasaburou1999:20180527233147p:plain

 

 最期です。

 Avatar nameアバターの名前を付けてあげます。

 Upload Image にチェックを入れるとアバターの画像を決めれます。

 この画像は、左側のVRCCam で取れますので、上のScene の画面でカメラの位置を調整しましょう。

 Sharing はみんなに使える Public か自分用 Private みたいな感じだと思います。大体 Private でいいんじゃないでしょうか。

 

 次にWarningで、警告表記です。色々制約が書かれています。このアバターはちょっとバイオレンスです。とか、エロです。とか、血が出ますとか大体そんなニュアンスのチェック事項だと思います。たぶんしっかりやっといたほうがいいと思うですので、読めなかったらgoogle翻訳に頼りましょう。

 

 最後に、下の少し長い英語の横のチェックを押します。

 上の警告のやつで問題ないです、みたいな感じですが、これもちゃんと読んどきましょう。

 ここにチェックを入れると、下のUploadが推せるようになります。押すとアップロードが開始されます。

 ちょっと時間がかかりますので、お待ちください。(≧◇≦)

 

 終わるとなんか出てきて、アップロード成功したよ!VRchat起動してみてみてね!みたいな雰囲気なのが書かれています。

 おしまいです!(≧◇≦)

 

 補足

 ちなみに、上の画面アップロード絡みはGameタブの画面です。Sceneとかでカメラの調整したらGameタブに戻るようにしましょう。

 あと画面Sceneに戻した後とかにGameタブが動かなくて進められないときがありますが、これは一時停止がかかっています。上の 一時停止ボタンを押すと解除できます。

 Gameの画面が妙に小さくて枠外に表示がある時は、画面上でマウスホイール回すと大きさがちょうどよくなることもあると思います。

 以上!

 

 終わりに

 今日も昨日に引き続きなんかものすごい長くなってしまいましたごめんなさい。(>_<)

 てっでー明日は、アップロードでトラブったこととかかけそうなら書くかもしれません。

 

 続く!(≧◇≦)/

 

blender モデリング テクスチャ作成編 ー私の場合ー

 先日まで色々使い方の説明みたいなのをしてきまして、というわけで、今日は私がどんな感じにテクスチャ作ったかみたいな小話みたいなのをやろうと思います。(*´▽`*)

 

 テクスチャ作成 ー私の場合ー

 前提条件として、テクスチャのUV展開は完了しているとします。(ところどころおかしくてちょっと作り直したのは内緒)

 

 流れ

 1. UV展開したテクスチャに対してUV画像エディタより下地を塗る。

 2. 画像に対して影色を塗る。

 3. なんかいまいちシャンとしてない気がする。

 4. ベイクを使った影を上乗せしてみようと思い立つ。

 5. 困る。(外部エディタを使いました)

 6. とりあえずできた。(*´▽`*)

 って感じですね。

 

 1. UV展開したテクスチャに対してUV画像エディタより下地を塗る

 2. 画像に対して影色を塗る

 1.2.での操作に関しては、おそらく以前のこの二つの記事辺りが参考になるかと思われるです。(手抜きか!)
deep-or-near-sea.hateblo.jp

deep-or-near-sea.hateblo.jp

 

 ちなみに、上の記事でも書きましたが、下地を塗る際、オブジェクトが異なるためテクスチャの範囲の判別がしずらかったので texture atlas にて一時オブジェクトにまとめて塗りました。

 外部エディタ(色んなペイントソフト 無料だとgimp とか 有料だとクリスタとか)を使うことも可能なようでしたが、blenderのエディタだと描いたものが即オブジェクトに反映されるので、(ゆがみが激しくなっていた)私の環境では、blenderのUV画像エディタでやっていました。

 影に関しては、影色を塗り、その後スムージングをかけるというような感じでした。

 

 3. なんかいまいちシャンとしてない気がする。

 1と2の工程を経て出来上がったのがこれです。

 f:id:matasaburou1999:20180526185045p:plain

 それなりに形にはなりました。しかし、なんか…こうのっぺりしてるというか……。

 あと、ソックスなんか本当に平らで、このままではちょっとまずいかなってなりました。(あと単純に影塗るの疲れた)

 この辺で色々調べるうちにベースをベイクで塗るとかいう手法も知り、

      どうして下地を手塗りしたんですか?

 という心の声が聞こえました。

 しかし、ここまでやった以上なんか最初に戻るのは嫌だった。(髪の毛はめっちゃ頑張って塗ってたのもあった)。

 どうにかせんといかんとです!となり影をベイクでつけよう!となったのです。

 ある意味、私的には今日本番なのがここからなのです。(≧◇≦)

 4. ベイクを使った影を上乗せしてみようと思い立つ

 手順

 4.1. マテリアルなしのモデルを用意する

 4.2 ライトを用意する

 4.3 ベイクする

 4.4 テクスチャと合成!

 こんな感じです。ちなみに最後の4.4の作業は画像編集ソフト(クリスタや無料だとgimp)が必要です。

 というわけで行きます。

 4.1 マテリアルなしのモデルを用意する

 この段階で完成しているモデルからマテリアルを取っ払います。一度バックアップとして.blendのファイルをコピーしておきましょう。

 画面上部の ファイル から コピーを保存 などでいいと思います。(今回だけでなく定期 的にやっておくと妙なことになったときに戻せるのでお勧めです。)

 私は日付+back とローマ字で作業内容みたいな名前でバックアップをいっぱい作りましたが最終的によくわからなくなったのでちゃんとわかるようにつけておきましょう(T_T) 

 

f:id:matasaburou1999:20180526190746p:plain

 画像の  のところを押すと消せます。全オブジェクトで消しましょう。

 

 3Dビューのシェーディング設定でマテリアルを選択します。

f:id:matasaburou1999:20180526191127p:plain

 

 恐らくこんな感じになると思います。(ライトをすべて削除していた場合、真黒かも?)

 f:id:matasaburou1999:20180526191231p:plain

 

  4.2 ライトを用意する

 モデルの準備ができましたら、影を落とすためのライトを用意します。

 ポイントライトを並べていきます。

  f:id:matasaburou1999:20180526191505p:plain

 とりあえず上に一個(最初からある方は G で元のライトを移動。 ない方はShift + A などでポイントライトをおきましょう)

  f:id:matasaburou1999:20180526191531p:plain

 最初の一個を選択肢て Shift + D で複製してモデルを囲むようにモデルの

に並べます。

 f:id:matasaburou1999:20180526191811p:plain

 前から見ると、それっぽい感じの影がついてるのがわかります。

 なお、今気づいたですが、これ足のパーツマテリアルついたままですね。

 マテリアルは全部消しておきましょう!

 消しておかないと影に色がついてしまいます。

 (例の如く作業中はSS取る余裕がなかったため後日再現したものをブログの写真に使ってます)

 

 4.3 ベイクする

 

deep-or-near-sea.hateblo.jp

 先日のベイクの記事を参考に。

 f:id:matasaburou1999:20180526192325p:plain

 なお、このあと元のテクスチャと重ねますので、余白を0にしておきます。

 ベイクします。  

 f:id:matasaburou1999:20180526192521p:plain

 

 恐らくこんな感じのが出来上がりますので、画像を保存します。

 

4.4 テクスチャと合成!

ここからは画像編集ソフトでの作業になります。

  今回は、gimpでやってみます。(ない場合はgimpで検索してダウンロードしてインストールしてみてください)

 こちらは無料の画像編集ソフトですがあると便利だと思います。なお私のgimpはバージョンはちょっと古いので、少しデザインが違うかもしれません。

  あらかじめ下地を(私の場合ちょっと影も)塗っておいたテクスチャを用意します。

 f:id:matasaburou1999:20180526193005p:plain

 

 gimpを開き、画像ファイルをドロップ(マウスカーソルで持っていって離す)します。

f:id:matasaburou1999:20180526193701p:plain

 こんな感じで開けると思うです。

 次に先ほど作った影の画像をレイヤーに追加します。下のここにドロップのとこに置けばいいはずです。

 なお、この時影の画像が上になるように配置してください。

f:id:matasaburou1999:20180526193755p:plain

 

 で最後に! 影のレイヤーをクリックして選択した後、上の赤い四角(この赤い四角はあとから私が書いたやつなので本当はありません)のとこをクリックすると出てくるのから焼きこみを選択してください。

f:id:matasaburou1999:20180526193845p:plain

 なんかちょっと影がついた感じになったと思います。

 微調整します。

 今さっきの赤い四角の下にある不透明度のゲージを動かすと影の具合を調整できます。

 それでも黒すぎるってところは、消しゴムツールなどを利用して消してしまうとちょうどよくなります。

 左側のところにあるピンク色の奴が消しゴムツールです。これも不透明度を調整すると、薄く消せるのでその状態で影のレイヤーを消していきましょう。

 

 最後に保存ですが、ファイル の エクスポート からpng形式などで出力しましょう。名前を付けて保存ですとgimp用の編集ファイル.xcfだったかな?で保存されるのでだめです。画像用のpngにしましょう。

 

 ってわけで大体完成です。

 あとはテクスチャとしてわりあてるとーーーー!!!

   f:id:matasaburou1999:20180526194328p:plain

  こんな感じです。足元とか影がついた気がします。

 で、また今思いだしましたが、私はこの作業をやった後に瞳のテクスチャとかほほのピンクをうっすらと、とかやったので、たぶん影補正以上にそっちの補正がこの画像にはかかってますね。

 というわけで、こんな感じでした。(思ったより長くなった)

 私は、ここまでやったらvrchatに放り込みました。というわけで、明日はVRチャットへのモデルの持ち込み方を触りたいと思います。

 

 ってわけで(≧◇≦)/

 

 続く!

 

 補足

 ちなみに、下地の画像にする場合は今回の方法で、マテリアルで白くせず、欲しい色のマテリアルを当てるなどすればよいのだと思います。ライトの設定とかもあると思うですが、きちんと下地をこれで作ると色々楽そうですね。どうして私はそうしなかったんでしょうね(≧◇≦)

blender ベイクについて

ベイクについて

 

  テクスチャ関係の話を探していると時々ベイクするという単語が出てくることがあります。今回はベイクについてです。あくまで私が理解した範囲の話になりますので注意願います。

 

 ベイクとは

 例えば3Dのモデリングをしていると、その表面にはレンダリングされたことによってさまざまな色の情報が乗せられ鮮やかに表示されていると思います。

 この3Dモデル上にある色などの情報を、二次元上に保存することをベイクするというようです。(もう少し広い意味もあるような気がしましたがテクスチャに対するベイクはこんなイメージでよいと思います。)

 

 わかりにくいので、具体例を挙げます。

 f:id:matasaburou1999:20180517185134p:plain

 上のようなモデルに対して、マテリアルに色を設定することで色がついた状態で表示することができます。

 blenderでのシェーディング設定のレンダーモードや、マテリアルなどで色がついていることを確認できると思います。 

f:id:matasaburou1999:20180525204227p:plain

 このモデルをUV展開(メッシュと二次元画像の位置の対応付け)し、ベイクすることで、下の図のように、色情報を二次元平面に保存することができるようです。

 これをテクスチャとして利用することでそのまま表示することができるようですね。

f:id:matasaburou1999:20180525203748p:plain

 この機能をうまく使うと、先日行ったテクスチャの下地の用意などが楽にできそうですね。

 また、レンダリング結果になりますので、影の色情報など、様々な情報をのせることも可能で、影付きの下地を作ったりなど多種に応用可能なようです。

 下地の画像の作り方について次で述べます。

 下地画像のベイクによる用意方法について

   

f:id:matasaburou1999:20180525210554p:plain

 UV展開済みのオブジェクトを用意し、 このように下地用のテクスチャを割り当てます。(この辺りは前の記事が参考になるはずです)図では私のモデルが、半身になっていますがこれは textureatlas の機能を使って一時的にオブジェクトを一つにしているためです。このあたりはケースバイケースです。

 マテリアルモードですと、少し暗いです。このままベイクするとこの暗い状態がmベイクされてしまいますので、ライトの設定で明るくします。

f:id:matasaburou1999:20180525210858p:plain

 まず①のようにライトを選択。そして、②のライトに関する設定を開きます。

 初期状態ではおそらくポイントになっていると思いますので、これをヘミに変更します。

f:id:matasaburou1999:20180525211119p:plain

明るくなりました。のでベイクをします。

f:id:matasaburou1999:20180525211442p:plain

カメラマークのところにベイクがありますので、設定をします。

 フルレンダーのところはベイクの方法を選択します。基本的にはフルレンダーでよいはずです。

 クリアに関しては下地の画像に上書きするか削除するかというだけです。

 ベイクするオブジェクトを選択。そして、ベイクを押すとベイクが始まります。

 PC環境にもよりそうですがベイクには少し時間がかかります。上の方に%表示が出るはずですので、終わるまで待ちます。

f:id:matasaburou1999:20180525211932p:plain

 このように、テクスチャにレンダリングされた色が塗られていることがわかります。

 あとは、これをUV画像エディタの機能で編集したり、画像を保存(UV画像エディタ下の方にある画像タブから別の名前で保存)などをして別のファイルで編集したりできるはずです。

 

 ベイクの設定の方で、フルレンダー以外にも種類がありますのでどのようになるのか試してみるのもよいと思います。

 

 以上となります。訂正等ありましたらご連絡ください。

 ありがとうございました。