【Unity道場スペシャル 2018仙台】お手軽クオリティアップ術
858 Views
January 23, 18
スライド概要
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
リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。
関連スライド
各ページのテキスト
アセットでお手軽クオリティアップ！ 池和田 有輔（ユニティ・テクノロジーズ・ジャパン） 1
“お手軽” とは？ • 理屈はさておき、とりあえずコレやっとけば良い感じになる • 応用はさておき、○○を実現するためにはコレが最短ルート 2
なぜ、アセット紹介？ • 公式アセットであっても基本機能じゃないものは気が付きにくい • マニュアルやリファレンスもない でもお高いんでしょう？ • 今回は最後の一つを除いて無料のものを紹介します 3
mission 1 のっぺりした絵をなんとかしたい！ 4
5
6
7
8
9
10
Asset Post Processing Stack Free 11
定番の視覚効果を束にしたポストエフェクト • カメラコンポーネントに Post Processing Behaviorコンポーネントを追加し、プロフィール ファイルを作るだけで超手軽に使えます • なぜスタック？ • スタックならではのメリットが多い • Camera Depth Texture（深度情報テクスチャ）AA、DOF、SSRなどに使う • Motion Vector Texture（動き情報テクスチャ）AA、モーションブラーなどに使う • 1+1+1+1+1は5ではない • ディファード＋HDR環境＋リニアカラースペースで真価を発揮 • VRでは厳しいものが多く、またモバイルでもパフォーマンスには十分配慮しよう • 使う前にこちらをチェック「ヤバい！！ポストプロセス！！入門！！！！！！！！！」 12
基本機能 • アンチエイリアシング • ブルーム • アンビエントオクルージョン • カラーグレーディング • スクリーンスペースリフレクション • ユーザーLut • フォグ • 色収差 • 被写界深度 • 粒子 • モーションブラー • ヴィネット • 目の適応 13
今回解説するもの • アンチエイリアシング • ブルーム • アンビエントオクルージョン • カラーグレーディング • スクリーンスペースリフレクション • ユーザーLut • フォグ • 色収差 • 被写界深度 • 粒子 • モーションブラー • ヴィネット • 目の適応 14
アンビエントオクルージョン（AO） × = くぼんでる部分に擬似的な陰を入れて実在感を上げるCGならではの手法 15
アンビエントオクルージョン（AO） 基本的にはintensityで濃さを調節し、Radiusは最小限にするのがコツ 16
スクリーンスペースリフレクション（SSR） スクリーン情報をもとに鏡面反射をシミュレート。負荷が高いので設定をしっかりやろう 17
スクリーンスペースリフレクション（SSR） 反射をした部分に反射先のピクセルをブレンドするような形。スクリーンにないものは写らない。 18
被写界深度（DOF） 被写界深度エフェクト。デプステクスチャを使って焦点距離から遠いものにボケ足を加える。
鄃ⱖ歲帾䏝%0' 単焦点レンズのような綺麗なボケをシミュレート。
ブルーム ピクセルの周りを散らして光の散乱を表現。大人気エフェクト 21
ブルーム 一定の輝度を超えたピクセルに反応するが、閾値と合わせてsoft kneeを設定すると自然になる 22
カラーグレーディング 露出やコントラストや彩度やRGBによるチャンネルミキサーやトーンカーブなど おなじみの調整ができる 23
ユーザーLUT PhotoshopやLightroomを使ってカラコレの調整することもできます。 慣れてる方はこちらを断然お勧め 24
ビネット トイカメラなどに顕著に見られる周囲の光量落ちを再現。お手軽に雰囲気が出て負荷も軽い 25
Post Processing Stackまとめ ● リアル志向、トゥーンシェーディング問わず、気軽に使えるのがいいところ ● 設定などは下記のUnite動画を参考に ● ゲームの見た目も盛ったら変わる！！！！ヤバい！！ポストプロセス！！入門！！！！！！ 26
mission2 UIの文字表示を華やかにしたい 27
28
29
UI Text は2種類のフォントを扱う ダイナミックフォント 事前アトラス化フォント • 一般的な表示形式 • 専用ツールなどでアトラス作成 • ランタイム時にA8のアトラスに焼き込む • RGBAのテクスチャも使える • 入力フォントは都度追加 • あらゆる画像がフォントになる • サイズ違いは別物として扱われる • 色ちがいは同一として扱われる • 手書き文字など • メモリに負担をかけがち 30
共通する欠点は「拡大縮小に弱く」「エフェクトが苦手」 それを解決したアセットがあるんです 31
Asset TextMesh Pro Free 32
解決の鍵は、Distance Field ● SDF（Signed Distance Field）フォント ● 通常ピクセル記録するのはRGBAとかAの情報だが この場合記録しているのは「境界からの距離」。 また境界の内か外かは正負で決められる。 ● それをもとにレンダリング時に境界線を検出し、 バイリニア補間して描画。 ● つまり、拡大してもジャギーが発生しない ○ ● ベクターデータのように扱える 参考：ヘキサドライブさんの技術ブログ http://hexadrive.jp/lab/demo/610/ 33
TextMesh Proのいいところ ● SDF描画による拡大縮小対応 ● 豊富なリッチテキストの種類 ● シェーダによる柔軟で負荷の低いエフェクト ● uGUIからの置き換えも簡単 ● そう、TextMeshProReplacerを使えばね！ ● https://github.com/jackisgames/TextMeshProReplacer 34
DEMO 35
36
それはそうと、ちょっと配色のコツとかなんとか ● ● デザインに精通してない人はこの辺りを注意 ● 色を使いすぎ ● フォントの種類も多すぎ ● グリッドライン多すぎ ● 複雑になる ＝ 失敗という認識くらいが丁度いい ‥‥というわけで、「最も簡単な」失敗しない配色法を伝授 37
1. 使うべき色を3色に収める ● 1色は白か黒。あるいはそれに近い色 ● 彩度低い、明暗はっきり ● 残りの2色はお互い補色に近い色にする ● ‥‥というわけで決まったこの3色 ● ベースカラー、メインカラー、アクセントカラーと呼ぶこともある 38
2. その3色の同系色のみ使っていい事にする ● 3色だけでなんとかするのは流石に厳しい ● ここでいう「同系色」とは近い明度が基本 ● ● 多少色相は振って良い。彩度は統一した方が無難かも ‥‥ということを考えると、使うべきパレットの一例としてこんな感じになるわけです 39
配色をサポートするサービスを使ってみよう ● Adobe Color CC（旧kuler）は非常に素晴らしいサービス ● 人気の高いパレットを見てみよう。そのままダウンロードして使うこともできるよ 40
mission3 パーティクルによる演出を加えたい 41
42
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 Noise Collision サイズ 回転 イベント Triggers Sub Emitters Texture Sheet Animation Lights Trails Custom Date Renderer 描画 スクリプト連携 全部で23のモジュールから成り立っており、パラメータの数がとにかく多い！ 43
Asset Unity Particle Pack Free 44
Unity Particle Pack ● 公式のパーティクル集 ● マニュアルから作れるようにはならない ● サンプルで学習しよう ● ゼロから作るのは大変なので、カスタマイズ すれば良い 45
mission4 気軽にシェーダーを書きたい 46
シェーダーとは ● 光源入力とマテリアル設定をベースにして、ピクセル毎の描画色を計算するための数学的 な計算とアルゴリズムを内包した、小さなスクリプトです（マニュアルより抜粋）。 ● ざっくり言うと、オブジェクトの質感を決めるもの。世の中には様々な質感があるが、そ れらを決定付けるのがシェーダーの役割 ○ 一枚板で作った机 ○ よく磨かれた鏡 ○ 鈍く光る錆びた鎧 ○ 澄んだ色のグラス ○ 空間を歪めるオーラ 47
48
シェーダー習得の難しさ ● C#とは言語体系が違う ● グラフィックプログラミング的な考え方に慣れなきゃいけない ● 入門書籍や資料が少ない ● エラーが起きた時、原因がわかりにくい ・・・というわけで 49
Asset Shader Forge $40 50
手軽にVertex / Pixelシェーダを記述しよう ● ノードベースのシェーダエディタ。プログラミング不要 ● 3Dモデル用だけでなく、パーティクルやUI/2Dアセット用のシェーダ、それからポストエ フェクトなんかも作ることができる ● ド定番アセットであり更新頻度高め。インターネット上に情報やチュートリアルが多い ● かなり柔軟性が高くプリセットに便利なノードが多め。ノードにスクリプトも書ける ● プレビュー機能がとても便利（だけど動作はちょっと怪しい） ● CG Includeは残念ながら使えない 51
DEMO 52
Thank You !! 53