Win10 Triangle

Windows10 DirectX3D で Triangle の座標を定義して描画します。

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

カラーキューブの描画

  1. DirectX3D で Triangle を描画する前段階として、カラーキューブを描画します。
    Win10 Base を参照して「Windows10 空のプロジェクト」をコピーして下さい。
    プロジェクトの名前は App1 になっています。
  2. Win10 Template から DirectX 11 アプリ(ユニバーサル Windows)を参照してカラーキューブ関係のファイルを Content\ にコピーして下さい。
    App1 を選択して[追加][既存の項目]からプロジェクトに追加します。
    App1\Content\Sample3DSceneRenderer.cpp
    App1\Content\Sample3DSceneRenderer.h
    App1\Content\SamplePixelShader.hlsl
    App1\Content\SampleVertexShader.hlsl
    App1\Content\ShaderStructures.h
  3. App1Main.h を選択して Sample3DSceneRenderer.h を取り込んで、m_sceneRenderer を定義します。
    #include "Content\Sample3DSceneRenderer.h"
    
            ・・・
    
            // TODO: これを独自のコンテンツ レンダラーで置き換えます。
            std::unique_ptr m_sceneRenderer;
    
  4. App1Main.cpp で Sample3DSceneRenderer Class を使ってカラーキューブを描画します。
    DirectX 11 アプリ(ユニバーサル Windows)を参照して m_sceneRenderer 関係のソースコードを追加して下さい。
  5. コンパイル&実行してカラーキューブの描画を確認します。
    カラーキューブの描画がうまく動かないときは DirectX 11 アプリ(ユニバーサル Windows)から作成する方法が簡単です。
    Win10 Template から DirectX 11 アプリ(ユニバーサル Windows) を参照して下さい。
    FPS の表示を削除すれば完成ですが、FPS が表示されていても実行に差支えありません。

Triangle の描画

  1. カラーキューブが描画出来たら Triangle(三角形)を描画するのは簡単です。
    Sample3DSceneRenderer.cpp を修正して下さい。
    1. 【修正前】カラーキューブの頂点の定義。
      		// メッシュの頂点を読み込みます。各頂点には、位置と色があります。
      		static const VertexPositionColor cubeVertices[] = 
      		{
      			{XMFLOAT3(-0.5f, -0.5f, -0.5f), XMFLOAT3(0.0f, 0.0f, 0.0f)},
      			{XMFLOAT3(-0.5f, -0.5f,  0.5f), XMFLOAT3(0.0f, 0.0f, 1.0f)},
      			{XMFLOAT3(-0.5f,  0.5f, -0.5f), XMFLOAT3(0.0f, 1.0f, 0.0f)},
      			{XMFLOAT3(-0.5f,  0.5f,  0.5f), XMFLOAT3(0.0f, 1.0f, 1.0f)},
      			{XMFLOAT3( 0.5f, -0.5f, -0.5f), XMFLOAT3(1.0f, 0.0f, 0.0f)},
      			{XMFLOAT3( 0.5f, -0.5f,  0.5f), XMFLOAT3(1.0f, 0.0f, 1.0f)},
      			{XMFLOAT3( 0.5f,  0.5f, -0.5f), XMFLOAT3(1.0f, 1.0f, 0.0f)},
      			{XMFLOAT3( 0.5f,  0.5f,  0.5f), XMFLOAT3(1.0f, 1.0f, 1.0f)},
      		};
      
      【修正後】Triangle の頂点データの定義。
      Triangle の色は RGB の順で黄色(1.0f, 1.0f, 0.0f) に設定されています。
      	static const VertexPositionColor cubeVertices[] = 
      	{
      		{XMFLOAT3(-0.5f, -0.5f, 0.0f), XMFLOAT3(1.0f, 1.0f, 0.0f)},
      		{XMFLOAT3( 0.0f,  0.5f, 0.0f), XMFLOAT3(1.0f, 1.0f, 0.0f)},
      		{XMFLOAT3( 0.5f, -0.5f, 0.0f), XMFLOAT3(1.0f, 1.0f, 0.0f)},
      	};
      
    2. 【修正前】メッシュのインデックス定義。
      		// メッシュのインデックスを読み込みます。インデックスの 3 つ 1 組の値のそれぞれは、
      		// 画面上に描画される三角形を表します。
      		static const unsigned short cubeIndices [] =
      		{
      			0,2,1, // -x
      			1,2,3,
      
      			4,5,6, // +x
      			5,7,6,
      
      			0,1,5, // -y
      			0,5,4,
      
      			2,6,7, // +y
      			2,7,3,
      
      			0,4,6, // -z
      			0,6,2,
      
      			1,3,7, // +z
      			1,7,5,
      		};
      
      【修正後】Triangle のインデックス定義。
      		// メッシュのインデックス 0, 1, 2 三角形を表します。
      		static const unsigned short cubeIndices [] =
      		{
      			0, 1, 2,
      		};
      
  2. 頂点データの形式は自動生成したときと変わらないので、シェーダ関係はそのまま使えます。
    コンパイル&実行すると Triangle(平面の三角形)が回転しながら描画されます。
    ポリゴンの描画はバックサーフェースカリングされていて、三角形が裏面になると描画されなくなります。
    カリングの説明は Windows Guid から[3Dグラフィックス][カリングモード]を参照して下さい。

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