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

DirectX12 | 3-2. ビットマップテクスチャ

今回は、ビットマップ形式のテクスチャを用います。

プロジェクトの作成

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

プロジェクト名は、” 0003-2_Texture_Bitmap “としておきます。

ソースコード

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

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

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

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

そして、d3dx12.hも前回同様インクルードしますので、

以下のヘッダファイルをダウンロードしてプロジェクトの「ヘッダー ファイル」に「既存の項目」から追加してください。

次に、シェーダファイルを読み込みます。

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

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

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

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

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

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

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

ただ、これだけではビルドしても動きません。

あと、shaders.hlsl自体にもプロパティ設定をする必要があります。

カーソルを「ソリューション エクスプローラー」内にある「shaders.hlsl」にかざして右クリックし、

「プロパティ」を選んで、プロパティダイアログを開きます。

「構成プロパティ」→「全般」の中の「項目の種類」という項目で「HLSLコンパイラ」から「カスタム ビルド ツール」に変更します。

そのまま適用ボタンを押し、切り替えて、

「カスタム ビルド ツール」の中の「コマンド ライン」と「出力ファイル」の項目にそれぞれ、

copy %(Identity) "$(OutDir)" > NUL
$(OutDir)\%(Identity)

を入力します。

これでexeと同じディレクトリ下にshaders.hlslがコピーされます。

これでOKを押します。

次に、main.cppでビットマップテクスチャを読み込んでいますので、以下のbmp画像をダウンロードしてmain.cppと同じディレクトリに入れておきましょう。

あと、注意点なのですが、このプログラムではbmp画像は読み込めますが、jpgとpngの画像は読み込めません。

これらの画像を読み込むためには「DirectXTex」というライブラリが必要になってきます。このことについては今後取り上げたいと思います。

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

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

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

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

画面にビットマップテクスチャが画面全体表示できていたら終わりです。お疲れさまでした。

最後に

学習を進めていく中でバージョンアップによる差分をすぐに確認できるように「WinMerge」というソフトを導入した方がすぐにでもプログラムを理解できるようになるかと思います。

この作例では、記事「DirectX12 | 3. テクスチャ」でのmain.cppと今回のmain.cppとで差分を確認して学習に活かしてください。

何のコードが変更されたり追加されたのかがすぐに分かります。

まとめ

今回のbmp画像を描画する作例では、四角形として2つの三角形を用いて定義しました。

四角形は6つの頂点を2つに分けるか、4つの頂点を2つに分けるかでジオメトリ定義できます。

今回ではやっていませんが、4つの頂点でプリミティブトポロジの設定を変更すると描画できます。後でやりましょう。

6つの頂点で設定すると、あとで不都合が生じてラスタライザとアルファ値制御を噛ませると斜め線が入ってしまいますので気をつけましょう。

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