CEDEC2017 アーティストのためのリアルタイムシェーダー学習法

アーティストのための
リアルタイムシェーダー学習法
アーティスティックなシェーダーを開発するには？
ユニティ・テクノロジーズ・ジャパン合同会社
コミュニティエバンジェリスト
小林信行
2017/08/31 CEDEC2017 DAY2/R302

ユニティ・テクノロジーズ・ジャパン所属の
コミュニティエバンジェリスト。
UnityやMayaをはじめとする各種3Dツール
の研究、ゲーム制作、企画書の書き方や
シナリオディレクションのノウハウの普及を
通じて、Unityデベロッパーコミュニティの
支援活動をしています。
自己紹介
小林信行 NobuyukiKobayashi

自作シェーダーの紹介
ユニティちゃんトゥーンシェーダー2.0
iOS/METAL/Linear Colorでの表示
Unity5.6.x以上で利用
できる映像指向の本格派
トゥーンシェーダー。
セルシェーディングから
イラスト風シェーディング
まで、幅広い絵づくりが
楽しめます。
リニアカラーが使える環境
ならば、Windows/Mac/iOS/
Android/PlayStation 4/
Xbox One/Switchなどの
幅広いプラットフォーム上で
共通の絵づくりができます。
http://unity-chan.com/
ダウンロードコーナーより
UCL2.0で提供中！

ユニティちゃんトゥーン
シェーダー2.0
+
プリレンダー作例

ユニティちゃんトゥーンシェーダー2.0 リアルタイムレンダー作例： C92 「 The Phantom Knowledge 」

Unityを使ったリアルタイムシェーダー学習機会の提供
https://www.slideshare.net/nyaakobayashi/

本日のテーマ：こう思ってる方、いらっしゃいませんか？
シェーダー
は難しい！アーティスト

「本セッションから得られる知見」
シェーダー
は難しい！アーティスト
n 実際に絵づくりを担当したり、新規企画向けに新しい絵づくりを
試みたいアーティストが、効率よくリアルタイムシェーダーを学ぶ
ための方法を、自身の経験より紹介します。
n アーティストがリアルタイムシェーダーの学習をする際に、
一般的に役立つ知見を紹介します。
実例としてUnityを使いますが、ここでの知見は、Mayaなどの
DCCツール向けシェーダーや、直接は触れませんが他のゲーム
エンジン向けシェーダーの学習にも参考になると思います。
n ただし、ツールの使い方のHowTo話ではないので、注意してくだ
さい！

「本セッションから得られる知見」を、やってみた結果…
シェーダー
は楽しい！アーティスト
になるといいなというセッションです。

Twitterハッシュタグのご案内
本セッションの内容に関して、ご質問等
ございましたら、Twitterハッシュタグ
#cedecunity
まで、お問い合わせください！
※CEDEC2017会期中のみ
CEDEC2017公式
Twitterハッシュタグは、
#cedec2017

アーティスト自身がシェーダーを
学ぶメリットについて
ここでは、プロジェクトにおいて「絵づくり」の方向性を決める人を「アーティスト」と呼ぶことにします。
ゲーム企画において「絵づくり」の方向性は、「ゲームメカニクス」と並んで重要な要素です。
中でも3DCGの絵づくりを決める要素として、「シェーダー」がますます重要度を高めています。
今は「シェーダー」の多くが、エンジニアによって開発されていますが、
もし「シェーダー」をアーティスト自身が触れるようになったら、どんなメリットがあるのでしょうか？
考えてみましょう。

絵画（2DCG）における質感表現とは？
l 色（材質およびそれに当たる光の色の表現）
l 陰影（光が当たっている面の陰影の出方による立体表現）
l タッチ（材質の表面状態の表現）
⇒絵画（2DCG）では、「色＋陰影＋タッチ」の組み合わせで、
様々な「質感」を表現する。デジタル彩色でもそれは同じ。

n 主にGPUによって処理される、画像加工の手順を指定した、
小さめのスクリプトのこと。
n GPUを使う用途が広がるにつれて、シェーダーは、画像加工
以外にも使われるようになった。
n Unityの場合、使用目的に合わせて３つのシェーダーがある。
「シェーダー」とは？
1. サーフェイスシェーダー（⇒Unity独自。コンパイルされて、最終的には２になる）
2. バーテックスシェーダー＋フラグメント（ピクセル）シェーダー
3. コンピュートシェーダー（グラフィックカード上で動作するプログラム）

