トップ > Unity > Unity5.6で主婦写真講座をやってみる

Unity5.6で主婦写真講座をやってみる

Unity

イメージエフェクトなどの使い方を知るために、GOROmanさんの主婦写真講座をやってみた記録です。

こんな感じになりました。 f:id:onionmarktwo:20170519181432p:plain

f:id:onionmarktwo:20170519181511p:plain

要点まとめ

  • Unity5.6なので、Effects Post-processing Stackを使う。
    • standard assetのImage Effectや Cinematic Imageは使わない。
  • ColorSpaceをLinearにする。
  • standard shaderを使う。
    • 透明なものは、RenderingModeをTransparentにする。

作業内容

実際の作業は以下のとおり。

ColorSpaceをLinearにする。

なぜやるのか

Unityには、ColorSpaceという設定項目があり、「Gamma」「Linear」の２つが設定できる。 このうち、「Linear」のほうが、綺麗な絵になるらしい。

リニアワークフローでは、レンズフレアやグローのような「光モノ」の合成がよりリアルにしやすいというメリットがあります。 http://compojigoku.blog.fc2.com/blog-entry-26.html

なお、Unity5.6.0f3時点では、ColorSpaceのデフォルトは「Gamma」。

手順

Edit > PlayerSettings > ColorSpace を Linearにする。

Settings

Settings

環境光の設定（DirectinalLight削除 + IBL設定)

なぜやるのか

イメージ ベースド ライティングはフォト リアリスティックなイメージを作成するためのテクニックです。イメージ ベースド ライティングでは、環境(Environment)テクスチャ(イメージ ファイル)を使用して、シーンを照らすことができます。 https://knowledge.autodesk.com/ja/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/JPN/Maya/files/GUID-A7758B82-59A7-47CE-A6F5-8754282531C1-htm.html

ＩＢＬを実現するには HDRI （High Dynamic Rengi Image） と呼ばれる特殊なイメージフォーマットの画像が必要になります。

通常、コンピューター上のイメージは、RGB （Red / Green / Blue ） の 3チャンネル 256階調 のグレースケール画像で表現されていますが、256階調では光源（ライト）に必要な輝度をカバーする事が出来ません。 そこで256階調を超えるダイナミックレンジを持つ特殊な画像が必要となります。 http://3dcg.homeip.net/3d_reading/light_camera_render/global_light/01_e.php#ibl

手順

  1. 最初からシーンにある、Directional Lightを消す。
  2. IBL用のSkyboxとして使えるアセット https://www.assetstore.unity3d.com/jp/#!/content/34761　を購入してインポート。
  3. Window > Lighting > Settings > SkyboxMaterial を 2k_Modern_Loft　にする。

なおこのアセット、2017年5月現在では有料になっている。無料でやりたいなら、http://www.hdrlabs.com/sibl/archive.html　の画像を使わせていただくとよいらしい。

Settings

Settings

Tda式初音ミクのインポート

なぜやるのか

  • 大変美しいモデル（Tda式初音ミク）を使用させていただくことで、作業が楽しくなる。
  • 主婦写真講座の作例と比較ができ、うまい人のやり方を学べる。

手順

立ちポーズのアニメーション設定

なぜやるのか

  • T字ポーズではなく、自然な立っているポーズにしたいため。
  • イメージエフェクトとは関係ないので、T字ポーズのままで良いならスキップ。

手順

  • 生成されたPrefab Tda式初音ミク・アペンド_Ver1.10 を選択。Rig > AnimationTypeを Humanoidに変更する。
    • デフォルト（Generic)では MecanimのHumanoidAnimationをうまく利用できないため、Humanoidにしている。
  • UnityChan Official Webサイトから「ユニティちゃん 3Dモデルデータ」をダウンロードしてAnimationsフォルダをインポート。
  • Project Window で右クリック > Create > Animator Controllerで、Animator Controller を新規作成。
  • Animator Windowで右クリック > Create State で、Stateを新規作成、Motionに　WAIT00 を指定する。

Settings

Settings

Settings

Settings

Settings

MainCameraのRenderingPathを変更

なぜやるのか

RenderingPathをDefferedにすると、デフォルトのForwardと比べて、よりリアルな光と影にできるため。

Deferred Shading is the rendering path with the most lighting and shadow fidelity https://docs.unity3d.com/Manual/RenderingPaths.html

手順

  • RenderingPathをDeferredにする。
  • MSAAをオフにする。（Deferredのときには使用できないため。） Settings

RenderingPathは、グローバルな設定を Edit > Project Settings > Graphics > TierSettings > Rendering Path　から変更し、カメラではuse graphic settings のままにするのでも良いようだ。

構図の調整

Transform, Field Of Viewを調整して、好きな構図にする。 ClippingPlanesのNearを0.01（最低値）にすると、モデルの中身が見える事故が少なくなる。

Settings

マテリアルの調整

