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

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

株式会社　セガ麓　一博

1

12年6月18日月曜日

アジェンダ

はじめに

準備するもの

何はともあれ書いて(描いて)みよう

シェーダ記述内容について

シェーダ編集

まとめ

2


このセッションのアジェンダです。はじめに準備するもの何はともあれ書いて(描いて)みようシェーダ記述内容についてシェーダ編集まとめ

はじめに

対象者

シェーダを描いてみたいと思っているTA/アーティスト

今回はノードツリー型のシェーダエディットには全く触れません

自分もこうやって始めました

3


・対象者シェーダを描いてみたいと思っているTA/アーティストということなのですが、もしスタディ(基礎研究)期間に何をやったら良いか迷っている人は、これを機に初めてみたらどうでしょうか？

・今回はノードツリー型のシェーダエディットには全く触れません今回はプログラムを勉強する為の入り口としてRTシェーダを選ぶといいよ。と言う事を前提に話をしたいと思います。なので今回は敢えて。「コードを書けるようになるには？」と言う話をしたいと思います。

・自分もこうやって始めましたそして自分も勉強を始めた当時はこういう手順で始めました。そういう実際の実例を元に、最新の環境で始めるとどうなんだろう・・・と考えてみたんですが。最近はSoftimageも安定して、機能と管理方法が充実しているので今やらない手は無い！前から中々手が出せない人はそろそろ始める環境がそろっていますよ。

準備するもの

Softimage（体験版でも良いんじゃない？）

The Cg Tutorial 日本語版（古いけど基礎が解説されている貴重な本）

言語：CgFXかDirectXFX

4


・Softimage（体験版でも良いんじゃない？）・The Cg Tutorial 日本語版この本は昔から講演時には必ず紹介しています。テッパンとなっています。今となっては内容が古いですけどシェーダ概念の基礎が解説されている数少ない貴重な本です。ま、でもある程度慣れてくると関数表しか見なくなるのも導入書の性。他にもWEBページでまとめてくれている人がいるので（たとえばイマギレさんのページとか）参考に出来るところはたくさんあります。言語：CgFXかDirectXFX最近だと、シェーダコードを書くのにわりとシンプルで一般的なCGFXかDirectXのFXを今回は選びます。ここは特にこだわりはないですが、ファイルが単一化出来るのでサンプルとして楽です。

何はともあれ書いて(描いて)みよう

SoftimageでShadeファイルを作る

Shaderファイルを管理する

5


何はともあれまずは手を動かして書いてみるのが大事なので、とりあえず、Softimageでシェーダファイルをクリエイトする方法と管理方法を簡単に紹介します。

Shaderファイルをつくる

6


Shaderファイルをつくる方法。Softimageでは必要な要素をGUIで選択して、Createボタンを押すとぽんっとシェーダコードのプリセットが書かれたファイルが作成される機能があります。作られるシェーダコードファイルは一般的な.fxや.cgfxのファイル等です。それでは動画で見てみましょう。

7

Shaderファイルを作る：ムービー

http://youtu.be/r2Cb-EEmNzY


まず、Shader Code Editorを呼び出して、新規シェーダを押すとシェーダコードを設定する為のUIが表示されます。

今回はCgFXで解説しますので、CgFXに切り替えて、パラメータはカラーを使います。変数名は良いとして、UIに表示される名前をカラー００１に変更します。デフォルト値はわかりやすく赤っぽくします。

次はライトのベクトルが欲しいので、DirectionalLightのDirectionを設定します。あとは法線とかカラーとかを入出力したいので、それにチェックを入れてプロファイルのバージョンを設定して、マトリックスはとりあえずデフォルトでも良いので「コード生成」を押します。


8


次にSoftimageで作成したそのシェーダファイルを管理する方法です。Softimage内でどうやって使うのかを簡単に紹介します。

9


http://youtu.be/PakSnXcwwns


ここのString Categoryと書いてあるところにシェーダが読み込まれますよ。と言う意味になります。実際にレンダーツリーのプリセットのリアルタイム／CgFXの中に今作ったシェーダがストックされています。