1. シェーダーは、テクスチャ（マップ）と組み合わされることで、
「マテリアル」という形で、「色、陰影、タッチ」の３要素をまとめて、
ひとつの質感表現として処理する。
2. 3DCG表現における「シェーダー」とは、例えるならば、アーティスト
がひとつのイラストを完成まで持って行くまでの全工程をまとめて
コード化したものにあたる。
「シェーダー」をアーティスト的観点から見てみると？
u それらの工程は、アーティストがPhotoshopの
「ブラシ」「調整レイヤー」「レイヤーエフェクト」「マスク」などの
様々な機能を使って、各部分の質感を作り上げ、
それらを全体として統合することで、一枚の絵として仕上げる
ことと、本質的には同じです。

• よくあるシェーダー開発の風景
⇒アーティストがエンジニアにシェーダー開発を依頼する
アーティストがシェーダーを直接扱えるメリットとは？
アーティストエンジニア
こんな会話をよくしてませんか？

（絵を見せつつ）今度のキャラさ、
こんな表現をしたいんだけど…
うーん…そのままでは難しいなぁ
こんな感じでどうかしら？
うーん…ここはこうじゃなくてさ、
もっとPhotoshopの●●みたいな
ことって、できない？
●●？実はPhotoshop、
あまり詳しくないんだよね…

（絵を見せつつ）今度のキャラさ、
こんな表現をしたいんだけど…
うーん…そのままでは難しいなぁ
こんな感じでどうかしら？
うーん…ここはこうじゃなくてさ、
もっとPhotoshopの●●みたいな
ことって、できない？
●●？実はPhotoshop、
あまり詳しくないんだよね…
この方法だと、アーティストが持っ
ている絵づくりの作業工程を、エン
ジニアが理解できる形に噛み砕い
て、必要な仕様として説明できる
必要がある。
（それでもアーティストの脳内イメージが
エンジニアに正しく伝わっている保証はない）

• アーティストがシェーダーを直接扱えるならば？
⇒自らが欲しい美術的要素を求めてトライ＆エラーができる
だとしたら、Photoshopなら●●
の作業をする必要があるから、
今回のシェーダーには、●●機能
を入れることにしよう！
今回の企画では、キャラをもっと
カッコよく見せたいな！
狙い通りできているか、実機でも
確認してみよう！
よし、いい感じだ！
アーティスト

• アーティストがシェーダーを直接扱えるならば？
⇒自らが欲しい美術的要素を求めてトライ＆エラーができる
だとしたら、Photoshopなら●●
の作業をする必要があるから、
今回のシェーダーには、●●機能
を入れることにしよう！
今回の企画では、キャラをもっと
カッコよく見せたいな！
狙い通りできているか、実機でも
確認してみよう！
よし、いい感じだ！
アーティスト
nデジタル彩色ツールを使いこなしている、
アーティストならではの「こだわり」を反映できる。
nデジタル彩色ツールの各機能が、どのように組み
合わさり、自分のイラストを構成する美術的要素
となっているかを一番よく知っているのは、
アーティスト自身。

• アーティスト脳内の完成イメージが、高い精度でゲームに
表現・反映できるようになる！
脳内イメージが
高い精度でゲーム画面に！

n アーティスティックなシェーダー開発にとって一番重要なのは、
アーティスト自身が欲しい美術的要素をしっかりと掴んでおくこと。
すなわち、絵の完成型のイメージを強く掴んでおくこと。
それには、アーティスト自身がシェーダーを扱えればさらによい。
まとめ：アーティストがシェーダーを扱える意義
アーティストにとって、普段デジタル彩色ツールを使っている時の
感覚や発想になるべく近い形で、「シェーダーを理解する」ための
方法論が、ますます重要になってきている。
😣 アーティストが行っている作業工程を、「仕様書」や「発注書」という形で
エンジニアに説明することは、元々難しい。
😣 必要な工程には、アーティスト自身が手を動かして初めてわかることも
沢山あるので、エンジニアが作業できる仕様に前もって落とし込むのが
難しい。

「Photoshop」と「シェーダー」
絵づくりのアプローチの違い
多くのアーティストが使うデジタル彩色ツール「Photoshop」。
ここでは「Photoshop」を使ったデジタル彩色と、「シェーダー」を使った
絵づくりのアプローチを比較してみましょう。
するとまったく違っているようで、似ている部分が見えてきます。
そこからアーティストがシェーダーを学ぶ際のコツを導き出してみましょう。

