【VRoidで髪の毛作って揺らしたい!】第3回/髪の毛に色付きなエクステ追加したい!

初めに

2019/01/14 追記:
サンプルデータのリンクに不備がありました。申し訳ありません。

第3回のサンプルデータはこちらになります。
https://sky-blue.booth.pm/items/1175701/
記事内で使用している第2回のデータはこっちです。
https://sky-blue.booth.pm/items/1175487

雑談

栗絵マナ
皆様、あけましておめでとうございます!
クマ
今年もうちのサイトを見て、VRoidに触れてくれる方が増えるのに期待しているぜ!よろしく!
栗絵マナ
割と長めにとった冬休みですが、私は中の人と東京スカイツリーに行ってきましたよ。
こっち側の人間だと、自力でリアル世界に触れられないですから、vpocketというアプリを通してですけどね。
栗絵マナ
中の人、結構私の写真見てましたねー;
クマ
女子旅ってやつか。いいねぇ。
栗絵マナ
旅ってほどじゃないですよ。話すと長くなるんで、この辺の話はtwitterモーメントでも貼っときますね。

今回やることと前回の復習

クマ
前回までで、「とりあえずプロシージャルヘアで作ったヘアを、髪揺れ機能で揺らす方法」を言ったんだよな。
栗絵マナ
単色のキャラで質感などにこだわりがないなら、これで一応は完成までは持っていけるんですよね。
栗絵マナ
まー、クリエイターたるもの拘りだすとキリないですけど。
クマ
VRoidStudioの本領を発揮する機能である、「手で描くように髪型を作る」「顔を自由自在に作る」方法についてはぜんっっぜん教えてないからな…。
本領発揮させてあげられなくてスマン。

用意するソフト

VRoid Studio v0.5.2-p1

“【VRoidで髪の毛作って揺らしたい!】第3回/髪の毛に色付きなエクステ追加したい!” の続きを読む

【VRoidで髪の毛作って揺らしたい!】第2回/トゲトゲ髪の毛を柔らかサラ髪へ!髪揺れ設定をしよう

初めに

サンプルデータはこちらになります。
https://sky-blue.booth.pm/items/1175487

雑談

クマ
第1回の記事、結構な数の人が見てくださったみたいだな!v0.5.0で男性が作れるようになってから新規のユーザーが増えていたからかな。
栗絵マナ
そうですね。なんかgoogleで「VRoid 髪の毛」って検索したら、うちのサイトのVRoid髪の毛のテクスチャの貼られ方の考察」という記事が上位に来てましたね。
あと、やっぱり直感で操作するUIのせいなのか、髪の毛を作ることに特化した記事が、Web世界ではあんまり充実していないのも原因なのかもしれないですね。スクリーンショットは結構あるみたいですが…
クマ
今後の記事の方向性はアクセス動向見つつ考えるとして、講座入るか。

今回やる事と前回の復習

栗絵マナ
確か前回って「プロシージャルヘア」の使い方、それを利用したストレートヘアを作ったんですよね。
髪の毛を作るときはいくつかパーツにグループ化する必要がある事も言ってましたっけ。
クマ
そうそう。
栗絵マナ
でも、「最終的に動かしたら、全く髪が揺れなかった」ってとこで終わったんですよね。
クマ
そこで今回は「髪の毛の揺れを設定する」方法を教える。これで髪がやわらかくなるぞ。

 

“【VRoidで髪の毛作って揺らしたい!】第2回/トゲトゲ髪の毛を柔らかサラ髪へ!髪揺れ設定をしよう” の続きを読む

【VRoidで髪の毛作って揺らしたい!】第1回/基本はさらさらストレートヘア!プローシジャルヘアを使ってみよう

初めに

サンプルデータはこちらになります。
https://sky-blue.booth.pm/items/1175416

雑談

 

クマ
なんか最近ウチのサイト以前と比べてやたらアクセス数多くなったぞ?!
どうなってんだこれ!
栗絵マナ
え?うーん…?あ、ホントですね!
特に髪の毛関連の記事にアクセスが集中していますね。
もしかしたらクリスマス前に「VRoid Studio」のアップデートが入ったのが関係しているんじゃないかと。
クマ
え、アップデートあったのか!夜寝てて気づかなかったわ。
(ツイート時間見て)しかも、こんなド深夜帯に…
VRoid開発陣、お疲れ様です…!

管理人注:↓このツイート見て発言しました。


栗絵マナ
なんかVRoid界隈的にもとんでもなくビッグなプレゼントでした。昨日ののりおさん(@norio)の作業配信でも、VRoid開発陣の情熱が感じられました。
私は技術的な方面よく知らないですけど…。

