ポリゴン描画

この章ではポリゴンの描画方法について解説します。
このページの内容は、3D描画時の初期設定まで終わっていることが前提です。

実行結果

ポリゴンの生成

頂点データの定義

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

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

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

    // バッファの構造であるLayoutを定義・生成
    var layout = new InputLayout(
        _device,
        ShaderSignature.GetInputSignature(vertexShaderByteCode),
        new[]
            {
                new InputElement("POSITION", 0, Format.R32G32B32A32_Float, 0, 0),
                new InputElement("COLOR", 0, Format.R32G32B32A32_Float, 16, 0)
            });
    

    セマンティクス名

    シェーダーに渡す値をどう使うか用途の応じた種類があります。「POSITION(位置)」「COLOR(色)」「NORMAL(法線)」「TEXCOORD0(1番目UV値)」等です。

    セマンティスクのインデックス番号

    セマンティクスの何番目のものとして定義しているか区別・指定するものです。例えば幾つかのセマンティクスをひとまとめにしたデータを渡した場合に何番目部分を使うのか指定したりします。

    データの型

    値として使う型・大きさ・順番などを指定するものです。どちらも32bit=4byteでRGBAの4種類定義しています。よってサイズは、4byte×RGBA(4種類)=16byteとなります。

    オフセット値

    現在のInputElement要素の定義位置を指定します。データの型に合わせたサイズ分、開始位置をズラしていく(オフセット値を指定する)ことになります。

    スロット値

    入力アセンブラーを識別する値(0~15)です。今回は使用しません。

頂点データの宣言

  1. 頂点データを宣言と同時に生成して、頂点バッファのインスタンスを生成します。
    書き方はいくつかあり、Vector4float形式を状況や好みに合わせてお使いください。
    この章のサンプルコードではVector4形式、後の章ではfloat形式を使っています。

    1. Vector4形式
      // 頂点データから頂点バッファをインスタンス化
      var vertices = SharpDX.Direct3D11.Buffer.Create(_device, BindFlags.VertexBuffer, new[]
                            {
                                new Vector4(0.0f, 0.5f, 0.5f, 1.0f), new Vector4(1.0f, 0.0f, 0.0f, 1.0f),
                                new Vector4(0.5f, -0.5f, 0.5f, 1.0f), new Vector4(0.0f, 1.0f, 0.0f, 1.0f),
                                new Vector4(-0.5f, -0.5f, 0.5f, 1.0f), new Vector4(0.0f, 0.0f, 1.0f, 1.0f)
                            });
      
    2. float形式
      // 頂点データから頂点バッファをインスタンス化
      var vertices = SharpDX.Direct3D11.Buffer.Create(_device, BindFlags.VertexBuffer, new[]
                            {
                                 0.0f,  0.5f, 0.5f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f,
                                 0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f,
                                -0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f,
                            });
      

    要素の順番はInputLayoutで宣言した順となります。今回だと「位置、色」の順となります。
    個別のデータは、InputElement要素の「データの型」です。そのためこのコードでは「色」は前から「RGBA」です。

  2. 先ほどの頂点バッファインスタンスを描画対象に設定します。

ポリゴンの描画

  1. 3D描画を開始します。描画は毎フレーム行うためMainLoop()内で行ってください。
    アクセスしやすいように一時変数で定義します。
    var context = _device.ImmediateContext;
    
  2. 画面を初期化します。
    今回は背景を黒で初期化しています。
    // 描画対象を指定色で初期化する
    context.ClearRenderTargetView(_RenderTarget3D, SharpDX.Color.Black);
    
  3. 3D描画でポリゴンを描画します。
    Draw()では「頂点データの宣言」で作った頂点数と開始する頂点番号の2つを指定してください。
    今回は、0番目から3つ頂点を描画に使うためDraw(3, 0)と指定しています。
    // 指定した頂点バッファを描画する
    context.Draw(3, 0);
    
  4. 描画したポリゴン(バックバッファにキューされたバッファ)を画面に反映します。
    // 描画を反映する
    _SwapChain.Present(0, PresentFlags.None);
    

コード

Program.cs

GameForm.cs

MiniTri.fx

遂に画面にポリゴンを描画できましたね。次からはポリゴンにテクスチャを張った描画などに移っていきます。