Photoshopでの絵づくり
n Photoshopでは、レイヤーベースで絵づくりを行う。
多くのアーティストがPhotoshopでイラストを描くと
きに、大量のレイヤーを使うことはよく知られている。
n 各々のレイヤーには「役割」があり、それらの「役割」
を持ったレイヤーが重なっていくことで、ある部分の
質感を作り上げる。
n それらの「役割」を持った各レイヤーが積み上がった
結果として、最終的な「絵」ができあがる。

現世代のシェーダーでの絵づくり
http://fragmentbuffer.com/gpu-performance-for-game-artists/
例えるならば、
「絵づくり専門の工場パイプライン」。
n GPUが並列計算で一括処理をしてしまう
ので、最終出力としての「絵」は
画面上に一気に描き上がる。
n 個々の処理を丁寧に見ていくと、
アーティストが普段Photoshop上で
行っている工程と同じようなものが
沢山ある。
ただその工程は数式で表現されている
ので、「絵づくり」の工程なのに、
直感的にわかりづらいものになっている。

1. 複数行のコードからなる、あるパターンロジックが
絵づくりにおいてどのような工程にあたるか理解する
⇒ノードベースのシェーダーエディタを使って学習すると
パターンが明確になる。
2. それらの工程の結果を、実際に目でみて理解する
⇒ゲームエンジンのリアルタイムレンダリング環境下
で学習をすることで、視覚的に理解できるようになる。
アーティストがシェーダーを学習する時のポイント

1. 複数行のコードからなる、あるパターンロジックが
パターンが明確になる。
⇒実例：「マスクの反転」を例にとって見てみよう！
⇒実例：各ノードの結果がリアルタイム表示できない
環境ではEmissionノードやDebugノードを
利用することで、ビューポート上で確認できる
ようにする。

Photoshopの場合：「階調の反転」
Photoshopの場合、マスクの
反転をするには、「階調の反転」
コマンドを使います。

実例：One Minusノード/Shader Forge

実例：One Minusノード/Amplify Shader Editor

参考：Mayaの場合「階調の反転」/HyperShade
HyperShadeなら、
「Reverse」(反転)
ノードがある。

参考：Mayaの場合「階調の反転」/ShaderFX
ShaderFXなら、
「OneMinusOp」
(Invert One Minus)

1. 複数行のコードからなる、あるロジックパターンが
ロジックパターンが明確になる。
例：One Minusノードの働きは、RGB各要素が0〜1の範囲の画像に
対しては、「階調の反転」になる。
例：ノードエディタ内でリアルタイムに経過が表示される。
EmissionポートやDebugポートに接続することで、
途中の経過を「画像」としてシーンビュー上で確認できる。

3. １＆２の環境下でトライ＆エラーを試みることが大切

3. １＆２の環境下でトライ＆エラーを試みることが大切
まとめ：アーティストがシェーダーを学習する時のポイント
３の結果、シェーダーが感覚的に理解できるものへと変わる！
⇒機能を感覚的に理解できるようになることで、「自分のやりたいこと」を
そのまま「シェーダー」として実装できるようになる！

実例：「マスク」作業は共通する工程
Photoshopで彩色作業をして
いると、しばしば上のような
「クリッピングマスク」を作ります。
各パーツをクリッピングマスクで
彩色しておくと、後の調整が楽な
ので、ゲーム用のグラフィックで
はよく使われています。

• 「Photoshop」でも「シェーダー」でも、マテリアルやパーツ
ごとの塗り分けをする際には、「マスク」を多用します。
u Photoshopの場合：「マスク」は主に手で描く。
u シェーダーの場合：「マスク」は主に数式で作成する。
「マスク」作業は共通する工程

「マスク」をノード（数式）で作ってみよう！

Photoshopのクリッピングマスクで塗り分けてみる

作成したマスクから、塗り分けまで一度で処理！

作成したマスクから、塗り分けまで一度で処理！
Photoshop Unity

• 「Photoshop」でも「シェーダー」でも、マテリアルやパーツ
ごとの塗り分けをする際には、「マスク」を多用します。
u Photoshopの場合：「マスク」は主に手で描く。
u シェーダーの場合：「マスク」は主に数式で作成。
⇒「マスク」を作成するための「数式」のロジックパターンが
直感的に理解できるようになると、シェーダーが扱いやすくなります！
まとめ：「マスク」作業は共通する工程

1. テキストエディタなどで直接コードを書く。
l ShaderLab（Unity独自のシェーダー言語）
l Cg、HLSL、GLSL（一般的なシェーダー言語）
2. ノードエディタタイプのビジュアルコードエディタを使う。
l Shader Forge (Unity Asset/$90) ⇒バーテックス＆フラグメントシェーダーを出力
l Amplify Shader Editor (Unity Asset/$60) ⇒サーフェイスシェーダーを出力
l ShaderFX (Maya/3dsMax) ⇒出力されるテキストは独自形式
参考：「シェーダー」を作成するには？

