50_eye

BLENDER-99-50/テクスチャの基本(後編)

【Blender-99 絶対に挫折しない3DCG入門 -50
テクスチャの基本(後編)】

さて、一年間に亙ってお送りしてまいりました初心者向け3DCG講座&チュートリアルのシリーズ【Blender-99】ですが、いよいよ、というかとうとう1stシーズンの最終回(!)を迎えました。

最終回ですが特別なことはなく、前回に続きテクスチャの基本を学びます。
さて、早速本編に入りましょう。

【今回の学び】
・テクスチャの基本(後編):UVマップって何だろう?

前回は、
「プロシージャル・テクスチャーをキューブに貼りたいけど、テクスチャーが2次元だとうまく出来ませんね……さて、どうしたもんでしょう
というところまででした。

ここで、真打ちUVマップの登場です。
元々はUVWマップと言うのですが、略されてUVマップと呼ぶようになったようです。
UVと言っても、紫外線のことではありません。

3Dの座標をXYZで呼ぶことは周知のとおりですね。
3Dの座標上にテクスチャ画像などを張り付ける時、オブジェクトのXYZ座標にテクスチャ画像の座標を関連付けることが必要になってきます。
そこで、XYZからアルファベットを三つ遡ってUVWを使います。

テクスチャの座標として、
Xに関連づくものがU、
Yに関連づくものがV、
Zに関連づくものがW、
というわけです。

humanoid_humanf_dermal
Manuel Bationi Labの人体で用いられているUV展開画像です

みなさん、こういう画像を一度は見た事があるかと思います。
これは、人間の全身におけるXYZ座標をテクスチャ画像のUVWに適応させて、展開した画像です。
これを、「UV展開された画像」と言います。「アジの開き」などと言うこともありますね。
オブジェクトの座標を画像の座標に適応させることを「UV展開する」「UVを開く」または、単に「開く」などと言います。

前回の記事で出てきた人形の頭も、UV展開されています。顔の本来の模様(頬の色や目の回り、肌の色の違い)を見せるためではなく、錆を付着させるためだけの展開ですが。

49_32

オブジェクトをUV展開すると、このようにオブジェクトを構成するポリゴンが平面に展開されて、画像のある部分を形状のどこの要素に用いるかが分かるようになります。例えば頬を赤くしたければ、この形状のUVと適応付けさせたテクスチャ画像の頬の辺りの位置を、画像上でほんのりと赤く加工すれば良いわけです。


こんな風に。
一つ前の図で、オレンジ色の線で示されたものを、UVマップ(またはUV画像)と呼びます。blenderでは、このUVマップを画像テンプレートとして書き出して、画像処理ソフト上で元の画像を加工しやすくすることも可能です。

上の動画では、blender内部のペイント機能を使って(そんなものまであるんですよ!)、直接頬や目の周りの色を塗っています。→その方法は、また別の機会に──。

さて、UV展開の方法ですが……
オブジェクトを選択してエディットモードに入り、展開したい面を全て選択したら「Uキー」を押します。
49_33

キューブのようなごくシンプルな形状の場合は、一番上にある「Unwrap(アンラップ=展開する)」だけでもうまくいくことがあります。
キューブなので、「キューブ・プロジェクション(立方体の各面に画像を投影するように展開する)」で意図した展開になることもあります。

ただ、これだけではうまくいきません。
UV展開をしたら、テクスチャを入れようとしているマテリアル自身に「UV展開をしたよ!」ということを教えてあげなければならないのです。

それが、こちらです。
49_34

Brick Textureの「Vector」インプットに、「UV Map」というノードを接続しています。

49_35
「UV Map」ノードは、「Add」の「Input」内にあります。

UV展開は、その方法によって開かれ方が異なります。
キューブをキューブ・プロジェクションで展開(プロジェクションの場合は、マッピングする、と言います)すると、Unwrapとは結果が異なります。
49_36

前掲の画像との違い、分かりますよね?
では、シンプルなところからちゃんとやってみましょう。

【実践編・開始】
50_01
もちろん、この画像自体もblenderで作成しています!

