@Muro_CGさんの講演を元に、Unityアセットの表現力を高める勉強をしました

今月、Unityのカンファレンス「Unite 2017 Tokyo」が開催され、Unityのライティング、Post Processing Stack、Shaderに関する技術的な講演がいくつかありました。

XVI社の講演では前半は@GoromanさんによるVRのプレゼンスを高める方法(P.19-59)、後半は@Muro_CGさんによるUnityで表現力を高める方法(P.60-P.81)が解説されました。

www.slideshare.net

講演の概要はこちらで解説されています。

panora.tokyo


今回は、XVI社講演の後半を元に整理したものです。


まず、今回試した背景です。スライドの引用ですが、Unityのモデルを使うときは、まさにこういう風に思っていました。

f:id:Takyu:20170521104728j:plain

f:id:Takyu:20170521104735j:plain

f:id:Takyu:20170521104742j:plain


しかし、同じアセットでも調整次第でこのように変わるそうです。

f:id:Takyu:20170521180944j:plain


前からこういうことがしたかったので、講演内容を見直したり、@Muro_CGさんに直接伺ったりしてやり方を学びました。

(お時間いただき、改めてありがとうございます。>@Muro_CG さん)


以下、アセットの表現力を高める方法を、私なりに解釈して整理しました。


なお、下記の環境で検証しました。

Mac OS (10.12.4)
・Unity 5.6.0p1


==============================
注意:以下の解説は私の解釈を元にしていますので、@Muro_CGさんのやり方と異なる場合もあります。ご了承ください。
==============================


=================

目次

1. 検証用のアセットを購入

2. Unityプロジェクトの下準備

3. イメージを固める

4. ライティングの調整

5. Post Processing Stackの調整

6. Tips

7. 終わりに

=================



1. 検証用のアセットを購入

まずは講演で使われたものと同じアセットを購入しました。

また、見た目を調整するため、Post Processing Stackをアセットストアからダウンロードし、インポートします。


Classroomアセットのサンプルシーンを開くとこうなります。私が購入した時点では、ある程度ライティング設定が入っていました。

f:id:Takyu:20170521152016j:plain


今回はサンプルシーンを元にして、@Muro_CGさんの講演スライドにあった夕暮れ時の教室を再現するように努め、最終的にこのようにしました。

f:id:Takyu:20170521152337p:plain


以降、調整した過程を解説します。

2. Unityプロジェクトの下準備

新規プロジェクトを作り、上記のアセットをインポート済み、という想定で解説します。

2-1. Reflection ProbeとLight Probe Groupを追加

Hierarchy Viewにそれぞれ追加します。

f:id:Takyu:20170521153111p:plain

@Muro_CGさんいわく、この二種類があることで色々な調整ができるとのことです。

注:今回の勉強では、Reflection Probeの活用まではまだ確認できてません。勉強したら、ここか別の記事で書きたいと思います。

2-2. Post-Processing Profileを追加

Project Viewに追加します。

f:id:Takyu:20170521153403j:plain

もし、"Post-Processing Profile"がない場合、Post Processing Stackのアセットをインポート忘れの可能性があるので、ご確認ください。


次に、Main CameraにPost Processing Behaviour コンポーネントを追加します。

このように、Main CameraのInspecter ViewでAdd Componentをクリックして、"post"までタイプすると候補に出て来ます。

f:id:Takyu:20170521153927j:plain

Post Processing Behaviour コンポーネントを追加後、先ほどProject Viewに追加した"Post-Processing Profile"をドラッグします。

f:id:Takyu:20170521154019p:plain

(ここでは、"Post-Processing Profile"のファイル名を"test"としています)


2-1と2-2は、見た目を綺麗にするときの共通設定と考えてよさそうです。

3. イメージを固める

講演スライドの受け売りですが、まずはどんな風景にしたいのか、というイメージを固める必要があります。

「こうしよう」が決まっていると何をすればよいかが見えてきますが、決まっていないとどうやって調整してよいかわからなくなります。

f:id:Takyu:20170521224813j:plain

このように、関係しそうな画像を集めるなどして、どんな形に仕上げたいかを詰めていきます。

4. ライティングの調整

Unity5.6時点では、ライトには4種類あります。

f:id:Takyu:20170521154459j:plain

今回学んだ範囲では、Directional Lightを駆使することで見た目を大きく変えることができたので、Directional Lightの解説を中心に進めます。

4-1. Light Explorerを表示する

これがあると便利なので、下記のように表示させます。

f:id:Takyu:20170521154934j:plain

Light Explorerには、現在Hierarchy Viewに登録されているライトオブジェクトが一覧表示されています。ここから有効/無効化が可能です。

今回のサンプルシーンのように、多数のオブジェクトがHierarchy Viewにある場合に、すぐにライトを探せて便利です。

4-2. Directional Lightによって日光が当たる雰囲気を出す

Directional Lightの調整ポイントは、Rotation、Intensity、Soft Shadowです。

