【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜

2018/11/24 今日からはじめる。 ユニティちゃんトゥーンシェーダー 2.0 ～Unity道場カラー黒帯スペシャル～ コミュニティエバンジェリスト 小林 信行 ユニティ・テクノロジーズ・ジャパン合同会社

小林 信行 ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト UnityやMayaをはじめとする各種3Dツールの研究、ゲーム 制作のノウハウの普及、ユニティちゃんトゥーンシェーダー2.0 の開発をしています。その前は原作付きキャラクターゲーム の企画＆監督。 ユニティちゃんプロジェクトの言い出しっぺの一人。 @nyaa_toraneko Nobuyuki-Kobayashi nobuyuki@unity3d.com

現在、 UST2 v.2.0.5のマニュアルも 公開中です。 かなり頑張って書きましたので 是非、使ってみてください。

ところで、本日のテーマは、予告では以下の３つ ・「したいこと」ベースでの UTS2各シェーダーの使い分け。 ・「キャラの魅力を引き立てよう！」 UTS2の機能を活かしたカラー設計のやり方。 ・「こんな時、どうしたらいいの？」 トラブルシューティング例。

ところで、本日のテーマは、予告では以下の３つ ・「したいこと」ベースでの ぶっちゃけ、これらに関しては、 UTS2各シェーダーの使い分け。 マニュアルを丁寧に読んで ・「キャラの魅力を引き立てよう！」 UTS2の機能を活かしたカラー設計のやり方。 いただいたほうがよいです。 ・「こんな時、どうしたらいいの？」 ４５分では語りきれませんし… トラブルシューティング例。

というわけで、本日の では、 マニュアルには書かれていないですが、 UTS2を理解する上で、とても大切なことを 語ろうと思います。 それでは始まり、始まり～！

「UST2って、すごいっ！」という方が多い中で… 1. やりたいことがすぐにできた！ 2. Photoshopお絵かきと同じだ！ 3. UTS2の発色が好き！ 4. これ、自作モデルに同梱して販売し ちゃっても、いいんですか？ 5. VRでも、モバイルでも、PCでも 使える！（PS4でも使えます）

「UST2って、難しい…」という方も増えました 1. ファイルが多い… 2. どのシェーダーを使えばいいの… 3. UIが英語ばっかだ… 4. 機能が多すぎて、訳わからん… 5. VRChatで、白飛びしやすくない？ （解決してます）

「UST2って、難しい…」という方も増えました 1. ファイルが多い… 2. どのシェーダーを使えばいいの… 3. UIが英語ばっかだ… 4. 機能が多すぎて、訳わからん… 5. VRChatで、白飛びしやすくない？ （解決してます）

一方、UTS2をすぐに使いこなせる人も沢山いる 1. 普段から２Dイラストに親しんでいる 人は、すぐに使いこなせる 2. ３Dの経験の長さは、あまり関係ない 3. アニメスタジオも含めて、３Dや２Dの プロからは、とにかく評判がよい

すぐに使いこなせる人に、共通している点 1. 色（カラー）を混ぜたり、重ねると、 どんな結果になるかの知識 2. Unityも含め、CGでのライトの役割 3. 配色やカラー選択のコツ これら３要素をしっかりと掴んでいる

すぐに使いこなせる人に、共通している点 とは、 1. 色（カラー）を混ぜたり、重ねると、 どんな結果になるかの知識 2. Unityも含め、CGでのライトの役割 3. 配色やカラー選択のコツ の経験値の高さの ようです。 これら３要素をしっかりと掴んでいる

UTS2の基本仕様 ライトの当たり方を元に、 各カラーをカラー設計 に基づいて配置できる トゥーンシェーダー × 様々な光源に対して、 配置した各カラーが 自然に馴染む トゥーンシェーダー

UTS2の基本仕様 ライトの当たり方を元に、 各カラーをカラー設計 に基づいて配置できる トゥーンシェーダー × 各カラーは、「Intensity=1、カラー がピュアホワイトのディレクショナ ルライト」の下で設定する。 ※本スライドでは、以降の「ディレクショナルライト」は、全て「リアルタイム」とします。 様々な光源に対して、 配置した各カラーが 自然に馴染む トゥーンシェーダー 配置したカラーがどう表示される かは、シーン内に配置された 各ライトやシーンの環境光の 明るさ、カラー、特性に依存する。

