Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
•
30 j'aime•20,231 vues
Unite2016Tokyoで発表したスライドです。 以下のページに関連プロジェクトなどもありますので、ご利用ください。 http://japan.unity3d.com/unite/unite2016/schedule
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Similaire à Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト (9)
Plus de 小林 信行
Plus de 小林 信行 (20)
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
- 1. Unityとアセットツールで学ぶ 「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト 小林信行 2016/04/05 Tue @Unite 2016 Tokyo
- 2. Unity4時代までの絵づくり に卒業しましょう！ • Unity5が登場して、ほぼ１年が経ちました。さて皆さんは、Unity5世代の絵づくりには慣れましたか？ • 「なんかUnity５になってから急に難しくなったような気がする…」「相変わらずUnity臭い絵しか出せない…」 「自分の使っているUnityとはなんか違うような気がする…」相変わらずそんなことをぼやいている人はいませんか？ • 本セッションは、そんなアナタのためにUnity5時代の絵づくりの基礎について説明します！ • 是非、本セッションの結果を持ち帰って、アナタのUnityプロジェクトをブラッシュアップしてみてください！
- 3. P.A.M.E.L.A.. / NVYVE STUDIOS Bedroom Demo / Unity Technologies
- 5. 「絵づくり」とは何か？ • 「絵づくり」とは、映像コンテンツにおいて、観客の視覚的な興味や関心を 引いたりすることで、視線を自然に誘導し、コンテンツの意図やテーマを伝 えやすくする視覚的な設計のことを指します。 • よいコンテンツには、それにふさわしい「絵づくり」が伴っているものです。 これらの「絵づくり」は、３DCGの場合、主にシェーダーを含めたマテリアル 設計とライティング、そしてイメージエフェクトによってなされます。 • これらの「絵づくり」の過程や結果を、３DCGの現場ではしばしば 「Look Dev」と呼びます。Look Devをスタッフ全員で共有する ことで、高度な画面設計が可能となります。
- 6. 「絵づくり」に必要なもの • ２D/3Dを問わず、「絵づくり」のために必要なものとは、作品全体で統一 感のあるムード（雰囲気/印象）が提示できるような、視覚的な設計です。 • それらの視覚的設計は、イメージを構成する「形状」を、ある一定の 「質感」にそろえていく中で生まれるものです。 • ３DCGの場合、承認されたLook Devはパッケージ化され、アセット制作 パイプライン上にパブリッシュされます。それらを各アーティスト達が レイアウト済のモデルデータにアサインすることで、 統一だった「質感」を得ることができるようになります。
- 7. 絵画における「質感」を構成するもの • 色 （材質およびそれに当たる光の色の表現） • 陰影 （光が当たっている面の陰影の出方による立体表現） • タッチ （材質の表面状態の表現） ⇒絵画は、「色＋陰影＋タッチ」の組み合わせで、様々な「質感」を表現する。
- 8. 3DCGにおいて「質感」に影響を与えるもの • マテリアル （マップおよびシェーダー） • ライト （直接光と間接光、ホワイトバランス、ソフトネス、アングル） • カメラ （HDRとフォーカス、スクリーンスペースでのイメージエフェクト） ⇒絵画における「色＋陰影＋タッチ」の組み合わせは、3DCGの場合には、 「マテリアル×ライト×カメラ」の各設定として、設計される。
- 11. コーネルボックスとは • コーネルボックスとは、GI（グローバルイルミネーショ ン）の研究のために、コーネル大学で1984年に開発 されたレンダリングテストを指す。 • 元々のコーネルボックスは、実物の写真とレイトレー シングの結果を比較するためのものだが、今回は コーネルボックスをモチーフとしてUnity5で実験をし てみよう。 • GIを使っているといっても、プリレンダー用のレイト レース方式と、リアルタイム描画用のデプスマップ シャドウ方式では、圧倒的に必要とする時間も違え ば、精度も違う。しかしその違いを踏まえた上で、ど こまでレイトレースに迫れるかを知ることで、「絵づく り」のヒントが沢山得られる。 https://en.wikipedia.org/wiki/Cornell_box
- 12. Unity5でコーネルボックスを作る 【Player Settingsの設定】 • Rendering Pathを「Deferred」にする • Color Spaceを「Linear」にする 【各コンポーネントの設定】 • CameraとReflection ProbeのHDRをONにする • Reflection ProbeのBox ProjectionをONにする • 動かないオブジェクトはStatic（Lightmap Static） にする 【Lightingウィンドウの設定】 • Ambient Intensityを0にする 【Standard Shader】 • 壁のカラーは、アルベドの定義域に従う （RGBの値が30以上、240以下） • Metallic/Smoothnessは共に0 【ライト】 • ライトはエリアライトを使用する ↑作成したコーネルボックスの例。 GIに特有のカラーブリーディングと バウンスによる光の回り込みが 見られる ←GIが一切ない場合の例
- 13. ライトのカラーを変えてみよう The Comprehensive PBR Guide by Allegorithmic – Vol.1 カラーは、光の中に含まれる各電磁波がマテリアル表面に当 たってディフューズ反射をする際に、波長ごとにフィルタされる ことで、最終的に決定する。
- 15. 各ライトの減衰特性を知ろう • ライトには、減衰特性に従って、３種類ある。 Ø 距離によって減衰しない「ディレクショナルライト」（最も軽い）、 Ø 距離によってほぼリニアに減衰する「ポイントライト」（リアルタイム＆ベイクで処理の重さを使い分ける）、 Ø 距離によって急速に減衰する「エリアライト」（ベイクのみ。もっとも綺麗なソフトシャドウが生じるライト） • 光の物理的特性である「逆二乗の法則」に従って減衰する、現実のライトに最も近いのは、エリアライト。
- 17. Lighting Windowより GIを設定する • Unity5の場合、GIの設定はLightingウィンドウよ り行います。 • Lightingウィンドウからは、アンビエントライトとし ての環境光の明るさ、バウンスライトとしての間 接光の明るさ、さらにスタティックオブジェクトに 対してベイクされるライトマップの精度、そのライ トマップに対しリアルタイムライトをGIとして影響 させるかなどの設定ができます。 • 一見複雑ですが、コーネルボックスを作成して実 験してみることで、各々のプロパティの意味が はっきりしてきますので、是非一度試してみること をお勧めします。
- 18. 間接光をシーン全体に行き渡らせる General GI • ライトマップをベイクしても 間接光が十分にシーンに行 き渡っていない時には、 General GI内のIndirect Intensityを調整します。
- 19. リアルタイムライトの影響をGIに追加する Precomputed Realtime GI • Precomputed Realtime GIを チェックすることで、リアルタイ ムライトの影響が、事前計算 分も含む、ベイクされたGI用 ライトマップに追加されます。 • チェックをしない時には、 Baked GIにIndirect Resolutionが追加されます。 この値は、Precomputed Realtime GIのRealtime Resolutionに連動しています。 • 右画像の間接光が、スポット ライト由来のGIです。
- 20. ベイク用ライトのライトマップの設定を行う Baked GI • Baked GIは、ベイク用ライトのラ イトマップの精度を決定します。 Baked GIのチェックを外すと、ベ イク用ライトのライトマップがベ イクされなくなります。 • Baked GIのチェックが外された 状態で、Precomputed Realtime GIのチェックのみが入っていると、 リアルタイムライトのGIのみ評価 されます。 • 他、Baked GIではベイク用ライト のGIによるアンビエントオクルー ジョンの評価の他、ライトマップ の精度を上げることができます。 （ただ上げすぎると、ベイクに失 敗したりすることがあるのでほど ほどに）
- 21. 環境ライトの明るさ等の設定を行う Environment Lighting • Environment Lighting内の Ambient Intensityを設定するこ とで、いわゆるアンビエント光の 設定ができます。アンビエント光 とは、周囲を取り囲む全ての光を 指します。 • Reflection Intensityはデフォルト 状態でのReflectionの明るさを 設定します。 • アンビエント光の光源として利用 できるのは、スカイボックス、 IBL（キューブマップ）、カラーおよ びそのグラディエントです。 • 屋内シーンの場合には、Ambient Intensityの値をゼロとし、暗い状 態からライティングを開始します。
- 22. 間接光の影響を動的オブジェクトに入れるための作為 動的オブジェクトに、ベイクした間接光の影響を直接与えることはできない。 従ってそれっぽく見せるためには、作為が必要になる。 上の画面では、以下のような作為を用いている。 • ライトプローブを配置する。 • 動的オブジェクトのマテリアルカラーに少々作為を入れる。 • フェイクライトを配置する。ブルームを追加する。 • SSAOを追加する。
- 24. Tips：エミッシブをフィジカルライトとして利用する • スタンダードシェーダーのEmissionに1 以上（HDR）の値を割り当てた場合、GI を通じてエミッシブマテリアルを割り当 てたオブジェクトをフィジカルライトの ように使うことができる。GIに影響を与 える場合には、EmissionのGlobal IlluminationをNone以外に設定する。 • エミッシブを割り当てたオブジェクトは、 必ずLightmap Staticに設定する。 • Lightingウィンドウの設定は、 Ø Precomputed Realtime GI ⇒ ON Ø General GI の Directional Mode ⇒ Directional が望ましい • 図のように、光の加法混色も可能なの で、補助光として使用するのもアリ。 • ただしエミッシブオブジェクトは、厳密 な意味での「ライト」ではなく、「エフェ クト」に近いものなので注意。 ↑フィジカルライトとして使われている エミッシブオブジェクトの例
- 25. Tips：Baked GI Lighting と Precomputed Realtime GI Lightingの使い分け Baked GI Precomputed Realtime GI • 搭載メモリに依存する • よりモバイル向き/デスクトップ＆コンソール OK • エリアライトが使用できる • Baked Resolution や Indirect Resolution の値 で重さが変わる • レンダリングパスが「Forward」の場合 • シーン内のオブジェクトが動かなかったり、 ライティングの状態が変化しない場合 • CPUパワーに依存する • よりデスクトップ＆コンソール向き • エリアライトが使用できない • Realtime Resolution の値で重さが変わる • ライティングの状態がゲーム中で変化する ような場合（例：ディライトの時間変化とか） DynamicGI.UpdateMaterials(render); 両方を同時に使用する ことも可能（当然重い） 対応プラットフォームや コンテンツの内容で選択
- 26. 物理ベースシェーダーと リニアワークフローを使って、 UnityとDCCツール間で 「質感」の統一をしてみよう • リニアワークフローとは、異なるツール間で同じ結果を得るために使われる、カラー管理の手法です。リニアワークフ ローに注意することで、各ツールが行う全ての色計算において、デジタルデータと実際の見た目の対応関係が統一 され、アセット制作パイプラインで使用される全てのアプリにおいて同じカラーが再現できるようになります。 • ここでは、Unity5用にSubstance Painterで作成したマテリアルをMayaのmentalRay用にコンバートすることで、 Substance Painter/Unity5/Maya上で同じ「質感」を得る実験をしてみます。 そしてMaya上で同じ表示ができたところで、モバイル用に使えるディフューズマップにベイクしてみます。
- 27. 物理ベースシェーダー（ＰＢＳ）とは • Unity5が搭載するスタンダードシェーダーは、物理ベースシェーダー（PBS）です。 PBSの特長は、どんなライティング下でも正しい質感が得られることです。 • これらのシェーダーが「物理ベース」と呼ばれるのは、「物理的に正しい」実装がされているからです。 • 「物理的に正しい」 ⇒「エネルギー保存の法則が破綻しない」 ⇒「サーフェイスに入射する光（入射光）の明るさ以上の反射光をサーフェイスが反射しない」 • 物理ベース以外のシェーダーは、サーフェイスがカラーとして反射するディフューズ反射と、ハイライ ト部分として反射するスペキュラ反射の部分を個別に調整ができるので、全体としてエネルギー保 存の法則に従っていない可能性があります。 • その影響として、あるライティング下でセッティングしたマテリアルが、 別のライティング下ではまったく質感が異なってしまうということが発生します。 それを解決するのが、ＰＢＳです。
- 28. ３つの反射 ディフューズ反射、グロッシィ反射、スペキュラ反射 • 光がサーフェイス上に入射すると、サーフェイスの特性に従って次の３つのパターンの反射が発生します。 1. ディフューズ反射（拡散反射）：光が全ての方向に均一に散乱します。 2. グロッシィ反射（光沢反射）：光線の方向性を維持しつつ、ある程度散乱したり和らいだりする。 3. スペキュラ反射（鏡面反射）：光のシャープさが維持され、全ての光線が散乱せずに反射する。 • グロッシィ反射とスペキュラ反射は、散乱があるかないかなので、ここでは一緒に「スペキュラ反射」とし て扱うことにします。 The Comprehensive PBR Guide by Allegorithmic – Vol.1 BDサポート MAYAサポート Q&A MILA導入編
- 29. エネルギー保存をどのレイヤーで保証する？ • PBSには、リアルタイム用とプリレンダー用 の２種類があります。プリレンダー用の代表 例は、Maya mentalRayのmia_materialで すが、その場合、エネルギーの優先順位で、 Reflection（反射）>Refraction（屈折）/ Translucency（透過）>Diffuse（拡散）の 順番でエネルギーが取られていきます。 • スタンダードシェーダーなどのリアルタイム 用のPBSでは、屈折や透過はそのままでは 扱えませんので、サーフェイス表面上で発 生するスペキュラ反射とディフューズ反射 の２つの間でエネルギーを取り合います。 Everything You Always Wanted to Know About mia_material* (* But Were Afraid to Ask)/Zap Andersson, Autodesk
- 30. F0とBRDF（Bidirectional Reflection Distribution Function） 他のツールにマテリアルを移植する際に注意するポイント • 他のツールのPBSにマテリアルを移植する時に、「質感」に大きく影響を与える可能性があるのが、 F0とBRDFです。 • BRDF（双方向反射分布率関数）は、簡単に言ってしまえば、実世界のサーフェイスがもつ複雑な反 射の関係（様々な入射角から入る光がどの程度反射し、どの程度吸収されるかなど）を数式によっ て表したものです。BRDFの定式化には、簡単なものから複雑なものまであり、Unity5.3以降では最 高クオリティでGGXという方式が取られています。BRDFはシェーダーが扱うので、アーティストは意識 する必要がありません。他のツールにマテリアルを移植する際には、どの方式かを確認します。 Background: Physics and Math of Shading / Naty Hoffman
- 31. F0とBRDF（Bidirectional Reflection Distribution Function） 他のツールにマテリアルを移植する際に注意するポイント • 一方、F0（０度のフレネル値）は、あるマテリアルを垂直に見下ろした場合の反射率のことです。 屈折率（IOR : Index of Refraction）側から見ると、IORは、１からF0を引いたものとなります。F０は各 素材ごとに固有の値で、これらはマテリアルを作成する時に、なんらかのマップにインプリメントされ て実装されることになります。つまり、現実に存在するどのような素材なのかを想定しながら、マップ に各マテリアルを割り当てていくことで、各々のワークフローに応じて実装されることになります。 Background: Physics and Math of Shading / Naty Hoffman The Comprehensive PBR Guide by Allegorithmic – Vol.1
- 32. PBS向けマテリアル作成の２つのワークフロー • PBS向けマテリアル作成のワークフローとしては、シェーダー の実装方式によって代表的なものが２つあります。実装の 方式は違いますが、両者は本質的には同じものです。 1. メタル・ラフネス ワークフロー : Standard Shader / Albedo Map、Metallic MapとSmoothness Map。 Smoothness Mapは、ラフネスマップの反転になってい る。アルベドマップが取れるsRGBの値に定義域がある ことに注意すること。 2. スペキュラ・グロッシネス ワークフロー：Standard (Specular) Shader / Albedo Map、Specular Mapと Smoothness Map。Smoothness Mapとグロッシネス マップは同じもの。スペキュラマップは従来型シェーダー 向けの「スペキュラマップ」とはまったく違うものなので 注意すること。（従来型シェーダーのスペキュラマップは、 事実上スペキュラマスクのようなもの） • どちらかと言えば扱いやすくメモリにも優しいのが、 メタル・ラフネス ワークフローのほうです。 Standard Shader Standard (Specular) Shader
- 33. Substance Painterでのワークフロー • PBS向けマテリアル作成ツールとして、Substance Painterを例にとります。これらのツールでは、各 ワークフローに応じてマテリアルをアサインし、さら にそこに加工を加えることができます。 • ダメージやウェザリング等の加工をマテリアルに加 えていくと、しばしば各マップの定義域を超えてし まうのですが、それに対して警告を与えてくれる フィルタ PBR Validateがあります。これは大変便 利なものです。 警告が発生した場合には、マップをレベル調整す ることで、最適化できます。 • また一度マテリアルを作成すると、Export設定で 様々なレンダラに対して必要なマップをExportす ることが可能です。Export設定は自分でカスタマ イズもできます。
- 36. Unity5のTexture Importerと リニアワークフロー • さてPBSの計算は、Unity5、Substance Painter共に内部ではリニアカラース ペースで行われています。 • 従って、Substance Painterから出力されたマップの内、パラメタ系に属する マップ（MetaricSmoothnessやHightマップなど）は、リニアカラーで扱われ る必要があります。 • Unity5のTexture Importerにて以下の設定をすることで、該当するマップ をリニアカラーで読み込むことができます。 1. Texture Type ⇒Advanced 2. Bypass sRGB Sampling ⇒チェック 3. Generate Mip Mapsがチェックの時、 In Linear Space ⇒チェック • なお、アルベドなどのカラーマップは、sRGBのままで読み込んでかまいませ ん。またNormalマップに関しては、自動的にリニアカラーになります。
- 37. Maya2016のTexture Importerと リニアワークフロー • Maya2016より、リニアワークフローが強化されました。 • 各マップのインポータには、図のように使用するColor Spaceが指定できる ようになりましたので、Substance Painterから出力したパラメタ系のマッ プはすべてRawで指定します。Rawに指定することで、リニアカラーとして 扱われることになります。
- 39. Substance Painter Unity 5.3.4 Maya2016 mentalRay ※BRDFがGGXでない 各PBSの比較画像
- 42. イメージエフェクトを追加して画面を仕上げよう • Unityの場合、イメージエフェクト（ポストエフェクト）は、カメラに アタッチするコンポーネントとして用意されています。標準機能 としては、メニューバーよりAssets>Import Package>Effectsを インポートすることで、Inspectorからカメラオブジェクトに対し て、Add Componentできるようになります。 • 標準機能として添付されていたイメージエフェクトのいくつか が、『Cinematic Image Effects pre-release』（https:// bitbucket.org/Unity-Technologies/cinematic-image-effects） としてリプレースされます。使い勝手とクオリティの面から、今後 はこちらを使うのがよいでしょう。 • ただし一部のイメージエフェクトは入っていません（Global Fog など）ので、もし従来のものと共用する場合には、先に従来の 標準機能のEffectsを新規プロジェクトにインポートした後で、 Cinematic Image Effectsを追加インポートし、正常に動作し ているのを確認した後で、unitypackageとしてエクスポートし、 ご自身のプロジェクトに入れることをお勧めします。
- 43. イメージエフェクトの使い方 • イメージエフェクトを追加する目的としては、次のようなものが上げられます。 1. レンダリング方式やHDRなどの設定上、イメージエフェクトとして追加する必要のあるもの ⇒アンチエイリアス、トーンマッピング、グローバルフォグ、SSAO、SSRなど 2. カラースキームを明確にしたり、シーン全体のカラーを馴染ませるために追加するもの ⇒カラーグレーディング（カラーコレクション）、セピアトーン、モノクロトーンなど 3. 現実のカメラやフィルムで発生する様々な現象を、CGで再現する（作為）ために追加するもの ⇒ブルーム、モーションブラー、デプスオブフィールド、ビネット、色収差、ノイズ、グレインなど 4. 特殊演出のために、イメージを処理するフィルタとして使われるもの • 特に1の目的で使われるイメージエフェクトの中には、カメラにアタッチする順番が重要なものが ありますので、注意が必要です。 最初にSSR、SSAOの順にアタッチする トーンマッピング以降は、HDRがLDRに なるので、ブルームはそれ以前につける
- 45. LUTを使ったカラーグレーディング • カラースキームとは、シーンを支配する配色セットのことです。強烈な印象を与えるシーンを作りたい時には、 パレット全体からカラーをまんべんなく使うのではなく、限定された色のセットを明確に定義し、それにシー ン全体の色調を合わせるようにします。カラーグレーディングは、これらのカラースキームを強調する際に、強 力なツールとなります。 • また複数のシーンを繋ぐ時に、よりシーンがシームレスに繋がるように、各シーンごとのカラーを整えたりしま す。その際にも、カラーグレーディングを使用します。 • 「Tonemaping Color Grading」としてまとめられたイメージエフェクトコンポーネントでは、LUTを使った カラーグレーディングができます。LUTはPhotoshopなどで作成できますので、手軽に強力なカラーグレー ディングが可能になります。 ←カラーグレーディングアプリ DaVinci ResolveのLightroomの例。 作品が違えば、当然、各シーンを支配するカラースキームも異なる。
- 49. Q&A