1. テキストエディタなどで直接コードを書く。
l ShaderLab（Unity独自のシェーダー言語）
l Cg、HLSL、GLSL（一般的なシェーダー言語）
2. ノードエディタタイプのビジュアルコードエディタを使う。
l Shader Forge (Unity Asset/$90) ⇒バーテックス＆フラグメントシェーダーを出力
l Amplify Shader Editor (Unity Asset/$60) ⇒サーフェイスシェーダーを出力
l ShaderFX (Maya/3dsMax) ⇒出力されるテキストは独自形式
参考：「シェーダー」を作成するには？
特に、上の２つに関しては、出力されるコードを、ShaderLabとCg
の組み合わせとして、普通に「読む」ことができる！

参考：先程の塗り分けシェーダーの場合なら…

実際にシェーダーで使われる
ロジックパターンを見てみよう！
ここからは、アーティストがシェーダーを使って絵作りを行う際に、よく使われる
ロジックパターンを見てみましょう。
今まで見てきたように、ロジックパターンはノード接続のパターンとして憶えて
いくと、直感的に利用できるようになります。
余裕があったら、ロジックパターンの背後にあるコード（数式）も見てみると、さら
なる理解が深まりますよ！

I. カラーの取り扱いとカラー同士のコンポジット
II. 様々な塗り分け用マスクを作成する
III. マスクの作成と塗り分けの実行のパターン
IV. 表現アップのための一工夫
a. ノーマルマップと頂点法線加工を使って一工夫してみる
b. UV座標で一工夫してみる
V. システムライティングとカスタムライティング
取り上げるロジックパターンのトピックは、以下の５つ

I. カラーの取り扱いと
カラー同士のコンポジット
ロジックパターン虎の巻

精度は選べますが、シェーダー内では、
カラーの各RGB値は、
0〜255のインデックス値ではなく、
0〜1のfloat値で扱われている
ことに注意をしましょう。
カラーは、基本0〜1の範囲で考える！
Shader Forge

計算の途中で、カラーの
各RGB値が0〜1の範囲
を超えてしまうことは、
普通にあります。
左図では、最終的に
画面に表示されるのは、
「白」ですが、実際に
含まれている値は(1,1,1)
を超えています。
表示上は問題ないです
が、このままだと計算上
で不具合が生じることが
あります。
Shader Forge

カラーの各RGB値を0〜1の範囲内に
クランプするコードが、saturate()です。
Shader Forgeの場合には、
「Clamp 0-1」というノードがそれに
当たります。多くのノードエディタには、
「Saturate」というノードが存在します。
これらは全て、カラーの各RGB値を
0〜1の範囲内にクランプするのに
利用できます。
またfloat3とは、RGBの３つのfloat値をまとめて
処理するためのベクトル変数です。
同様にfloat4は、RGBAの4つのfloat値をまとめて
処理するためのベクトル変数になります。
Shader Forge

Amplify Shader Editor

特に「One Minus」ノードを
階調反転として使う時には
注意しましょう。
左図でOne Minusノードの
結果は同じ「黒」に見えます
が、RGB値は違います。
（0,0,0）以外の黒が含まれ
るマスクを使うと、カラー合
成の際に問題が生じること
があります。
• One Minusノードでマスクの反転をする時には、
必ずClamp 0-1もしくはSaturateと一緒に使うようにしましょう。
Shader Forge

One Minusノードは補色を作る
RGBの場合、補色関係にあるカラー同士では、
「光の加法混色」が成立します。
補色は、互いの色を最も目立たせる色の組み合わせ
であると同時に、ライティングと組み合わせると大きな
効果を持ちます。
One Minusノードは、
白黒のマスクに適用すると
マスク反転として使えました
が、カラーに対して適用した
場合は、補色関係を作る
ノードと考えるとよいでしょう。

参考：光を混ぜる～色環と補色、光の加法混色
• 色環上で補色関係にあるカラー同士をライトにして合成すると、
ホワイトのライトができる。これを光の加法混色という。
• この原理を使って、キーライトとフィルライトのカラー
を変えることで、より複雑なライティングが可能となります。

カラー合成の基本：カラーの足し算Add、掛け算Multiply
Addでカラーを重ねると、
全体に輝度は上がる。
（黒（0,0,0）なら変わらない）
Multiplyでカラーを重ねると、
全体に輝度は下がる。
（白（1,1,1）なら変わらない）
• 「カラーは0〜1の範囲のfloat値」と憶えておくと、カラー同士の
足し算Addや掛け算Multiplyの結果が、見当つきやすくなります。