なぜやるのか

  • Unity5のStandard Shaderは、物理ベースレンダリングに対応している。
  • 物理ベースレンダリングを使用すると、「異なるライティングの条件でも一貫性のあるもっともらしい見た目を実現できる」(ref)らしい。

手順

  • １７個のマテリアルすべて、シェーダーをstandard shaderにする。
  • 以下のマテリアルを調整する。
    • RenderingMode
      • 不透明なものはopaque、透明なものはTransparentにする。
    • Metalic
    • smoothness
    • Emission
      • 自己発光しているものに指定する。
      • カラーピッカーの右にある、数字入力箇所で数字を増やすと、発光が強くなる。 Settings

私の場合、設定は以下のようになった。

name AlbedColor RenderingMode Metallic smoothness Emission EmissionColor
0.face00 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
1.face01 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
2.eye_hi RGBA(0.690, 0.882, 0.745, 1.000) Transparent 1 1
3.eye_hi2 RGBA(0.400, 0.800, 0.700, 1.000) Transparent 0 1 TRUE RGBA(0.651, 0.651, 0.651, 1.000)
4.skin RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
5.body00 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 1
6.body01 RGBA(1.000, 1.000, 1.000, 1.000) opaque 1 1
7.body_pink RGBA(0.700, 0.180, 0.430, 1.000) opaque 1 1 TRUE RGBA(1.200, 0.308, 0.737, 1.000)
8.body_green RGBA(0.400, 0.900, 0.600, 1.000) opaque 0 0.5 TRUE RGBA(0.532, 1.200, 0.798, 1.000)
9.body_green2 RGBA(0.400, 0.900, 0.600, 1.000) Transparent 0 0
10.body02 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 1
11.hair00 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
12.hair01 RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0
13.hairshadow RGBA(1.000, 1.000, 1.000, 1.000) Transparent 0 0.5
14.cheek RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0.5
15.lens RGBA(1.000, 1.000, 1.000, 1.000) opaque 0 0.5
16.wing RGBA(0.400, 0.900, 0.600, 1.000) Transparent 0 1

ハイライトについて

「Emissionは本当に光ってる物体に対してのみ使用する（明るさの調整に使わない）」 http://unityshader.hatenablog.com/entry/2017/02/25/130016

というのがルールらしい。 目のハイライトは自己発光していないので、Emissionを指定しないのが正しいのかもしれない。 が、Emissionなしでハイライトっぽくする方法がわからなかった。

https://www.slideshare.net/Unite2017Tokyo/unite-2017-tokyovr-magic4　※p34 上記によれば、「ハイライト成分だけ加算半透明」「ハイライト成分だけHDR環境マップ」「リフレクションプローブ」といった手法でできるらしい。

お願い

このあたりのハイライトの設定、ご存知の方がいらっしゃったらよろしければ教えてください。

Post Processing Stackの導入

カメラに取り付けて、画面を綺麗にしたり映像効果を付けるモノを「イメージエフェクト」というらしい。 Post Processing Stackは、この「イメージエフェクト」を使うための提供は、Unity Technologies製アセット。

なぜPost Processing Stackか

Unity Technologies提供の「イメージエフェクト」を実現するアセットとして、より古い以下２つがある。

これらは、カメラにアタッチする順番を間違えると正しく動かないなどの欠点がある。

手順

  1. Post Processing Stack をインポート。
  2. Project Window上で右クリック > Create > Post-Processing Profile 。
  3. Main Cameraに　PostProcessingBehaviour スクリプトをアタッチ。
  4. 2で作成したProfileをインスペクタにドラッグドロップする。
  5. インスペクタで下記にチェックを入れる

チェックを入れるもの

  • Anti aliasing（ギザギザをとる。）
  • Ambient Occlusion（くぼみなどを暗くする。）
  • Screen Space Reflection（反射を作成する。）
  • Bloom（光が漏れるような効果）
  • Color Grading ( カラーコレクション。画面全体の色合いを変えること。 )
  • Vignette（画面の辺・四隅を暗くしてレンズっぽくする。）

Settings

Settings

デフォルトから変えるとよさそうなのは、以下のとおり。

  • Tonemapperをneutral → Filmic に変更（なぜかは覚えていない）
  • Contrastをデフォルトより若干強めた（1 →　1.13）。対比がきれいになる気がする。
  • Temperatureを-12.4、Channel MixerでGreen, Blueを強くした。

Settings

Settings

Settings

Settings

おわりに

本文中にリンクしました、GOROmanさんの主婦写真講座を はじめとするインターネット上のたくさんの解説から、 イメージエフェクトやマテリアルなどの使い方を勉強させていただきました。

また、Tdaさんの素晴らしいモデル、 NoraさんのMMD4Mechanimを 使わせていただいたおかげで、大変楽しく作業できました。 誠にありがとうございました。

この記事について、ご指摘や改善点などありましたら、ぜひコメント等でお知らせいただければと思います。