UTS2の基本仕様 ライトの当たり方を元に、 各カラーをカラー設計 に基づいて配置できる トゥーンシェーダー × 一定仕様の ライティング下で 保証される 各カラーは、「Intensity=1、カラー がピュアホワイトのディレクショナ ルライト」の下で設定する。 ※本スライドでは、以降の「ディレクショナルライト」は、全て「リアルタイム」とします。 様々な光源に対して、 配置した各カラーが 自然に馴染む トゥーンシェーダー 多様なライティン グ条件の元で、 リアルタイムに 変化しうる 配置したカラーがどう表示される かは、シーン内に配置された 各ライトやシーンの環境光の 明るさ、カラー、特性に依存する。

UTS2 vs Standard Shader 一定仕様の ライティング下で 保証される × 多様なライティン グ条件の元で、 リアルタイムに 変化しうる

本日、持ち帰っていってもらいたいもの 「色を制する者は、 UTS2をも制する」

本日、持ち帰っていってもらいたいもの 「色を制する者は、 UTS2をも制する」 1. 「色」と「色」の足し算、掛け算 2. 「ライト」と「色」の深いカンケイ 3. ピュアな「白」と「黒」には要注意

Color

なぜ、「りんご」は 赤く見えるのか？

The Comprehensive PBR Guide by Allegorithmic – Vol.1

1. 当てる光の中に 反射するカラー がある The Comprehensive PBR Guide by Allegorithmic – Vol.1

1. 当てる光の中に 反射するカラー がある 2. マテリアルの サーフェイスが、 そのカラーを 吸収しない The Comprehensive PBR Guide by Allegorithmic – Vol.1

1. 当てる光の中に 反射するカラー がある 2. マテリアルの サーフェイスが、 そのカラーを 吸収しない The Comprehensive PBR Guide by Allegorithmic – Vol.1 3. 反射した特定の カラーが眼に届く

「色」と「色」の足し算、掛け算

ではここで、「色」に関する問題です 以下の計算の答えは何色？ 1.「赤」＋「青」＝？ 2.「赤」×「青」＝？

ではここで、「色」に関する問題です 以下の計算の答えは何色？ 1.「赤」＋「青」＝「紫」 2.「赤」×「青」＝？

ではここで、「色」に関する問題です 以下の計算の答えは何色？ 1.「赤」＋「青」＝「紫」 2.「赤」×「青」＝？ １は想像つくけど、 ２はピンとこない

実際にやってみると、「赤」×「青」＝「黒」

ではここで、「色」に関する問題です 以下の計算の答えは何色？ 1.「赤」＋「青」＝「紫」 2.「赤」×「青」＝？ なるほど、「黒」に なるのか！

念のために検算：「赤」＋「青」＝「紫」 どちらかというと 「淡い紫」

Aさん：「赤」×「青」＝「黒」？…「濃い紫」では？

Aさん：念のために検算：「赤」＋「青」＝「紫」 こちらも、 「淡い紫」

ではここで、「色」に関する問題です 以下の計算の答えは何色？ 1.「赤」＋「青」＝「淡い紫」 2.「赤」×「青」＝「黒」？ 「赤」×「青」＝「濃い紫」？ どうしてこうなった？

その前に、「色」を数値で表すと… 赤 ⇒ RGB表示(255,0,0) ⇒ float3(1,0,0) ⇒ 0～255の256段階(8bit表記) ⇒ ⇒ 00000000～11111111 0 ～ 1 に割り当て直す

理由：お互いの考えている「色」が違った ユニティちゃんにとっての「赤」と「青」 「赤」：float3(1.00,0.00,0.00) 「青」：float3(0.00,0.00,1.00) Aさんにとっての「赤」と「青」 「赤」：float3(0.94,0.15,0.31) 「青」：float3(0.18,0.38,0.86)