マスクにカラーをAdd/Multiplyしてみる
Addでは、マスクの黒い部分に
カラーが乗る
Multiplyでは、マスクの白い部分に
カラーが乗る
Shader Forge

Subtract（引き算）を、マスクと一緒に使う
カラーからマスクをSubtract（引き算）すると、
Multiplyと逆の色配置になる。
マスクからカラーを引き、階調反転すると、
Addと逆の色配置になる。
Shader Forge

問題：クリッピングマスクシェーダーを作ってみよう！
Shader Forge
カラーの取り扱いのまとめとして、
ベース画像に対して、マスク画像を
クリッピングしてカラーを載せる
シェーダーを作ってみましょう。
結果は、上のような画像になります。
ベース画像マスク画像

解答例：カラー演算によるクリッピングマスクシェーダー
Shader Forge
わかりましたか？
ポイントは、オレンジの枠の位置に入って
いるClamp 0-1ノード（Saturate）です。
このノードがないと、正常にクリッピング
されません。
正しい結果
Clamp 0-1ノード
がない場合

もうひとつの解答例：クリッピングマスクシェーダー
Shader Forge
この問題を、カラーの合成（コンポジット）
ではなく、塗り分けの問題だと考えれば、
左のようなLerpノードを使ったロジック
パターンでも問題ありません。
塗り分けは、この後で詳しく説明します。

II. 様々な塗り分け用マスク
を作成する

様々な塗り分け用マスクの作り方
アーティストは、絵を仕上げるまでの過程で、
様々な効果を入れるために、手でマスクを
切っていきます。左のイラストにも塗り分け用
のマスクの他、ハイカラーやリムライト等の
効果をみることができます。
これらの多くは、光源とそれへの向きを考慮
しつつ設計されるものです。
通常色/影色の
塗り分けマスクハイカラー
（スペキュラ）
リムライト

様々な塗り分け用マスクの作り方
Light Vectorノードとの内積を
とって、光の当たり方の
状態を得る。
View Vectorノードとの内積をとり、
One Minusで反転し、リムライトの
かかり具合の状態を得る。
Half Vectorノードとの内積をとって、
Powerノードで絞り込み、スペキュラ
（グロッシイ)反射の状態を得る。
様々な塗り分け用マスクをシェーダーで作成する時に、よく使われるのは、
モデルのノーマルベクトルとその他のベクトルとの内積（Dot Product）
を求め、それを２つのベクトルの開き具合として使う方法です。
塗り分けマスクハイカラー（スペキュラ）リムライト

リアルタイムに様々なマスク効果を計算する利点
通常色/影色の
塗り分けマスク
ハイカラー
（スペキュラ）
リムライト
ユニティちゃんトゥーン
シェーダー2.0では、左の
ような部分にそれぞれの
マスク効果が出ています。
これらのマスク効果は
リアルタイムに計算されて
いますので、光やモーション
の変化に応じて違和感なく
表示されます。

参考：内積/ Dot Product とは？
A
B
→θ
A
→
｜｜ B
→
｜｜ cosθA
→
B
→
・ =
上図のように、ライトベクトルと
ノーマルベクトルの内積を取る
ことで、光の当たり具合を
０～１で表現することができる！
内積がマイナスは、
「光が当たっていない」
ことを示している。
内積とは、２つのベクトルがなす
角度の状態を示すスカラー値
のこと。特に2つのベクトルが
ノーマライズされている場合
には、内積が即、２つのベクトルの
内角のcosθの値となっている。

参考：内積の計算は、座標系を合わせておこなう
マスク作成のために、ノーマルベクトルと他のベクトルとで内積を取る
場合、「共に同じワールド座標系のベクトル」に対して内積を取ります。
もし使うノードにWorldやLocal等の名前が付いている時には、
念のため、どの座標系のデータを取ってくるノードなのか確認しよう。
Shader Forgeには見た目、区別はない
Amplify Shader Editorには、ノード名にWorldやLocalの区別
があったり、World/Tangentで切り替えできる

III. マスクの作成と塗り分けの
実行のパターン

塗り分けマスクの作成と塗り分けの実行
Step (A<=B)ノード
AがBと同じかそれ以下の場合、
１を出力。それ以外は０を出力する。
２値化の閾値を設定するノード
Lerpノード
マスク値として与えられるTに
応じ、A/Bで塗り分けるノード
マスク情報

