ラベル Unity-メモ の投稿を表示しています。 すべての投稿を表示
ラベル Unity-メモ の投稿を表示しています。 すべての投稿を表示

2015年6月1日月曜日

SDユニティちゃん活用その3 ~Blenderでエクスポート~

SDユニティちゃんのアバターモデルをBlenderでエクスポートするメモ。



環境

Windows7x64
Unity 5.0.1f1 Personal
Blender2.74(x64)
SDユニティちゃん 3Dモデルデータ Download ver1.0。(2015/5時点最新)

※作業中素材には『ユニティちゃんライセンス』で提供されるコンテンツを利用しています。




前提

前記事まで作業後SDユニティちゃんをインポート済みから作業しています。





Blenderでエクスポート


SDユニティちゃんを選択状態にして、エクスポート。

  1. 念の為一旦、Objectを全表示、非選択状態にする
    1. 3D VIew上で、ALT+Hキー押し(全Object表示状態)。
    2. 3D View上でAキーを1回~2回押して、何も選択しない状態にする。

  2. SDユニティちゃんを選択
    1. Outliner上で Mesh_SD_unitychan を選択する
      Mesh_SD_unitychan 行の左のアイコンを CTRL+左クリック。
      ※ツリー下層も含めて全選択される。



  3. <0, 0, 0>座標に配置
    1. 3D View で Transformパネルの表示を確認。
      表示されていない時は3D View画面上で nキーを押して表示。
    2.  TransformパネルのLocation座標 X,Y,Zを0にする。

    ※<0, 0, 0>からずれていると、Unityでインポートした際にオフセットがかかる為。

  4. FBXエクスポート画面を開く。
    File > Export > FBX (.fbx)

  5. エクスポート
    左の Export FBXパネル を設定後、右の Export FBX ボタンをクリックでエクスポート。


    補足:
    • Add Leaf Bones にはチェックは入れない。
      入れるとボーン末端に余分にObjectが付与されるので。


ファイル名の拡張子 .fbx でファイルを出力。

このファイルを次回Unityでインポートします。


2015年5月29日金曜日

SDユニティちゃん活用その2 ~Blenderでマテリアル設定~

SDユニティちゃんのアバターモデル(Blenderでインポート後)を、マテリアル経由でテクスチャ設定するメモ。





環境

Windows7x64
Unity 5.0.1f1 Personal
Blender2.74(x64)
SDユニティちゃん 3Dモデルデータ Download ver1.0。(2015/5時点最新)

※作業中素材には『ユニティちゃんライセンス』で提供されるコンテンツを利用しています。




前提

前記事でBlendrにSDユニティちゃんのモデルデータ(SD_unitychan_humanoid.fbx)をインポートした状態から作業していきます。

補足:Blenderで新規作成状態で配置されるランプのままだと暗くて見えにくいので、適当にHemiなどに変更してメッシュ面が見やすいようにしておくと良いです。





メッシュパーツを確認

マテリアルを設定するメッシュのパーツは全部で6つ。
各Object名は以下の通り。
  • _Fhair   (前髪 左右分け)
  • _Fhair2  (前髪 中央)
  • _body    (手足体全体)
  • _eye     (目)
  • _face    (顔)
  • _head   (頭部、ツインテール髪、ツノ)
※Object名がアンダーバー( _ )で始まるように統一されているのが特徴。



Blender上で Outliner ウィンドウにて、Mesh_SD_unitychan から下に展開していきます。

Mesh_SD_unitychan > Character1_Reference




下の方にスクロールすると先程の6つのメッシュObjectがあります。

Outliner上で _body を左クリックすると 3D View上でもメッシュが選択状態になります。
マテリアルも _body のものが選択状態になります。

以後「を選択状態にする」といった場合は Outliner上から主に操作しています。




作業方針

SD Unityちゃんをインポートした状態で既にマテリアル名やテクスチャへの参照も一応インポートはされています。

しかしBlender上でのテクスチャ類の細かい部分が自動設定されない為、3D View上で灰色になっている状況です。


作業方針として以下のような感じで進めています。
  • マテリアルの質感設定などはデフォルトのまま使う。
  • テクスチャを見えるように設定する。
  • ノーマルマップが反映するように設定する。
  • スペキュラマップは使わない。
  • 環境マップは使わない。
  • 輪郭部の表現は使わない。(トゥーンシェーダー?というか、アニメ的な輪郭フチ取り)


