2015年3月26日木曜日

タイル床を作る~ SubStance Painter + Unity5

タイル床(?)らしきものを簡単に作ってみるメモ。



つくるモノの概要

  • 3Dモデルは単なる平たい四角形。
  • 左右の濃い色と中央とで質感を変えてみる。
  • タイル溝部分はノーマルマップで凹ます。 



    環境

    Windows7x64
    PhotoShop5.5。 ※png形式等で出力できればなんでも可。
    Blender2.73a(x64)。 ※Obj形式で出力できればなんでも可。
    SubStance Painter1.32。
    Unity5.0.0f4(x64)。


    モデリング


    Blenderで作業。
    OBJ形式で出力できれば3Dツールは何でも良いと思います。

    モデルはただのCubeを上下つぶして四角い板状にしただけです。

    UVは上面を床(?)として使う前提でテクスチャ全面に展開。
    (Blenderなら3D Viewで u>unwrap)。
    下面、横面はどうでも良いですが、一応下図では適当な位置にUVを配置。

    できたらOBJ形式でExport。
    Blenderだとモデルを選択状態にして File>Export>Wavefront(.obj) で以下のような感じに。

    マスクを描く

    SubStance Painter上での作業用にマスクを描きます。
    ※最終的なテクスチャは全てSubStance Painter上で生成します。
     ここで作成するマスクはその作業を補助するものです。
    今回はPhotoShopを使っていますが、GMP2でもなんでも良いです。
    pngかtgaあたりで出力できればなんでも可。

    一応最終的な完成イメージは以下のような感じとしました。


    これをSubStance Painter上で作るために、2つのマスクテクスチャを描きます。

    ■タイル溝マスクテクスチャ

    格子線でタイル溝を描きます。
    赤色に特に意味はないです(気分です)。

    ■床面マスクテクスチャ

    中央と左右で床の色を変える為のマスクを描きます。
    既に完成イメージの単色で塗ってありますが、マスクとしては何色でも構いません。
    ※PhotoShop上で色彩を決めたので、そのまま色がのっているだけです。 
    ここで色をのせておくと、SubStance Painter上でスポイドで色を拾えてちょっと便利。


    2つのマスクはpngかtga等で保存しておきます。

    テクスチャ作成

    SubStance Painter上で作業。

    ■新規プロジェクト作成

    File>New (又はCTRL+N)で新規プロジェクト作成ダイアログを開く。
    右上のSelectをクリックしてExport済みのObjファイルを選択。
    Addをクリックして保存済みのマスクテクスチャ2つを選択。
    ※CTRLを押しながらファイルを選ぶと複数選択可能。
    OKをクリックで進む。



    画面下部のShelfパネル内のTextureタブにマスクテクスチャ2つが追加されていることを確認。
    ※もし無ければ File>Import image で読み込む。
    右上のLayersパネル内のLayer1は使わないので、左クリックで選択、DELキー押しで削除する。


    ■左右濃緑部分のレイヤ作成

    【色選択マスク作成】

    Fill layer を追加&Add mask with color selectionでColor selectionを付与。
    参考: 色選択マスク ~ SubStance Painter

    ID Maskでインポート済みの床面マスクテクスチャを指定。
    Pick colorをクリックすると2D/3D画面内がマスクの色を拾うモードに変化します。
    そこで左右の濃い緑部分をクリック。2Dでも3D画面内どちらでも可。



    Fill Layer 1の文字のところでダブルクリックするとレイヤ名を変更できます。
    ここではわかりやすいように Side Line に変更してあります。


    【色をのせる】

    レイヤの左側をクリックして選択(Fill Layer)。
    Base Colorをクリック。


    ここで左右の濃い緑色を指定します。RGB値で入力しても良いのですが、ここではスポイトを使うと楽です。

    ポップアップしているカラーウィンドウ内にスポイトアイコンがあります。
    このスポイトアイコン上でマウスの左ボタンを押したままドラッグして拾いたい色のところで離します。
    読み込み済みのマスクに既に色がついているのでそこで離せば色が拾えます。


    これで左右の端をマスクにしてFill Layerの色が適用された状態になります。


    ■中央薄緑部分のレイヤ作成

    前項と要領は同じです。

    Fill layerを1つ追加してColor selectionで、
    ID Maskは前項と同じマスクテクスチャを指定。
    Pick colorは中央の薄い緑部分を指定。

    Base Colorは中央の薄い緑色を拾います。

    レイヤ名をCenterに変更しておきます。

    ■タイル溝部分のレイヤ作成

    要領は同じです。
    Fill layerを1つ追加してColor selectionで、
    ID Maskはタイル溝マスクテクスチャを指定(赤い色の方)。
    Pick colorは格子の黒い指定。細いのでズームして拾うと良いです。

    Base Colorは格子の部分が細すぎてスポイトでは難しいので、RGB各0値で黒にしておきます。

    レイヤ名をCross Lineに変更しておきます。

    ■質感調整

    【Side Lineレイヤ】

    Side Lineレイヤをクリックして選択。
    同レイヤの左側のアイコンをクリック(マスクではない方)。



    レイヤパネル下の Properties - Fill を見ます。
    その中にRoughnessやMetallicのスライドバーがあります。
    ここで質感を調整。
    • Roughness
      0に近い程反射。1に近い程反射しない。
    • Metallic:
      1に近い程金属らしい反射が強くなる。
      ただしRoughnessとの兼ね合いもある。鏡面反射的な要素はRoughnessが支配的。
      Roughness=0.0、Metallic=1.0 で最もきれいな鏡面反射に。
      Roughness=0.0、Metallic=0.0 にすると鏡面反射しつつやや表面が濁る質感に。
    今回は、Roughness=0.6程度、Metallic=0.2程度にしておきます。
    ※スライドバー上のMetallic文字上をクリックするとさらにDirt等のテクスチャを使ってMetallicの設定もできます。

    【Centerレイヤ】

    同じ要領でCenterレイヤも質感調整。

    Roughness=0.5程度、Metallic=0.1程度にしておきます。

    【Cross Lineレイヤ】

    同じ要領でCross Lineレイヤも質感調整。

    Roughness=0.3程度、Metallic=0.0程度にしておきます。

    溝を凹ましたいので、Heightのスライドバーを0にします。

    こんな感じになります。


    ■Export

    いよいよテクスチャ出力です。

    Unity5のShader=Standardで使う前提で出力します。


    File>Export all channnels (又はCTRL+SHIFT+E)でダイアログを開く。
    ここでは出力形式をpngとしていますがUnityで読めれば何でも良いと思います。
    Config行のプルダウンから Unity5(Standard Metallic) を選択。
    Exportします。
    ※出力先フォルダは上部に見えるパスをクリックで変更可能。

    ※ダイアログでは4ファイル見えていますが、実際の出力は3ファイル。

    Unityで使う

    Exportした3つのテクスチャファイルはそれぞれ、
    1. ~AlbedoTransparency.png
      絵テクスチャ。
    2. ~MetallicSmoothness.png
      メタリック用テクスチャ
    3. ~Normal.png
      ノーマルマップテクスチャ
    と、なっています。


    これらをUnity画面のAssetsにドラッグ&ドロップで放り込みます。
    Export済みモデルのObjファイルも同様にAssetsに放り込みます。

    モデルをシーンに配置。
    モデル内のdefaultを選択。
    Inspectorからマテリアル(defaultMat)を展開。

    Main Mapsの下で各テクスチャを設定。
    ノーマルマップは Fix Now の問い合わせが出てくるのでクリックする。



    こんな感じに


    ただの板きれモデルが、それっぽい感じに♪


    考察


    ブログで書くと非常に面倒ですが・・・マスクテクスチャのデザインさえ決まれば、実作業は1時間もかかりません。

    今回マテリアルは全てSubStance Painterで調整。

    SubStance PainterはちゃんとUnity5向けのExport設定が用意されているのが嬉しいです。

    光源の違いで若干の差はでるものの、実質ほぼSubStance Painter上で見たものがUnity5で再現できます。

    今回のタイルの溝のようなものは、SubStance Painter上のHeight設定で簡単にノーマルマップ化できるので楽です。

    SubStance Painter上でさらにウェザリングの類もかけられるので便利だと思います。
    (Dirtやオイル汚れ等々)

    思うにSubStance Painterのプリセットマテリアルの把握と調整加減が肝なので、そこの感覚をつかむまでに時間がかかりそうです。


    追記~Androidで使う

    Androidなどのスマホ/タブレット系で使う際、Unity5のシェーダーをMobileにしたい場合があると思います(軽くなるはず)。

    その場合は、
    • Mobile/Bumped Specular
    • Mobile/Bumped Specular (1 directional light)
    あたりを使うと思います。

    このシェーダーを使う際は絵テクスのRGBAが、

    RGB=Diffuse、A=Gloss

    となる為、SubStance PaiterでUnity5指定でExportすると合致しません。

    Unity4を指定してExportします。
    ※SubStance PainterのExportダイアログ、Configurationタブをまじまじ見るとわかりやすい。
     右下のconverted mapsの色アイコンとOutput mapsの色アイコンを見比べるとよくわかります。



    1. ~_DiffuseGlossiness.png
      Base(RGB) Gloss(A) のテクスチャに割り当てます。
    2. ~_DiffuseIllumination.png
      使いません。
    3. ~_Normal.png
      Normalmapに割り当てます。
    若干見え方が変わりますが、一応使える感じです。


    独り言

    モノによっては非常に楽ができそうです。
    (BlenderでArrayでタイル並べてローポリにベイクしてる場合ではなかった(笑;


    PopcornFXなんてのもちょっと気になりますね(ボソ


    0 件のコメント:

    コメントを投稿