#contents ---- time: 00:15 * 初期設定 [#n529e5ec] ** モデルデータのDL [#mcef18c3] 今回は[[ビタワンさん>https://twitter.com/vitaone_]]の社畜ちゃんを使います。 [[社畜ちゃん日記>http://syachiku-chan.com/]]の下記のページ、「社畜ちゃんMMDモデルが完成しました!」項からDLします。 http://syachiku-chan.com/?p=480 →「(FBX)社畜ちゃん Ver1.0.zip」をDL ** プロジェクト作成 [#qbbbb035] 下記のような感じで新規プロジェクトを作成 &ref(model_01.png,,80%); 椅子や机は要らないので、消します。 &ref(model_02.png,,80%); ---- time: 00:45 * モデルの構築 [#k7c086e7] + 「(FBX)社畜ちゃん Ver1.0.zip」を解凍した中にある、「Syachiku_chan.fbx」をコンテンツブラウザに投げ込んでインポートします。 &ref(model_03.png,,80%); ※「Import Morph Target」にもチェックを忘れないように + インポート警告が出ますがスルー。 + とりあえずインポートしたまま。目のマテリアルが崩れてるくらいですね。 &ref(model_04.png,,80%); ---- time: 1:20 ** マテリアルの構築 [#g29d38d6] + マテリアルインスタンスで構築していきます。その為のベースマテリアルを作成します。 -- [[マテリアルインスタンス>https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/MaterialInstances/index.html]]を用いる事で、ベースマテリアルを修正するだけで全てのマテリアルに反映させる事ができます。 -- コンテンツブラウザで右クリック→「マテリアル・テクスチャ」→「マテリアル」 &ref(model_05.png,, 80%); + マテリアルを開いて、下記のように設定します。 -- 「シェーディングモデル」を「Unlit」に。 -- 「TextureSampleParameter2D」ノード作成し、「エミッシブカラー」に。(とりあえずテクスチャは適当) &ref(model_06.png,,80%); + 次にマテリアルインスタンスを作成していきます。 -- コンテンツブラウザで右クリック→「マテリアル・テクスチャ」→「マテリアルインスタンス」 + マテリアルインスタンスを開いて、「一般」項の「Parent」欄に、(1)のベースマテリアルを指定。 + 「パラメータグループ」項に(2)の「TextureSampleParameter2D」の欄が出来るので、チェックを入れてテクスチャを指定します・ &ref(model_07.png,,80%); + (3)〜(5)をとりあえずテクスチャ分作成します。(必要あれば後で分割する) &ref(model_08.png,,80%); + メッシュを開いて、読み込み時に付いていた「材質○」というマテリアルから、(6)で作成したマテリアルインスタンスに置き換えます。<br> &ref(model_09.png,,80%); |''エレメント名''|''使用するテクスチャ''| |エレメント0|Skin| |エレメント1|Clothes| |エレメント2|Face| |エレメント3|Face| |エレメント4|Face| |エレメント5|Face| |エレメント6|Face| |エレメント7|Face| |エレメント8|Hair1| |エレメント9|Hair2| |エレメント10|Eye| |エレメント11|Eye| |エレメント12|Face| |エレメント13|Face| |エレメント14|Facial| これでとりあえずUE4上のライティングを無効化できました。 ---- time: 02:10 *** 自前ライティング [#u4039957] + 次に自前でライティングを実装します。前項(1)のベースマテリアルを開いて、下記のように計算式を入れます。 -- 今回は[[ランバート反射>https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%B3%E3%83%90%E3%83%BC%E3%83%88%E5%8F%8D%E5%B0%84]]をします。 &ref(model_10.png,,80%); + とりあえず下記のようになりました。このライティング計算をセルシェード用に弄っていきます。 -- ライティング結果が0.0〜1.0と線形になっているので、このままでは通常のシェーディングです。 -- (目のテクスチャが崩れているままだったので、モーフターゲットの「ハイライト無し」を1.0にしています) &ref(model_11.png,,80%); ++ 太もも辺りがパッキリしてるのが気になります。大抵法線が怪しいので、ビュー上部にある「表示」→「高度な設定」→「ノーマル」にチェックを入れて調べます。 &ref(model_12.png,,80%); ++ ハードエッジになっています。(Blender的には「Flat」)法線が滑らかになっておらず、ライティングがパッキリなってしまいます。後で直します。要修正項目。 &ref(model_13.png,,80%); ---- time 02:40 *** リニアなライティング結果を2値に [#db47ac62] + ライティングを弄ってセルシェードっぽくします。ベースマテリアルを開いて、ライティング計算の結果が0.0〜1.0のリニアな数値になっていたのを、2値化します。 ++ ランバート計算の後に、2値化するために「[[ValueStep>https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/Functions/Reference/Gradient/index.html#valuestep]]」を入れます。 --- 「Value Step」ノードは、(Gradient + Mask Offet Value) < Number Before White Result なら1.0。でなければ0.0を返すノードです。 今回は、(ランバート結果[0.0~1.0] + 0.5) < 1.0 なので、半分を1.0、もう半分を0.0にして線形な段階を消して2値化します。 + 意図とは結果が逆転しているので、「OneMinus」ノードで反転します。 + 影の色が真っ黒なのはセルシェードっぽくないので、「Max」ノードで0.3にします。 &ref(model_14.png,,80%); + これで、光が当たっている所=1.0、光が当たっていない所0.3になりました。こんな感じの結果に。 &ref(model_15.png,,80%); ---- time: 04:40 *** 色味の調整 [#pd32432b] ライティングは最低限は出来たので、色味を調整してみます。 ここは各担当者の調整力次第です。私はデザイン疎い系のプログラマーですのでそれなりに対応してみます。 今回はマテリアル内の計算でやりましたが、陰部分用のテクスチャを用意してもいいかもしれません。 + 先程までは陰を乗算で行っていたので、ただ単に暗くなるだけでした。 -- セルシェードでは暗くするだけでは良い感じになりません。明度だけじゃなくて彩度も弄ると良い、とイラスト界隈で小耳に挟んだりしましたので対応してみます。 -- また、社畜ちゃんTwitterスタンプ( http://syachiku-chan.com/ex/twitterstamp )のカラーイラストを見ると、陰が若干色相変わってるような気がするので、色相もいじれるようにします。 -- 色の濃さも違うようなのでガンマも弄れるようにしてみます。 -- という事で、個別にガンマ、明度、彩度、色相をマテリアル単位で弄れるようにします。 + ベースマテリアルを弄ります。前項の「ValueStep」〜「Multiply」辺りのノードを消します。 + 調整値は「ScalarParameter」ノードで配置します。「ScalarParameter」ノードにしておくと、マテリアルインスタンス側で値を弄れるようになります。(=マテリアルインスタンス単位で調整できる) -- 「Power」ノードでガンマ補正 -- 「Multiply」ノードで明度(乗算) -- 「Desaturation」ノードで彩度 -- 「HueShift」ノードで色相 &ref(model_16.png,,60%); + 最後に「if」ノードで、光部分と陰部分の色味を分けて取得します。 -- 「A」にライティング結果 -- 「B」にライティング結果のどこから陰にするかの閾値 -- 「A >= B」に光部分の色 -- 「A < B」に陰部分の色 -- 一応、陰の閾値もパラメーター化しておきます。 &ref(model_17.png,,60%); + ここまでをベースマテリアルに設定すると、マテリアルインスタンス側はこのような値が設定できるようになるハズです。 &ref(model_18.png,,80%); + とりあえず下記な感じで調整しました。 |''テクスチャ名''|''Light Power''|''Shadow Desaturation''|''Shadow Hue Shift''|''Shadow Power''|''Shadow Scale''|''Shadow Threshold''|''備考''| |clothes|1.2|0.0|1.0|1.2|0.3|0.5|| |eye|1.4|-0.08|1.0|1.4|0.3|0.0|目は陰要らないので、*Shadow Thresholdを0.0にして消す| |face|1.8|-0.5|0.95|1.8|0.3|0.5|| |facial|1.4|-0.08|1.0|1.4|0.3|0.0|陰要らないので、*Shadow Thresholdを0.0にして消す| |hair1|1.6|-0.08|0.97|1.6|0.3|0.5|| |hair2|1.6|-0.08|0.97|1.6|0.3|0.5|| |skin|1.8|-0.5|0.95|1.8|0.3|0.5|| + 結果。前よりそれっぽくなったと思います。 &ref(model_19.png,,80%); |