お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

初心者のための!作って学ぶBlenderの基礎:③マテリアル・テクスチャを設定する

どうもこんにちは。JBです。
前回までで大体パンダの形らしいものが出来てきたので、今回はオブジェクトの質感や見た目をいじる「マテリアル・テクステャ」あたりを実践していきたいと思います。

マテリアルを設定しよう!

早速ですが、前回作ったモデリングデータにマテリアルを設定して、色を変えたりしてみたいと思います。

マテリアルとは?

メッシュオブジェクトに対して、色や質感を与えることが出来ます。「質感って何だよ」と思うかもしれませんが、アレです。
ツヤとか、反射の感じとか、透明度とか、色とか、硬さ・柔らかさとかそういう類いです。
マテリアルをいじることで、金属っぽさやガラス質な感じ、プラスチック感などが演出できるわけです。
1

設定はマテリアルパネルで

マテリアルの設定は、プロパティパネルにあるマテリアルタブ(オレンジっぽい球体のアイコン)で行います。
まずはマテリアルを追加。Newボタンをクリックします。
2

すると上の欄にマテリアルが追加されて、下に色々出てきます。とりあえず分かりやすいように名前を変更。
パンダの白い色を設定したいと思います!
本当は色々いじると色々表現できますが…今回は色と光り具合をいじるだけなので、Diffuse・Specular・Shadingのみ変更していきます。

■ Diffuse

主に物質の「色」が変えられます。左上の窓をクリックして真っ白に設定。
Intensityは、簡単にいうと「明るさ」です。暗いと薄汚れたパンダになりそうなので、私は1.000に設定しました。
シェーダーの種類は特に変更せずLambertで。種類によって特徴があるので、用途ごとに変えてみて下さい。
4

■ Specular

ハイライト(光で明るくなるところ)に関する設定です。同じく左上の窓でハイライトの色が設定できます。
SpecularのIntensityはハイライトの強さ。パンダがギラギラしないように低めに設定しました。
Hardnessはその名の通り硬さ。値が大きければ大きいほどハイライトがくっきりして、固い物質のように見えます。
こちらもシェーダーの種類が色々ありますが、ここは柔らかめになるPhongを設定。
5

■ Shading

オブジェクトに関わる「光」について設定します。Emitは物質自体の発光、Ambientは環境光の影響、Translucencyは受けた光の散乱具合を制御できます。ここでは暗くなりすぎないように、Emitをほんのりプラスしました。
6

ここでの解説は本当にざっくりです。本当は物理学とかが関係してて、ものすごくいじりがいがある部分なので、詳しく知りたいよ!という方はぜひBlender Wikiを熟読してみて下さい。
Blender Wiki ユーザーマニュアル
http://wiki.blender.org/index.php/Doc:JA/2.6/Manual

オブジェクトに設定

3D Viewを見てみると…
やったあパンダが白くなってる!こんな感じでマテリアルを設定していきます。
7
ちなみに別マテリアルを作って、一部だけ選択してAssignすることも可能です。

模様はどうする?UVテクスチャを貼ろう!

パンダの黒い部分は、メッシュごとにマテリアルを変えるだけではうまくいかなさそうな雰囲気ですよね。足とかギザギザになりそうだし、顔とかなんかもうどうにもならないくらい残念になりそうな予感。
今回は黒い部分を全て絵でまかなってしまいたいと思います。ここで活躍するのがUVテクスチャというやつです。

UVテクスチャを作る

UVは、メッシュオブジェクトを絵が描かれた紙でぐるっと包んで、オブジェクトに絵が描いてある感じにしちゃおうよ!的なものです。
作業の大まかな流れは、オブジェクトをUV用に展開→UVの調整→UVをもとにテクスチャを書く→読み込んで適用、です。

■ メッシュオブジェクトを展開

モデリングで作った立体物を、平面に展開します。といっても、そのまま広げると重なったりくちゃくちゃしたりでやり辛いので、「ここが切れてたら比較的平らになりやすいんじゃない?」という箇所に切れ目を入れていきます。入れ方はこちら。

切れ目を入れたい辺を選びます。ぐるっと選びたいときは、Optionを押しながら(WindowsはAltですかね?)選択すると便利です。選んだ状態でCtrl+Eを押して、Mark Seamを選んで下さい。
8

辺が赤くなりました!この部分が展開時の切れ目になります。この調子で良さげな部分に切れ目をざくざく入れていきます。耳とかしっぽとか、パーツごとに分けたりしても分かりやすいと思いますよ!
9

