DirectX 2019 ColorCube

Visual Studio 2019 で各面に色を設定した立方体を描画します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. Visual Studio 2019 で各面に色を設定した立方体を描画します。
    Visual Studio 2019 を起動して DirectX 11 アプリ(ユニバーサル Windows)を構築して下さい。
    プロジェクトの作成は Visual Studio 2019 DirectX を参照して下さい。
    コンパイル&実行するとカラーキューブが回転しながら描画され FPS が表示されます。
    前回作成した App1.sln(App2.sln) をダブルクリックして起動することも出来ます。
  2. カラーキューブを各面に色を設定した立方体に変更します。
    シェーダ関係はそのままで、ソースコードの修正は Sample3DSceneRenderer.cpp だけです。
    \Content\Sample3DSceneRenderer.cpp を修正します。
    頂点データの定義です。
    各面は3角形2個(6個の頂点データ)で構成されます。
    従って単純に定義すると頂点データの数は、6面*6頂点=36個になります。
            static const VertexPositionColor cubeVertices[] = 
            {
                { XMFLOAT3(-1.0f, 1.0f, 1.0f),   XMFLOAT3(1.0f, 0.0f, 0.0f) },  //0
                { XMFLOAT3(1.0f, 1.0f,  1.0f),   XMFLOAT3(1.0f, 0.0f, 0.0f) },
                { XMFLOAT3(1.0f, 1.0f,  -1.0f),  XMFLOAT3(1.0f, 0.0f, 0.0f) },
                { XMFLOAT3(-1.0f, 1.0f,  1.0f),  XMFLOAT3(1.0f, 0.0f, 0.0f) },
                { XMFLOAT3(1.0f, 1.0f,  -1.0f),  XMFLOAT3(1.0f, 0.0f, 0.0f) },
                { XMFLOAT3(-1.0f, 1.0f, -1.0f),  XMFLOAT3(1.0f, 0.0f, 0.0f) },
    
                { XMFLOAT3(-1.0f, -1.0f, -1.0f), XMFLOAT3(0.0f, 1.0f, 0.0f) },  //6
                { XMFLOAT3(1.0f, -1.0f,  -1.0f), XMFLOAT3(0.0f, 1.0f, 0.0f) },
                { XMFLOAT3(1.0f, -1.0f,  1.0f),  XMFLOAT3(0.0f, 1.0f, 0.0f) },
                { XMFLOAT3(-1.0f, -1.0f, -1.0f), XMFLOAT3(0.0f, 1.0f, 0.0f) },
                { XMFLOAT3(1.0f, -1.0f,  1.0f),  XMFLOAT3(0.0f, 1.0f, 0.0f) },
                { XMFLOAT3(-1.0f, -1.0f,  1.0f), XMFLOAT3(0.0f, 1.0f, 0.0f) },
    
                { XMFLOAT3(-1.0f, 1.0f,  1.0f),  XMFLOAT3(0.0f, 0.0f, 1.0f) },  //12
                { XMFLOAT3(-1.0f, 1.0f, -1.0f),  XMFLOAT3(0.0f, 0.0f, 1.0f) },
                { XMFLOAT3(-1.0f, -1.0f, -1.0f), XMFLOAT3(0.0f, 0.0f, 1.0f) },
                { XMFLOAT3(-1.0f, 1.0f,  1.0f),  XMFLOAT3(0.0f, 0.0f, 1.0f) },
                { XMFLOAT3(-1.0f, -1.0f, -1.0f), XMFLOAT3(0.0f, 0.0f, 1.0f) },
                { XMFLOAT3(-1.0f, -1.0f,  1.0f), XMFLOAT3(0.0f, 0.0f, 1.0f) },
    
                { XMFLOAT3(1.0f, -1.0f,  1.0f),  XMFLOAT3(1.0f, 1.0f, 0.0f) },  //18
                { XMFLOAT3(1.0f, -1.0f, -1.0f),  XMFLOAT3(1.0f, 1.0f, 0.0f) },
                { XMFLOAT3(1.0f, 1.0f,  -1.0f),  XMFLOAT3(1.0f, 1.0f, 0.0f) },
                { XMFLOAT3(1.0f, -1.0f,  1.0f),  XMFLOAT3(1.0f, 1.0f, 0.0f) },
                { XMFLOAT3(1.0f, 1.0f,  -1.0f),  XMFLOAT3(1.0f, 1.0f, 0.0f) },
                { XMFLOAT3(1.0f, 1.0f,  1.0f),   XMFLOAT3(1.0f, 1.0f, 0.0f) },
    
                { XMFLOAT3(-1.0f, 1.0f,  -1.0f), XMFLOAT3(0.0f, 1.0f, 1.0f) },  //24
                { XMFLOAT3(1.0f, 1.0f,  -1.0f),  XMFLOAT3(0.0f, 1.0f, 1.0f) },
                { XMFLOAT3(1.0f, -1.0f,  -1.0f), XMFLOAT3(0.0f, 1.0f, 1.0f) },
                { XMFLOAT3(-1.0f, 1.0f,  -1.0f), XMFLOAT3(0.0f, 1.0f, 1.0f) },
                { XMFLOAT3(1.0f, -1.0f,  -1.0f), XMFLOAT3(0.0f, 1.0f, 1.0f) },
                { XMFLOAT3(-1.0f, -1.0f, -1.0f), XMFLOAT3(0.0f, 1.0f, 1.0f) },
    
                { XMFLOAT3(-1.0f, -1.0f,  1.0f), XMFLOAT3(1.0f, 0.0f, 1.0f) },  //30
                { XMFLOAT3(1.0f, -1.0f,  1.0f),  XMFLOAT3(1.0f, 0.0f, 1.0f) },
                { XMFLOAT3(1.0f, 1.0f,  1.0f),   XMFLOAT3(1.0f, 0.0f, 1.0f) },
                { XMFLOAT3(-1.0f, -1.0f,  1.0f), XMFLOAT3(1.0f, 0.0f, 1.0f) },
                { XMFLOAT3(1.0f, 1.0f,  1.0f),   XMFLOAT3(1.0f, 0.0f, 1.0f) },
                { XMFLOAT3(-1.0f, 1.0f,  1.0f),  XMFLOAT3(1.0f, 0.0f, 1.0f) },
            };
    
    頂点 Index の定義です。
    頂点データを組み合わせて立方体を構成します。
    X-FILE のモデルを描画するときは、カリングモードを反転しているのですが、今回は Index を逆順に定義しました。
            static const unsigned short cubeIndices [] =
            {
                35,34,33,
                32,31,30,
                29,28,27,
                26,25,24,
                23,22,21,
                20,19,18,
                17,16,15,
                14,13,12,
                11,10,9,
                8,7,6,
                5,4,3,
                2,1,0,
            };
    
  3. この状態でコンパイル&実行すると各面に色を設定した立方体が回転しながら描画されます。
    但し、カラーキューブに比べてサイズが大きいので画面からはみ出します。
  4. モデルに合わせてカメラを設定します。
    カメラを引いて、少し上からモデルを映します。
    【修正前】
        static const XMVECTORF32 eye = { 0.0f, 0.7f, 1.5f, 0.0f };
    
    【修正後】
        static const XMVECTORF32 eye = { 0.0f, 2.0f, 4.0f, 0.0f };
    
  5. Windows 画面の「スタート」ボタンから[すべてのアプリ]を選ぶと今作製したアプリが登録されています。
    追加されたアイコンをクリックすると先ほど実行した画面が表示されます。
    必要がなければ右クリックからアンインストールして下さい。
    プロジェクトを作成したフォルダーにもアプリ(App1 など)のフォルダーが作成されています。
    必要がなければフォルダーごと削除して下さい。

超初心者のプログラム入門(DirectX Store)