2018/01/20に開催されたUnity道場スペシャル 2018仙台の講演スライドです。 講師：池和田 有輔（ユニティ・テクノロジーズ・ジャパン合同会社） Unityで制作した作品が、何か一味足りないと思うことはありませんか？ 今回の講演ではUnity初心者を対象に、見た目を“盛る“ことができる Post Processing Stack を始めとして、気の利いた演出や視覚効果を簡単に実装するツールをご紹介します。「理屈はさておき、とりあえずコレやっとけば良い感じになる」「応用はさておき、○○を実現するためにはコレが最短ルート」というお手軽なクオリティアップを望むのであればきっと助けになるでしょう。 紹介予定アセット PostProcessing Stack / TextMesh Pro / Unity Particle Pack / Shader Forge など こんな人にオススメ ・Post Processing Stackを使ったことがないアーティスト、Unityユーザー全般 ・学校や個人で小規模なゲームを作る方 得られる知見 ・Post Processing Stackでできるビジュアル表現 ・デザイン便利ツールと使用テクニック Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards

1. 1
アセットでお手軽クオリティアップ！
池和田 有輔（ユニティ・テクノロジーズ・ジャパン）

2. 2
“お手軽” とは？
• 理屈はさておき、とりあえずコレやっとけば良い感じになる
• 応用はさておき、○○を実現するためにはコレが最短ルート

3. 3
なぜ、アセット紹介？
• 公式アセットであっても基本機能じゃないものは気が付きにくい
• マニュアルやリファレンスもない
でもお高いんでしょう？
• 今回は最後の一つを除いて無料のものを紹介します

4. 4
mission 1
のっぺりした絵をなんとかしたい！

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11
Post Processing Stack
Asset
Free

12. 12
定番の視覚効果を束にしたポストエフェクト
• カメラコンポーネントに Post Processing Behaviorコンポーネントを追加し、プロフィール
ファイルを作るだけで超手軽に使えます
• なぜスタック？
• スタックならではのメリットが多い
• Camera Depth Texture（深度情報テクスチャ）AA、DOF、SSRなどに使う
• Motion Vector Texture（動き情報テクスチャ）AA、モーションブラーなどに使う
• 1+1+1+1+1は5ではない
• ディファード＋HDR環境＋リニアカラースペースで真価を発揮
• VRでは厳しいものが多く、またモバイルでもパフォーマンスには十分配慮しよう
• 使う前にこちらをチェック「ヤバい！！ポストプロセス！！入門！！！！！！！！！」

13. 13
基本機能
• アンチエイリアシング
• アンビエントオクルージョン
• スクリーンスペースリフレクション
• フォグ
• 被写界深度
• モーションブラー
• 目の適応
• ブルーム
• カラーグレーディング
• ユーザーLut
• 色収差
• 粒子
• ヴィネット

14. 14
今回解説するもの
• アンチエイリアシング
• アンビエントオクルージョン
• スクリーンスペースリフレクション
• フォグ
• 被写界深度
• モーションブラー
• 目の適応
• ブルーム
• カラーグレーディング
• ユーザーLut
• 色収差
• 粒子
• ヴィネット

15. 15
アンビエントオクルージョン（AO）
くぼんでる部分に擬似的な陰を入れて実在感を上げるCGならではの手法
× =

16. 16
アンビエントオクルージョン（AO）
基本的にはintensityで濃さを調節し、Radiusは最小限にするのがコツ

17. 17
スクリーンスペースリフレクション（SSR）
スクリーン情報をもとに鏡面反射をシミュレート。負荷が高いので設定をしっかりやろう

18. 18
スクリーンスペースリフレクション（SSR）
反射をした部分に反射先のピクセルをブレンドするような形。スクリーンにないものは写らない。

19. 被写界深度（DOF）
被写界深度エフェクト。デプステクスチャを使って焦点距離から遠いものにボケ足を加える。

20. 単焦点レンズのような綺麗なボケをシミュレート。

21. 21
ブルーム
ピクセルの周りを散らして光の散乱を表現。大人気エフェクト

22. 22
ブルーム
一定の輝度を超えたピクセルに反応するが、閾値と合わせてsoft kneeを設定すると自然になる

23. 23
カラーグレーディング
露出やコントラストや彩度やRGBによるチャンネルミキサーやトーンカーブなど
おなじみの調整ができる

24. 24
ユーザーLUT
PhotoshopやLightroomを使ってカラコレの調整することもできます。
慣れてる方はこちらを断然お勧め

25. 25
ビネット
トイカメラなどに顕著に見られる周囲の光量落ちを再現。お手軽に雰囲気が出て負荷も軽い

26. 26
Post Processing Stackまとめ
● リアル志向、トゥーンシェーディング問わず、気軽に使えるのがいいところ
● 設定などは下記のUnite動画を参考に
● ゲームの見た目も盛ったら変わる！！！！ヤバい！！ポストプロセス！！入門！！！！！！

27. 27
mission2
UIの文字表示を華やかにしたい

28. 28

29. 29