塗り分けマスクの作成と塗り分けの実行
塗り分けマスク作成
塗り分け実行
通常色/影色指定すでにクリッピングマスクのところで一度出ている
ランプシェーダーは、StepノードとLerpノードの
組み合わせで作ることができます。
Stepノードで２値のマスクを作成し、そのマスクに
従って、Lerpノードで通常色と影色を塗り分けます。
マスク情報

IV. 表現力アップのための一工夫
a. ノーマルマップと頂点法線加工を使って一工夫してみる

頂点法線とノーマルマップはライティングで繋がっている
←4頂点しかないQuadでも、
ノーマルマップを割り当ててやると、
でっぱりがあるように見える。
※ライティングされるから
（フラグメントシェーダーの機能）
UVマップ
頂点法線
Vertex Normal
ノーマルマップ
（タンジェントスペース）
シェーダー内でライティング計算に
使用する時には、World Normalに
変換される。
✓

頂点法線の編集とノーマルマップを組み合わせると？
Q:頂点法線を編集したQuadに、ノーマルマップを
当ててライティングするとどうなるか？
＋
Quadの外側方向に、
頂点法線を編集する
（中央に凸があるイメージ）

頂点法線の編集とノーマルマップを組み合わせると？
A:ライティングした時に、主に頂点法線の影響を
受けつつ、ノーマルマップ側のほうも、
頂点法線のシェーディングの結果が足される。
左：通常のQuad
右：頂点法線編集済

ノーマルマップをスペキュラマスクに使う
UTS2.0では、MatCapに適用できる追加ノーマルマップを、スペキュラの出方を
調整する「スペキュラマスク」に使用しています。（髪の光沢表現等）
上のシェーダーでも、ボールに貼られている千代紙の質感（紙繊維のタッチ）は、
ノーマルマップをスペキュラマスクとして使用することで表現しています。
影側に入っても、スペキュラが軽く反射しているので、千代紙の質感が失われません。

b. UV座標で一工夫してみる
IV. 表現力アップのための一工夫

• UV座標（UV Coordinate）は、モデルにテクスチャを貼り込
むために使うだけでなく、他にも色々な用途に使えます。
例えば、
1. 内積で求めた光の当たり方を、UV座標に変換して参照することで、
シェーディングマップが利用できます。
⇒このテクニックはよく使います。内積の値はスカラーです
ので、コンポーネントマスクで２つにまとめてUV座標にしてしまいます。
2. UV Coordノードを起点に、美しいグリッド模様が作れます。
⇒PhotoshopやSubstance Designerなどでは、ノイズから
プロシージャルの模様が作れますが、今回はUV座標が0〜1
の範囲内で繰り返すことを利用して、連続模様が作れます。
UV座標で一工夫をしてみよう！

シェーディングマップ用テクスチャを割り当てる
内積の値を
UV座標として送る
内積の値を元にシェーディング
マップよりカラーを拾う
Component Maskノードで
RRの数値（つまりシェーディン
グマップ上のX座標の位置）を
取り出し、UV座標とします。
マスクからは、スカラーで各頂
点の明るさのレベルが来てい
ますので、それをベクトルの各
要素に見立て、RRとして取り出
すことで、UV座標とします。
取り出したUV座標を元に、各
頂点のカラーをシェーディング
マップより割り当てます。

シェーディングマップをランプシェーダーのマスクにする
内積の値を元にシェーディング
マップより塗り分けの段階を拾う

参考：ベクトルのRGBA/XYZW各要素の分解
Component Maskノード
ベクトルの各要素を分解する
ノード。
ベクトルの各要素から数値を
取り出すのに使う。
他、Vector3からXY要素（UV要
素）のみを取り出すのに使用し
たりする。
Shader Forge
Amplify Shader
Editor

Shader Forge
Component Maskノードの機能は、共にコードを見てみると、
シェーダー言語がもつ「スウィズル（Swizzle）」という機能で
実現されているのがわかる。
vec4 vector;
vector[0] = vector.r = vector.x;
vector[1] = vector.g = vector.y;
vector[2] = vector.b = vector.z;
vector[3] = vector.a = vector.w;

Shader Forge
Maya2016/
ShaderFX

UV Coordノードを起点に、グリッド模様を作る
↓Frac(x)：x の小数部を返す（x は 0 以上 1 未満の値となる）。
←ここまでマスクの作成
↓Lerp:塗り分けの実行
↑Rotate:UV座標を回転↑UV Coord:UV座標取り出し