切れ目を入れきったぜ…と思ったところでメッシュを全選択(A)。Uを押して、一番上のUnwrapを選びます。
10

すると…ぱっと見何も起こらないので、Viewのどれかを「UV/Image Editor」に切り替えてみて下さい(ヘッダの一番左で変えられます)。何か出来てる!これがUVです!
11

■ UVの調整

展開したUVをそのまま使ってもOKです。でも、絵を描きやすいように形を変えたり、大きさを変えたりと調整をすることも出来ます。
が、今回は割愛。所詮2色のパンダなのでそのままUVを使います。
調整のやり方などは、6B計画さんのサイトなどが分かりやすかったです!

テクスチャマッピング:Project-6B
http://6b.u5ch.com/blender/texture/

■ テクスチャを描く

テクスチャはBlender上でも描けますが、慣れたペイントソフトとかを使いたいよ!という人は、ガイドを書き出して、それに合わせて外部ソフトで絵を描いて読み込むこともできます。今回は後者の方法をご紹介。ガイドの書き出しはUV/Image Editorのヘッダーから、UVsををクリック。一番上のExport UV Layoutを選びます。任意の名前でpngデータが書き出されるので、それをガイドに絵を描きましょう!
12

私はIllustratorで白地をひいて、パンダの顔、耳、腕と足を黒く塗りました。この絵を同サイズで書き出せばテクスチャの準備は完了です!ちなみに、ガイドのレイヤーは表示OFFにして書き出さないと格子状の模様付きパンダになってしまうので注意です。
13

UVテクスチャを読み込む

テクスチャの読み込みは、プロパティパネルのテクスチャタブ(チェック柄の四角っぽいヤツ)から行います。とりあえず新しいテクスチャをNewで追加。
14

デフォルトだと内蔵のテクスチャ(プロシージャルテクスチャって言うらしいですよ)「cloud」が設定されているので、ココをImage/Movieに変更します。
15

Imageという項目で、Openをクリック。先ほど作ったUVテクスチャを読み込みます。
16

続いてMappingの項目で、CoordinateをGeneratedからUVに変更します。これでOK。
17

読み込まれているかどうかの確認は、3D Viewのヘッダーで、ディスプレイモードをRenderdにします。これでレンダリングの絵がリアルタイムで見られるはずです。
18
おお!パンダ模様!
グリグリ動かしておかしいところがないかチェックして、不自然なところはテクスチャをいじっては読み込みで調整していきましょう!

パンダが薄暗いんですが…という人は、ライトがオフになっているかもしれません。オブジェクトモードに行って、ライトを移動させたレイヤーをShift+クリックでアクティブにしてみて下さい。

テクスチャで質感をUPさせよう!

UVを貼って一気にパンダ感が増しましたが、何だかトゥルトゥルで安い感じが否めません。ほんのりざらつきを加えて落ち着かせましょう。ここで活躍するのがプロシージャルテクスチャです。

テクスチャの追加

基本はUVと同じ。一番上の窓の+をクリックし、Newで新たなテクスチャを追加します。名前は任意で変えて下さい。続いてテクスチャの種類を選択。ここではnoiseを選びました。MappingのSizeを好きな数値に変えて、模様をいじることも出来ます。私は全部0.05くらいにしましたよ。
19

するとこんな感じに!
20
プレビューがピンクのツブツブで気色悪いですね。もはやじんましんみたいなので、このツブツブを凹凸に変える必要があります。

ザラザラさせる

追加したテクスチャの、Influenceの項目にいきます。今はDeffuseのColorにチェックが入っていますが、これを外しましょう。
続いてGeometryのNormalをチェック。
21

すると、パンダがぼこぼこに!
22
ちょっとゴツゴツしすぎているので、Normalの値を調節しましょう。私は0.01にしました。色々いじって自分のベストを探して下さい!

お好みでいじろう

あとはちょっとムラ感を出したかったのでプロシージャルテクスチャのcloudを追加しました。手順は上記と同じです。
23

安い置物みたいな仕上がり。すみませんこのくらいで許して下さい。

ちなみに、テクスチャは「現在選ばれているマテリアル」に紐づいています。別マテリアルを作ると、さっき作ったテクスチャはどこに行ったんだ!?となりますが、Newボタンの横にあるプルメニューで選択できるのでご安心を!

せっかくなので壁とかを作る

今のままだと、虚空にパンダが浮かぶシュールな感じになっているので、壁と床を作ってあげようと思います。背景オブジェクトは別レイヤーで作った方がやりやすいかもしれないので、オブジェクトモードで別レイヤーに変えてから作業します。