最低限のテクスチャとノーマルマップの設定のみを行う感じで作業します。

※Unity上で使用時にマテリアルは再設定するので。
Blender上でSDユニティちゃんの動画を作る場合等ではまじめに設定要だとは思いますが。当面の目的から逸れるのでスペキュラ類は割愛しています。




あと作業中はマテリアルが見えるように3D Viewを設定しておきます。
(3D Viewメニューから、Viewport Shading を Material に設定)




マテリアル設定

まず_body のマテリアル設定をしてみます。


_bodyにアサインされているマテリアルはdef_matskin_mat の2つ。
  • def_mat   → 衣服面のマテリアル。
    テクスチャ、ノーマルマップの設定を行う。
  • skin_mat  → スキン面のマテリアル。
    テクスチャの設定を行う。

作業内容は各マテリアル内のテクスチャ設定欄で Color や Nomal map 指定を行うだけです。





■マテリアルの選択方法

  1. 3DView上で Object Modeにします。 
    3D View下部のメニューバー操作ないしはTABキー等。

  2. 3DView上で何も選択していない状態にします。
    Aキーを1~2回押す等で。

  3. Outliner上で _body を左クリックして選択状態にします。
    3DView上でもメッシュが選択状態になります。

  4. PropertiesウィンドウでMaterialを見る。
    2つのマテリアル def_matskin_mat がアサインされているのが見えます。

    ここで def_matskin_mat のマテリアルいずれかを選択する操作ができます。





■マテリアル内のテクスチャ設定

マテリアル def_mat を設定していきます。

  1. マテリアル def_mat 選択する。

  2. テクスチャボタンを左クリック。


  3. テクスチャとノーマルマップのみを有効にする。
    utc_all2.tgautc_normal.tga の2つのみチェックを入れる。
    他の ~.tga のチェックは外す。
    ※FO_CLOTH1.tga は 服の輪郭用(?)。utc_spec.tga は 服のスペキュラ用。ENV2.tga は写りこみ用環境マップ。
    今回これらはBlender上では使わない。



  4. テクスチャの選択。
    utc_all2.tga の文字の上(又は左の小さいアイコン上)を左クリックして選択状態にする。
    ※選択状態になるとすぐ下の Preview に反映されます。


  5. InfluenceパネルDiffuse: Colorにチェックを入れる。
    ※Colorのチェック欄は下にスクロールしていくとあります。
    3DViewにテクスチャの色が反映されます


  6. ノーマルマップの選択
    utc_normal.tga の文字の上(又は左の小さいアイコン上)を左クリックして選択状態にする。
    ※選択状態になるとすぐ下の Previewに反映されます。


  7. Image SamplingパネルNormal Map にチェックを入れる。
    ※中ほどにスクロールしていくとあります。


  8. InfluenceパネルGeometry: Normalにチェックを入れる。
    ※下にスクロールしていくとあります。


  9. 服部分(def_mat)にテクスチャとノーマルマップが反映。




次にマテリアル skin_mat を設定していきます。


要領はマテリアル def_mat の設定と同じなので詳細割愛です。
作業の流れは以下の通り。

  1. マテリアル skin_matを選択する。

  2. テクスチャボタンをクリック。
    テクスチャのリストに以下の2つがある。
    • utc_all2.tga   →  同行内右端にチェックを入れる。(スキン部分)
    • FO_SKIN1.tga  → チェックは外す。(スキンの輪郭用なので使わない)

  3.  utc_all2.tga をクリックして選択。
    InfluenceパネルDiffuse: Colorにチェックを入れる。

  4. スキン部分が3DViewに反映されます。




■ _eye の設定

  1. マテリアルは mouth_mat のみ。
  2. テクスチャは utc_all2.tga のみにチェック入れ。FO_SKIN1.tga は使わない。
  3. utc_all2.tga を選択し、InfluenceパネルDiffuse: Colorにチェックを入れる。(目に色がのる)


■ _face の設定

マテリアルは skin_matmouth_mat
この2つのマテリアルは既に設定済みなのでそのまま(何もしない)。


■ _head の設定