UV Coordノードを起点に、グリッド模様を作る
Amplify Shader Editorでも、
同様のシェーダーを作ることが
できる。

UV座標の取り出しとスケール、回転およびFrac関数
UV座標を回転UV座標取り出しとスケール
Frac関数とComponent Mask
全て上がShader Forge、
下がAmplify Shader Editor。
やっている操作は全て同じ。

V. システムライティングと
カスタムライティング

1. カスタムライティング
n ゲームエンジンなどのシステムが提供するライティングモデルを使わないで、
自前でライティングモデルを設計する。自前設計なので、自由度が高い。
n システムを問わず、使用できるノウハウには共通点が多い。
n フォワードレンダリング/NPR系シェーダーを作るのに都合がよい。
n システムが提供するシャドウ機能やGI機能を利用したい場合には、工夫が必要。
2. システムライティング
n ゲームエンジンなどのシステムが提供するライティングモデルを、そのまま使用する。
システムが提供する様々な機能が使える。
n カスタマイズはシェーダー本体よりも、各ポートに接続するマップ側でおこなう。
n デファードレンダリングやPBR系シェーダーが使える。
n PBRの実装方式はエンジン間で共通点が多いが、細部はエンジンごとに独自仕様。
システムライティングとカスタムライティング

カスタムライティングは、接続するポートがほぼひとつ
接続するポートは主にココ
Shader Forge Amplify Shader Editor

カスタムライティングは、接続するポートがほぼひとつ
バーテックスシェーダー
ピクセルシェーダー
ShaderFX/
カスタムライティング
接続するポートはココ

カスタムライティングは、機能を設計しEmissiveに接続
ノードの数には違いは
ありますが、
両者はまったく同じ
Half Lambertモデル。
Shader Forge
ShaderFX

システムライティングは、どんなポートが使えるかを見る
Forward/PBL/
Metaric
Deferrd/PBL/
Specular
RenderPath All/
Standard
RenderPath All/
Standard Specular
Forward/
Blinn-Phong
RenderPath All/
Blinn-Phong
• システムライティングでは、使えるポートの数やタイプがシェーダーの
機能に直結しています。

システムライティングは、どんなポートが使えるかを見る
Maya2016/ShaderFX/
StingrayPBSMaya2016/ShaderFX/
Traditional Game Surface
Shader (Blinn)

各ポートには、マップやマテリアル式を接続する
AnimatedFire
PBS/Standard Specular
より作成されたシェーダー。
TimeノードをUVパナー
ノードに接続して、
「燃える炎」をアニメーショ
ンさせている。
RenderPath All/
Standard Specular

まとめとさらなる学習のために
ここでは、シェーダー学習をさらに進めるために、どんなことに注意しておくと
いいかについて紹介します。
特に、他のDCCツールやゲームエンジンでの情報を参考にしたりする場合に
注意しておくとよいポイントについても、触れておこうと思います。

1. シェーダーとは、「絵づくり」の工程を数式（コード）で表現したもの。
2. シェーダーを視覚的に学ぶためには、ゲームエンジンが搭載する
リアルタイムシェーダーを使い、結果を「目」で確認しながら、
トライ＆エラーで学ぶのがよい。
3. シェーダーのロジックパターンは、ノードエディタ上で見て、
よく出てくるノードの接続パターンで覚えるとよい。
4. 慣れてきたら、ノードの背後にあるコードも見よう。
本セッションのまとめ

ノードエディタの基本的な使い方
に慣れてきたら、すでに公開され
ているシェーダーを、コードを見な
がらノードエディタ上に移植して
みるのはどうでしょう？
かなり勉強になりますよ！
「シェーダー力」をアップするためのヒント
左図は、オリジナルはCgで書かれている
「ユニティちゃんシェーダー」をShader Forgeで
完全移植してみたものです。
まったく同じ表示を実現しています。

Shader Forgeに移植された
「ユニティちゃんシェーダー」
キャラメインシェーダー部分

他のDCCツールやエンジンのシェーダーを見る際に注意すること
1. 各マップの実装仕様の違い
⇒実装仕様を知っておくと、ちょっとした変換でそのまま使えることが多い。
特に「スペキュラマップ」には注意！物理ベースシェーダーとそれ以前では仕様が違う。
2. Y-up？ Z-up？
⇒特にワールドノーマルを使う時に、
「Y-up系⇒Gが上、Z-up系⇒Bが上」と読む。
3. OpenGL？ DirectX？
⇒UV座標の原点の位置とV軸のプラス方向の違い。
他にも、ノーマルマップのGチャンネルの扱いなど。
4. フォーワードレンダリング? デファードレンダリング?
⇒今回は語りませんが、共に「絵づくり」の面で得意/不得意があります。
フォワードなら、カスタムシェーダーをしっかり書けますし、
デファードなら、よりポストプロセス側に注力するほうがよいでしょう。
他のDCCツールやエンジンのシェーダーも参考にしよう！