標準的なマトリクス

データ入出力セマンティクス

頂点シェーダとピクセルシェーダについて

エフェクト

UIパラメータ

10

シェーダ記述内容について


記述はC言語に近い感じはしますが、ある程度きまった記述を組み合わせるコーディングをするので、１からプログラムを書くというよりは機能のコードをコラージュするようなイメージで書けます。

次はパートそれぞれが何を意味しているのかを軽く紹介します。それでは編集する前に、作成されたシェーダコードの中身を眺めてみましょう。

標準的なマトリクス// 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


マトリクスは行列ともいって、３次元のTRS情報がそれぞれ縦横４つずつのベクトル値で格納されている物です。縦横４つずつなので変数の型がfloat4x4と、宣言されているのが分かると思います。型のすぐ右が変数名ですシェーダでも変数を初めて宣言する時は型を指定する事になっています。プリセットを作る時に自動でそれぞれがどの空間のマトリクスなのか、というところが変数名で分かりやすくなってはいます。

とりあえず、マトリクスについて細かい事を説明すると時間が足りないので、次に行きます。

データ入出力セマンティクス

// 頂点シェーダ入力

struct VS_Input

{

float4 position : POSITION0;

float4 color : COLOR0;

float4 normal : NORMAL;

float4 texcoord0 : TEXCOORD0;

};

12

// 頂点シェーダ出力

struct VS_Output

{

float4 position : POSITION0;

float4 color : COLOR0;

float4 texcoord0 : TEXCOORD0;

};


次はデータ入出力のセマンティクスです。単純に頂点シェーダとピクセルシェーダで表現する場合、頂点シェーダの入出力が記述されていれば大丈夫です。左が頂点シェーダ入力でSoftimageからデータがシェーダにやってくるデータです。右が頂点シェーダからピクセルシェーダに渡すために出力されるデータです。それぞれ役割があり、Positionは頂点座標データ、Colorは色データ(頂点カラー等)、Normalは法線データ、TexcoordはUV他・・・です。Softimageでは頂点と法線以外はUIでどのパラメータを入れるかが指定できるので、データ内容のキマリはありません。

頂点シェーダVS_Output Vertex_Func( VS_Input in_data )

{

VS_Output outData = (VS_Output)0;

// Put code here ...

return outData;

}

13


これが頂点シェーダのくくりです。記述が何も無いので・・・コードヒアーって書いてありますが・・・ここにシェーダでやりたい事をちくちく書き足して行きます。

ピクセルシェーダfloat4 Fragment_Func( VS_Output in_data ) : COLOR

{

float4 outColor = (float4)0;

// Put code here ...

return outColor;

}

14


同様にピクセルシェーダ内も何も記述はありません。でもちょっと違うのは、ピクセルシェーダの結果は描画色として出力されると言う点ですね。最終的にoutColorの値がシェーダが割り当てられているオブジェクトの色になります。

エフェクトtechnique Main

{

pass p0

{

VertexProgram = compile vp40 Vertex_Func();

FragmentProgram = compile fp40 Fragment_Func();

}

}

15


エフェクト。初期段階だと頂点シェーダとピクセルシェーダのプロファイルしか書いてないですけど、皆さん、シェーダバージョンって聞いてことありませんか？ここでシェーダをコンパイルする時のシェーダバージョンを指定します。

他にもブレンドファンクとか深度設定などもここで指定します。

UIパラメータfloat3 MyColor

<

string UIName = "Color001";

string UIWidget = "Color";

> = {0.754, 0, 0};

16


前後しますが、UIパラメータの記述の部分です。こんな感じで記述すると、SIのパラメータのカラーがUIに表示されます。３要素あるのでfloat3型で定義します。最後の0.75,0,0というのはパラメータの初期値で左からRGBに相当します。Rが0.7５で他が０なのでやや暗い赤という事がわかります。

それでは編集してみよう

17


それでは早速いじってみましょう。

18

表示させて色を変える

http://youtu.be/XKB7d4U927Q