30. 30
UI Text は2種類のフォントを扱う
• 一般的な表示形式
• ランタイム時にA8のアトラスに焼き込む
• 入力フォントは都度追加
• サイズ違いは別物として扱われる
• 色ちがいは同一として扱われる
• 専用ツールなどでアトラス作成
• RGBAのテクスチャも使える
• あらゆる画像がフォントになる
• 手書き文字など
• メモリに負担をかけがち
ダイナミックフォント 事前アトラス化フォント

31. 31
共通する欠点は「拡大縮小に弱く」「エフェクトが苦手」
それを解決したアセットがあるんです

32. 32
TextMesh Pro
Asset
Free

33. 33
解決の鍵は、Distance Field
● SDF（Signed Distance Field）フォント
● 通常ピクセル記録するのはRGBAとかAの情報だが
この場合記録しているのは「境界からの距離」。
また境界の内か外かは正負で決められる。
● それをもとにレンダリング時に境界線を検出し、
バイリニア補間して描画。
● つまり、拡大してもジャギーが発生しない
○ ベクターデータのように扱える
● 参考：ヘキサドライブさんの技術ブログ
http://hexadrive.jp/lab/demo/610/

34. 34
TextMesh Proのいいところ
● SDF描画による拡大縮小対応
● 豊富なリッチテキストの種類
● シェーダによる柔軟で負荷の低いエフェクト
● uGUIからの置き換えも簡単
● そう、TextMeshProReplacerを使えばね！
● https://github.com/jackisgames/TextMeshProReplacer

35. 35
DEMO

36. 36

37. 37
それはそうと、ちょっと配色のコツとかなんとか
● デザインに精通してない人はこの辺りを注意
● 色を使いすぎ
● フォントの種類も多すぎ
● グリッドライン多すぎ
● 複雑になる ＝ 失敗という認識くらいが丁度いい
● ‥‥というわけで、「最も簡単な」失敗しない配色法を伝授

38. 38
1. 使うべき色を3色に収める
● 1色は白か黒。あるいはそれに近い色
● 彩度低い、明暗はっきり
● 残りの2色はお互い補色に近い色にする
● ‥‥というわけで決まったこの3色
● ベースカラー、メインカラー、アクセントカラーと呼ぶこともある

39. 39
2. その3色の同系色のみ使っていい事にする
● 3色だけでなんとかするのは流石に厳しい
● ここでいう「同系色」とは近い明度が基本
● 多少色相は振って良い。彩度は統一した方が無難かも
● ‥‥ということを考えると、使うべきパレットの一例としてこんな感じになるわけです

40. 40
配色をサポートするサービスを使ってみよう
● Adobe Color CC（旧kuler）は非常に素晴らしいサービス
● 人気の高いパレットを見てみよう。そのままダウンロードして使うこともできるよ

41. 41
mission3
パーティクルによる演出を加えたい

42. 42

43. 43
Unityのパーティクルはちょっと複雑
Main
Emission
Shape
Velocity Over Lifetime
Limit Velocity Over Lifetime
Inherit Velocity
Force Over Lifetime
Color Over Lifetime
Color By Speed
Size Over Lifetime
Size By Speed
Rotation Over Lifetime
Rotation By Speed
External Forces
Collision
Sub Emitters
Texture Sheet Animation
Lights
移動 カラー サイズ 回転 イベント 描画基本
Noise
Triggers
Trails
Custom Date
Renderer
スクリプト連携
● 全部で23のモジュールから成り立っており、パラメータの数がとにかく多い！

44. 44
Unity Particle Pack
Asset
Free

45. 45
Unity Particle Pack
● 公式のパーティクル集
● マニュアルから作れるようにはならない
● サンプルで学習しよう
● ゼロから作るのは大変なので、カスタマイズ
すれば良い

46. 46
mission4
気軽にシェーダーを書きたい

47. 47
シェーダーとは
● 光源入力とマテリアル設定をベースにして、ピクセル毎の描画色を計算するための数学的
な計算とアルゴリズムを内包した、小さなスクリプトです（マニュアルより抜粋）。
● ざっくり言うと、オブジェクトの質感を決めるもの。世の中には様々な質感があるが、そ
れらを決定付けるのがシェーダーの役割
○ 一枚板で作った机
○ よく磨かれた鏡
○ 鈍く光る錆びた鎧
○ 澄んだ色のグラス
○ 空間を歪めるオーラ

48. 48

49. 49
シェーダー習得の難しさ
● C#とは言語体系が違う
● グラフィックプログラミング的な考え方に慣れなきゃいけない
● 入門書籍や資料が少ない
● エラーが起きた時、原因がわかりにくい
・・・というわけで

50. 50
Shader Forge
Asset
$40

51. 51
手軽にVertex / Pixelシェーダを記述しよう
● ノードベースのシェーダエディタ。プログラミング不要
● 3Dモデル用だけでなく、パーティクルやUI/2Dアセット用のシェーダ、それからポストエ
フェクトなんかも作ることができる
● ド定番アセットであり更新頻度高め。インターネット上に情報やチュートリアルが多い
● かなり柔軟性が高くプリセットに便利なノードが多め。ノードにスクリプトも書ける
● プレビュー機能がとても便利（だけど動作はちょっと怪しい）
● CG Includeは残念ながら使えない

52. 52
DEMO

53. 53
Thank You !!