他のDCCツールやエンジンのシェーダーノウハウを、現在自分が使っているシェーダーでのノウハウに
置き換えることができるようになると、途端に参考となる資料が増えます。
例えば、「ユニティちゃんトゥーンシェーダー2.0」の開発に当って、それまで自分が普段から見てきた
資料を紹介します。
1. Technical Artist Bootcamp 2015 Vol.1 Kansai Cedec
https://www.slideshare.net/SIGTART/kansai-cedec-2015fumoto
ShaderFXによるリアルタイムシェーダー入門です。麓さんの資料には、ほぼ同じ内容をXSI（Softimage）で触れたものもあります。
2. SUITE Users Notes
http://www.comtec.daikin.co.jp/DC/UsersNotes/
Ritaroさんによる、元々はSoftimageの凄いサイト。こちらの「シェーダ/レンダ」編は、リアルタイムトゥーンシェーダーを作りたい人
ならば、一度は必ず訪れるはず。ここに書かれていることが理解できれば、次のサイトの情報が理解できます。
3. 西川善司の「試験に出るゲームグラフィックス」（1）「GUILTY GEAR Xrd -SIGN-」で実現された
「アニメにしか見えないリアルタイム3Dグラフィックス」の秘密，前編
http://www.4gamer.net/games/216/G021678/20140703095/
シェーダーの技術的背景だけでなく、その美術的背景も同時に理解できるようになれば、こちらの本村さんの開発インタビューより、
おおよその実装方針が理解できるようになるはずです。ここでもSoftimageでのリアルタイムトゥーンシェーダーがポイントになって
います。
過去の講演資料や技術情報サイトを参考にしよう

ひとつのシェーダーに見る、技術系譜の流れ
Softimageで育まれた
伝統的なプリレンダー＆
リアルタイム
トゥーンシェーダー
のノウハウ
伝統的ノウハウの忠実な実装
Unity5に合わせた機能面の大幅強化

n アーティスティックなシェーダー開発にとって、
一番重要なのは、開発者自身が絵の完成型の
イメージを強く掴んだ上で、それに向かって
トライ＆エラーをすることです。
n 求める「絵づくり」に向かって、普段アーティストが
行っている作業を、どのようなロジックパターンに
置き換えていくか、それがアーティスティックな
シェーダーの作り方のポイントになります。
n 「醸造酒の起源は、発明ではなく発見から始まる」
といいます。既存の手法の組み合わせから、独自
の表現へと至る、アーティスティックなシェーダー
の開発にも、同じことが言えるのではないでしょう
か？もやしもん
石川雅之/講談社
©Masayuki Ishikawa 2017
「アーティスティックなシェーダー開発」に大切なこと

n Unite 2017 Tokyo
「Unityで楽しむノンフォトリアルな絵づくり講座：トゥーンシェーダー・マニアクス」
https://www.slideshare.net/UnityTechnologiesJapan/unite-2017-tokyounity-76689750
n Unite 2016 Tokyo
「Unityとアセットツールで学ぶ「絵づくり」の基礎（ライト、シェーダー、イメージエフェクト）」
http://japan.unity3d.com/unite/unite2016/files/DAY2_1800_Room1_KobayashiNobuyuki.pdf
n Unity道場「Shader Forge 101」
https://www.slideshare.net/UnityTechnologiesJapan/unity-2016shaderforge101
n Unity道場「Shader Forge 102」
https://www.slideshare.net/UnityTechnologiesJapan/unity-2016shader-forge-102
n Unity道場 Special「Amplify Shader Editor 101」
https://www.slideshare.net/nyaakobayashi/unity-dojo-amplifyshadereditor101jpnjp
n Shader Forge
https://assetstore.unity.com/packages/tools/visual-scripting/shader-forge-14147
n Amplify Shader Editor
https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570
n スライド内イラスト提供「かわいいフリー素材集いらすとや」 http://www.irasutoya.com/
参考資料およびサイト

CEDEC2017 アーティストのためのリアルタイムシェーダー学習法

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to CEDEC2017 アーティストのためのリアルタイムシェーダー学習法

Similar to CEDEC2017 アーティストのためのリアルタイムシェーダー学習法 (20)

More from 小林信行

More from 小林信行 (17)