この画像を使って、キューブに張ってみます。誰でも知っている、サイコロの展開図ですね。
(画像はご自由にダウンロードして、学習に役立ててください!)

新しいblenderシーンを起動して、やってみましょう。

 

はい、見事に失敗していますね!
失敗の理由、わかりますか?
そうですね、画像の大きさ(比率)とキューブの面の大きさが合っていないのです。
この両者を結び付けるのがUVマッピングですが、画像に描かれた中身まで、UVマッピングがポリゴンの座標に教えてあげることは出来ません(当然、ですね)。

■参考までに■
模様などの調整をする時は、シェーダーをEmission(発光、強さは1)にしておくと、案外便利なことがあります。明暗、面の向きに関係なく全て同じ明るさに見えますし、画像処理ソフトで画像を作成した時のままの明るさで表示されますので、間違いに気付きやすかったりします。単に好みの問題でもありますが。

画面を分割し、UV/イメージエディターを起動してUVマップがどのように張られているか確認します。

 

画像全体に、一枚のUVマップが張られているということがわかります。一枚のUVマップが、キューブの6面全てに、同じ張り方でくっついているわけです。長方形の画像が正方形の面に張られているので、伸びてしまっているのですね。

今度は、UV展開の方法を変えてみます。「Unwrap」ではなく、「Cube Projection」を使ってみましょう。

 

今度は、UVマップが正方形になりました。でも、たった三枚しかありません。どうやら、繋がってしまっているようです。
これを元にチクチク編集して、一面ずつ上手に張ることも可能です。でも、それでは面倒ですね。もっと簡単に出来ないものでしょうか?

 

「SmartUVプロジェクト」という展開方法を使ってみました。
これなら、UVマップがちゃんと正方形になっていますし、重なってもいないようです。でも、位置がずれています。
しかも隣同士のUVマップは、やっぱり繋がっているようです。

これじゃあ結局同じじゃないか……
いいえ、諦めるのは早過ぎます。ここからが、UV編集の楽しい(?)ところなのですから!

次の動画へいきましょう!

 

手順です。
・UVマップの繋がりを解消するため、「Sticky Selectionくっつき選択 Mode」を「Disable」にします。
50_08

・UV/イメージエディター、3Dビューポートともに、編集モードを「面」フェイスにします。

・3Dビューポート上でキューブの上面を選択します。すると、UV/イメージエディター上では、その面だけが表示されます。

・展開図と同じにしたいため、上面のUVマップが「(1)」になるように移動します。あとで微調整しますので、場所は大ざっぱで結構です。

・続いて底面。ここは「6」にしたいので、底面のUVマップを画像の「6」の位置に移動します。

・以下、6面全てを調整します。

わずか1分で、サイコロのUVマップ調整が出来ましたね!
50_09
でも、拡大して見ると、かなりずれが目立ちます。

微調整の方法を、次の動画で見てみましょう。

 

こちらは、数値で制御する方法でした。
今回のサイコロのように、大きさから簡単に座標を割り出せたり予想したり出来る場合は、かなり効率良く微調整を行うことが出来ます。

でも、そんなんじゃ汎用性がない! ですって?

そうですね。
3DCGは、本当にありとあらゆる形を作成出来ますから、簡単に座標が分からないような形状でも上手に微調整出来るようにしたいものです。
では、その方法です。
簡単ですよ!

 

ちょっと説明が必要ですね。

・最初の一箇所、「(1)」の位置は手調整します。
「G」で移動、「Y」で縦方向に固定、ですね。今回は微調整なので、少しずつ動くように「Shift」キーを押しました。
(覚えていますよね? Shiftキーを押すと、移動距離が小さくなって微調整が効くのです)

・「UVに要素を吸着させるSnap UV Element」という機能の設定を、「頂点Vertex」にしています。
50_12
ここで、磁石のボタンを押して、吸着機能をオンにすることも出来ますが、今回はオフのままです。

・位置合わせをしたい面をUV/イメージエディター上で選択し、Gキーで動かします。