クマ
個人的にVRoid Hubとpixiv sketchにはWebGLという技術と言う共通点がある、というあたりのお話が興味深かったぜ。髪の毛の話とかも。

今回やること

栗絵マナ
さて、お年賀の絵のラフ描いてるときに呼ばれたはいいですが。今回何やるんです?
クマ
今回はせっかく髪の毛関連の記事にアクセス集中していることだし、最新の情報に書き換えるついでにVRoidの髪の毛の作り方書こうかなと思っているだぜ。
最近は、VRoid Studio単体で髪の毛揺らすことができるようなったんだけど、今まで触ってなかった層ってちょっととっつきにくい感じがありそうだしな。
クマ
それで、髪型別に書いたら何回かに分けないといけないから、今回で一旦「ストレートヘア」編やったあと、一旦髪の毛揺らす記事書く。
その後他の髪型を順次書くという方法で進めることとする。
栗絵マナ
ほうほう。全編を年内にやるって感じですか?

クマ
流石にどう考えても全部を年内はキツイから、年内は「プロシージャルヘアでストレートヘア編」「髪の毛揺らす編」をやろうかなと思う。
というかヘアスタイル名全然詳しくないからヘアカタログ買ってこないと。
“【VRoidで髪の毛作って揺らしたい!】第1回/基本はさらさらストレートヘア!プローシジャルヘアを使ってみよう” の続きを読む

VRoidの髪の毛のテクスチャの貼られ方の考察

みなさん、VRoid楽しんでますか?

最近は髪の毛が揺れるようになったり、ワンピースの型紙も増えて一気にユーザーさんの交流が増えたり、配布用テクスチャが増えたり楽しいです。
あと最近は年内に男の子の素体も来るのでは…?といううわさもありますよ。(これまで男の子作れなくて断念していたユーザーさんも取り込めたらいいなぁ)

今回はこの環境で検証しました。
VRoid studio 0.4.0-p1

髪の毛のテクスチャの編集のやりかた

さて、髪の毛を筆で書くように作れるVRoid Studioですが、実は服や顔パーツと同じように、髪の毛のテクスチャをいじれることはご存知ですか?知らなかった人のためにも軽く解説しますね。

まずは普通に「髪型編集」で手書きなりプロ―ジャルヘアで髪の毛を作った後、「テクスチャ」タブをクリックします。