マテリアルは hair_matmouth_matnol_mat
mouth_mat は既に設定済みなのでそのまま。

  1. マテリアル hair_mat を選択。

  2. テクスチャボタンをクリック。
    テクスチャのリストで以下のようにチェック入れ。
    • utc_all2.tga       → チェックを入れる。
    • FO_CLOTH1.tga  → チェックを外す。(輪郭用)
    • utc_spec.tga           → チェックを外す。(スペキュラ用)
    • utc_normal.tga    → チェックを入れる。
    • ENV2.tga               → チェックを外す。(写りこみ環境マップ用)

  3. utc_all2.tga をクリックして選択。
    InfluenceパネルDiffuse: Colorにチェックを入れる。(ツインテ髪に色がのる)

  4. utc_normal.tga をクリックして選択。
    • Image SamplingパネルNormal Mapにチェックを入れる。
    • InfluenceパネルGeometry: Normalにチェックを入れる。

  1. マテリアル nol_mat を選択。

  2. テクスチャボタンをクリック。
    テクスチャのリストで以下のようにチェック入れ。
    • utc_all2.tga       → チェックを入れる。
    • FO_CLOTH1.tga  → チェックを外す。(輪郭用)
    • utc_spec.tga        → チェックを外す。(スペキュラ用)
    • utc_normal.tga    → チェックを入れる。
    • ENV2.tga             → チェックを外す。(写りこみ環境マップ用)

  3. utc_all2.tga をクリックして選択。
    InfluenceパネルDiffuse: Colorにチェックを入れる。(ツインテ髪の一部に色がのる)

  4. utc_normal.tga をクリックして選択。
    • Image SamplingパネルNormal Mapにチェックを入れる。
    • InfluenceパネルGeometry: Normalにチェックを入れる。

■ _Fhair の設定

マテリアルは hair_matnol_mat
この2つのマテリアルは既に設定済みなのでそのまま(何もしない)。


■ _Fhair2の設定

マテリアルは hair_matnol_mat
この2つのマテリアルは既に設定済みなのでそのまま(何もしない)。




これで一通りマテリアル経由でのテクスチャ設定が終了。
3DViewのObjecet Modeにて、Viewport Shading: Material になっていれば以下のように見えます。




これでSDユニティちゃんのアニメーション制作などもやりやすいですね!




補足1

ここまでの作業ではマテリアル経由でテクスチャを設定してます。

3DViewのViewport Shading: を Texture で見たときは灰色のままです。

UV/Image Editor でテクスチャを読み込めばテクスチャで見えるようになります。
  1. _bodyを選択。

  2.  3DView で Edit Modeにする。

  3. Aキーを押して、メッシュ全選択。

  4. UV/Image Editor上で、
    1. ALT+O押し。
    2. Textureフォルダ内の utc_all2.tga を選択して読み込む。

  5. Object Modeにする。
これでテクスチャが見えるようになります。
(ノーマルマップは見れません)

同じ要領で残りの5つのメッシュにも貼りこめばOKです。


ノーマルマップは見れないのですが、マテリアルで見るよりも若干軽い感じです。




補足2

状況とか使い方によりますが高速化重視と考える場合。

Blender上でマテリアルを1つのみにしてしまいテクスチャは utc_all2.tga のみにしてノーマルマップも省いてしまうという思い切った軽量化もアリかも。
これで1つのマテリアルを6つのメッシュで共用のみに。

Blenderでfbxエクスポート、Unity上へインポート後、シェーダーは Unlit > Texture にしてしまうと、幾分高速化している気がします。


2015年5月28日木曜日

SDユニティちゃん活用その1 ~Blenderでインポート~

BlenderもバージョンアップしたのでSDユニティちゃんのインポート手順を再度整理&メモ。





環境

Windows7x64
Unity 5.0.1f1 Personal
Blender2.74(x64)
SDユニティちゃん 3Dモデルデータ Download ver1.0。(2015/5時点最新)

※作業中素材には『ユニティちゃんライセンス』で提供されるコンテンツを利用しています。




準備

SDユニティちゃんのFBXファイルはUnity Packageで配布されているので、

  • 「SDユニティちゃん 3Dモデルデータ」を公式サイトからダウンロード
  • Unityでプロジェクト作成、Packageをインポート
  • 使うFBXファイルを確認 
  • BlenderでFBXファイルをインポート

の、ような手順で進みます。




■3Dモデルデータのダウンロード