Directional(≒方位)という名前のためか、Inspector ViewのPositionで位置を変えても光の当たり方は変化しませんが、Rotationを調整することで変化します。

Intensity(強度)は文字通り光量の大きさ、Soft Shadowは影をつけることができます。


まず、Post Processing Stack、全てのLightをoffにしました。

f:id:Takyu:20170521155803j:plain

次に、Soft Shadowにして、Directional LightのRotationを調整するとこのようになります。

f:id:Takyu:20170521155723j:plain


参考までに、Inspector Viewはこのように調整しました。

f:id:Takyu:20170521161109p:plain

4-3. 別のDirectional Lightを準備して、窓が光っている雰囲気を出す

4-2とは別のDirectional Lightを配置し、同じようにrotationを調整します。このように、rotationの調整次第で窓が光っているような雰囲気を出すことができます。


まず、Post Processing Stack、全てのLightをoffにしました。(4-2のDirectional Lightもoff)

f:id:Takyu:20170521160617j:plain

次に、Directional LightのRotationを調整しました。

f:id:Takyu:20170521160652j:plain


今回の場合は、夕暮れ時にしたいこと、その後のPost Processing Stackで調整したときの見た目の良さから、窓だけでなく、床にも光が当たるようにしました。また、光の色を赤っぽくしています。

f:id:Takyu:20170521160959j:plain


参考までに、Inspector Viewはこのように調整しました。

f:id:Takyu:20170521161158j:plain

5. Post Processing Stackの調整

まず、4-2,4-3の調整によってこうなりました。最初はPoint Lightも使って検討していましたが、最終的には2つのDirectional Lightのみ使いました。

f:id:Takyu:20170521162403j:plain

Post Processing Stackの設定は、全てProject ViewにCreateしたPost Processing ProfileのInspectorを変更することでできます。

5-1. Post Processing StackのAnti Aliasingを有効にする

このように、Anti Aliasingの箇所を有効にするだけです。

f:id:Takyu:20170521161946p:plain

ただ、アングルの問題か、後から見直すと私の環境では違いがよくわかりませんでした。(そのときは違いありと思ったのですが、、)


■ご参考:Anti Aliasing 無効
f:id:Takyu:20170521162053p:plain

■ご参考:Anti Aliasing 有効
f:id:Takyu:20170521162107p:plain

5-2. Post Processing StackのBloomを調整

Bloomを有効化し、内部の設定を調整して、このようにしました。

f:id:Takyu:20170521162717j:plain

Inspector Viewの設定状況です。

f:id:Takyu:20170521162907p:plain

赤枠で囲んだ範囲を調整することで、見た目を大きく変化させることができます。

5-3. Post Processing StackのColor GradingのTonemappingを調整

元の見本では右半分が暗くなっていましたが、3-4時点では全体的に光が当たってしまっています。

同じような見た目にするには、光の当たっていないところを強調して暗くする必要があります。これを調整するのがColor GradingのTonemappingです。

f:id:Takyu:20170521163349p:plain

ここに示したように、暗さを強調するには、Black OutとWhite Levelを調整します。これで見た目を大きく変化させることができます。

ここまで調整することで、冒頭に示したような見た目になりました。

f:id:Takyu:20170521152337p:plain

元の見本と完全一致はしていませんが、概ね雰囲気は再現できたので、今回はここまででいったんまとめることにしました。

6. Tips

6-1. Directional LightのSoft Shadowについて

OnとOffの例を準備しました。

■Soft Shadow Onの場合
f:id:Takyu:20170521155907j:plain

■Soft Shadow Offの場合
f:id:Takyu:20170521155934j:plain

このようにSoft Shadowを有効にすると、影をつけることができます。

Onの例では、Directional Lightの向きにも赤枠をつけました。この向きをrotationの値変更によって調整することで、教室の床に光が当たったり、窓に当てたりと、光による演出を変えることができます。

6-2. Point Lightを使った窓の光表現について

今回はボツにしましたが、Point Lightを使っても窓が光る表現を作ることができたので、参考までに解説します。

f:id:Takyu:20170521163751j:plain

上のScene Viewの通り、窓枠付近に合計4つのPoint Lightを並べて、Intensityを強めにしただけです。下のGame Viewのように、なんとなく発光しているような雰囲気はでます。

ただし、これだと後工程のBloomによる調整が難しかったので、今回はやめました。風景と状況次第ではありかもしれません。

7. 終わりに

これまで、Unityでどうやってきれいな表現を作ればよいかはわかっておらず、また、調べても自分に合った方法が見つけられてませんでした。

今回、良見本を真似することで、やり方を学ぶことができました。

CGの世界では、今回のような実写ライクにする場合だけでなく、トゥーン調など他の場合もあります。それぞれの見た目に応じて使う技法も変わるのだと思います。

今後、色々な風景で表現力を高め、うまくUnityを使いこなせるようになれればと思います。