前のページでは、りこ師匠の全身が完成しました。
ここからは、マテリアルやテクスチャを使って、色をつけていきたいと思います。
まずは髪の毛からはじめましょう。

これまで作ってきたキャラクターに、色をつけていくわ。ここでは髪の毛に色をつけてみるわね!

ついに色がつくんですね! どうやるのかなぁ
髪のテクスチャについて
ここでは、テクスチャの作り方は省略させていただくのですが、PhotoShopを使ってこのような髪のテクスチャをつくりました。
もしこのテクスチャを使いたい場合は、クリックで拡大してからダウンロードして、ご自由にお使いください。
また、髪のテクスチャの作り方はこちらの記事を参考にしてください。
後ろ髪にテクスチャを貼る
まず、後ろ髪にテクスチャを貼っていきましょう。
シームをつける
テクスチャを貼るためには、展開を行う必要があります。
展開というのは……たとえば立方体が展開されるとこうなります。

この展開を、どこで切るのかを設定するのがシームです。
では、髪の毛にシームをつけていきましょう。
まず、tabでオブジェクトモードにし、後ろ髪のオブジェクトを選択し、shift + hで、後ろ髪のオブジェクトのみの表示にしました。
さらに、tabで編集モードにし、辺選択にして、シームをつけたい辺を選択します。私は表と裏の境目を選択しました。

上部から「辺」→「シームをマーク」をクリックします。

これでシームをつけたところが赤くなります。

髪を展開する
つづいて、髪を展開してみましょう。
頂点選択にして、aで髪のすべての頂点を選択し、画面上部から「UV」→「展開」と選択します。

ワークスペースを「UV Editing」に変更します。

これで髪が展開されていることが分かります。

テクスチャを読み込む
では、テクスチャを読み込んでみましょう。
下の画像のように、「開く」をクリックし、髪のテクスチャの画像を選択します。

これで髪のテクスチャが読み込まれます。

テクスチャを反映させる
つづいて、3Dビューポートのオブジェクトにテクスチャを反映させていきます。
まず、画像の場所をクリックして、「3Dビューのシェーディング」をレンダーにします。

デフォルトで適用されているマテリアルを、「-」をクリックして削除します。

「新規」をクリックします。

新規に作られたマテリアルの名前は「hair」にします。この名前はなんでもいいのですが、あとから分かる名前にしておきましょう。

ベースカラーの黄色い丸をクリックして、「画像テクスチャ」を選択します。

下の画像のように、さきほど読み込んだhair.pngを選択します。

これでテクスチャを反映させることができましたが、ちょっと光が強すぎましたね。これはのちほど修正するのですが、いまはこのテクスチャで進めていきます。
さきほどのダウンロード用のテクスチャはちゃんと修正したあとのものなので、安心してください。

また、まだ髪に対してテクスチャが合っていません。これはUVを整列することで、解決することができます。
UVを整列する
つづいて、UVを整列していきましょう。
上でテクスチャを反映させたとき、髪とテクスチャが合っていない状態でした。
これはUVを整列することで解決できます。
この辺はアドオンを使うと手っ取り早いのですが、今回は必死に手作業で整列しました。
ここは断言できますが、アドオンを使ったほうが絶対にいいです。TexToolsを使ってみたのですが、とてもいいです。
また、このときは知らなかったのですが、標準機能でももっとかんたんにUVを整列できる方法がありました。
方法はこの記事にまとめましたので、よろしければご覧ください。
展開したばかりのUVはこのようになっています。

しかし、髪のテクスチャは真下に向かって流れています。
つまり、このUVを真下に流れるように配置すればいいわけです。
alt(option) + クリックで頂点を一列選択し、s→x or y→ 0 で、辺をまっすぐに整えたりしながら……髪のテクスチャが一応しっかりと貼られるぐらいまでは、整列しました。(もっといい方法があるかもしれません)

さて……まだまだUVはきれいに並んではいないのですが、どういうわけかこのとき、私はここでやめてしまったのです。
おそらく、「あ、これでもう髪の毛のテクスチャ、きれいに貼れてるじゃん」とか思い、そう思った瞬間に”もうすべて整列した”と勘違いしたんだと思います。

……そんなばかな

たまにだけど、いまやってたことが一瞬にして全部消えるのよ
あるあるでしょ?

多分ないでござる

だからアドオン使ったほうがいいのよ

それはちょっと違うのでは……
……でも見た感じ、きれいに貼れてるから問題ないですよね。