こうすると、テクスチャ編集モードに入ることができます。ついでに、基本色を白色(#ffffff)にしておくと、テクスチャの色味がそのまま再現されます。ここはお好みで。

(既存のテクスチャは白黒で描かれていて、それに基本色がフィルムのようにかぶさることで陰影のついた髪を再現しているようです)

なお、消しゴムでテクスチャを消すと、消しゴムで消した通りにその部分が透けます。これを利用して繊細な毛先を再現したり、透け髪を演出するのもいいかもしれませんね。

髪の毛のテクスチャの貼られ方考察

さて、髪の毛のテクスチャの編集方法を簡単に説明しましたが、私はここで「髪の毛のテクスチャがどのように貼られているか」が気になりました。
特に、「長い髪の毛を描いたとき縦に伸びたりするのか」「髪の毛の形状をひし形から底なし三角形にしたときなど、明らかにテクスチャの貼られ方が違う」あたりが気になりました。

そこで、今回はこの辺をはっきりさせるとともに、「歪むときはどう歪むのか」調べます。

考察に使用するテクスチャ

今回は髪の毛テクスチャと同じ大きさの画像で、数字と均等なマス目が書いてあるテクスチャを使用します。

blenderで新しくUV用の画像を作るときに生成されるものです。

髪の毛の長さによるテクスチャの変化

まずは、髪の毛の長さによってテクスチャがどう伸び縮みするかを検証します。

この画像は「プロ―ジャルヘア、位置360、本数1、基本色と影色をそれぞれ#ffffff(他は初期値のままです)」です。この画像を基準にし、髪が伸び縮みしたときどうなるかを見ます。

というかプロ―ジャルヘアの初期値に近い値でもちょっと縦に伸びてますね。

縦に伸ばした場合どのくらい伸びるのか検証します。

ガイドパラメータの高さを最大の1にしました。

長すぎて体に埋もれました。

見事に縦に伸びています。ただ、髪が長すぎて下のほうがよくわからないので、一旦「プロ―ジャルパラメータの位置」を180にします。

一旦後ろに持ってきて、長さをみました。見事に均等に伸びてます。

髪の毛のテクスチャを見てみるとわかるように、どの数字のマスも均等に伸びています
(もはや文字がつぶれて読めない)。どうやら髪の毛のテクスチャというのは、部位ごとに伸び率が異なるという代物ではなく、均等に引き延ばされるようです。ですので、髪が長くなれば長くなるほど、どんどん縦に引き延ばされていきます。

続いて、今度は短くするとどんな感じになるか見てみましょう。
ガイドパラメータの高さを最小の0.10にしました。

やはり、長くした場合と同様に均等に縮んでいます。(髪の毛の先が細すぎてA列が見えないですが、他の列と同様に縦方向に縮んでいるようです)

VRoidの髪の毛のテクスチャは、作った髪の長さによって変更するものではなく、髪の長さに応じて均等に伸び縮みするようです。

個人的に「毛先と根本に伸びにくい箇所があったりするのかな」という淡い期待もあったのですが、髪の毛特化だけあり流石にそういうわけではなかったようです。残念!(もしこの仕様だったら、リボンとかマフラーの先とか作れそうかなと思っていたので)

髪の毛の形状によるテクスチャの貼られ方の違い

続いては、髪の毛の形状によるテクスチャの貼られ方の違いを検証します。

髪の毛の長さを検証した時と同じような条件「プロ―ジャルヘア、位置360、本数1、基本色と影色をそれぞれ#ffffff(他は初期値のままです)」、

まずは「ひし形」。

「ひし形」で使われる範囲は次のようになっています。

「ひし形」は裏表均等に使われ、無駄がありません。左の1と2列が裏面、右の3と4列が表面です。

続いては「三角形」。

「三角形」で使われる範囲はこちらになります。

スミマセン、切り替えの位置は大体の位置です。

VRoid画面上ではわかりづらいですが、大体左側の1列と2列の一部が裏面に来ます。

続いては、「底なし三角形」です。

「底なし三角形」で使われる範囲はこちらになります。

スミマセン、切り替えの位置は大体の位置です。

ひし形、三角形と打って変わって、こちらはなぜか左1と2、3列の一部が表面に来ています。3列の右側と4列すべては未使用面です(描いても反映されない模様)。

「直線(板ポリゴン)」です。

「直線(板ポリゴン)」で使われる範囲はこちらになります。

こちらは左側2列が表面として使われ、右側の2列は使用されません。

髪の毛の形状によっては、「未使用面」が存在します。また、各形状により使用面が異なるため、複雑な形の透過テクスチャを使いまわすのは難しいです。もし、髪の毛テクスチャを配布するとしたら「〇〇形状専用」として製作するほうがいいかもしれません。

まとめ

以上、髪の毛の長さと形状によるテクスチャの貼られ方の違いを検証、考察しました。

髪の毛の長さによって、意外と伸び縮みが激しいことに驚きました。最初から適用してあるテクスチャは縦筋に沿って髪の毛が描かれているものですが、この場合だと伸び縮みしてもあまり気にならなかったのでちゃんと調べるまで全然気が付きませんでした。

フルスクラッチで3Dモデルを製作するのと違い、VRoidは髪の毛の長さをユーザーが自由自在に決める必要があって、このような仕様になったのかなぁと考えています。

また、つい最近Twitterにこのようなものを投稿しました。これは底なし三角形に髪の毛の房をイラスト調に描いたテクスチャを貼って作っています。(1種類だと使いまわし感凄いので3つに材質分けて、それぞれに違うテクスチャ貼ってます)

でも、ちゃんと検証する前のことでしたのでテクスチャの適用される範囲を把握しておらず、適用されないところまできっちり描いてしまっています。反省。(実際描くときは多少範囲外にはみ出して描いたほうが、見栄えはいいです)

今回の考察が、皆様のVRoidライフをよりよくすることを願っています。

VRoid 3D記事まとめ

VRoidでアレコレしたい編

VRoidで髪の毛作って揺らしたい!シリーズ

【VRoidで髪の毛作って揺らしたい!】第1回/基本はさらさらストレートヘア!プローシジャルヘアを使ってみよう

【VRoidで髪の毛作って揺らしたい!】第2回/トゲトゲ髪の毛を柔らかサラ髪へ!髪揺れ設定をしよう

【VRoidで髪の毛作って揺らしたい!】第3回/髪の毛に色付きなエクステ追加したい!

その他

BOOTHでVRoid用素材の取り扱いを開始いたしました

VRoidの髪の毛のテクスチャの貼られ方の考察

blenderで改造編

髪を揺らしてみたい!シリーズ

VRoidモデルの髪を揺らしてみたい(前編)

VRoidモデルの髪を揺らしてみたい!(中編/blender作業編)

VRoidモデルの髪を揺らしてみたい!(後編/Unity作業)

その他

VRoidモデルのblenderボーンXミラー対象化の暫定的方法

blenderでシェイプキーのあるメッシュにモディファイアを適用したい!

 

Unityで改造編

VRoidモデルの顔の線画を調整したい