注目キーワード
  1. Web
  2. GUI
  3. DirectX

DirectX11 | 13. レンダーターゲットとUV値変換

ブレンドモードをシェーダ側へ実装する前の下準備として、

レンダーターゲットの実装と、シェーダ側でUV値に行列変換後のポジションを代入し調整することをします。

このUV値変換をしないと、画面全体のカラーを対象に合成を施してしまいます。

テクスチャが重なっているところだけにするには、頂点シェーダの方で下レイヤーの上でUV値での位置を計ってやることで可能になり、ピクセルシェーダで合成できるようになります。

レンダーターゲットは、オブジェクトが描画された画面を切り取ってそれをテクスチャとして使うことができるので、色々な加工ができます。

つまり、シェーダ側でのテクスチャの合成には、このレンダーターゲットが必ず必要なのです。

なぜかというと、レンダーターゲットなしだと様々なオブジェクトを描画した画面の上にまた合成なんてことをしたら、せっかく描画した複数のテクスチャを再び取り込む必要があるからです。

そうなれば、シェーダで取り扱うマルチテクスチャの数は膨大になってしまいますし、取り扱うピクセルシェーダの数もすごく多くなってしまいます。

2, 3, 4枚と取り込むテクスチャを扱う都度、ピクセルシェーダの変更をしなければなりません。

その非効率的な構造よりもレンダーターゲットを取り入れることで難なく解決できます。2, 3, 4枚のテクスチャが描画された画面を切り取って1枚のテクスチャにしてくれるのです!!

これで合成する際に2つのテクスチャだけで済みます。

それに根本的な問題として、ブレンドされたオブジェクトにスケール・回転・移動の動きを付けるためには、レンダーターゲットなしにはそもそも意図した描画ができません。

さらに、頂点情報を使ってポジションを変えるだけであれば、オブジェクトを描画するごとに1つのレンダーターゲットの上に上書きをするだけで良いので最も最適なプログラムとなります。

長々と書きましたが、説明するよりコードを見た方が分かるかと思います。

では、さっそくやっていきましょう。

プロジェクトの作成

前回同様にプロジェクトを新しく作成します。

プロジェクト名は、” 0013_RTandUV “としておきましょう。

プロジェクトの設定

DirectXSDKのパスを通すために、毎回プロジェクトの設定をいちいちしなければなりません。

前の記事「4. 三角形」と同じように「インクルードディレクトリパス」と「ライブラリディレクトリパス」の設定をしてください。

やり方は前と同じです。

ソースコード

以下がソースです。これも前回同様、流れが分かりやすいようにmain.cppだけでまとめました。

長いコードになっていますが、記事として読みやすいように一つのファイルにまとめることは一貫しておこうと思います。

以下のソースをコピペするか、ダウンロードしてVisual Studio の「ソースファイル」に保存してください。

コピペするなら、
「ソースファイル」で右クリックして
「追加」→「新しい項目」で、「C++ ファイル」を選び、名前を” main.cpp “にして追加ボタンを押して作成してください。

ダウンロードなら、
同じく「ソースファイル」で右クリックして
「追加」→「既存の項目」で、main.cppを選択して追加してください。

新しくレンダーターゲットクラスを作り、そこにレンダーターゲットとバックバッファの領域を確保しています。

予め初期化してOnRender()の方で使用するという流れになっています。

オブジェクトのスケール・回転・移動の動きはレンダーターゲットの中で最初に描画し、あとでレンダーターゲット同士で合成という形にしています。

ターゲットのコピーをすればもっとスマートな形になりますが、

今回は分かりやすいコードにしました。


次に、シェーダ本文です。

これは「ソース ファイル」から「追加」→「新しい項目」で、

「Visual C++」→「HLSL」の中で.hlslなら何でもいいのですが(Visual Studio側が勝手にテンプレートを作るだけなので)、

ここでは「ジオメトリ シェーダー ファイル (.hlsl)」を選んで、

名前を” shaders.hlsl “にして追加ボタンを押してください。

すると、「ソース ファイル」中にshaders.hlslが作れますので、

中にあるコードを全て以下のコードでコピペして上書きするか、

ダウンロードして「既存の項目」で追加しましょう。

ブレンドを行う場合は、もう一つの頂点シェーダを使い、

切り替えることでUV値を用いたポジションを計算して変換しています。

なので、下レイヤーと上の合成レイヤーとで2回描画していることになります。

合成方法は乗算合成を使い、色が暗いのでカラー値を2倍にしました。

今回も引き続き、前回と同じようにプロパティで「カスタムビルドツール」に設定しましょう。

次に、読み込むテクスチャを用意します。

以下のテクスチャをダウンロードしてmain.cppと同じディレクトリ下に置いてください。

以上で作成は完了です!!

以下のようになっていればOK。

ツールバーの「デバッグ」から「デバッグの開始(F5)」で実行できます。

ビルドするときは、「0013_RTandUV」を右クリックして「スタートアップ プロジェクトに設定」を押してプロジェクトターゲットを変更してからするようにしてください。

青空テクスチャの上に合成されたテクスチャを表示できたら終わりです。お疲れさまでした。

最新情報をチェックしよう!