Download as PDF, PPTX
![参考：ベクトルの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;](https://image.slidesharecdn.com/2017cedecnobuyukikobayashi-170831133331/75/CEDEC2017-81-2048.jpg)
Uploaded by小林 信行
CEDEC2017 アーティストのためのリアルタイムシェーダー学習法
CEDEC2017「アーティストのためのリアルタイムシェーダー学習法 アーティスティックなシェーダーを開発するには？」で使用したスライドです。CEDiLにも同様のスライドをアップしています。 昨今のゲームエンジンの長足の進歩は、アーティストにとって自分の可能性を広げるためのチャンスでもあります。中でも「シェーダー」は、「絵づくり」をする多くのアーティスト自身に触って、楽しんでもらいたいものです。 本セッションでは、アーティストがリアルタイムシェーダーを学習にするにあたってどんな工夫をすると学びやすいか、講演者自身の経験よりその具体的な方法を紹介します。 http://cedec.cesa.or.jp/2017/session/VA/s58de2bed23b75/
More Related Content
![[UE4]マテリアルの注意すべきこと！～テクスチャロードとSwitch～](https://cdn.slidesharecdn.com/ss_thumbnails/ue4materialcaution-190309153116-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DO17] セゾン情報システムズの CTO 小野氏による、伝統的 Sier におけるモダン開発への挑戦](https://cdn.slidesharecdn.com/ss_thumbnails/do17-170616023531-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to CEDEC2017 アーティストのためのリアルタイムシェーダー学習法
CEDEC2017 アーティストのためのリアルタイムシェーダー学習法
- 1.
- 2.
- 3. 自作シェーダーの紹介 ユニティちゃんトゥーンシェーダー2.0 iOS/METAL/Linear Colorでの表示 Unity5.6.x以上で利用 できる映像指向の本格派 トゥーンシェーダー。 セルシェーディングから イラスト風シェーディング まで、幅広い絵づくりが 楽しめます。 リニアカラーが使える環境 ならば、Windows/Mac/iOS/ Android/PlayStation 4/ XboxOne/Switchなどの 幅広いプラットフォーム上で 共通の絵づくりができます。 http://unity-chan.com/ ダウンロードコーナーより UCL2.0で提供中！
- 4.
- 5. ユニティちゃんトゥーンシェーダー2.0 リアルタイムレンダー作例： C92「 The Phantom Knowledge 」
- 6.
- 7.
- 8. 「本セッションから得られる知見」 シェーダー は難しい！ アーティスト n 実際に絵づくりを担当したり、新規企画向けに新しい絵づくりを 試みたいアーティストが、効率よくリアルタイムシェーダーを学ぶ ための方法を、自身の経験より紹介します。 nアーティストがリアルタイムシェーダーの学習をする際に、 一般的に役立つ知見を紹介します。 実例としてUnityを使いますが、ここでの知見は、Mayaなどの DCCツール向けシェーダーや、直接は触れませんが他のゲーム エンジン向けシェーダーの学習にも参考になると思います。 n ただし、ツールの使い方のHowTo話ではないので、注意してくだ さい！
- 9.
- 10.
- 11.
- 12. 絵画（2DCG）における質感表現とは？ l 色 （材質およびそれに当たる光の色の表現） l陰影（光が当たっている面の陰影の出方による立体表現） l タッチ（材質の表面状態の表現） ⇒絵画（2DCG）では、「色＋陰影＋タッチ」の組み合わせで、 様々な「質感」を表現する。デジタル彩色でもそれは同じ。
- 13. n 主にGPUによって処理される、画像加工の手順を指定した、 小さめのスクリプトのこと。 n GPUを使う用途が広がるにつれて、シェーダーは、画像加工 以外にも使われるようになった。 nUnityの場合、使用目的に合わせて３つのシェーダーがある。 「シェーダー」とは？ 1. サーフェイスシェーダー（⇒Unity独自。コンパイルされて、最終的には２になる） 2. バーテックスシェーダー＋フラグメント（ピクセル）シェーダー 3. コンピュートシェーダー（グラフィックカード上で動作するプログラム）
- 14. 1. シェーダーは、テクスチャ（マップ）と組み合わされることで、 「マテリアル」という形で、「色、陰影、タッチ」の３要素をまとめて、 ひとつの質感表現として処理する。 2. 3DCG表現における「シェーダー」とは、例えるならば、アーティスト がひとつのイラストを完成まで持って行くまでの全工程をまとめて コード化したものにあたる。 「シェーダー」をアーティスト的観点から見てみると？ uそれらの工程は、アーティストがPhotoshopの 「ブラシ」「調整レイヤー」「レイヤーエフェクト」「マスク」などの 様々な機能を使って、各部分の質感を作り上げ、 それらを全体として統合することで、一枚の絵として仕上げる ことと、本質的には同じです。
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. n アーティスティックなシェーダー開発にとって一番重要なのは、 アーティスト自身が欲しい美術的要素をしっかりと掴んでおくこと。 すなわち、絵の完成型のイメージを強く掴んでおくこと。 それには、アーティスト自身がシェーダーを扱えればさらによい。 まとめ：アーティストがシェーダーを扱える意義 アーティストにとって、普段デジタル彩色ツールを使っている時の 感覚や発想になるべく近い形で、「シェーダーを理解する」ための 方法論が、ますます重要になってきている。 😣 アーティストが行っている作業工程を、「仕様書」や「発注書」という形で エンジニアに説明することは、元々難しい。 😣必要な工程には、アーティスト自身が手を動かして初めてわかることも 沢山あるので、エンジニアが作業できる仕様に前もって落とし込むのが 難しい。
- 22.
- 23. Photoshopでの絵づくり n Photoshopでは、レイヤーベースで絵づくりを行う。 多くのアーティストがPhotoshopでイラストを描くと きに、大量のレイヤーを使うことはよく知られている。 n 各々のレイヤーには「役割」があり、それらの「役割」 を持ったレイヤーが重なっていくことで、ある部分の 質感を作り上げる。 nそれらの「役割」を持った各レイヤーが積み上がった 結果として、最終的な「絵」ができあがる。
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. 1. 複数行のコードからなる、あるロジックパターンが 絵づくりにおいてどのような工程にあたるか理解する ⇒ノードベースのシェーダーエディタを使って学習すると ロジックパターンが明確になる。 例：One Minusノードの働きは、RGB各要素が0〜1の範囲の画像に 対しては、「階調の反転」になる。 2.それらの工程の結果を、実際に目でみて理解する ⇒ゲームエンジンのリアルタイムレンダリング環境下 で学習をすることで、視覚的に理解できるようになる。 例：ノードエディタ内でリアルタイムに経過が表示される。 EmissionポートやDebugポートに接続することで、 途中の経過を「画像」としてシーンビュー上で確認できる。 アーティストがシェーダーを学習する時のポイント
- 33. 1. 複数行のコードからなる、あるロジックパターンが 絵づくりにおいてどのような工程にあたるか理解する ⇒ノードベースのシェーダーエディタを使って学習すると ロジックパターンが明確になる。 2. それらの工程の結果を、実際に目でみて理解する ⇒ゲームエンジンのリアルタイムレンダリング環境下 で学習をすることで、視覚的に理解できるようになる。 3.１＆２の環境下でトライ＆エラーを試みることが大切 アーティストがシェーダーを学習する時のポイント
- 34. 1. 複数行のコードからなる、あるロジックパターンが 絵づくりにおいてどのような工程にあたるか理解する ⇒ノードベースのシェーダーエディタを使って学習すると ロジックパターンが明確になる。 2. それらの工程の結果を、実際に目でみて理解する ⇒ゲームエンジンのリアルタイムレンダリング環境下 で学習をすることで、視覚的に理解できるようになる。 3.１＆２の環境下でトライ＆エラーを試みることが大切 まとめ：アーティストがシェーダーを学習する時のポイント ３の結果、シェーダーが感覚的に理解できるものへと変わる！ ⇒機能を感覚的に理解できるようになることで、「自分のやりたいこと」を そのまま「シェーダー」として実装できるようになる！
- 35.
- 36. • 「Photoshop」でも「シェーダー」でも、マテリアルやパーツ ごとの塗り分けをする際には、「マスク」を多用します。 u Photoshopの場合：「マスク」は主に手で描く。 uシェーダーの場合：「マスク」は主に数式で作成する。 「マスク」作業は共通する工程
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. • 「Photoshop」でも「シェーダー」でも、マテリアルやパーツ ごとの塗り分けをする際には、「マスク」を多用します。 u Photoshopの場合：「マスク」は主に手で描く。 uシェーダーの場合：「マスク」は主に数式で作成。 ⇒「マスク」を作成するための「数式」のロジックパターンが 直感的に理解できるようになると、シェーダーが扱いやすくなります！ まとめ：「マスク」作業は共通する工程
- 43. 1. テキストエディタなどで直接コードを書く。 l ShaderLab（Unity独自のシェーダー言語） lCg、HLSL、GLSL（一般的なシェーダー言語） 2. ノードエディタタイプのビジュアルコードエディタを使う。 l Shader Forge (Unity Asset/$90) ⇒バーテックス＆フラグメントシェーダーを出力 l Amplify Shader Editor (Unity Asset/$60) ⇒サーフェイスシェーダーを出力 l ShaderFX (Maya/3dsMax) ⇒出力されるテキストは独自形式 参考：「シェーダー」を作成するには？
- 44. 1. テキストエディタなどで直接コードを書く。 l ShaderLab（Unity独自のシェーダー言語） lCg、HLSL、GLSL（一般的なシェーダー言語） 2. ノードエディタタイプのビジュアルコードエディタを使う。 l Shader Forge (Unity Asset/$90) ⇒バーテックス＆フラグメントシェーダーを出力 l Amplify Shader Editor (Unity Asset/$60) ⇒サーフェイスシェーダーを出力 l ShaderFX (Maya/3dsMax) ⇒出力されるテキストは独自形式 参考：「シェーダー」を作成するには？ 特に、上の２つに関しては、出力されるコードを、ShaderLabとCg の組み合わせとして、普通に「読む」ことができる！
- 45.
- 46.
- 47. I. カラーの取り扱いとカラー同士のコンポジット II. 様々な塗り分け用マスクを作成する III.マスクの作成と塗り分けの実行のパターン IV. 表現アップのための一工夫 a. ノーマルマップと頂点法線加工を使って一工夫してみる b. UV座標で一工夫してみる V. システムライティングとカスタムライティング 取り上げるロジックパターンのトピックは、以下の５つ
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. カラーは、基本0〜1の範囲で考える！ 特に「One Minus」ノードを 階調反転として使う時には 注意しましょう。 左図でOne Minusノードの 結果は同じ「黒」に見えます が、RGB値は違います。 （0,0,0）以外の黒が含まれ るマスクを使うと、カラー合 成の際に問題が生じること があります。 •One Minusノードでマスクの反転をする時には、 必ずClamp 0-1もしくはSaturateと一緒に使うようにしましょう。 Shader Forge
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64. 様々な塗り分け用マスクの作り方 Light Vectorノードとの内積を とって、光の当たり方の 状態を得る。 View Vectorノードとの内積をとり、 OneMinusで反転し、リムライトの かかり具合の状態を得る。 Half Vectorノードとの内積をとって、 Powerノードで絞り込み、スペキュラ （グロッシイ)反射の状態を得る。 様々な塗り分け用マスクをシェーダーで作成する時に、よく使われるのは、 モデルのノーマルベクトルとその他のベクトルとの内積（Dot Product） を求め、それを２つのベクトルの開き具合として使う方法です。 塗り分けマスク ハイカラー（スペキュラ）リムライト
- 65.
- 66. 参考：内積/ Dot Productとは？ A B →θ A → ｜ ｜ B → ｜ ｜ cosθA → B → ・ = 上図のように、ライトベクトルと ノーマルベクトルの内積を取る ことで、光の当たり具合を ０～１で表現することができる！ 内積がマイナスは、 「光が当たっていない」 ことを示している。 内積とは、２つのベクトルがなす 角度の状態を示すスカラー値 のこと。特に2つのベクトルが ノーマライズされている場合 には、内積が即、２つのベクトルの 内角のcosθの値となっている。
- 67. 参考：内積の計算は、座標系を合わせておこなう マスク作成のために、ノーマルベクトルと他のベクトルとで内積を取る 場合、「共に同じワールド座標系のベクトル」に対して内積を取ります。 もし使うノードにWorldやLocal等の名前が付いている時には、 念のため、どの座標系のデータを取ってくるノードなのか確認しよう。 Shader Forgeには見た目、区別はない Amplify ShaderEditorには、ノード名にWorldやLocalの区別 があったり、World/Tangentで切り替えできる ノードがある。
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. • UV座標（UV Coordinate）は、モデルにテクスチャを貼り込 むために使うだけでなく、他にも色々な用途に使えます。 例えば、 1.内積で求めた光の当たり方を、UV座標に変換して参照することで、 シェーディングマップが利用できます。 ⇒このテクニックはよく使います。内積の値はスカラーです ので、コンポーネントマスクで２つにまとめてUV座標にしてしまいます。 2. UV Coordノードを起点に、美しいグリッド模様が作れます。 ⇒PhotoshopやSubstance Designerなどでは、ノイズから プロシージャルの模様が作れますが、今回はUV座標が0〜1 の範囲内で繰り返すことを利用して、連続模様が作れます。 UV座標で一工夫をしてみよう！
- 78.
- 79.
- 80.
- 81. 参考：ベクトルのRGBA/XYZW各要素の分解 Shader Forge Amplify ShaderEditor 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;
- 82.
- 83. UV Coordノードを起点に、グリッド模様を作る ↓Frac(x)：x の小数部を返す（xは 0 以上 1 未満の値となる）。 ←ここまでマスクの作成 ↓Lerp:塗り分けの実行 ↑Rotate:UV座標を回転↑UV Coord:UV座標取り出し
- 84. UV Coordノードを起点に、グリッド模様を作る Amplify ShaderEditorでも、 同様のシェーダーを作ることが できる。
- 85. UV座標の取り出しとスケール、回転およびFrac関数 UV座標を回転UV座標取り出しとスケール Frac関数とComponent Mask 全て上がShader Forge、 下がAmplifyShader Editor。 やっている操作は全て同じ。
- 86.
- 87. 1. カスタムライティング n ゲームエンジンなどのシステムが提供するライティングモデルを使わないで、 自前でライティングモデルを設計する。自前設計なので、自由度が高い。 nシステムを問わず、使用できるノウハウには共通点が多い。 n フォワードレンダリング/NPR系シェーダーを作るのに都合がよい。 n システムが提供するシャドウ機能やGI機能を利用したい場合には、工夫が必要。 2. システムライティング n ゲームエンジンなどのシステムが提供するライティングモデルを、そのまま使用する。 システムが提供する様々な機能が使える。 n カスタマイズはシェーダー本体よりも、各ポートに接続するマップ側でおこなう。 n デファードレンダリングやPBR系シェーダーが使える。 n PBRの実装方式はエンジン間で共通点が多いが、細部はエンジンごとに独自仕様。 システムライティングとカスタムライティング
- 88.
- 89.
- 90.
- 91. システムライティングは、どんなポートが使えるかを見る Forward/PBL/ Metaric Deferrd/PBL/ Specular RenderPath All/ Standard RenderPath All/ StandardSpecular Forward/ Blinn-Phong RenderPath All/ Blinn-Phong • システムライティングでは、使えるポートの数やタイプがシェーダーの 機能に直結しています。
- 92.
- 93. 各ポートには、マップやマテリアル式を接続する AnimatedFire PBS/Standard Specular より作成されたシェーダー。 TimeノードをUVパナー ノードに接続して、 「燃える炎」をアニメーショ ンさせている。 Amplify ShaderEditor RenderPath All/ Standard Specular
- 94.
- 95. 1. シェーダーとは、「絵づくり」の工程を数式（コード）で表現したもの。 2. シェーダーを視覚的に学ぶためには、ゲームエンジンが搭載する リアルタイムシェーダーを使い、結果を「目」で確認しながら、 トライ＆エラーで学ぶのがよい。 3.シェーダーのロジックパターンは、ノードエディタ上で見て、 よく出てくるノードの接続パターンで覚えるとよい。 4. 慣れてきたら、ノードの背後にあるコードも見よう。 本セッションのまとめ
- 96.
- 97.
- 98. 他のDCCツールやエンジンのシェーダーを見る際に注意すること 1. 各マップの実装仕様の違い ⇒実装仕様を知っておくと、ちょっとした変換でそのまま使えることが多い。 特に「スペキュラマップ」には注意！物理ベースシェーダーとそれ以前では仕様が違う。 2. Y-up？Z-up？ ⇒特にワールドノーマルを使う時に、 「Y-up系⇒Gが上、Z-up系⇒Bが上」と読む。 3. OpenGL？ DirectX？ ⇒UV座標の原点の位置とV軸のプラス方向の違い。 他にも、ノーマルマップのGチャンネルの扱いなど。 4. フォーワードレンダリング? デファードレンダリング? ⇒今回は語りませんが、共に「絵づくり」の面で得意/不得意があります。 フォワードなら、カスタムシェーダーをしっかり書けますし、 デファードなら、よりポストプロセス側に注力するほうがよいでしょう。 他のDCCツールやエンジンのシェーダーも参考にしよう！
- 99. 他のDCCツールやエンジンのシェーダーノウハウを、現在自分が使っているシェーダーでのノウハウに 置き換えることができるようになると、途端に参考となる資料が増えます。 例えば、「ユニティちゃんトゥーンシェーダー2.0」の開発に当って、それまで自分が普段から見てきた 資料を紹介します。 1. Technical ArtistBootcamp 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でのリアルタイムトゥーンシェーダーがポイントになって います。 過去の講演資料や技術情報サイトを参考にしよう
- 100.
- 101. n アーティスティックなシェーダー開発にとって、 一番重要なのは、開発者自身が絵の完成型の イメージを強く掴んだ上で、それに向かって トライ＆エラーをすることです。 n 求める「絵づくり」に向かって、普段アーティストが 行っている作業を、どのようなロジックパターンに 置き換えていくか、それがアーティスティックな シェーダーの作り方のポイントになります。 n「醸造酒の起源は、発明ではなく発見から始まる」 といいます。既存の手法の組み合わせから、独自 の表現へと至る、アーティスティックなシェーダー の開発にも、同じことが言えるのではないでしょう か？もやしもん 石川雅之/講談社 ©Masayuki Ishikawa 2017 「アーティスティックなシェーダー開発」に大切なこと
- 102. n Unite 2017Tokyo 「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/ 参考資料およびサイト
- 103.