理由：お互いの考えている「色」が違った ユニティちゃんにとっての「赤」と「青」 「赤」：float3(1.00,0.00,0.00) × 「青」：float3(0.00,0.00,1.00) Aさんにとっての「赤」と「青」 「赤」：float3(0.94,0.15,0.31) × 「青」：float3(0.18,0.38,0.86)

掛け合わせる色のRGBいずれか の要素に０が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう（０になる）

では、足し算は割と近い色だった訳は？ ユニティちゃんにとっての「赤」と「青」 「赤」：float3(1.00,0.00,0.00) + 「青」：float3(0.00,0.00,1.00) Aさんにとっての「赤」と「青」 「赤」：float3(0.94,0.15,0.31) + 「青」：float3(0.18,0.38,0.86)

足し算した結果が、１を越えてしまう？ ユニティちゃんにとっての「赤」と「青」 「赤」 = 「青」 ：float3(1.00,0.00,0.00) + ：float3(0.00,0.00,1.00) 「淡い紫」：float3(1.00,0.00,1.00) Aさんにとっての「赤」と「青」 「赤」 = 「青」 ：float3(0.94,0.15,0.31) + ：float3(0.18,0.38,0.86) 「淡い紫」：float3(1.12,0.53,1.17)

足し算した結果が、１を越えてしまう？ Aさんの計算結果としての「淡い紫」 「淡い紫」：float3(1.12,0.53,1.17) 実際に画面に表示されている「淡い紫」 「淡い紫」：float3(1.00,0.53,1.00) 画面表示の際に、 １を越える値は 丸められている。

実際の足し算の結果の画面表示はこうだった ユニティちゃんの色の足し算結果の画面表示 「淡い紫」：float3(1.00,0.00,1.00) Aさんの色の足し算結果の画面表示 「淡い紫」：float3(1.00,0.53,1.00)

色同士を足し合わせた結果、 RGBいずれかの要素が１を越えると、 越えた値は１に丸められて、 画面表示されていることがある ※もう少し正しく言うと、値としては1以上の数値を持つことができるのだが、通常のモニタで は、１を越えたところで一律に白として表現されてしまう。でも値としては存在しているので、 それらをぼかしなども駆使しながら表現するのが、ポストエフェクトのブルームである。

Q: UTS2を使っていて、こんなことに出会うの？

Q: UTS2を使っていて、こんなことに出会うの？ A: はい。しばしば出会うことになります。

Q: UTS2を使っていて、こんなことに出会うの？ A: はい。しばしば出会うことになります。 UTS2のカラー同士の重ね合わせで、「乗算」とあるものは「色同士の 掛け算」、「加算」とあるものは「色同士の足し算」のことです。 • 乗算の例：ベーステクスチャに、ベースカラーを載せる時 • 加算の例：ベースとなるカラーに、リムライトを追加する時 これらの時に、予想と違うカラーになった場合や、「白飛び」が発生して いるような場合に、これらのことを考えて調整する必要があります。

同じ理屈で「純粋な色」、 すなわち 黒：float3(0,0,0) 白：float3(1,1,1) 赤：float3(1,0,0) 緑：float3(0,1,0) 青：float3(0,0,1) のような色を絡める時には、 注意が必要だ！

「ライト」と「色」の深いカンケイ

続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う？ 代表的な方法を３つ上げてみよう。 1. 2. 3.

続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う？ 代表的な方法を３つ上げてみよう。 1.マテリアル 2.ポストエフェクト 3.

続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う？ 代表的な方法を３つ上げてみよう。 1.マテリアル 2.ポストエフェクト 3.ライト

続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う？ その通り！ライトで色味を 代表的な方法を３つ上げてみよう。 変えられるのを、 しばしば忘れがちだ！ 1.マテリアル 2.ポストエフェクト 3.ライト

よくあるミス「正しい色が出ない…」

よくあるミス「正しい色が出ない…」 カラー設定の最中な のに、なんでディレク ショナルライトに色が ついてるのぉぉぉっ!? シーンに最初からあるディレクショナル ライトは「白」ではありません

