Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
そうだ、RTシェーダをはじめよう。      株式会社 セガ      麓 一博                          112年6月18日月曜日
アジェンダ         はじめに         準備するもの         何はともあれ書いて(描いて)みよう         シェーダ記述内容について         シェーダ編集         まとめ               ...
はじめに         対象者         シェーダを描いてみたいと思っているTA/アーティ         スト         今回はノードツリー型のシェーダエディットには全         く触れません         自分もこうや...
準備するもの         Softimage(体験版でも良いんじゃない?)         The Cg Tutorial 日本語版         (古いけど基礎が解説されている貴重な本)         言語:CgFXかDirectXF...
何はともあれ書いて(描い      て)みよう         SoftimageでShadeファイルを作る         Shaderファイルを管理する                                            ...
Shaderファイルをつくる                                                        612年6月18日月曜日Shaderファイルをつくる方法。Softimageでは必要な要素をGUIで選択...
http://youtu.be/r2Cb-EEmNzY      Shaderファイルを作る:ムービー                                                      712年6月18日月曜日まず、Sh...
Shaderファイルを管理する                                       812年6月18日月曜日次にSoftimageで作成したそのシェーダファイルを管理する方法です。Softimage内でどうやって使うのか...
http://youtu.be/PakSnXcwwns      Shaderファイルを管理する                                              912年6月18日月曜日ここのString Catego...
シェーダ記述内容について         標準的なマトリクス         データ入出力セマンティクス         頂点シェーダとピクセルシェーダについて         エフェクト         UIパラメータ            ...
標準的なマトリクス        // Transform Matrices        float4x4 WorldXf : World < string UIWidget="None";>;        float4x4 WorldIT...
データ入出力セマンティクス        // 頂点シェーダ入力                          // 頂点シェーダ出力        struct VS_Input                              ...
頂点シェーダ        VS_Output Vertex_Func( VS_Input in_data )        {            VS_Output outData = (VS_Output)0;            /...
ピクセルシェーダ        float4 Fragment_Func( VS_Output in_data ) : COLOR        {            float4 outColor = (float4)0;        ...
エフェクト        technique Main        {            pass p0            {                VertexProgram = compile vp40 Vertex_Fu...
UIパラメータ        float3 MyColor        <            string UIName = "Color001";            string UIWidget = "Color";       ...
それでは編集してみよう                    1712年6月18日月曜日それでは早速いじってみましょう。
http://youtu.be/XKB7d4U927Q      表示させて色を変える                                               1812年6月18日月曜日さっき作成したシェーダをレンダーツリー...
http://youtu.be/8ocCEd6Ia6M      パラメータとリンクする                                                 1912年6月18日月曜日グーチィさんはもういらないから消...
http://youtu.be/DpwkXE2k1KM      内積ランバート                                                     2012年6月18日月曜日ランバートには法線ベクトルとライ...
まとめ         入り口は予想以上に簡単         プログラム基本の一部に触れる事が出来る         追求していくとグラフィックを綺麗にする方法を考         えだせる         アーティストの立場でプログラムを理...
シェーダプログラムを理解するというこ      とはグラフィックの仕組みを理解すると      いうことです。                                  2212年6月18日月曜日プログラムを理解するという事は、仕組みを...
仕組みを理解して、効率よ      く綺麗なグラフィックを。                                          2312年6月18日月曜日グラフィックの仕組みを理解して、効率よく綺麗な表現を出来るようになりましょ...
ご清聴ありがとうございました                               2412年6月18日月曜日ご清聴ありがとうございました・・・と、その前に・・・
おまけ        過去SiggraphAsia2009で行ったリ        アルタイムシェーダのデザイナー用勉        強法のプレゼン資料もスライドシェア        で公開します。   http://www.slideshar...
Prochain SlideShare
Chargement dans…5
×

そうだRTシェーダをはじめよう

7 692 vues

Publié le

動画へのリンク
・Shaderファイルを作る
http://youtu.be/r2Cb-EEmNzY
・Shaderファイルを管理する
http://youtu.be/PakSnXcwwns
・表示させて色を変える
http://youtu.be/XKB7d4U927Q
・パラメータとリンクする
http://youtu.be/8ocCEd6Ia6M
・内積ランバート
http://youtu.be/DpwkXE2k1KM

Publié dans : Formation
  • Soyez le premier à commenter

そうだRTシェーダをはじめよう

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

×