公式サイトへ行き3Dモデルデータをダウンロード。

→ 公式サイト: http://unity-chan.com/contents/guideline/


キャラクター利用ガイドラインを読み、同意できればDOWNLOADページへ進む。

「SDユニティちゃん 3Dモデルデータ」をみつけてパッケージファイル(SD_unitychan.unitypackage)をダウンロードする。





■Unityでパッケージをインポート

Unityを起動。空プロジェクトを作成。

メニューバーから、

Assets > Import Package > Custom Package

にてパッケージファイル SD_unitychan.unitypackage を指定。




ダイアログが開くので右下の Importボタン をクリック。

インポートに成功していれば、Assets欄に UnityChan のフォルダができる。





■インポートに使うFBXファイルを確認

Assets欄の UnityChan のフォルダから階層をたどって、
  • Assets/UnityChan /SD_unitychan/Models 
まで展開。

右欄に見える SD_unitychan_humanoid の上で右クリックメニューから、Show in Explorer をクリック。

エクスプローラーが自動起動して開いたフォルダ内の、
  • ファイル SD_unitychan_humanoid.fbx
これをBlenderでインポートして使うので、ここでのエクスプローラーのフォルダ位置を覚えておきます。



また同じフォルダ内の、
  • フォルダ Textures
配下にテクスチャ類が入ってます。

Blenderで SD_unitychan_humanoid.fbx をインポート直後のマテリアルはここのテクスチャを参照しています。

※このUnityプロジェクトは残しておく方が楽です。消す場合は Texturesフォルダのコピーとマテリアルのテクスチャ参照を手動で要設定。
※又は、FBXファイルとTexturesフォルダを予めどこかにコピーしておいた後に、Blenderでインポートする等。





Blenderにインポート

Blenderを起動。
メニューバー File > Import > FBX (.fbx) でインポート画面へ。



ファイル SD_unitychan_humanoid.fbx を指定。
左列のオプションは以下のような感じで。
Automatic Bone Orientationにチェック入れを忘れずに。


インポート後の状態。

この段階で一応インポートはできています。

※Unity上で既存Unityちゃんのアニメーションコントローラで一応動かせます。
※髪などのアニメーションはUnity上で別途ユレモノ設定が必要。

※この段階ではマテリアルの設定が不完全なのでテクスチャ類はまだ見えていません。



一応少し調整をしていきます。




階層の調整

インポート直後は2つのObjectがOutlinerに見えます。
これを入れ子にします。

Outliner上で Character1_ReferenceMesh_SD_unitychan へドラッグ&ドロップします。

操作のポイントは行の左の小さなアイコンをつかんで、ドロップ先もアイコンの上にするとやりやすいです。



ここで一旦Blender作業用のフォルダを決めてSave(blend形式)しておきます。
File > Save as でファイル名指定で保存)

追記: この作業は動作上必須ではないですが、UnityとBlender上で見やすくなるので。




向きの調整

これもUnityでは動作上必須ではないですが、一応作業しておきます。


インポートしたモデル(SD Unityちゃん)をBlender上でよく見てみると、
  • 3DView で Object Modeだと直立している(問題無し)。
  • Pose Modeでは直立(問題無し)。
  • Edit Modeにすると前方に90度倒れる(問題点)。
    メッシュ、アーマチュア(ボーン)共に倒れる
    (問題点)