UTS2 vs Standard Shader ライトがマテリアルに当たる時に発生する要素は、 UTS2、St.S共に一致するので、各場所にどんなカラー を入れたら自然かは、実物から観察できる

UTS2：影色を配置する領域に カラーが自由に配置できる UTS2 vs Standard Shader

ライトとマテリアルカラーとの関係 UTS2/St.S：ディレクショナルライトがマテリアルに当たっている時、 そのカラーへの影響は、「掛け算」になる。 UTS2のみ：白の明るさ１のディレクショナルライトが当たっている時、 基本色/１影色/２影色に配置したカラーは、設定通りに見えている。 グレー40% グレー80% 設定カラー ⇒ ライトの明るさ （Intensity）= 0.5 グレー160% ⇒グレー100% ⇒ ライトの明るさ （Intensity）= 1 ライトの明るさ （Intensity）= 2 ※リアルタイムポイントライトには、これに加えて距離減衰があるので、さらにややこしい。

ライトとマテリアルカラーとの関係 UTS2/St.S：ディレクショナルライトがマテリアルに当たっている時、 そのカラーへの影響は、「掛け算」になる。 UTS2のみ：白の明るさ１のディレクショナルライトが当たっている時、 基本色/１影色/２影色に配置したカラーは、設定通りに見えている。 グレー40% グレー80% 設定カラー ⇒ ライトの明るさ （Intensity）= 0.5 グレー160% ⇒グレー100% ⇒ ライトの明るさ （Intensity）= 1 ライトの明るさ （Intensity）= 2 ※リアルタイムポイントライトには、これに加えて距離減衰があるので、さらにややこしい。

ここで思い出してもらおう！ 色の掛け算の時に、 どんなカラーを注意すべき だったかな？

ここで思い出してもらおう！ 色の掛け算の時に、 どんなカラーを注意すべき だったかな？ 掛け合わせる色のRGBいずれか の要素に０が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう（０になる）

その通り！ さらに色の計算結果が１を 越える時に、どんなことに 注意すべきだったかな？ 掛け合わせる色のRGBいずれか の要素に０が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう（０になる）

掛け合わせる色のRGBいずれかの 要素に０が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう（０になる） 上出来だ！これから 「調整の余地が少ない カラー」があることが わかるが、わかるかな？ 色同士を足し合わせた結果、 RGBいずれかの要素が１を越えると、 越えた値は１に丸められて、 画面表示されていることがある

「調整の余地が少ないカラー」ってどんなの？ 「調整の余地が少ないカラー」とは、ＲＧＢのいずれかの 値に０や１が入っているものを指します。 それらの要素が、１として天井に張り付いているために、 加算されても白飛びが進む方向にしか変化しないか、 ０として乗算されることでフィルタのように働いてしまうからです。 「淡い紫」：float3(1.00,0.53,1.00)

「調整の余地が少ないカラー」ってどんなの？ 「調整の余地が少ないカラー」とは、ＲＧＢのいずれかの 値に０や１が入っているものを指します。 それらの要素が、１として天井に張り付いているために、 加算されても白飛びが進む方向にしか変化しないか、 ０として乗算されることでフィルタのように働いてしまうからです。 「淡い紫」：float3(1.00,0.53,1.00) このカラーなども、 RBが１に張り付いている限り、 Ｇをいくら足してやっても 緑は混じらず、 白くなっていくだけだ。

「調整の余地が少ないカラー」を使いがちなところ 1. リアルタイムライトのカラー設定時、 特にポイントライトを使用する時 2. 「白」や「黒」のカラーを、キャラクターの イメージカラーとして使用する時 上のようなカラー設定をして いると、ＲＧＢの各要素が０や１ に張り付いているカラー を設定しがちだ。 注意しよう！

「調整の余地が少ないカラー」を使いがちなところ 1. リアルタイムライトのカラー設定時、 特にポイントライトを使用する時 2. 「白」や「黒」のカラーを、キャラクターの イメージカラーとして使用する時 上のようなカラー設定をして いると、ＲＧＢの各要素が０や１ に張り付いているカラー を設定しがちだ。 注意しよう！