さっき作成したシェーダをレンダーツリーに繋いで、シェーダコードを表示させます。頂点シェーダとピクセルシェーダの中には何も書かれていないので、オブジェクトが描画されません。シェーダコードを組んで行く為に、グーチィさんのシェーダを参考にしましょう。この中から頂点を描画に送るまでに計算しているところを持ってきます。２２３行目の頂点データ入力と、２４３行目の頂点をワールドビュープロジェクションマトリクスにかけるところです。あとはこちらのシェーダの記述にあわせて上げます。これでやっとポリゴンが描画されました。なんで真っ黒なのかというと、ピクセルシェーダの出力色が０なんですね。ここに例えば、1.0, 0.2, 0.2, 1.0と記述すると、色が赤っぽくなりますね。今度は0.0, 0.0, 0.5と変えると、青っぽくなります。これで何となく、この４つの数字はRGBAを意味しているのがわかります。それでは次はパラメータとリンクしてみましょう。

パラメータとリンクする

19

http://youtu.be/8ocCEd6Ia6M


グーチィさんはもういらないから消します。シェーダノードをダブルクリックするとプロパティが開きます。この赤色の部分が先に説明したUIパラメータが表示されているものです。このパラメータの「MyColor」という変数を、さっきのピクセルシェーダの色指定に渡します。これでUIの色とシェーダがリンクしました。

色だけだと寂しいのでランバート化まで行きましょう。

内積ランバート

20

http://youtu.be/DpwkXE2k1KM


ランバートには法線ベクトルとライトベクトルが必要になります。さっきのグーチィさんから法線ベクトルの記述を貰ってきます。２２０行目ですね。

今回は法線ベクトルを出力しないので、アウトは消してWorldNormalを定義しなおしてあげます。記述をあわせて、ランバートに一番重要な内積を計算します。litという変数名を作って、dot();と書きます。これが内積計算を意味する関数です。これに、法線ベクトルと、既に書いてあるライトベクトルを持ってきて入れます。

colorとして出力する訳ですが、ちょっと効率が悪いですが、面倒なのでfloat4にlitをいれます。そしてピクセルシェーダに行って、今の色に内積結果をかけあわせます。

これで出来上がりなんですが、あれ、なんか暗い・・・ライトの方向と反対の方が暗くなってます。これは、ライトベクトルが逆向きになっているので反転させる為に頭にマイナスを付けます。

正しいシェーディングになりました。

入り口は予想以上に簡単

プログラム基本の一部に触れる事が出来る

追求していくとグラフィックを綺麗にする方法を考えだせる

アーティストの立場でプログラムを理解する事が出来るようになる

21

まとめ


駆け足でしたが、ランバートシェーダを書くと言うところまで行きました。入り口としては簡単だったんじゃないでしょうか？

こうやってシェーダを書き始めると、プログラムの一部に触れるようになり、

追求して行くとグラフィックを綺麗にする方法を考えだせ、

アーティストの立場からプログラムを理解できるようになります。これでプログラマに歩み寄る事が出来るようになります。

シェーダプログラムを理解するということはグラフィックの仕組みを理解するということです。

22


プログラムを理解するという事は、仕組みを理解するという事です。

仕組みを理解して、効率よく綺麗なグラフィックを。

23


グラフィックの仕組みを理解して、効率よく綺麗な表現を出来るようになりましょう。そこがアーティストに合ったテクニカルアーティストへの第一歩でもあります。

24

ご清聴ありがとうございました


ご清聴ありがとうございました・・・と、その前に・・・

過去SiggraphAsia２００９で行ったリアルタイムシェーダのデザイナー用勉強法のプレゼン資料もスライドシェアで公開します。

25

おまけ

http://www.slideshare.net/SIGTART/sa09-realtime-education


過去SiggraphAsia２００９で行ったリアルタイムシェーダのデザイナー用勉強法のプレゼン資料もあらためて許可を貰ったので、スライドシェアで公開します。内容は古いですが、基本的な事なので今回の資料とあわせて読むと理解が進むと思います。

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

Education