ごめんね

すまぬでござる
横髪にテクスチャを貼る
つづいて、横髪にテクスチャを貼っていきます。
といっても、手順はさきほどと同じです。
まずは切り分けたい部分にシームをつけましょう。
tabでオブジェクトモードにし、横髪のオブジェクトを選択して、shift + hで横髪のオブジェクトのみの表示にします。
そして、再びtabで編集モードにします。
さらに、シームをつけたい部分を選択します。今回は前後に切り分けてみました。

画面上部から、「辺」→「シームをマーク」を選択します。

たったいまシームをつけたところが赤く表示されます。

シームをつけたらtabでオブジェクトモードにし、alt(option) + hですべてのオブジェクトを表示します。
横髪のオブジェクトを選択した状態で、さきほど作った髪のマテリアル(hair)を適用させます。

tabで編集モードにし、aで頂点をすべて選択したあと、「UV」→「展開」をクリックします。

これで横髪を展開することができました。

3Dビューポートを見ながら、きれいにテクスチャが貼られるようにUVを整えます。
幅を広くすると、その分髪の毛の線を細かくすることができます。お好みで調節しましょう。
alt(option) + クリックで頂点を一列選択し、s→x or y→ 0 で、まっすぐに揃えます。

調節し終わると、このようになりました。

前髪にテクスチャを貼る
つづいて、前髪にテクスチャを貼っていきましょう。
手順はほとんど同じです。
tabでオブジェクトモードにし、前髪のオブジェクトを選択して、shift + hで前髪のオブジェクトのみの表示にします。
さらに、tabで編集モードにします。
では、前髪にシームをつけていきましょう。
シームをつけたい辺を選択し、画面上部から「辺」→「シームをマーク」をクリックします。

前髪は少し複雑な形をしているので、髪の毛の束ごとに細かく切り分けることにしました。

tabでオブジェクトモードにし、alt(option) + hですべてのオブジェクトを表示します。
前髪のオブジェクトを選択した状態で、髪のマテリアル(hair)を適用します。

tabで編集モードにし、aですべての頂点を選択します。
さらに画面上部から「UV」→「展開」をクリックしましょう。

これで前髪を展開することができました。

s→x or y→ 0 を使ってUVを整えます。ただ今回は量が多すぎて、詰め込むことができず、とりあえず右上に整えたものを配置しました。しかしこれでは、髪の先の透明部分が作られません。

そこで、無理やりな手にはなってしまうのですが、UVを重ねて配置することにしました。
まずはハイライトの位置を合わせます。

そして、少々難しいのですが、いま移動したものの先端部分のみを選択し、透明部分に移動します。

今回は上記の方法を使いましたが、これだとあとから直しにくいというデメリットもあります。
実は、こういうふうにすることもできます。こんなふうに、はみ出してしまっても反映されるんですね。

これで前髪にテクスチャが貼られ、このようになりました。

結んだ髪にテクスチャを貼る
つづいて、結んだ髪にテクスチャを張っていきます。
tabでオブジェクトモードにしたあと、結んだ髪のオブジェクトを選択して、shift + hで、結んだ髪のオブジェクトのみを表示しておきましょう。
まずはシームをつけます。
結んだ髪のオブジェクトを選択した状態で、tabで編集モードにします。
シームをつけたい辺を選択し、画面上部から「辺」→「シームをマーク」をクリックします。
私の場合、こんなふうに切れば髪を結んだ部分がぱかっと開けるのでは、と思い、下の画像のようになりました。

頂点選択にし、aですべての頂点を選択します。
さらに画面上部から「UV」→「展開」をクリックします。
すると、このように展開されました。

髪のマテリアルを適用します。

s→x or y→ 0 を使ってUVを整えます。
実際に整えてみると、こんなふうに想像よりもすごい形になりました。

これですべての髪にテクスチャを貼ることができました。

また、まだマテリアルの透明部分を透過させる設定をしていないので、髪の先が黒く表示されています。
これはもう少しあとで設定していくので、いまは気にしなくても大丈夫です。

あれ、山田さん……どうしたんですか? あぁ、りこ師匠の結んだ髪が気になるみたいです。山田さん、長いものが好きなんですよね

そうなの?

えっ……あぁ、ふむふむ。長いものには巻かれた方がいい、って言ってます

なんか、深いわね……
さて、次のページでは、肌のテクスチャを作っていきます。