ポリゴンのテクスチャ対応

この章ではポリゴンにテクスチャを張り付けて描画する方法について解説します。
このページの内容は、3D座標変換描画まで終わっていることが前提です。

実行結果

Shader設定

  1. 頂点シェーダーとピクセルシェーダーの2つを設定します。 
    // 頂点シェーダーを設定する
var vertexShaderByteCode = ShaderBytecode.CompileFromFile("MiniCubeTex.fx", "VS", "vs_4_0", ShaderFlags.None, EffectFlags.None);
var vertexShader = new VertexShader(_device, vertexShaderByteCode);
// ピクセルシェーダーを設定する
var pixelShaderByteCode = ShaderBytecode.CompileFromFile("MiniCubeTex.fx", "PS", "ps_4_0", ShaderFlags.None, EffectFlags.None);
var pixelShader = new PixelShader(_device, pixelShaderByteCode);
_ContantBuffer = new SharpDX.Direct3D11.Buffer(_device, Utilities.SizeOf(), ResourceUsage.Default, BindFlags.ConstantBuffer, CpuAccessFlags.None, ResourceOptionFlags.None, 0);
  2. 「MiniCubeTex.fx」ファイルを実行ファイルであるexeと同じディレクトリ（フォルダ）内に入れます。

    ファイルの中身はページ下記に全文が載っていますのでテキストエディタでコピペして「MiniCubeTex.fx」で保存してください。

    シェーダーの細かい解説は省略しますが、おおまかに言えば「入力された色・位置データ・テクスチャを加工せずそのまま出力する」というコードになっています。

画像の読み込み

ファイルの用意

  1. 今回は下記の画像を読み込みます。
    画像描画で使うサンプル画像
  2. 画像ファイルは実行exeと同じディレクトリに配置しておいてください。
    同じディレクトリに画像を用意する

ファイルの読み込み処理

  1. 画像を読み込む関数を作ります。
    仕組みとしては一旦 Bitmap形式で読み込んだものをTexture2Dへ変換して出力します。
  2. 先ほどの関数を使い画像をテクスチャとして読み込みます。 
    // テクスチャ読み込み
var texture = CreateTexture(_device, "tex.jpg");
var textureView = new ShaderResourceView(_device, texture);

ポリゴンの生成

頂点データの定義

後で生成する頂点データの定義を事前に行います。

  1. シェーダー(HLSL)に渡すためのデータとして設定します。
    頂点データとして「何のデータを持たせてるか、何を意味しているのか」を定義します。

    頂点に位置と色の情報を持たせるため、InputElementを使って2つ定義しています。 そしてそれぞれのInputElementで「セマンティスク名、セマンティクスのインデックス番号値、データの型、オフセット値、スロット値」の順に設定しています。 

    // 入力用シグネチャを取得(シェーダー関数への入力用)
var passSignature = ShaderSignature.GetInputSignature(vertexShaderByteCode);
// バッファの構造であるLayoutを定義・生成
// 入力用シグネチャに渡すデータ定義
var signature_data = new[]
        {
            new InputElement("POSITION", 0, Format.R32G32B32A32_Float, InputElement.AppendAligned, 0),
            new InputElement("COLOR", 0, Format.R32G32B32A32_Float, InputElement.AppendAligned, 0),
            new InputElement("TEXCOORD", 0, Format.R32G32_Float, InputElement.AppendAligned, 0),
        };
// 入力用シグネチャに渡すデータのサイズ設定
int signature_size = Utilities.SizeOf() * 10;
// 入力用シグネチャ先と渡すデータ定義を元に、頂点バッファの構造であるLayout生成
var layout = new InputLayout(_device, passSignature, signature_data);

Layoutを定義・生成

  1. DirectX用のデバイスやシェーダーの設定など描画関連の設定を行います。
    詳細は過去の章を参照してください。
  2. テクスチャを使用するリソースとしてシェーダーに設定します。 
    // 使用するテクスチャリソースを設定する
context.PixelShader.SetShaderResource(0, textureView);

頂点データの宣言

頂点データの定義に沿ってデータを生成します。

  1. 頂点データを宣言と同時に生成して、頂点バッファのインスタンスを生成します。
    データの順番はInputLayoutで宣言した順となります。今回だと「位置、色、UV値」の順となります。 
    // 頂点データから頂点バッファをインスタンス化
var vertices = Buffer.Create(_device, BindFlags.VertexBuffer, new[]
{
    // Front：赤
    -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f,
    -1.0f,  1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
     1.0f,  1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f,
    -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f,
     1.0f,  1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f,
     1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,

    // Back：緑
    -1.0f, -1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
     1.0f,  1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,
    -1.0f,  1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f,
    -1.0f, -1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
     1.0f, -1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f,
     1.0f,  1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,

    // Top：青
    -1.0f, 1.0f, -1.0f,  1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f,
    -1.0f, 1.0f,  1.0f,  1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f,
     1.0f, 1.0f,  1.0f,  1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f,
    -1.0f, 1.0f, -1.0f,  1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f,
     1.0f, 1.0f,  1.0f,  1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f,
     1.0f, 1.0f, -1.0f,  1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f,

    // Bottom：黄色
    -1.0f,-1.0f, -1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
     1.0f,-1.0f,  1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,
    -1.0f,-1.0f,  1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f,
    -1.0f,-1.0f, -1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
     1.0f,-1.0f, -1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f,
     1.0f,-1.0f,  1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,

    // Left：紫
    -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f,
    -1.0f, -1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f,
    -1.0f,  1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f,
    -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f,
    -1.0f,  1.0f,  1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f,
    -1.0f,  1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f,

    // Right：水色
     1.0f, -1.0f, -1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f,
     1.0f,  1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f,
     1.0f, -1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f,
     1.0f, -1.0f, -1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f,
     1.0f,  1.0f, -1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f,
     1.0f,  1.0f,  1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f,
});
  2. 先ほどの頂点バッファインスタンスを描画対象に設定します。

ポリゴンの描画

  1. 3D座標変換を行うために使う変数を定義します。描画時に、3次元の座標から画面上の座標に変換する計算で使います。
    詳細は過去の章を参照してください。

コード

Program.cs

GameForm.cs

MiniCubeTex.fx