ということで、Edit Modeで向きが90度倒れる問題を調整してみます。


  1. 3D Viewウィンドウ で Object Modeにする

  2. 真横からモデルを見る
    テンキー3押し。
    遠近(Perspective)で見えている場合はテンキー5押しで垂直視点にする(Ortho)。



  3. Pose Mode で アーマチュアのみ全選択
    3D View上でアーマチュアを右クリック選択、
    (又はOutliner上で SD_unitychan 配下の Pose を CTRLクリック等)。
    その後 Pose Modeにする。
     Aキー押しで アーマチュアを全選択状態にする(1回~数回押しで確認)。



  4. Rest Position を現在位置で再設定する
    3D Viewウィンドウのメニューバーから、Pose > Apply > Apply Pose as Rest Pose
    又は、3D View上で CTAL-A > Apply > Apply Pose as Rest Pose


  5. この段階でアーマチュアは倒れなくなりますが、メッシュが90度前に倒れます


  6. 3DView上でObject Mode でアーマチュアのみを選択。
    選択マーカー(赤青緑のXYZを示す矢印)がモデルの足元付近にあることを確認。


  7. 3Dカーソルを選択マーカー位置へ移動する。
    3D View上で SHIFT+Sキー押し > Cursor to Selected。


  8. Pivot Pointを3D Cursorにする
    3D Viewメニュー > Pivot Point > 3D Cursor


  9. メッシュを90度回転する
    Outliner上で Mesh_SD_unitychan のツリーを展開し、下方にスクロール。
    6つのメッシュがあることを確認します。
    ( _Fhair、_Fhair2、_body、_eye、_head、_face)


    _face以外を 1つずつ90度回転させていきます。

    以下 _body の手順です、他4つも同様手順で90度回転します。
    ※ここまでの作業での3D Cursorの位置、Pivot Pointを3DCursor設定等が済んでいないとうまく回転しません。

    1. Outliner上で _body を左クリックで選択する。
    2. 3DView上で Edit Modeにする。
      TABキー押し、又はメニューバーでの操作で。
    3. メッシュを全選択する。
      Aキー押し。
    4. メッシュを90度回転
      Rキー押し > 9キー押し > 0キー押し ※数字キーはテンキーではない方を使う。


    5. 他、_Fhair、_Fhair2、_head、_eye の4つも同様手順で90度回転を行います。
      ※大きいメッシュからやると良いです。_eye等の小さいメッシュが隠れていて確認しにくいので。

これで Edit Modeでも前に90度倒れなくなります。




追補1

調査が甘いかもしれませんがついでにメモ。
(間違いもあるかもしれません)
  • Blenderのアーマチュアは上(先端)が必ずローカル軸のY+の向きに固定
    Blenderの仕様らしいです(Octahedraでとんがってる方がY+)。
    SDユニティちゃんをインポートした際、アーマチュアのXYZの向きは合っていても、この仕様で先端(とんがり)がY+に向くのでおかしく見えます。
    そこで Automatic Bone Orientation にチェックを入れてインポートするとアーマチュア個々の回転で向きを補正をしてくれるという対策。

    Rest PositionでY+側に倒れこんだ状態になるのもこの辺の差異の影響ではないかと推察

  • SDユニティちゃんの元のボーンは上(先端)がZ+
    多分Z+が先端(な気がします)なのでBlenderの仕様もあいまって向きの補正が必要になるようです。

  • Blender の Rest Position
    Rest Position はアーマチュアを最初に作成しはじめた際の基本的な配置で、アニメーションやその他のアーマチュアに関係するものはこの状態を基点にしているようです。
    作業が進んだ状況でいじると、付随していろんなものがずれてとんでもないコトになるらしいので要注意。
    よってインポート直後の段階で、直立状態を Rest Positon に再設定しておく、というのが前項の作業です。

  • 座標系の違い
    BlenderはOpenGL系(右手系)でDirectX系(左手系)とXYZの軸の取り方が異なるので変換を要する、なるほど面倒;。





追補2

Blenderのバージョンによるインポート状況が少しややこしいことになっています。

SDユニティちゃんの Generic版 と Humanoid版 のFBXファイルをインポートしてみた状況が下図。


ver2.74ではHumanoid版はうまく読見込めてますが、Generic版はメッシュ部分が90度倒れてます。ver2.73aでは逆です。
(Blender2.73より古い版ではうまくインポートできない/特定条件化でのみインポート可能などさらにややこしい)


ver2.73aでGenericをインポートして作業しても一応使えてましたが、記事中では再度最新ver2.74でHumanoid版をインポートして使っています。

2015年4月26日日曜日

SDユニティちゃんを小さくして使う

SDユニティちゃんのモデルサイズを変更して使う際のメモ。

モデルの大きさは簡単に変更できますが、ユレモノ関係の当たり判定が元サイズのままで服や髪がきれいに揺れてくれません。

今回はこれをなんとかしてみます。


目的

SDユニティちゃんを元サイズの1/2で使いたい(実質背丈が半分)。
ユレモノも適切に揺らしたい。
※最終的には任意倍率で調整可能にします。

環境

Unity5.0.1f1 personal

※SDユニティちゃんのAssetはダウンロード&プロジェクトにImport済み前提。
※作業中素材には『ユニティちゃんライセンス』で提供されるコンテンツを利用しています。


