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

アーティスティックなシェーダーを開発するには？

ユニティ・テクノロジーズ・ジャパン合同会社コミュニティエバンジェリスト

小林信行2017/08/31 CEDEC2017 DAY2/R302

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

自己紹介

小林信行 Nobuyuki Kobayashi

自作シェーダーの紹介

ユニティちゃんトゥーンシェーダー2.0iOS/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. 複数行のコードからなる、あるパターンロジックが絵づくりにおいてどのような工程にあたるか理解する⇒ノードベースのシェーダーエディタを使って学習すると

パターンが明確になる。

2. それらの工程の結果を、実際に目でみて理解する⇒ゲームエンジンのリアルタイムレンダリング環境下

で学習をすることで、視覚的に理解できるようになる。

アーティストがシェーダーを学習する時のポイント

⇒実例：「マスクの反転」を例にとって見てみよう！

⇒実例：各ノードの結果がリアルタイム表示できない環境では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の範囲の画像に

対しては、「階調の反転」になる。

2. それらの工程の結果を、実際に目でみて理解する⇒ゲームエンジンのリアルタイムレンダリング環境下

で学習をすることで、視覚的に理解できるようになる。例：ノードエディタ内でリアルタイムに経過が表示される。

EmissionポートやDebugポートに接続することで、途中の経過を「画像」としてシーンビュー上で確認できる。

アーティストがシェーダーを学習する時のポイント

1. 複数行のコードからなる、あるロジックパターンが絵づくりにおいてどのような工程にあたるか理解する⇒ノードベースのシェーダーエディタを使って学習すると

ロジックパターンが明確になる。

2. それらの工程の結果を、実際に目でみて理解する⇒ゲームエンジンのリアルタイムレンダリング環境下

で学習をすることで、視覚的に理解できるようになる。

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

アーティストがシェーダーを学習する時のポイント

1. 複数行のコードからなる、あるロジックパターンが絵づくりにおいてどのような工程にあたるか理解する⇒ノードベースのシェーダーエディタを使って学習すると

ロジックパターンが明確になる。

2. それらの工程の結果を、実際に目でみて理解する⇒ゲームエンジンのリアルタイムレンダリング環境下

で学習をすることで、視覚的に理解できるようになる。

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

カラーは、基本0〜1の範囲で考える！

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

Shader Forge

カラーは、基本0〜1の範囲で考える！

カラーは、基本0〜1の範囲で考える！Amplify Shader Editor

カラーは、基本0〜1の範囲で考える！特に「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の結果が、見当つきやすくなります。

Amplify Shader Editor

マスクにカラーを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 ShaderEditor

参考：ベクトルのRGBA/XYZW各要素の分解Shader Forge

Amplify Shader Editor

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;

参考：ベクトルのRGBA/XYZW各要素の分解

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)

各ポートには、マップやマテリアル式を接続する

AnimatedFirePBS/Standard Specularより作成されたシェーダー。TimeノードをUVパナーノードに接続して、「燃える炎」をアニメーションさせている。

Amplify Shader Editor

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 Cedechttps://www.slideshare.net/SIGTART/kansai-cedec-2015fumotoShaderFXによるリアルタイムシェーダー入門です。麓さんの資料には、ほぼ同じ内容をXSI（Softimage）で触れたものもあります。

2. SUITE Users Noteshttp://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で育まれた伝統的なプリレンダー＆

リアルタイムトゥーンシェーダー

のノウハウユニティちゃんトゥーンシェーダー1.0

伝統的ノウハウの忠実な実装ユニティちゃんトゥーンシェーダー2.0Unity5に合わせた機能面の大幅強化

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 Forgehttps://assetstore.unity.com/packages/tools/visual-scripting/shader-forge-14147

n Amplify Shader Editorhttps://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570

n スライド内イラスト提供「かわいいフリー素材集 いらすとや」 http://www.irasutoya.com/

参考資料およびサイト

Thank You !