シェーダー伝道師第一回

DirectX 11 (DirectX HLSL)
シェーダー伝道師
第一回
～シェーダーの基本とフィルタ処理～

※注意書き
• 確実に技術が身に付く確証はありません
• 2D中心にシェーダーの解説します
• 魅力を精一杯伝えたいだけ！
• あと変なノリが含まれます
• あと、公開しているファイル等の責任は取れません
※表記上、シェーダとシェーダーが混ざる可能性がありますが特に区別はありません
それでもいいなら進めていってください。

当講座について
• C++
• DirectX 11
• DirectX HLSL
• Visual Studio 2015 (2013)
前略、DirectX 11 シェーダー講座、始めます。

• C++
• DirectX 11
• DirectX HLSL
主な目的は、
シェーダーの魅力を伝えたい！
つまるところシェーダーの伝道師です。

• C++
• DirectX 11
• DirectX HLSL
開発環境はここに示しているものです。
私は2015ですが…
プロジェクト自体は2013です。

当講座についての注意
•3DCGは扱わない
簡単に理解してもらいたい！
ということで、3DCGは扱いません。

• 複雑な座標計算は扱わない
• 結果がわかりやすい
理由としましてシェーダーの魅力を簡単に…
今回は、画像処理中心となります。

複雑な座標計算は理解の妨げになります。

そして、何より結果が二次元です。
書いたものが絵に現れる…
非常に直感的です。

その為、3DCGは見送らせて頂きます。
(機会があれば解説するかも…です)

本日の献立 (第一回)
• シェーダーの基本
• シェーダーを用いた画像処理フィルタでは、よろしいでしょうか？
第一回の献立はこちらとなります。

• シェーダーを用いた画像処理フィルタまず、シェーダーの基本。
あまり詳しく説明はしませんが…

• シェーダーを用いた画像処理フィルタ後は、実際に動かしてみよう…
というわけでフィルター処理です。
ぼかしとかラプラシアンとか…

シェーダーの基本
• シェーダーとは？
グラフィックスを扱うプログラム
では、まずシェーダーの基本というわけで、
シェーダーとは、何でしょうか。

広義ではグラフィックスを扱うプログラム…
とでも置きましょうか。

• 主なシェーダー？
テクスチャの貼り付け影鏡面水面
例えば、テクスチャを貼り付けるもの、
影をつけるもの、鏡面、水面…
なんでもシェーダーですね。

それらのプログラムは、内部で分割され…
DirectX HLSLでメインとなって記述するのが…

• シェーダーステージ
頂点シェーダー
ピクセルシェーダー
頂点シェーダーとピクセルシェーダーです。
基本的にはこの2つあれば描画できます。

逆に言えば、最低でもこの2つを記述しなけ
れば全く描画ができないと言ってもいいです。

例えば3DCGの描画では、箱を描画する時、
空間にカメラを配置し、箱との位置関係で、
画面のどこに描画するか決定します。

その座標変換を中心となって行うのが
頂点シェーダー(Vertex Shader)です。

頂点シェーダーによって変換された座標で、
実際に画面に対応する色を決定するのが
ピクセルシェーダー(Pixel Shader)となります。

箱の面に対応するテクスチャの色を取って
来る事で、箱を塗ることができます。

あるいは箱の頂点に色情報を付加しておく
ことで、色の付いた箱…などですね。
後は光源から反射や陰影など…

今回は、このピクセルシェーダー中心に
講座を進めていきたいと思います。

プロジェクトファイルのダウンロード
• GitHubのURLを私のサイトに記載します
私のサイトで見ている方はページ下の方を
ご確認頂ければ見つけられると思います
SlideShareでは説明文に私のサイトURLを
(露骨なカウント稼ぎ失礼致します)
URL怖い方はSlideShareと同じIDですので検索を
というわけで早速フィルタ処理を
実装してみましょう。

シェーダーのコンパイルから描画まで
実装したプロジェクトです。

稀に動かない環境もありますのでご注意を。
グラボはあった方がいいかもです。

プロジェクトファイルを開く
• プロジェクトは2013
アップグレードはしない
• x86で
x64 ✕
x86 ○
プロジェクトは2013のものです。
x86でbuildして下さい。

実行すると
• レナ姉さん！
実行するとウィンドウにレナ姉さんが出ます。

実行すると
Qキーを押す度にシェーダーが変わります。

実行すると
実行直後はそのまま描画で…

実行すると
平滑化フィルタ(ぼかし)

実行すると
ガンマ値の変更

実行すると
最後は先鋭化で再び標準に遷移します。