・「今動かしている面の頂点」が、「ぴったり合わせたい頂点」の近くに来たら、Ctrlキーを押します。すると……あら不思議、移動中の頂点が、目的地の頂点に吸い付きます! Ctrlキー押すことによって、吸着機能が一時的にオンになったのです。
最初からオンにしておくと、近場の頂点にすぐ吸い付けられてしまいます。便利な時もありますが、不便な時もあります。いろいろと作ってみる中で、使い分けを覚えていくと良いでしょう。

・全ての面で操作を繰り返します。これで、同じ座標にあるべき頂点は全て同じ座標に整列したと考えられます。

・全ての面を選択し、〈全体としてズレがないか〉をぐりぐりと確認しながら、最終的な位置を微調整します。


さあ、フィニッシュに近づいてきました。
息切れしないで、もう一つだけテクニックを学びましょう。

今度は、予め〈仕込み〉をしておくことで、UV展開が希望に近いものになるという方法です。
まずは動画をどうぞ。

 

え、これずるくない?
なんか一瞬で終わってるけど……今まで学ばされてきたのは何だったのよ!
って、まあ、怒らないでくださいってば。

急がば回れとはよく言ったもので、ちゃんとUV編集のテクニックを付けたかったら、つまり、自分の用意した様々な画像を、自分がモデリングした様々なオブジェクトにきっちり合わせ込みたかったら、UV編集のいろいろな方法を知っておくのは必須条件なのです。

ここで行ったような方法で一発成功すればベストなのですが、それでも、後からちょこちょこと調整したり、おかしくなってしまったところを手作業で修正する必要は必ず出てきます。
そんな時、いちばんシンプルで便利な方法しか知らなかったら対応出来ませんよね。

と、いうことで、手順をさくっと見ていきましょう。

・エディットモードに入ったら、エッジ編集モードにします。

・サイコロの展開図をよく見て、キューブをどうやって開いた図なのか考えます。

・逆に、キューブを切り開いて展開図にするためには、どこに切れ目を入れれば良いかを考えます。

・切れ目を入れるべきエッジを選択します。最初は、「(1)」の周りだけ選択しました。

・選択したエッジを、〈つなぎ目シーム〉としてマークします。

「Mesh/Edge/Mark Seam」です。
「Mesh/Edge/Mark Seam」です。

・次に3と4の奥、6と2の左右の切れ目に当たるエッジを選択します。

・次はショートカットを使ってみました。「Ctrl+E」です。

・全ての切れ目をシームとしてマークしたら、Aキーで全選択し、Uキーでアンラップします。

アンラップされたUVマップの状態と画像の形が完全に一致していれば、動画のように一発で完璧なマップが作れます。
もちろん、キャラクターなど複雑な形では手で調整することが必要ですが。


おまけとして、人形の頭はどんな風に展開してあるのか、シームの場所をぐるりとお見せしておきます。


(実は、キャラクター制作はあまり得意ではありません。三年近く前のものですし。ポリゴンの流れなどあまりきれいではありませんが、そこはお目こぼし下さいませ……)


さてさて!
これで、UVマップの入門編(あくまでも入門編!)はマスターしたことになるのではないかと思います。

UVマップの編集については少々複雑な工程も伴いますため、また機会を改めて更なる深みを一緒に探検いたしましょう。

【今回の学び】
・テクスチャの基本(後編):UVマップって何だろう?

いやあ、、、一年に亙ってお送りしてきましたこのblender99シリーズですが、全50回の1stシーズンを終えるとなかなかに感慨深いものがあります。どうしても記事執筆の時間が確保出来ずに休載してしまったことや、Twitter上で初めて感想を見させていただいた時のことなど、この一年間の歩みが走馬灯のように蘇ってまいります……。

って、大げさ過ぎるだろ(笑
今後しばらくは、このシリーズを電子書籍化するための充電期間とさせていただきます。

暖かくなったころにまた皆さんとお会い出来たら……

と、これで終わりかと思いきや──

何ともタイミングの良いことに、12月と言えば、あの『Blender Advent Calendar』の季節じゃないですか!

【次回のお知らせ】
・『Blender Advent Calendar』スペシャル!(秘密=実は未定)

今年は、渾身の一発をかましますよっ(予定)!


では、ぜひぜひお楽しみに〜!

Happy Blending !!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>