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

DirectX11 | 10. ブレンドモードテスト(随時更新)

シェーダ側でエフェクト効果を実装する前に、テストプログラムを作りたいと思います。

→シェーダ版ができました。
DirectX11 | 14. シェーダ版ブレンドモードテスト(随時更新)
只今、本記事のプロジェクトはこれと同時進行で取り組んでおります。

このテストは前の記事の「DirectX11 | 4. 三角形」のプログラムを書き足す形になります。

ブレンドモードの種類は公開初期では、

  • 通常(アルファブレンド)
  • 比較(暗)
  • 乗算
  • 焼き込みカラー
  • 焼き込みリニア
  • カラー比較(暗)
  • 比較(明)
  • スクリーン
  • オーバーレイ
  • ハードライト
  • 差の絶対値
  • 加算

これらのブレンドモードが実装済みになっています。

※2020/08/10追記:以下を追加しました。

  • 覆い焼きカラー
  • 覆い焼きリニア(加算)
  • カラー比較(明)
  • ソフトライト
  • ビビッドライト
  • リニアライト
  • ピンライト
  • 除外
  • 減算
  • 除算

レイヤーのブレンドモードを実装する上で参考にしたものは以下のサイトページです。

http://www.fbs.osaka-u.ac.jp/labs/ishijima/Photoshop-01.html

http://mukaimame.blog111.fc2.com/blog-entry-1320.html

各合成モードの計算式が載っています。

ブレンドモードの計算が分からなければ、どうぞ当ページに来てください。

あと、各ブレンドモードの計算式が間違っていたら、教えて頂けると幸いです。

プロジェクトの作成

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

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

プロジェクトの設定

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

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

やり方は前と同じです。

ソースコード

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

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

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

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

「L」と「J」のキー押下でブレンドモードを切り替えられるようになっています。

そして、付属ウィンドウのコンソールで現在描画しているブレンドモードを確認できるようにもなっています。


次に、シェーダ本文です。これは前の記事の「DirectX11 | 4. 三角形」と同じshaders.hlslになります。

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

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

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

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

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

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

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

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

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

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

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

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

ブレンドされた三角形が表示できたら終わりです。お疲れさまでした。

三角形の左下が基本色(下レイヤー)、右下が合成色(上レイヤー)になって、
頂上が合成結果になります。

赤っぽい色に緑っぽい色を上から合成した各ブレンドモードを確認することができます。

最後に

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

この作例では、記事「DirectX11 | 4. 三角形」でのmain.cppと今回のmain.cppとで差分を確認して学習に活かしてください。

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

exeファイル

VisualStudioで実際に動かさなくてもexeとして単体で動かせるように実行ファイルを添付しておきます。

zipなので解凍して「0010_BlendModeTest.exe」を起動してみてください。

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