ポイントライトのカラー設定の一例 ⇒

ライトカラーの微調整で白飛びの軽減をする

トーンマッパーでも抑え込むことはできるが… ⇒ もちろん、カラーグレーディングの トーンマッパーを使って、 白飛びを抑え込むのもアリだ。 HDR時代には必須のテクと 言えるだろう！

トーンマッパーでも抑え込むことはできるが… ⇒ もちろん、カラーグレーディングの トーンマッパーを使って、 白飛びを抑え込むのもアリだ。 HDR時代には必須のテクと 言えるだろう！ その場合でも、トーンマッパーを かける前に白飛びはなるべく抑えた ライティングをするのは 基本中の基本だ！

UTS2だけの裏技：SceneLights HiCut_Filter ⇒ 最後に、UTS2には SceneLights HiCut_Filterという 白飛び抑制フィルタがある。

UTS2だけの裏技：SceneLights HiCut_Filter ⇒ 最後に、UTS2には SceneLights HiCut_Filterという 白飛び抑制フィルタがある。 このフィルタをONにすれば、 トーンマッパーをかけなくても 白飛びの防止がおおよそできる！ さすが大鳥重工製だな！

UTS2だけの裏技：SceneLights HiCut_Filter

ピュアな「白」と「黒」には要注意

「白」と「黒」は、表現するのが難しい

この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。

この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。

この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。

この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。

人の眼は、カラーや明るさをそのまま解釈している訳ではない これは 「色の恒常性」 にまつわる例だ AとBのマスは、実は同じ色 http://kazoo04.hatenablog.com/entry/2015/02/27/150642

• http://kazoo04.hatenablog.com/entry/2015/02/27/150642

人の眼は、カラーや明るさをそのまま解釈している訳ではない 段々自分の目が 信じられなくなって きただろう！ AとBのマスは、実は同じ色 http://kazoo04.hatenablog.com/entry/2015/02/27/150642

• http://kazoo04.hatenablog.com/entry/2015/02/27/150642

人の眼は、カラーや明るさをそのまま解釈している訳ではない このドレスの色は？ 1. 青と黒 2. 白と金 他にも、昔、話題になった例 で、こんなものがあった。 ちなみに正解は１だが、 だまされてもしょうが ないような例だ。

人はものを見る時にその物体の色 （光の波長）をそのまま解釈し、 知覚している訳ではない。 特に環境光の影響や、フィルタなど で隣り合ったカラーのコントラストが 落ちている時には、しばしば違う色と 間違えることもある。

人はものを見る時にその物体の色 （光の波長）をそのまま解釈し、 知覚している訳ではない。 特に環境光の影響や、フィルタなど で隣り合ったカラーのコントラストが 落ちている時には、しばしば違う色と 間違えることもある。

これは、見方を変えれば、環境光や 隣接するカラーを上手く使うことで、 「白」や「黒」のように「調整しにくい カラー」を使わなくても、「白」や「黒」 を感じさせるカラーがある、ということ でもある。 その実例を見てみよう。

どっちの 白 が、引き立って見える？ ©カラー

白の輝きを印象づける、陰色 ©カラー

白の輝きを印象づける、陰色 ©カラー

• float3(0,0,0)の黒や、float3(1,1,1)の白は 極力マテリアルカラーには使わないように しよう。ライトカラーを完全に吸収してしまう か、明るさをそのまま跳ね返してしまうぞ。 • 「白」や「黒」をキャラクターカラーとする時 には、文字通りにピュアな白や黒は選ばな いこと。陰色とのコントラストで、「白」や「黒」 のように見せるのがコツだ！

• float3(0,0,0)の黒や、float3(1,1,1)の白は 極力マテリアルカラーには使わないように しよう。ライトカラーを完全に吸収してしまう か、明るさをそのまま跳ね返してしまうぞ。 • 「白」や「黒」をキャラクターカラーとする時 には、文字通りにピュアな白や黒は選ばな いこと。陰色とのコントラストで、「白」や「黒」 のように見せるのがコツだ！

Thank you! ご静聴ありがとうございました