オブジェクトを追加

オブジェクトモードのままSift+Cで、3Dカーソルを中心に戻してからSift+AでCubeを追加。部屋になりそうな大きさまでSで拡大します。
大体拡大したらエディットモードへ。上面と前面を面選択で選択し、X→Faceでいらない面を削除しましょう。全選択したら、パンダの足下と床がいい接地具合になるまでGでY軸移動します。あとは壁が高すぎて独房っぽいので、ちょっと壁を低くしました。ここら辺は、前回のモデリング篇を参考にしてみて下さい!
25

マテリアルとテクスチャを設定

■ 壁の設定

壁は内蔵のテクスチャで乗り切ろうと思います。設定は以下の通りにしました。

26

壁っぽいですかね?
27

■ 床の設定

床はそれっぽく木目調にします。まずは木目のパターン素材を調達して下さい。
CG Texturesというサイトでは、登録すれば無料でダウンロードできるので便利ですよ!

[CG Textures] – Textures for 3D, graphic design and Photoshop!
http://www.cgtextures.com

こちらは壁と違うマテリアル・テクスチャ設定にします。マテリアルは適度なツヤを出すような雰囲気で。テクスチャは木目を貼りたいので、種類をImage/Movieにして読み込みます。UVではないので、MappingはいじらずOKです。

28

様子を見るために、3D Viewで床面を選んでマテリアルパネルでAssignします。…木目デケェ
29

一枚の板に絵をどべっと貼ってしまっているのでこうなります。Image MappingのExtenshionをRepeatにして(デフォルトでRepeatです)、repeat値をX、Y共に調整してみてください!
30

続いて木目の凹凸を適用させます。
新しいテクスチャを追加して、今作ったテクスチャと同じ様に読み込み、repeatの値を同じにします。パンダの質感演出と同じように、Colorのチェックを外して、GeometryのNormalをチェック、値を調整します。
31
それっぽくなった(気がしなくもない)ですね!面のサイズの割に解像度が低いので、微妙な仕上がりですが…
パンダもろとも縮小すれば、多少改善するかと思います!ここでひとまずマテリアルとテクスチャの作業は終了です。

マテリアル・テクスチャ設定編終了!

お疲れ様でした!相変わらず長いですね…申し訳ないです…
UV調整や諸々難しい部分をスルーして簡単機能ばかり説明してしまいましたが、一応パンダっぽくなったと思います。

マテリアルやテクスチャ設定は、こだわればこだわるほど仕上がりが全然変わるので、ぜひ色々調べてみて下さい!
次回はパンダが動く準備として、骨(ボーン)を入れていきたいと思います。

