Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今日からはじめる。
ユニティちゃんトゥーンシェーダー 2.0
~Unity道場カラー黒帯スペシャル~
ユニティ・テクノロジーズ・ジャパン合同会社
コミュニティエバンジェリスト
小林 信行
2018/11/24
小林 信行
UnityやMayaをはじめとする各種3Dツールの研究、ゲーム
制作のノウハウの普及、ユニティちゃんトゥーンシェーダー2.0
の開発をしています。その前は原作付きキャラクターゲーム
の企画&監督。
ユニティちゃんプロジェクトの言い出...
現在、
UST2 v.2.0.5のマニュアルも
公開中です。
かなり頑張って書きましたので
是非、使ってみてください。
ところで、本日のテーマは、予告では以下の3つ
・「したいこと」ベースでの
UTS2各シェーダーの使い分け。
・「キャラの魅力を引き立てよう!」
UTS2の機能を活かしたカラー設計のやり方。
・「こんな時、どうしたらいいの?」
トラブルシューティ...
ところで、本日のテーマは、予告では以下の3つ
・「したいこと」ベースでの
UTS2各シェーダーの使い分け。
・「キャラの魅力を引き立てよう!」
UTS2の機能を活かしたカラー設計のやり方。
・「こんな時、どうしたらいいの?」
トラブルシューティ...
というわけで、本日の では、
マニュアルには書かれていないですが、
UTS2を理解する上で、とても大切なことを
語ろうと思います。
それでは始まり、始まり~!
「UST2って、すごいっ!」という方が多い中で…
1. やりたいことがすぐにできた!
2. Photoshopお絵かきと同じだ!
3. UTS2の発色が好き!
4. これ、自作モデルに同梱して販売し
ちゃっても、いいんですか?
5. VRでも、...
「UST2って、難しい…」という方も増えました
1.ファイルが多い…
2.どのシェーダーを使えばいいの…
3.UIが英語ばっかだ…
4.機能が多すぎて、訳わからん…
5.VRChatで、白飛びしやすくない?
(解決してます)
「UST2って、難しい…」という方も増えました
1.ファイルが多い…
2.どのシェーダーを使えばいいの…
3.UIが英語ばっかだ…
4.機能が多すぎて、訳わからん…
5.VRChatで、白飛びしやすくない?
(解決してます)
一方、UTS2をすぐに使いこなせる人も沢山いる
1.普段から2Dイラストに親しんでいる
人は、すぐに使いこなせる
2.3Dの経験の長さは、あまり関係ない
3.アニメスタジオも含めて、3Dや2Dの
プロからは、とにかく評判がよい
すぐに使いこなせる人に、共通している点
1.色(カラー)を混ぜたり、重ねると、
どんな結果になるかの知識
2.Unityも含め、CGでのライトの役割
3.配色やカラー選択のコツ
これら3要素をしっかりと掴んでいる
すぐに使いこなせる人に、共通している点
1.色(カラー)を混ぜたり、重ねると、
どんな結果になるかの知識
2.Unityも含め、CGでのライトの役割
3.配色やカラー選択のコツ
これら3要素をしっかりと掴んでいる
とは、
の経験値の高さの
よう...
UTS2の基本仕様
ライトの当たり方を元に、
各カラーをカラー設計
に基づいて配置できる
トゥーンシェーダー
様々な光源に対して、
配置した各カラーが
自然に馴染む
トゥーンシェーダー
×
UTS2の基本仕様
ライトの当たり方を元に、
各カラーをカラー設計
に基づいて配置できる
トゥーンシェーダー
様々な光源に対して、
配置した各カラーが
自然に馴染む
トゥーンシェーダー
配置したカラーがどう表示される
かは、シーン内に配置された...
UTS2の基本仕様
ライトの当たり方を元に、
各カラーをカラー設計
に基づいて配置できる
トゥーンシェーダー
様々な光源に対して、
配置した各カラーが
自然に馴染む
トゥーンシェーダー
配置したカラーがどう表示される
かは、シーン内に配置された...
UTS2 vs Standard Shader
×
一定仕様の
ライティング下で
保証される
多様なライティン
グ条件の元で、
リアルタイムに
変化しうる
本日、持ち帰っていってもらいたいもの
「色を制する者は、
UTS2をも制する」
本日、持ち帰っていってもらいたいもの
「色を制する者は、
UTS2をも制する」
1. 「色」と「色」の足し算、掛け算
2. 「ライト」と「色」の深いカンケイ
3. ピュアな「白」と「黒」には要注意
Color
なぜ、「りんご」は
赤く見えるのか?
The Comprehensive PBR Guide by Allegorithmic – Vol.1
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. マテリアルの
サーフェイスが、
そのカラーを
吸収しない
3. 反射した特定の
カラー...
「色」と「色」の足し算、掛け算
ではここで、「色」に関する問題です
以下の計算の答えは何色?
1.「赤」+「青」=?
2.「赤」×「青」=?
ではここで、「色」に関する問題です
以下の計算の答えは何色?
1.「赤」+「青」=「紫」
2.「赤」×「青」=?
ではここで、「色」に関する問題です
以下の計算の答えは何色?
1.「赤」+「青」=「紫」
2.「赤」×「青」=?
1は想像つくけど、
2はピンとこない
実際にやってみると、「赤」×「青」=「黒」
ではここで、「色」に関する問題です
以下の計算の答えは何色?
1.「赤」+「青」=「紫」
2.「赤」×「青」=?
なるほど、「黒」に
なるのか!
念のために検算:「赤」+「青」=「紫」
どちらかというと
「淡い紫」
Aさん:「赤」×「青」=「黒」?…「濃い紫」では?
Aさん:念のために検算:「赤」+「青」=「紫」
こちらも、
「淡い紫」
ではここで、「色」に関する問題です
以下の計算の答えは何色?
1.「赤」+「青」=「淡い紫」
2.「赤」×「青」=「黒」?
「赤」×「青」=「濃い紫」?
どうしてこうなった?
その前に、「色」を数値で表すと…
赤 RGB表示(255,0,0) float3(1,0,0)⇒ ⇒
⇒
0~255の256段階(8bit表記)
⇒
⇒
0 1~ に割り当て直す
00000000~11111111
理由:お互いの考えている「色」が違った
ユニティちゃんにとっての「赤」と「青」
「赤」:float3(1.00,0.00,0.00)
「青」:float3(0.00,0.00,1.00)
Aさんにとっての「赤」と「青」
「赤」:float3(0...
理由:お互いの考えている「色」が違った
ユニティちゃんにとっての「赤」と「青」
「赤」:float3(1.00,0.00,0.00)
「青」:float3(0.00,0.00,1.00)
Aさんにとっての「赤」と「青」
「赤」:float3(0...
掛け合わせる色のRGBいずれか
の要素に0が入っていると、
掛け合わせた結果の色は、
RGBのいずれかの要素が消えて
しまう(0になる)
では、足し算は割と近い色だった訳は?
ユニティちゃんにとっての「赤」と「青」
「赤」:float3(1.00,0.00,0.00)
「青」:float3(0.00,0.00,1.00)
Aさんにとっての「赤」と「青」
「赤」:float3(0....
足し算した結果が、1を越えてしまう?
ユニティちゃんにとっての「赤」と「青」
「赤」 :float3(1.00,0.00,0.00)
「青」 :float3(0.00,0.00,1.00)
「淡い紫」:float3(1.00,0.00,1.00...
足し算した結果が、1を越えてしまう?
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を越えると、
越えた値は1に丸められて、
画面表示されていることがある
※もう少し正しく言うと、値としては1以上の数値を持つことができるのだが、通常のモニタで
は、1を越えたところで一律に白と...
Q: UTS2を使っていて、こんなことに出会うの?
Q: UTS2を使っていて、こんなことに出会うの?
A: はい。しばしば出会うことになります。
Q: UTS2を使っていて、こんなことに出会うの?
UTS2のカラー同士の重ね合わせで、「乗算」とあるものは「色同士の
掛け算」、「加算」とあるものは「色同士の足し算」のことです。
• 乗算の例:ベーステクスチャに、ベースカラーを載せる時
• ...
同じ理屈で「純粋な色」、
すなわち
黒:float3(0,0,0)
白:float3(1,1,1)
赤:float3(1,0,0)
緑:float3(0,1,0)
青:float3(0,0,1)
のような色を絡める時には、
注意が必要だ!
「ライト」と「色」の深いカンケイ
続いて、「色」の調整に関する問題です
モデルの色を調整するには、どこで行う?
代表的な方法を3つ上げてみよう。
1.
2.
3.
続いて、「色」の調整に関する問題です
モデルの色を調整するには、どこで行う?
代表的な方法を3つ上げてみよう。
1.マテリアル
2.ポストエフェクト
3.
続いて、「色」の調整に関する問題です
モデルの色を調整するには、どこで行う?
代表的な方法を3つ上げてみよう。
1.マテリアル
2.ポストエフェクト
3.ライト
続いて、「色」の調整に関する問題です
モデルの色を調整するには、どこで行う?
代表的な方法を3つ上げてみよう。
1.マテリアル
2.ポストエフェクト
3.ライト
その通り!ライトで色味を
変えられるのを、
しばしば忘れがちだ!
よくあるミス「正しい色が出ない…」
よくあるミス「正しい色が出ない…」
カラー設定の最中な
のに、なんでディレク
ショナルライトに色が
ついてるのぉぉぉっ!?
シーンに最初からあるディレクショナル
ライトは「白」ではありません
UTS2 vs Standard Shader
ライトがマテリアルに当たる時に発生する要素は、
UTS2、St.S共に一致するので、各場所にどんなカラー
を入れたら自然かは、実物から観察できる
UTS2:影色を配置する領域に
カラーが自由に配置できる
UTS2 vs Standard Shader
ライトとマテリアルカラーとの関係
UTS2/St.S:ディレクショナルライトがマテリアルに当たっている時、
そのカラーへの影響は、「掛け算」になる。
UTS2のみ:白の明るさ1のディレクショナルライトが当たっている時、
基本色/1影色/2影色に...
ライトとマテリアルカラーとの関係
UTS2/St.S:ディレクショナルライトがマテリアルに当たっている時、
そのカラーへの影響は、「掛け算」になる。
UTS2のみ:白の明るさ1のディレクショナルライトが当たっている時、
基本色/1影色/2影色に...
ここで思い出してもらおう!
色の掛け算の時に、
どんなカラーを注意すべき
だったかな?
ここで思い出してもらおう!
色の掛け算の時に、
どんなカラーを注意すべき
だったかな?
掛け合わせる色のRGBいずれか
の要素に0が入っていると、
掛け合わせた結果の色は、
RGBのいずれかの要素が消えて
しまう(0になる)
その通り!
さらに色の計算結果が1を
越える時に、どんなことに
注意すべきだったかな?
掛け合わせる色のRGBいずれか
の要素に0が入っていると、
掛け合わせた結果の色は、
RGBのいずれかの要素が消えて
しまう(0になる)
掛け合わせる色のRGBいずれかの
要素に0が入っていると、
掛け合わせた結果の色は、
RGBのいずれかの要素が消えて
しまう(0になる)
色同士を足し合わせた結果、
RGBいずれかの要素が1を越えると、
越えた値は1に丸められて、
画面表示され...
「調整の余地が少ないカラー」ってどんなの?
「調整の余地が少ないカラー」とは、RGBのいずれかの
値に0や1が入っているものを指します。
それらの要素が、1として天井に張り付いているために、
加算されても白飛びが進む方向にしか変化しないか、
0...
「調整の余地が少ないカラー」ってどんなの?
「調整の余地が少ないカラー」とは、RGBのいずれかの
値に0や1が入っているものを指します。
それらの要素が、1として天井に張り付いているために、
加算されても白飛びが進む方向にしか変化しないか、
0...
「調整の余地が少ないカラー」を使いがちなところ
1. リアルタイムライトのカラー設定時、
特にポイントライトを使用する時
2. 「白」や「黒」のカラーを、キャラクターの
イメージカラーとして使用する時
上のようなカラー設定をして
いると、RGB...
「調整の余地が少ないカラー」を使いがちなところ
1. リアルタイムライトのカラー設定時、
特にポイントライトを使用する時
2. 「白」や「黒」のカラーを、キャラクターの
イメージカラーとして使用する時
上のようなカラー設定をして
いると、RGB...
ポイントライトのカラー設定の一例
⇒
ライトカラーの微調整で白飛びの軽減をする
トーンマッパーでも抑え込むことはできるが…
もちろん、カラーグレーディングの
トーンマッパーを使って、
白飛びを抑え込むのもアリだ。
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
人の眼は、カラーや明るさをそのまま解釈している訳ではない
段々自分の目が
信じられなくなって
きただろう!
AとBのマスは、実は同じ色
http://kazoo04.hatenablog.com/entry/2015/02/27/150642
人の眼は、カラーや明るさをそのまま解釈している訳ではない
他にも、昔、話題になった例
で、こんなものがあった。
ちなみに正解は1だが、
だまされてもしょうが
ないような例だ。
このドレスの色は?
1. 青と黒
2. 白と金
人の眼は、カラーや明るさをそのまま解釈している訳ではない
人はものを見る時にその物体の色
(光の波長)をそのまま解釈し、
知覚している訳ではない。
特に環境光の影響や、フィルタなど
で隣り合ったカラーのコントラストが
落ちている時には、しばしば違う色と
間違えることもある。
人はものを見る時にその物体の色
(光の波長)をそのまま解釈し、
知覚している訳ではない。
特に環境光の影響や、フィルタなど
で隣り合ったカラーのコントラストが
落ちている時には、しばしば違う色と
間違えることもある。
これは、見方を変えれば、環境光や
隣接するカラーを上手く使うことで、
「白」や「黒」のように「調整しにくい
カラー」を使わなくても、「白」や「黒」
を感じさせるカラーがある、ということ
でもある。
その実例を見てみよう。
©カラー
ど
っ
ち
の
白
が
、
引
き
立
っ
て
見
え
る
?
©カラー
白
の
輝
き
を
印
象
づ
け
る
、
陰
色
©カラー
白
の
輝
き
を
印
象
づ
け
る
、
陰
色
• float3(0,0,0)の黒や、float3(1,1,1)の白は
極力マテリアルカラーには使わないように
しよう。ライトカラーを完全に吸収してしまう
か、明るさをそのまま跳ね返してしまうぞ。
• 「白」や「黒」をキャラクターカラーとする時...
• float3(0,0,0)の黒や、float3(1,1,1)の白は
極力マテリアルカラーには使わないように
しよう。ライトカラーを完全に吸収してしまう
か、明るさをそのまま跳ね返してしまうぞ。
• 「白」や「黒」をキャラクターカラーとする時...
Thank you!
ご静聴ありがとうございました
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
【Unity道場スペシャル 2018京都】今日からはじめる。ユニティちゃんトゥーンシェーダー2.0〜Unity道場カラー黒帯スペシャル〜
Upcoming SlideShare
Loading in …5
×

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

2,634 views

Published on

2018/11/24に開催されたUnity道場 京都スペシャル3の講演スライドです。
講師: 小林 信行(ユニティ・テクノロジーズ・ジャパン合同会社)

Unityのイベント資料はこちらから:
https://www.slideshare.net/UnityTechnologiesJapan/clipboards

Published in: Technology
  • Be the first to comment

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

  1. 1. 今日からはじめる。 ユニティちゃんトゥーンシェーダー 2.0 ~Unity道場カラー黒帯スペシャル~ ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト 小林 信行 2018/11/24
  2. 2. 小林 信行 UnityやMayaをはじめとする各種3Dツールの研究、ゲーム 制作のノウハウの普及、ユニティちゃんトゥーンシェーダー2.0 の開発をしています。その前は原作付きキャラクターゲーム の企画&監督。 ユニティちゃんプロジェクトの言い出しっぺの一人。 ユニティ・テクノロジーズ・ジャパン合同会社 コミュニティエバンジェリスト @nyaa_toraneko Nobuyuki-Kobayashi nobuyuki@unity3d.com
  3. 3. 現在、 UST2 v.2.0.5のマニュアルも 公開中です。 かなり頑張って書きましたので 是非、使ってみてください。
  4. 4. ところで、本日のテーマは、予告では以下の3つ ・「したいこと」ベースでの UTS2各シェーダーの使い分け。 ・「キャラの魅力を引き立てよう!」 UTS2の機能を活かしたカラー設計のやり方。 ・「こんな時、どうしたらいいの?」 トラブルシューティング例。
  5. 5. ところで、本日のテーマは、予告では以下の3つ ・「したいこと」ベースでの UTS2各シェーダーの使い分け。 ・「キャラの魅力を引き立てよう!」 UTS2の機能を活かしたカラー設計のやり方。 ・「こんな時、どうしたらいいの?」 トラブルシューティング例。 ぶっちゃけ、これらに関しては、 マニュアルを丁寧に読んで いただいたほうがよいです。 45分では語りきれませんし…
  6. 6. というわけで、本日の では、 マニュアルには書かれていないですが、 UTS2を理解する上で、とても大切なことを 語ろうと思います。 それでは始まり、始まり~!
  7. 7. 「UST2って、すごいっ!」という方が多い中で… 1. やりたいことがすぐにできた! 2. Photoshopお絵かきと同じだ! 3. UTS2の発色が好き! 4. これ、自作モデルに同梱して販売し ちゃっても、いいんですか? 5. VRでも、モバイルでも、PCでも 使える!(PS4でも使えます)
  8. 8. 「UST2って、難しい…」という方も増えました 1.ファイルが多い… 2.どのシェーダーを使えばいいの… 3.UIが英語ばっかだ… 4.機能が多すぎて、訳わからん… 5.VRChatで、白飛びしやすくない? (解決してます)
  9. 9. 「UST2って、難しい…」という方も増えました 1.ファイルが多い… 2.どのシェーダーを使えばいいの… 3.UIが英語ばっかだ… 4.機能が多すぎて、訳わからん… 5.VRChatで、白飛びしやすくない? (解決してます)
  10. 10. 一方、UTS2をすぐに使いこなせる人も沢山いる 1.普段から2Dイラストに親しんでいる 人は、すぐに使いこなせる 2.3Dの経験の長さは、あまり関係ない 3.アニメスタジオも含めて、3Dや2Dの プロからは、とにかく評判がよい
  11. 11. すぐに使いこなせる人に、共通している点 1.色(カラー)を混ぜたり、重ねると、 どんな結果になるかの知識 2.Unityも含め、CGでのライトの役割 3.配色やカラー選択のコツ これら3要素をしっかりと掴んでいる
  12. 12. すぐに使いこなせる人に、共通している点 1.色(カラー)を混ぜたり、重ねると、 どんな結果になるかの知識 2.Unityも含め、CGでのライトの役割 3.配色やカラー選択のコツ これら3要素をしっかりと掴んでいる とは、 の経験値の高さの ようです。
  13. 13. UTS2の基本仕様 ライトの当たり方を元に、 各カラーをカラー設計 に基づいて配置できる トゥーンシェーダー 様々な光源に対して、 配置した各カラーが 自然に馴染む トゥーンシェーダー ×
  14. 14. UTS2の基本仕様 ライトの当たり方を元に、 各カラーをカラー設計 に基づいて配置できる トゥーンシェーダー 様々な光源に対して、 配置した各カラーが 自然に馴染む トゥーンシェーダー 配置したカラーがどう表示される かは、シーン内に配置された 各ライトやシーンの環境光の 明るさ、カラー、特性に依存する。 各カラーは、「Intensity=1、カラー がピュアホワイトのディレクショナ ルライト」の下で設定する。 × ※本スライドでは、以降の「ディレクショナルライト」は、全て「リアルタイム」とします。
  15. 15. UTS2の基本仕様 ライトの当たり方を元に、 各カラーをカラー設計 に基づいて配置できる トゥーンシェーダー 様々な光源に対して、 配置した各カラーが 自然に馴染む トゥーンシェーダー 配置したカラーがどう表示される かは、シーン内に配置された 各ライトやシーンの環境光の 明るさ、カラー、特性に依存する。 各カラーは、「Intensity=1、カラー がピュアホワイトのディレクショナ ルライト」の下で設定する。 × 一定仕様の ライティング下で 保証される 多様なライティン グ条件の元で、 リアルタイムに 変化しうる ※本スライドでは、以降の「ディレクショナルライト」は、全て「リアルタイム」とします。
  16. 16. UTS2 vs Standard Shader × 一定仕様の ライティング下で 保証される 多様なライティン グ条件の元で、 リアルタイムに 変化しうる
  17. 17. 本日、持ち帰っていってもらいたいもの 「色を制する者は、 UTS2をも制する」
  18. 18. 本日、持ち帰っていってもらいたいもの 「色を制する者は、 UTS2をも制する」 1. 「色」と「色」の足し算、掛け算 2. 「ライト」と「色」の深いカンケイ 3. ピュアな「白」と「黒」には要注意
  19. 19. Color
  20. 20. なぜ、「りんご」は 赤く見えるのか?
  21. 21. The Comprehensive PBR Guide by Allegorithmic – Vol.1
  22. 22. The Comprehensive PBR Guide by Allegorithmic – Vol.1 1. 当てる光の中に 反射するカラー がある
  23. 23. The Comprehensive PBR Guide by Allegorithmic – Vol.1 1. 当てる光の中に 反射するカラー がある 2. マテリアルの サーフェイスが、 そのカラーを 吸収しない
  24. 24. The Comprehensive PBR Guide by Allegorithmic – Vol.1 1. 当てる光の中に 反射するカラー がある 2. マテリアルの サーフェイスが、 そのカラーを 吸収しない 3. 反射した特定の カラーが眼に届く
  25. 25. 「色」と「色」の足し算、掛け算
  26. 26. ではここで、「色」に関する問題です 以下の計算の答えは何色? 1.「赤」+「青」=? 2.「赤」×「青」=?
  27. 27. ではここで、「色」に関する問題です 以下の計算の答えは何色? 1.「赤」+「青」=「紫」 2.「赤」×「青」=?
  28. 28. ではここで、「色」に関する問題です 以下の計算の答えは何色? 1.「赤」+「青」=「紫」 2.「赤」×「青」=? 1は想像つくけど、 2はピンとこない
  29. 29. 実際にやってみると、「赤」×「青」=「黒」
  30. 30. ではここで、「色」に関する問題です 以下の計算の答えは何色? 1.「赤」+「青」=「紫」 2.「赤」×「青」=? なるほど、「黒」に なるのか!
  31. 31. 念のために検算:「赤」+「青」=「紫」 どちらかというと 「淡い紫」
  32. 32. Aさん:「赤」×「青」=「黒」?…「濃い紫」では?
  33. 33. Aさん:念のために検算:「赤」+「青」=「紫」 こちらも、 「淡い紫」
  34. 34. ではここで、「色」に関する問題です 以下の計算の答えは何色? 1.「赤」+「青」=「淡い紫」 2.「赤」×「青」=「黒」? 「赤」×「青」=「濃い紫」? どうしてこうなった?
  35. 35. その前に、「色」を数値で表すと… 赤 RGB表示(255,0,0) float3(1,0,0)⇒ ⇒ ⇒ 0~255の256段階(8bit表記) ⇒ ⇒ 0 1~ に割り当て直す 00000000~11111111
  36. 36. 理由:お互いの考えている「色」が違った ユニティちゃんにとっての「赤」と「青」 「赤」: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)
  37. 37. 理由:お互いの考えている「色」が違った ユニティちゃんにとっての「赤」と「青」 「赤」: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) × ×
  38. 38. 掛け合わせる色のRGBいずれか の要素に0が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう(0になる)
  39. 39. では、足し算は割と近い色だった訳は? ユニティちゃんにとっての「赤」と「青」 「赤」: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) + +
  40. 40. 足し算した結果が、1を越えてしまう? ユニティちゃんにとっての「赤」と「青」 「赤」 :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) + = + =
  41. 41. 足し算した結果が、1を越えてしまう? Aさんの計算結果としての「淡い紫」 「淡い紫」:float3(1.12,0.53,1.17) 実際に画面に表示されている「淡い紫」 「淡い紫」:float3(1.00,0.53,1.00) 画面表示の際に、 1を越える値は 丸められている。
  42. 42. 実際の足し算の結果の画面表示はこうだった ユニティちゃんの色の足し算結果の画面表示 「淡い紫」:float3(1.00,0.00,1.00) Aさんの色の足し算結果の画面表示 「淡い紫」:float3(1.00,0.53,1.00)
  43. 43. 色同士を足し合わせた結果、 RGBいずれかの要素が1を越えると、 越えた値は1に丸められて、 画面表示されていることがある ※もう少し正しく言うと、値としては1以上の数値を持つことができるのだが、通常のモニタで は、1を越えたところで一律に白として表現されてしまう。でも値としては存在しているので、 それらをぼかしなども駆使しながら表現するのが、ポストエフェクトのブルームである。
  44. 44. Q: UTS2を使っていて、こんなことに出会うの?
  45. 45. Q: UTS2を使っていて、こんなことに出会うの? A: はい。しばしば出会うことになります。
  46. 46. Q: UTS2を使っていて、こんなことに出会うの? UTS2のカラー同士の重ね合わせで、「乗算」とあるものは「色同士の 掛け算」、「加算」とあるものは「色同士の足し算」のことです。 • 乗算の例:ベーステクスチャに、ベースカラーを載せる時 • 加算の例:ベースとなるカラーに、リムライトを追加する時 これらの時に、予想と違うカラーになった場合や、「白飛び」が発生して いるような場合に、これらのことを考えて調整する必要があります。 A: はい。しばしば出会うことになります。
  47. 47. 同じ理屈で「純粋な色」、 すなわち 黒:float3(0,0,0) 白:float3(1,1,1) 赤:float3(1,0,0) 緑:float3(0,1,0) 青:float3(0,0,1) のような色を絡める時には、 注意が必要だ!
  48. 48. 「ライト」と「色」の深いカンケイ
  49. 49. 続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う? 代表的な方法を3つ上げてみよう。 1. 2. 3.
  50. 50. 続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う? 代表的な方法を3つ上げてみよう。 1.マテリアル 2.ポストエフェクト 3.
  51. 51. 続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う? 代表的な方法を3つ上げてみよう。 1.マテリアル 2.ポストエフェクト 3.ライト
  52. 52. 続いて、「色」の調整に関する問題です モデルの色を調整するには、どこで行う? 代表的な方法を3つ上げてみよう。 1.マテリアル 2.ポストエフェクト 3.ライト その通り!ライトで色味を 変えられるのを、 しばしば忘れがちだ!
  53. 53. よくあるミス「正しい色が出ない…」
  54. 54. よくあるミス「正しい色が出ない…」 カラー設定の最中な のに、なんでディレク ショナルライトに色が ついてるのぉぉぉっ!? シーンに最初からあるディレクショナル ライトは「白」ではありません
  55. 55. UTS2 vs Standard Shader ライトがマテリアルに当たる時に発生する要素は、 UTS2、St.S共に一致するので、各場所にどんなカラー を入れたら自然かは、実物から観察できる
  56. 56. UTS2:影色を配置する領域に カラーが自由に配置できる UTS2 vs Standard Shader
  57. 57. ライトとマテリアルカラーとの関係 UTS2/St.S:ディレクショナルライトがマテリアルに当たっている時、 そのカラーへの影響は、「掛け算」になる。 UTS2のみ:白の明るさ1のディレクショナルライトが当たっている時、 基本色/1影色/2影色に配置したカラーは、設定通りに見えている。 ライトの明るさ (Intensity)= 1 ライトの明るさ (Intensity)= 0.5 ライトの明るさ (Intensity)= 2 ⇒ ⇒ グレー80%グレー40% グレー160% ⇒グレー100% ※リアルタイムポイントライトには、これに加えて距離減衰があるので、さらにややこしい。 設定カラー
  58. 58. ライトとマテリアルカラーとの関係 UTS2/St.S:ディレクショナルライトがマテリアルに当たっている時、 そのカラーへの影響は、「掛け算」になる。 UTS2のみ:白の明るさ1のディレクショナルライトが当たっている時、 基本色/1影色/2影色に配置したカラーは、設定通りに見えている。 ライトの明るさ (Intensity)= 1 ライトの明るさ (Intensity)= 0.5 ライトの明るさ (Intensity)= 2 ⇒ ⇒ グレー80%グレー40% グレー160% ⇒グレー100% ※リアルタイムポイントライトには、これに加えて距離減衰があるので、さらにややこしい。 設定カラー
  59. 59. ここで思い出してもらおう! 色の掛け算の時に、 どんなカラーを注意すべき だったかな?
  60. 60. ここで思い出してもらおう! 色の掛け算の時に、 どんなカラーを注意すべき だったかな? 掛け合わせる色のRGBいずれか の要素に0が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう(0になる)
  61. 61. その通り! さらに色の計算結果が1を 越える時に、どんなことに 注意すべきだったかな? 掛け合わせる色のRGBいずれか の要素に0が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう(0になる)
  62. 62. 掛け合わせる色のRGBいずれかの 要素に0が入っていると、 掛け合わせた結果の色は、 RGBのいずれかの要素が消えて しまう(0になる) 色同士を足し合わせた結果、 RGBいずれかの要素が1を越えると、 越えた値は1に丸められて、 画面表示されていることがある 上出来だ!これから 「調整の余地が少ない カラー」があることが わかるが、わかるかな?
  63. 63. 「調整の余地が少ないカラー」ってどんなの? 「調整の余地が少ないカラー」とは、RGBのいずれかの 値に0や1が入っているものを指します。 それらの要素が、1として天井に張り付いているために、 加算されても白飛びが進む方向にしか変化しないか、 0として乗算されることでフィルタのように働いてしまうからです。 「淡い紫」:float3(1.00,0.53,1.00)
  64. 64. 「調整の余地が少ないカラー」ってどんなの? 「調整の余地が少ないカラー」とは、RGBのいずれかの 値に0や1が入っているものを指します。 それらの要素が、1として天井に張り付いているために、 加算されても白飛びが進む方向にしか変化しないか、 0として乗算されることでフィルタのように働いてしまうからです。 「淡い紫」:float3(1.00,0.53,1.00) このカラーなども、 RBが1に張り付いている限り、 Gをいくら足してやっても 緑は混じらず、 白くなっていくだけだ。
  65. 65. 「調整の余地が少ないカラー」を使いがちなところ 1. リアルタイムライトのカラー設定時、 特にポイントライトを使用する時 2. 「白」や「黒」のカラーを、キャラクターの イメージカラーとして使用する時 上のようなカラー設定をして いると、RGBの各要素が0や1 に張り付いているカラー を設定しがちだ。 注意しよう!
  66. 66. 「調整の余地が少ないカラー」を使いがちなところ 1. リアルタイムライトのカラー設定時、 特にポイントライトを使用する時 2. 「白」や「黒」のカラーを、キャラクターの イメージカラーとして使用する時 上のようなカラー設定をして いると、RGBの各要素が0や1 に張り付いているカラー を設定しがちだ。 注意しよう!
  67. 67. ポイントライトのカラー設定の一例 ⇒
  68. 68. ライトカラーの微調整で白飛びの軽減をする
  69. 69. トーンマッパーでも抑え込むことはできるが… もちろん、カラーグレーディングの トーンマッパーを使って、 白飛びを抑え込むのもアリだ。 HDR時代には必須のテクと 言えるだろう! ⇒
  70. 70. トーンマッパーでも抑え込むことはできるが… もちろん、カラーグレーディングの トーンマッパーを使って、 白飛びを抑え込むのもアリだ。 HDR時代には必須のテクと 言えるだろう! その場合でも、トーンマッパーを かける前に白飛びはなるべく抑えた ライティングをするのは 基本中の基本だ! ⇒
  71. 71. UTS2だけの裏技:SceneLights HiCut_Filter 最後に、UTS2には SceneLights HiCut_Filterという 白飛び抑制フィルタがある。 ⇒
  72. 72. UTS2だけの裏技:SceneLights HiCut_Filter 最後に、UTS2には SceneLights HiCut_Filterという 白飛び抑制フィルタがある。 このフィルタをONにすれば、 トーンマッパーをかけなくても 白飛びの防止がおおよそできる! さすが大鳥重工製だな! ⇒
  73. 73. UTS2だけの裏技:SceneLights HiCut_Filter
  74. 74. ピュアな「白」と「黒」には要注意
  75. 75. 「白」と「黒」は、表現するのが難しい
  76. 76. この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。
  77. 77. この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。
  78. 78. この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。
  79. 79. この問題は、特に「白」のほうが重大だろう。 何故なら、現実世界の「白」は、紙の地色の イメージで、自己発光はしないものだが、 CGの世界の「白」は、通常のカラーの中で 最も明るいカラーだからだね。すぐに自己 発光しているように見えてしまう。 他にも、白、グレー、黒といった無彩色系の カラーには、こんなトリックもある。
  80. 80. これは 「色の恒常性」 にまつわる例だ AとBのマスは、実は同じ色 http://kazoo04.hatenablog.com/entry/2015/02/27/150642 人の眼は、カラーや明るさをそのまま解釈している訳ではない
  81. 81. 段々自分の目が 信じられなくなって きただろう! AとBのマスは、実は同じ色 http://kazoo04.hatenablog.com/entry/2015/02/27/150642 人の眼は、カラーや明るさをそのまま解釈している訳ではない
  82. 82. 他にも、昔、話題になった例 で、こんなものがあった。 ちなみに正解は1だが、 だまされてもしょうが ないような例だ。 このドレスの色は? 1. 青と黒 2. 白と金 人の眼は、カラーや明るさをそのまま解釈している訳ではない
  83. 83. 人はものを見る時にその物体の色 (光の波長)をそのまま解釈し、 知覚している訳ではない。 特に環境光の影響や、フィルタなど で隣り合ったカラーのコントラストが 落ちている時には、しばしば違う色と 間違えることもある。
  84. 84. 人はものを見る時にその物体の色 (光の波長)をそのまま解釈し、 知覚している訳ではない。 特に環境光の影響や、フィルタなど で隣り合ったカラーのコントラストが 落ちている時には、しばしば違う色と 間違えることもある。
  85. 85. これは、見方を変えれば、環境光や 隣接するカラーを上手く使うことで、 「白」や「黒」のように「調整しにくい カラー」を使わなくても、「白」や「黒」 を感じさせるカラーがある、ということ でもある。 その実例を見てみよう。
  86. 86. ©カラー ど っ ち の 白 が 、 引 き 立 っ て 見 え る ?
  87. 87. ©カラー 白 の 輝 き を 印 象 づ け る 、 陰 色
  88. 88. ©カラー 白 の 輝 き を 印 象 づ け る 、 陰 色
  89. 89. • float3(0,0,0)の黒や、float3(1,1,1)の白は 極力マテリアルカラーには使わないように しよう。ライトカラーを完全に吸収してしまう か、明るさをそのまま跳ね返してしまうぞ。 • 「白」や「黒」をキャラクターカラーとする時 には、文字通りにピュアな白や黒は選ばな いこと。陰色とのコントラストで、「白」や「黒」 のように見せるのがコツだ!
  90. 90. • float3(0,0,0)の黒や、float3(1,1,1)の白は 極力マテリアルカラーには使わないように しよう。ライトカラーを完全に吸収してしまう か、明るさをそのまま跳ね返してしまうぞ。 • 「白」や「黒」をキャラクターカラーとする時 には、文字通りにピュアな白や黒は選ばな いこと。陰色とのコントラストで、「白」や「黒」 のように見せるのがコツだ!
  91. 91. Thank you! ご静聴ありがとうございました

×