はかせのラボ

私の頭の中を書いていく雑記ブログです

DirectX ついに絵が出た

あいさつ

はい、はかせです。
タイトルの通りついに・・ついに絵を描画することに成功しました!

思えば今までプリミティブといわれるあまり味気のないものしかなく
見た目的に大分しょぼかったのですが、
これから徐々に見た目をリッチにしていけます。

では本編です。

実装

DirectX的にテクスチャを出す方法はいっぱいあるみたいです。
ですが、細かいやり方が変わるだけでやりたいことは

①画像データ読み込み
②画像表示用シェーダーを書く
③ID3D11ShaderResourceViewを作成しテクスチャとシェーダーを繋ぐ
④UV座標を渡しID3D11SamplerStateを作成し良しなに貼る

すごく大雑把ですがこんな感じみたいです。
では一つずつ見ていきましょう。

①はDirectXTexというライブラリを使いました。
色んな画像ファイル読み込みに対応しているそうです。
一昔前ならD3DXという万能ライブラリがあり
それを使えば何でも良しなになったようですが今は亡き存在です。

②は私の苦手なシェーダーです。
(セマンティクスのタイポは多分一生忘れないでしょう)
まずはコードを

// 定数バッファ(CPU側からの値受け取り場)
cbuffer global
{
    matrix gWVP;
    float4 gColor;
};
 
Texture2D mTexture : register(t0); //テクスチャー
SamplerState mSampler : register(s0); //サンプラー

// 頂点シェーダから出力される構造体
struct VS_OUTPUT
{
    float4 Pos : SV_POSITION;
    float2 TextureUV : TEXCOORD;
};
 
// 頂点シェーダ
VS_OUTPUT VS(float4 Pos : POSITION, float2 Tex : TEXCOORD)
{
    VS_OUTPUT output;
    output.Pos = mul(Pos, gWVP);
    output.TextureUV = Tex;
    return output;
}
 
// ピクセルシェーダ
float4 PS(VS_OUTPUT input) : SV_Target
{
    float4 tex = mTexture.Sample(mSampler, input.TextureUV);
    if (tex.a <= 0)
    {
        discard;
    }
    tex.r *= gColor.r;
    tex.g *= gColor.g;
    tex.b *= gColor.b;
    tex.a *= gColor.a;
    return tex;
}

やってることは渡されたテクスチャデータからUV座標と
色情報を抜き出して割り当てています。
あとテクスチャの色変えれます。

③と④は関数呼んで構造体に値入れて終わりです。
あとパイプラインにバインド。
いつもやってることなので詳細は割愛します。

ただ④のUV座標を渡すときに頂点レイアウトを変えたのですが
渡すデータ型変えるの忘れてて半日ぐらいロスしましたw
これも忘れなさそうですね。失敗は忘れないので学習にぴったりですね(泣)

動きの動画です。
それっぽい戦闘機が弾打ってます。
地味に弾もテクスチャです。
youtu.be

いい加減データの型だとかタイポだとかで
何日も時間潰すようなことは終わらせたいなぁ・・・(トオイメ)

作ったものはgithubに上げました
github.com