26 Comments

  1. GT

    こんにちは
    先日Blender(v2.75)を始めたばかりなのですが、このチュートリアルは大変わかりやすくて日頃とても参考にさせていただいております。
    今回、パンダにザラザラとしたテクスチャを加える段階でNoise→Influence→Geometry→Normalチェックとあるのですが、現在私のバージョンでは変わってしまったのか、Influence内にGeometryという項目が見つかりません。
    どうしたらよいのでしょうか?他のサイトを覗いて探してみたりしましたがわかりませんでした。どうかよろしくお願いします。

    Reply
    • JB
      JB

      GTさん、こんにちは!コメントありがとうございます。
      返信が遅くなりまして申し訳ありません…もしかしてもう解決されているかもしれませんが…

      2.75aで見てみましたが、項目ありました!テクスチャの画面でMapping・Influenceとメニューが続きますが、その中に…
      geometoryの場所です
      赤枠で囲っている部分の一番上にありました。
      Influenceの項目が閉じてると表示されませんので、もし閉じてたらInfluenceのバーをクリックして開いてくださいねー

      Reply
  2. V’s

    壁や床にテクスチャを貼り付けると四角形の対角線上に境界ができ、そこを境に木目の向きが変わってしまいます。
    http://www.dotup.org/uploda/www.dotup.org200576.png.html
    適当なアップローダーで申し訳ありませんがこのような状態です。
    よく見ると床だけでなく壁も同じ状態なのですが、調べても解決策が出てこないのでもし対策をご存知でしたら教えていただきたいです…

    Reply
    • JB
      JB

      V’sさん、こんにちは!
      コメントありがとうございます!そして返事が遅くなりまして申し訳ありません…

      ちょっとこれが原因かどうか不確定なのですが、
      床に貼ったテクスチャのプロパティパネルで、MappingのCoordinatesがUVになっていると木目が変な感じになるかもです…。
      床はUV展開していないので、CoordinatesはGeneratedのままで大丈夫です。

      違ったらすみませんが…お試しください:)

      Reply
  3. mm

    すみません。教えて下さい。
    テクスチャを貼ったら、リピートになってしまい、たくさん細かく貼られている状態です。
    どうしたら良いでしょう?

    Reply
    • JB
      JB

      mmさん、こんにちは!
      コメントありがとうございます:)

      テクスチャのリピートですが、とりあえず手っ取り早い方法を…
      プロパティウインドウでテクスチャのタブを選択 → Image Mappingの項目を展開 → RepeatのXとYをそれぞれ1にしてみてください。

      多分これで大丈夫かと思います…お試しください:)

      Reply
      • mm

        JBさん、突然質問してすみませんでした。
        おかげさまで解決しました。ありがとうございます!!

        Blender初心者なので、なかなか難しいですが
        丁寧な説明でとても参考になります。
        また迷ったらお願いします^^

        Reply
        • JB
          JB

          mmさん
          解決してよかったです!
          ぜひぜひBlender楽しんでくださいねー:)

          Reply
  4. Tyam

    丁寧な説明でとてもわかりやすく助かっております。

    ひとつわからないことがあるので質問させてください。
    MaterialをIllustratorで編集、書き出しをする際、元の画像とサイズが変わってしまい困っています。

    >Illustratorで白地をひいて、パンダの顔、耳、腕と足を黒く塗りました。
    >この絵を同サイズで書き出せばテクスチャの準備は完了です!
    >ちなみに、ガイドのレイヤーは表示OFFにして書き出さないと格子状の模様付きパンダになってしまうので注意です。

    この部分なのですが、ガイドのレイヤーを表示OFFして書き出すとサイズが700×1025ぐらいになってしまいます。
    ガイドのレイヤーを消さなければ書き出される画像は1025×1025で概ね良好です。(元画像は1024×1024)

    ガイドのレイヤーを消し、元画像と同じサイズの画像を書き出せるやり方があれば教えていただけるとありがたいのですが。

    Reply
    • JB
      JB

      Tyamさん こんにちは!
      こちらこそコメントありがとうございます:)

      Illustratorをお使いということなので、まずはアートボードのサイズが1024×1024かどうかをチェックしてみてください。
      書き出しの際はWeb用に保存を使用します(jpgでもpngでも大丈夫だと思います)。画像サイズの項目でサイズ100%、「アートボードサイズでクリップ」にチェックが入った状態で保存すれば多分行ける…はずです…。
      お試しください:)

      Reply
  5. kaikai

    こちらのサイト、とても分かりやすくてすごく便利です!
    はじめましてで不躾ですが、質問があります。
    テクスチャを描く際、ガイドのレイヤーをoffにする方法が分かりません
    お暇がございましたら、お返事ください

    Reply
    • JB
      JB

      kaikaiさん、こんにちは:)
      コメントありがとうございます!お役に立てまして光栄です!

      ガイドレイヤーの件、チュートリアル通りだと多分何かのグラフィックソフトで作成されていると思うのですが…

      Illustratorなら、元絵のping画像を非表示に(ウインドウ > レイヤーでレイヤーパネルを出して、< 画像>の目のマークをクリックして非表示)して出力、
      Photoshop、GIMP(フリーソフトです)ならレイヤーを追加してそちらに絵を描く→元絵のレイヤーの目のマークをクリックして非表示にしてから出力すればOKです。

      windowsに付属しているペイントだと、残念ながらレイヤー機能がないので、模様を塗りつぶすしかありません…。
      質問の答えとして合ってるかどうか分からないですが…お試しください:)

      Reply
      • kaikai

        お返事ありがとうございます!
        windowsのペイントでやっていました…
        gimpにてやりなおしたところ、ぶじ模様がつけられました!
        ありがとうございました!

        Reply
        • JB
          JB

          上手く行ってよかったです:)
          これからもBlenderを楽しんでくださいねー

          Reply
  6. 何度もすみません、ジオメトリのノーマルにチェックを入れ数値を変更しても表面が凸凹になりません。

    Reply
    • JB
      JB

      大丈夫ですよ!お気になさらず:)

      一応3D Viewの表示モードを確認していただいて(Renderedにします。ツルッとしたアイコンがRenderedです。)直らないようなら、
      一回テクスチャを貼りたいメッシュオブジェクトを選択して、マテリアルパネルで作ったマテリアル(テクスチャも紐づいているので)をAssignをしてみたらいいかもしれません。
      上手く行かないかもしれないですけど…そしたら…すみません…。

      Reply
  7. これは自己解決しましたが、書かれている手順通りにUV/Image Editorを開いてもUVが表示されませんでした。

    Reply
    • JB
      JB

      あ さん、こんにちは!
      コメントありがとうございます:)

      いまいち状況が分からないので再現されないのですが…わかりにくい部分があったかもしれないです…申し訳ありません。
      おかしい部分などはご指摘いただけるとありがたいです!
      シームに関しては、User PreferencesのThemesでUIなどの色を変えていたりすると、赤くならないかもしれないです。
      テクスチャはMappingのCoordinatesがしっかりUVになっていて(一応Map:もUVMapにした方がいいかも)、3D Viewの表示モード(Viewport Shading。まるいアイコンが選べるところです)がRenderedになっているかを確認してみてください!

      Reply
  8. 書かれている手順でUVテクスチャを読み込んでも3DVIEWに反映されません。

    Reply
  9. altoron32

    何度も申し訳ありません。操作をしていたら、上のツールバーや下のタイムライン、右のプロパティパネルの横のテクスチャ等の項目があるパネルが消えてしまいました。1個ずつなら出せるのですが・・・。どうしたら初期状態のようなパネル配置にできるでしょうか?

    Blender のバージョンは2.70です。

    Reply
    • JB
      JB

      altoron32さん
      こんにちは!コメントありがとうございます:)

      パネルが消えてしまったとのことですが…ビューを拡大してしまったのかもしれません。
      ctrlキーと↑↓キーで、カーソルがあるビューが拡大・縮小されます。これが原因なら、ctrl+↓で直るかと思います。

      それで直らなければ、結合されてしまったのかもしれません。これはチマチマ分割して割り当てるしかないかと…(他にも方法があるかもしれません)。
      もし何も作っていない状態なら、情報バー(左端のアイコンが選択できるところでInfo(iのマーク)を選べばOK)からFile → Load Factory Settingを選ぶと初期画面に戻ります。が、作った物も戻ってしまうのでご注意ください

      プロパティパネルは、3D Viewの右端にある+マークのタブを押しても出てきます!
      2.71はショートカットが効くのですが…カーソルが3D View上にないと出てこなかったりするので、気をつけてみてくださいー
      長くなってしまって申し訳ないですが…お試しください!

      Reply
  10. dIなごん

    UVテクスチャを読み込んだ時に黒で塗りつぶしたところはきちんとできていますが、
    白で塗りつぶしたところが灰色になってしまいます。
    黒い部分は光沢?もきちんと出ていますが灰色の部分には出ていません。
    解決策をご存じでしたら教えてください。
    テクスチャはPhotoshopで塗りました。

    Reply
    • JB
      JB

      dIなごんさん、こんちには!
      コメントありがとうございます:)

      あまり詳しくないモノでお役に立てるかどうか分かりませんが…考えられそうな項目をいくつか挙げてみますね!

      • マテリアルパネルのDiffuseのIntensityが小さくなっている
      • マテリアルパネルのShadingのEmitの値が小さくなっている
      • マテリアルのDiffuseが灰色で、テクスチャパネルのInfluenceのBlendモードがMultiplyやDarkenなどになっている(元はMix)

      白い部分を別の色で塗ったものを読み込んでみて、ちゃんと色が出るようだったら、上記のどれかで直るかと思いますー:)
      直らなかったら…すみません…

      Reply
      • dIなごん

        白と黒以外の色を塗ってみたところ、きちんと反映されていました。
        ただライトの位置も調整しているのに少し暗いといった感じです。
        灰色の部分は光沢が付かないと書きましたがよく見ると付いていました。

        考えられる項目を全てやってみましたがShadingのEmitの値を変更すると少し白っぽくなりました。
        ただ今度は白以外の色が薄くなってしまいました。
        他の2つの項目も試してみましたがあまり変わらなかったです。

        他に同じ現象が起きた方を探してみます。
        ご丁寧な回答ありがとうございました:)

        Reply
        • JB
          JB

          お役に立てずすみません;
          多分マテリアルパネルやテクスチャパネルあたりの問題だとは思うのですが…
          Blender.jpのフォーラムなどは熟練の方が答えてくれる可能性が多いので、
          どうしても見つからない場合は質問してみるのも手ですよ!

          Reply

コメントをどうぞ

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


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00