実行すると
なお、下2つにつきましては、
PageUp・PageDownや
カーソルキー上下で変数が変化します。

実行すると
明るくなったり、暗くなったり…
先鋭化に関しても見た目が変わります。

実行すると
あとはRキーで変数のリセット、
SキーでOutputフォルダに書き出しです。

実行すると
実装、についてですが…
これらの画像処理フィルタの原理に
関しては各自で調べてください。

画像処理フィルタ
• 例：平滑化フィルタ
調べてもらうと…もしくは経験上、
このような図を見ませんでしたか？
これが画像処理のフィルタです。1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9

画像はピクセルで構成されていますが、
そのピクセルの色を決定する計算を…
3×3では中央が色を決めるピクセルです。1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9

例えばこちらは色を決めたいピクセルの
左上のピクセルを示しています。1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9

つまり周囲のピクセルを計算に使用します。
そして数値はその重み付けです。1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9

平滑化は見ていただくと分かるように、
9分の1…つまり平均ですね。
これで、ぼかしを表現するわけです。1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9

では早速、画像処理のフィルタを
書き換えてみましょう。1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9
1
9

画像処理フィルタ (DirectX HLSL)
• ShaderFiles/2DShaders.hlsl
書き換えるということで、まず確認。
プロジェクト内にhlslファイルがあります。
その中にこのような記述があります。
//===================================
// ピクセルシェーダ
//===================================
float4 mainPS(PSINPUT input) : SV_TARGET
{
float4 Out;
float4 Samp;
int width, height;
g_Tex0.GetDimensions(width, height);
int2 size = int2(width, height);
int3 sp = int3(input.tex * size, 0);
Samp = g_Tex0.Load(sp);
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

ピクセルシェーダー…ですね。
これは、実行直後の標準のシェーダーです。
つまりそのままの描画です。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

記述、に関してですが…
普通の関数という認識で構いません。
float4(rbga)を返すmainPSという関数です。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

rgbaを1つしか返さない関数…
ということで、このピクセルシェーダーは、
描画する各ピクセルで実行される関数です。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

今回の書き換えは、このピクセルシェーダー
に限定したものとなります。
次回以降、テクスチャの生成やシェーダー
追加などに触れていきますのであしからず。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

では、この関数について簡単に解説します。
まず入力したテクスチャの解像度を取得。
(g_Tex0が入力テクスチャ)
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

解像度と描画する座標(input.tex)より、
テクスチャの画素を読み取る座標を
計算します。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

変数に値を読み取ります。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

今回の場合はそのまま描画ですね。
(α値だけ1に固定)
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

最後にreturnですね。
では、平滑化フィルタに参りましょう。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.rgb;
Out.a = 1;
return Out;
}

先程の1つ下にぼかしフィルタがあります。
こちらについても解説していきます。
//===================================
// ピクセルシェーダぼかし
//===================================
float4 blurPS(PSINPUT input) : SV_TARGET
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
float dw = 1.0f / width;
float dh = 1.0f / height;
float2 ei[9] = { float2(-dw, -dh), float2(0, -dh), float2(dw, -dh), float2(-dw, 0), float2(0, 0), float2(dw, 0), float2(-dw, dh), float2(0, dh), float2(dw, dh) };
float2 center = input.tex ;
float3 s = float3(0, 0, 0);
for (i = 0; i < 9; i++)
s += g_Tex0.Sample(g_Sampler, center + ei[i]).rgb;
Out = float4(s / 9.0f, 1);
return Out;
}

略、に関しては解像度の取得です。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
for (i = 0; i < 9; i++)
Out = float4(s / 9.0f, 1);
return Out;
}

こちらは解像度から、
1ピクセル分のテクスチャ座標を求めます。
つまり、1つ隣の移動量を算出します。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
for (i = 0; i < 9; i++)
Out = float4(s / 9.0f, 1);
return Out;
}

そして、9方向分の移動を配列に格納します。
ちょうど[4]がfloat2(0,0)で中心です。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
for (i = 0; i < 9; i++)
Out = float4(s / 9.0f, 1);
return Out;
}

テクスチャ座標(center)と配列の値より
周囲のピクセルの値をサンプリングします。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
for (i = 0; i < 9; i++)
Out = float4(s / 9.0f, 1);
return Out;
}

「あれ？さっきはLoadじゃなかった？」
という点については後ほど解説致します。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
for (i = 0; i < 9; i++)
Out = float4(s / 9.0f, 1);
return Out;
}

