DirectX 2017 ColorCube

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

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

プログラムの説明

  1. Visual Studio 2017 で各面に色を設定した立方体を描画します。
    シェーダ関係はそのままで、ソースコードの修正は Sample3DSceneRenderer.cpp だけです。
  2. Visual Studio 2017 を起動して DirectX 11 アプリ(ユニバーサル Windows)を構築して下さい。
    テンプレートが表示されないときは Visual Studio 2017 DirectX を参照して下さい。
    コンパイル&実行するとカラーキューブが回転しながら描画され FPS が表示されます。
  3. カラーキューブを各面に色を設定した立方体に変更します。
    \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,
            };
    
  4. この状態でコンパイル&実行すると各面に色を設定した立方体が回転しながら描画されます。
    但し、カラーキューブに比べてサイズが大きいので画面からはみ出します。
  5. モデルに合わせてカメラを設定します。
    カメラを引いて、少し上からモデルを映します。
    【修正前】
        static const XMVECTORF32 eye = { 0.0f, 0.7f, 1.5f, 0.0f };
    
    【修正後】
        static const XMVECTORF32 eye = { 0.0f, 2.0f, 4.0f, 0.0f };
    
  6. プロジェクトの詳しい説明は Win10 ColorCube を参照して下さい。

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