モデルサイズを1/2にする

SDユニティちゃんをシーンにドラッグ&ドロップ。
(ユレモノ設定済みの Prefabs内のSD_unitychan_generic を使用)

選択状態からInspectorのTransform欄を見るとScaleが <1,1,1> になっています。
これを <0.5, 0.5, 0.5>にすればシーン上のSDユニティちゃんは簡単に半分の背丈になります。

しかしこのままUnityをPlayしてみると・・・
サイズを1/2にした方のSDユニティちゃんは、服の裾がめくれあがったり、髪が持ち上がったりしています。
ユニティちゃんのアイデンティティであるツノ(?)もこれではまるでウサギ耳のように!?。

黄色い球のGizmosが揺れるパーツ側の当たり判定で、これらが元サイズのままなのが原因です。
※ここでは見えてませんがユレモノが当たる相手側(腕とか)の当たり判定サイズも同様です。



ユレモノの当たり判定サイズ

SDユニティちゃんの髪や服の裾などのユレモノは複数のスクリプトで制御されています。
(普通サイズのユニティちゃんのユレモノ対応版も同様)


今回注目するスクリプトは2つ。

スクリプト名 SpringBone: 髪などの揺れる側用。
スクリプト名 SpringCollider: 腕などの衝突相手側用。

これらのスクリプトがユレモノ関連パーツに適切に設定されています。


この2つのスクリプトはpublic変数 Radius を持っています。
この値による球状範囲が相互に当たり判定サイズになっています。

つまりこの値も全て1/2にすれば当たり判定サイズがモデルサイズに合うわけです。


SDユニティちゃんではSpringBoneは13個、Spring Colliderは27個各パーツに入っています。

簡単に言えば、シーン上のSDユニティちゃんモデルでこれら計40個のパーツ内スクリプトRadius値を1/2にするだけです。

手動で作業するならここで話は終了です。


が、大きさを変えるたびにこれを手作業でやるのはハッキリ言って、

疲れます( ゚Д゚;)


※ちなみにSDではないユレモノ対応ユニティちゃんではパーツ数が多く53個になってます。

ということで、スクリプトで自動化してみます。



ユレモノサイズ変更スクリプト

以下のC#ソースをシーン上のSDユニティちゃんに放り込んで使います。

PlayするとSDユニティちゃん内のSpringBone、SpringColliderを検索して各Radius値を書き換えます。
※resizeMag で倍率を指定。1/2なので0.5。
※非constでpublicの方が便利な気がしないでもない。適時お好みで。



スクリプト名:Extention_SpringForUnityChan
-----
/*
 *  @file   Extention_SpringForUnityChan.cs
 *  @attention  
 *  @note
 */
using UnityEngine;
using System.Collections;
using UnityEngine;
using UnityChan;// Scope for SpringCollider/SpringBone

public class Extention_SpringForUnityChan : MonoBehaviour {
    const float resizeMag = 0.5f; //!< Resize number

    void ChangeRadius_Spring(GameObject go){
        //SpringCollider[] cs_sc = go.GetComponentsInChildren<SpringCollider>(true);//note: find to hide object too when set true.
        SpringCollider[] cs_sc = go.GetComponentsInChildren<SpringCollider>();
        Debug.Log ("Found SpringCollider="+cs_sc.Length);
        for(int i=0;i<cs_sc.Length;i++){
            cs_sc[i].radius = cs_sc[i].radius * resizeMag;
        }
        SpringBone[] cs_sb = go.GetComponentsInChildren<SpringBone>();
        Debug.Log ("Found SpringBone="+cs_sb.Length);
        for(int i=0;i<cs_sb.Length;i++){
            cs_sb[i].radius = cs_sb[i].radius * resizeMag;
        }
    }

    void Awake(){
        ChangeRadius_Spring(gameObject);
    }
    //void Start () {
    //}
    //void Update () {
    //}
}
-----

スクリプト適用前後比較。



とりあえずこれで裾や髪も元サイズ同様な感じになりますヽ(´ー`)ノ

※今回は小さくしてますが、倍率値次第で大きくしても使えると思います。
※SDではないユニティちゃんモデル(unitychan_dynamic = ユレモノ対応版)でも使えます。

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なんてのもちょっと気になりますね(ボソ