あとは9分の1にして描画ですね。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
for (i = 0; i < 9; i++)
Out = float4(s / 9.0f, 1);
return Out;
}

• 例題1
標準シェーダーを変更
rgb=argに
• 例題2
ぼかしシェーダーを変更
周囲の平均r値より自身のr値が高ければ白
そうでなければ黒に
ということで実際のコードに触れてみましょう。
触れるには書き換えが一番です。
これらの例題の解説をします。

• 例題1
まず例題1ですが、ここを書き換えてください。
HLSLの面白い記述方法の一つです。
Aはαチャンネルですね。
//===================================
//===================================
{
float4 Out;
float4 Samp;
int width, height;
Out.rgb = Samp.arg;
Out.a = 1;
return Out;
}

• 例題1
実行すると左の様に黄色一色です。
argであれば、右の様な配色となるはずです。
右の様な配色になる理由は…

• 例題1
rgb<-argより、出力のrは1固定、
gb成分にrg成分が書き込まれるので、
(元が赤が強くrg成分が目立ち)橙です。

• 例題1
黄色一色ということは、r=g成分です。
もっと言えば、b成分しか変化していません。
その理由こそが…

• 例題1
実は2回実行されているのです。
1回目でrは1が書き込まれます。
2回目では更にrとgも1になり黄色になります。

• 例題1
画面に描画する際にも同じシェーダーを
用いていることが原因です。
証拠に、黄色い画面でSキーで保存すると、
右のような配色で出力されると思います。

• 例題2
次に例題2ですが、このような感じでしょうか。
//===================================
//===================================
{
~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~
float2 center = input.tex;
for (i = 0; i < 9; i++)
Out = s.r / 9.0f < g_Tex0.Sample(g_Sampler, center).r;
Out.a = 1;
return Out;
}

• 例題2
出力結果はこんな感じ。

• 例題2
先鋭化フィルタやラプラシアンフィルタなど、
周囲の値を用いるものはすぐ書けますね。

• 例題2
あ、例題で変更した箇所は戻してくださいね。

• 実践1 (グレースケール変換)
変換式を調べる
ヒント : rgb = r * _ + g * _ + b * _;
• 実践2 (3成分ラプラシアンフィルタ)
ラプラシアンフィルタを調べる
ヒント : 先鋭化フィルタ
実践ということで、このような感じでしょうか。
余裕があればやってみてください。

DirectX HLSL
• 4成分変数の扱い方
o.rgb = i.bgr; // 順番
o.rgb = i.rrr; // 好きな成分
o.rgb = 0; // 一気に代入
o.a = 1; // 当然1つも
o.xyzw = i.xyzw; // xyzwでも
o.rgb *= 2.0f; // 3成分に同時
o = float4(i.rgb, 1); // 初期化が多彩
o = float4(i1.xy, i2.xy);// 初期化が多彩
さて、いかがでしたか？
簡単ですが書き換えは楽しかったですか？
hlslの書き方は特徴的？

DirectX HLSL
• 多彩な組み込み関数
sin cos tan … // 数学関数
sature clamp … // クランプ関係
distance length … // 座標関係
clip // 計算破棄
hlslには多彩な組み込み関数もあります。

まとめ
• ピクセルシェーダーを触ってみた
• 画像処理フィルタを触ってみた
• hlslは面白い
次回予定
シェーダーによるライフゲーム
・テクスチャの生成や更新
・シェーダーの追加など
少し早いですが本日はここまで。
次回予定はライフゲームです。
それでは失礼致します。

P.S. LoadとSampleについて
• Load (ピクセル単位で取り出す)
よって整数型で指定する
• Sample (テクスチャ座標でサンプリング)
よって浮動小数点型で指定する
• なぜ周囲を見る時Sampleか
出力画像の解像度でフィルタ処理を行いたい
入力画像の解像度に依存しないSample
追伸、LoadとSampleの件。
Loadは配列の値を読み取るように、
整数の値によってピクセルを指定して
その色を取り出します。

逆にSampleは適当な座標でも適切な値を算
出します。この時、サンプリングの設定で線
形補間などを選択できます。

なぜSampleかと言うと、出力画像の解像度
でフィルタ処理を行いたいためです。

入力画像の解像度によって、
フィルタが変わるのはナンセンスです。
ということでよろしいでしょうか。

立ち絵素材
• 臼井の会様 http://usui.moo.jp/frame2.html

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

シェーダー伝道師第一回

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to シェーダー伝道師第一回

Similar to シェーダー伝道師第一回 (20)

Recently uploaded

Recently uploaded (8)