Downloaded 31 times
![[UE4]マテリアルの注意すべきこと！～テクスチャロードとSwitch～](https://cdn.slidesharecdn.com/ss_thumbnails/ue4materialcaution-190309153116-thumbnail.jpg?width=640&height=640&fit=bounds)
そうだRTシェーダをはじめよう
- 1. そうだ、RTシェーダをはじめよう。 株式会社 セガ 麓 一博 1 12年6月18日月曜日
- 2. アジェンダ はじめに 準備するもの 何はともあれ書いて(描いて)みよう シェーダ記述内容について シェーダ編集 まとめ 2 12年6月18日月曜日 このセッションのアジェンダです。 はじめに 準備するもの 何はともあれ書いて(描いて)みよう シェーダ記述内容について シェーダ編集 まとめ
- 3. はじめに 対象者 シェーダを描いてみたいと思っているTA/アーティ スト 今回はノードツリー型のシェーダエディットには全 く触れません 自分もこうやって始めました 3 12年6月18日月曜日 ・対象者 シェーダを描いてみたいと思っているTA/アーティストということなのですが、 もしスタディ(基礎研究)期間に何をやったら良いか迷っている人は、これを機に初めてみたらどうでしょうか？ ・今回はノードツリー型のシェーダエディットには全く触れません 今回はプログラムを勉強する為の入り口としてRTシェーダを選ぶといいよ。 と言う事を前提に話をしたいと思います。 なので今回は敢えて。「コードを書けるようになるには？」と言う話をしたいと思います。 ・自分もこうやって始めました そして自分も勉強を始めた当時はこういう手順で始めました。 そういう実際の実例を元に、最新の環境で始めるとどうなんだろう・・・と考えてみたんですが。 最近はSoftimageも安定して、機能と管理方法が充実しているので今やらない手は無い！ 前から中々手が出せない人はそろそろ始める環境がそろっていますよ。
- 4. 準備するもの Softimage（体験版でも良いんじゃない？） The Cg Tutorial 日本語版 （古いけど基礎が解説されている貴重な本） 言語：CgFXかDirectXFX 4 12年6月18日月曜日 ・Softimage（体験版でも良いんじゃない？） ・The Cg Tutorial 日本語版 この本は昔から講演時には必ず紹介しています。テッパンとなっています。 今となっては内容が古いですけどシェーダ概念の基礎が解説されている数少ない貴重な本です。 ま、でもある程度慣れてくると関数表しか見なくなるのも導入書の性。 他にもWEBページでまとめてくれている人がいるので（たとえばイマギレさんのページとか） 参考に出来るところはたくさんあります。 言語：CgFXかDirectXFX 最近だと、シェーダコードを書くのにわりとシンプルで一般的なCGFXかDirectXのFXを今回は選びます。 ここは特にこだわりはないですが、ファイルが単一化出来るのでサンプルとして楽です。
- 5. 何はともあれ書いて(描い て)みよう SoftimageでShadeファイルを作る Shaderファイルを管理する 5 12年6月18日月曜日 何はともあれまずは手を動かして書いてみるのが大事なので、 とりあえず、Softimageでシェーダファイルをクリエイトする方法と管理方法を簡単に紹介します。
- 6. Shaderファイルをつくる 6 12年6月18日月曜日 Shaderファイルをつくる方法。 Softimageでは必要な要素をGUIで選択して、Createボタンを押すとぽんっとシェーダコードのプリ セットが書かれたファイルが作成される機能があります。 作られるシェーダコードファイルは一般的な.fxや.cgfxのファイル等です。 それでは動画で見てみましょう。
- 7. http://youtu.be/r2Cb-EEmNzY Shaderファイルを作る：ムービー 7 12年6月18日月曜日 まず、Shader Code Editorを呼び出して、新規シェーダを押すとシェーダコードを設定する為のUIが 表示されます。 今回はCgFXで解説しますので、CgFXに切り替えて、パラメータはカラーを使います。 変数名は良いとして、UIに表示される名前をカラー００１に変更します。 デフォルト値はわかりやすく赤っぽくします。 次はライトのベクトルが欲しいので、DirectionalLightのDirectionを設定します。 あとは法線とかカラーとかを入出力したいので、それにチェックを入れてプロファイルのバージョン を設定して、 マトリックスはとりあえずデフォルトでも良いので「コード生成」を押します。
- 8. Shaderファイルを管理する 8 12年6月18日月曜日 次にSoftimageで作成したそのシェーダファイルを管理する方法です。 Softimage内でどうやって使うのかを簡単に紹介します。
- 9. http://youtu.be/PakSnXcwwns Shaderファイルを管理する 9 12年6月18日月曜日 ここのString Categoryと書いてあるところにシェーダが読み込まれますよ。 と言う意味になります。 実際にレンダーツリーのプリセットのリアルタイム／CgFXの中に今作ったシェーダがストックされて います。
- 10. シェーダ記述内容について 標準的なマトリクス データ入出力セマンティクス 頂点シェーダとピクセルシェーダについて エフェクト UIパラメータ 10 12年6月18日月曜日 記述はC言語に近い感じはしますが、ある程度きまった記述を組み合わせるコーディングをするので、 １からプログラムを書くというよりは機能のコードをコラージュするようなイメージで書けます。 次はパートそれぞれが何を意味しているのかを軽く紹介します。 それでは編集する前に、作成されたシェーダコードの中身を眺めてみましょう。
- 11. 標準的なマトリクス // Transform Matrices float4x4 WorldXf : World < string UIWidget="None";>; float4x4 WorldITXf : WorldInverseTranspose < string UIWidget="None";>; float4x4 WorldViewProjXf : WorldViewProjection < string UIWidget="None";>; float4x4 ViewIXf : ViewInverse < string UIWidget="None";>; // シンプルなシェーダをやるうちはこれだけで充分 11 12年6月18日月曜日 マトリクスは行列ともいって、３次元のTRS情報がそれぞれ縦横４つずつのベクトル値で格納されてい る物です。 縦横４つずつなので変数の型がfloat4x4と、宣言されているのが分かると思います。 型のすぐ右が変数名ですシェーダでも変数を初めて宣言する時は型を指定する事になっています。 プリセットを作る時に自動でそれぞれがどの空間のマトリクスなのか、というところが変数名で分か りやすくなってはいます。 とりあえず、マトリクスについて細かい事を説明すると時間が足りないので、次に行きます。
- 12. データ入出力セマンティクス // 頂点シェーダ入力 // 頂点シェーダ出力 struct VS_Input struct VS_Output { { float4 position : POSITION0; float4 color : COLOR0; float4 position : POSITION0; float4 normal : NORMAL; float4 color : COLOR0; float4 texcoord0 : TEXCOORD0; float4 texcoord0 : TEXCOORD0; }; }; 12 12年6月18日月曜日 次はデータ入出力のセマンティクスです。 単純に頂点シェーダとピクセルシェーダで表現する場合、頂点シェーダの入出力が記述されていれば 大丈夫です。 左が頂点シェーダ入力でSoftimageからデータがシェーダにやってくるデータです。 右が頂点シェーダからピクセルシェーダに渡すために出力されるデータです。 それぞれ役割があり、Positionは頂点座標データ、Colorは色データ(頂点カラー等)、Normalは法線 データ、TexcoordはUV他・・・です。 Softimageでは頂点と法線以外はUIでどのパラメータを入れるかが指定できるので、データ内容のキ マリはありません。
- 13. 頂点シェーダ VS_Output Vertex_Func( VS_Input in_data ) { VS_Output outData = (VS_Output)0; // Put code here ... return outData; } 13 12年6月18日月曜日 これが頂点シェーダのくくりです。 記述が何も無いので・・・コードヒアーって書いてありますが・・・ ここにシェーダでやりたい事をちくちく書き足して行きます。
- 14. ピクセルシェーダ float4 Fragment_Func( VS_Output in_data ) : COLOR { float4 outColor = (float4)0; // Put code here ... return outColor; } 14 12年6月18日月曜日 同様にピクセルシェーダ内も何も記述はありません。 でもちょっと違うのは、ピクセルシェーダの結果は描画色として出力されると言う点ですね。 最終的にoutColorの値がシェーダが割り当てられているオブジェクトの色になります。
- 15. エフェクト technique Main { pass p0 { VertexProgram = compile vp40 Vertex_Func(); FragmentProgram = compile fp40 Fragment_Func(); } } 15 12年6月18日月曜日 エフェクト。 初期段階だと頂点シェーダとピクセルシェーダのプロファイルしか書いてないですけど、 皆さん、シェーダバージョンって聞いてことありませんか？ ここでシェーダをコンパイルする時のシェーダバージョンを指定します。 他にもブレンドファンクとか深度設定などもここで指定します。
- 16. UIパラメータ float3 MyColor < string UIName = "Color001"; string UIWidget = "Color"; > = {0.754, 0, 0}; 16 12年6月18日月曜日 前後しますが、UIパラメータの記述の部分です。 こんな感じで記述すると、SIのパラメータのカラーがUIに表示されます。 ３要素あるのでfloat3型で定義します。 最後の0.75,0,0というのはパラメータの初期値で左からRGBに相当します。 Rが0.7５で他が０なのでやや暗い赤という事がわかります。
- 17. それでは編集してみよう 17 12年6月18日月曜日 それでは早速いじってみましょう。
- 18. http://youtu.be/XKB7d4U927Q 表示させて色を変える 18 12年6月18日月曜日 さっき作成したシェーダをレンダーツリーに繋いで、シェーダコードを表示させます。 頂点シェーダとピクセルシェーダの中には何も書かれていないので、オブジェクトが描画されません。 シェーダコードを組んで行く為に、グーチィさんのシェーダを参考にしましょう。 この中から頂点を描画に送るまでに計算しているところを持ってきます。 ２２３行目の頂点データ入力と、２４３行目の頂点をワールドビュープロジェクションマトリクスにか けるところです。 あとはこちらのシェーダの記述にあわせて上げます。 これでやっとポリゴンが描画されました。 なんで真っ黒なのかというと、ピクセルシェーダの出力色が０なんですね。 ここに例えば、1.0, 0.2, 0.2, 1.0と記述すると、色が赤っぽくなりますね。 今度は0.0, 0.0, 0.5と変えると、青っぽくなります。 これで何となく、この４つの数字はRGBAを意味しているのがわかります。 それでは次はパラメータとリンクしてみましょう。
- 19. http://youtu.be/8ocCEd6Ia6M パラメータとリンクする 19 12年6月18日月曜日 グーチィさんはもういらないから消します。 シェーダノードをダブルクリックするとプロパティが開きます。 この赤色の部分が先に説明したUIパラメータが表示されているものです。 このパラメータの「MyColor」という変数を、さっきのピクセルシェーダの色指定に渡します。 これでUIの色とシェーダがリンクしました。 色だけだと寂しいのでランバート化まで行きましょう。
- 20. http://youtu.be/DpwkXE2k1KM 内積ランバート 20 12年6月18日月曜日 ランバートには法線ベクトルとライトベクトルが必要になります。 さっきのグーチィさんから法線ベクトルの記述を貰ってきます。 ２２０行目ですね。 今回は法線ベクトルを出力しないので、アウトは消してWorldNormalを定義しなおしてあげます。 記述をあわせて、ランバートに一番重要な内積を計算します。 litという変数名を作って、dot();と書きます。これが内積計算を意味する関数です。 これに、法線ベクトルと、既に書いてあるライトベクトルを持ってきて入れます。 colorとして出力する訳ですが、ちょっと効率が悪いですが、面倒なのでfloat4にlitをいれます。 そしてピクセルシェーダに行って、今の色に内積結果をかけあわせます。 これで出来上がりなんですが、あれ、なんか暗い・・・ ライトの方向と反対の方が暗くなってます。 これは、ライトベクトルが逆向きになっているので反転させる為に頭にマイナスを付けます。 正しいシェーディングになりました。
- 21. まとめ 入り口は予想以上に簡単 プログラム基本の一部に触れる事が出来る 追求していくとグラフィックを綺麗にする方法を考 えだせる アーティストの立場でプログラムを理解する事が出 来るようになる 21 12年6月18日月曜日 駆け足でしたが、ランバートシェーダを書くと言うところまで行きました。 入り口としては簡単だったんじゃないでしょうか？ こうやってシェーダを書き始めると、プログラムの一部に触れるようになり、 追求して行くとグラフィックを綺麗にする方法を考えだせ、 アーティストの立場からプログラムを理解できるようになります。 これでプログラマに歩み寄る事が出来るようになります。
- 22. シェーダプログラムを理解するというこ とはグラフィックの仕組みを理解すると いうことです。 22 12年6月18日月曜日 プログラムを理解するという事は、仕組みを理解するという事です。
- 23. 仕組みを理解して、効率よ く綺麗なグラフィックを。 23 12年6月18日月曜日 グラフィックの仕組みを理解して、効率よく綺麗な表現を出来るようになりましょう。 そこがアーティストに合ったテクニカルアーティストへの第一歩でもあります。
- 24. ご清聴ありがとうございました 24 12年6月18日月曜日 ご清聴ありがとうございました・・・と、その前に・・・
- 25. おまけ 過去SiggraphAsia２００９で行ったリ アルタイムシェーダのデザイナー用勉 強法のプレゼン資料もスライドシェア で公開します。 http://www.slideshare.net/SIGTART/sa09-realtime-education 25 12年6月18日月曜日 過去SiggraphAsia２００９で行ったリアルタイムシェーダのデザイナー用勉強法の プレゼン資料もあらためて許可を貰ったので、スライドシェアで公開します。 内容は古いですが、基本的な事なので今回の資料とあわせて読むと理解が進むと思います。