DirectX11 TriangleStrip和TriangleList區別

圖元類型 D3D11_PRIMITIVE_TOPOLOGY_TRIANGLESTRIP

Triangle Strips是D3D用來繪製三角形的一種方式，這種方式比Triangle list更加高效，因爲不用重複存儲三角形頂點。下面看一個例子，分析一下這兩種方式的不同。首先，確認一點，三角形的三個頂點的繪製順序是順時針。

現在我們要繪製一個矩形，在D3D中，最基本的幾何圖元是三角形，所以可用兩個三角形拼接成一個矩形，如下圖。

使用Triangle List繪製

triangle list的工作方式是每次取三個頂點作爲一組，繪製一個三角形。如果有n個三角形，那麼依次取1,2,3爲一組，4,5,6爲一組， i, i + 1, i + 2爲一組，如下圖，如果一共有n個頂點，那麼可以繪製n / 3個三角形。

所以爲了繪製上面的矩形，我們一共需要六個頂點，見下圖。V1，V2，V3繪製左上角的三角形，V2，V4，V3繪製右下角的三角形。這裏，V2和V3被重複定義了（或者說重複存儲了）。

 

定義頂點及繪製的核心代碼如下

struct VertexPosColor
{
	DirectX::XMFLOAT3 pos;
	DirectX::XMFLOAT4 color;
	static const D3D11_INPUT_ELEMENT_DESC inputLayout[2];
};

// 設置三角形頂點
VertexPosColor vertices[] =
{
	{ XMFLOAT3(-0.5f, 0.5f, 0.5f), XMFLOAT4(0.0f, 1.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(0.5f, 0.5f, 0.5f), XMFLOAT4(0.0f, 1.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(-0.5f, -0.5f, 0.5f), XMFLOAT4(1.0f, 0.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(0.5f, 0.5f, 0.5f), XMFLOAT4(0.0f, 1.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(0.5f, -0.5f, 0.5f), XMFLOAT4(0.0f, 0.0f, 1.0f, 1.0f) },
	{ XMFLOAT3(-0.5f, -0.5f, 0.5f), XMFLOAT4(1.0f, 0.0f, 0.0f, 1.0f) },
};

//設置圖元類型
m_pd3dImmediateContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);
// 繪製矩形
m_pd3dImmediateContext->Draw(6, 0);

 

使用Triangle Strip繪製

使用triangle strip則完全不必重複定義頂點，先來看看什麼是triangle strip，圖如下，實際上是一系列連着的三角形，即相鄰的兩個三角形有一條公用邊。這意味着有些頂點時可以重複利用的，我們不必爲每個三角形都指定獨立的三個頂點，如下圖，可以用七個頂點表示五個三角形。如果是triangle list方式，表示五個三角形則需要15個頂點。

triangle strip取三角形的方式略有不同，每次從編號爲i的位置開始依次取三個，i=1,2,3,4。。。也就是1,2,3爲一組，2,3,4爲一組。i, i + 1, i + 2爲一組，見下圖。如果有n個頂點，那麼可以繪製n - 2個三角形。

這種方式使得除了第一個和最後一個頂點外，所有的頂點都可以被重複利用，比如頂點V2，它既屬於第一個三角形V1V2V3，又屬於第二個三角形V2V3V4。所以爲了繪製上面的矩形，我們只需要四個頂點。V1, V2, V3繪製左上角的三角形，V2, V4, V3繪製右下角的三角形。這裏V2和V3是無需重複定義（或重複存儲）的。

定義頂點和繪製的代碼如下

struct VertexPosColor
{
	DirectX::XMFLOAT3 pos;
	DirectX::XMFLOAT4 color;
	static const D3D11_INPUT_ELEMENT_DESC inputLayout[2];
};

// 設置三角形頂點
VertexPosColor vertices[] =
{
	{ XMFLOAT3(-0.5f, 0.5f, 0.5f), XMFLOAT4(0.0f, 1.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(0.5f, 0.5f, 0.5f), XMFLOAT4(0.0f, 1.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(-0.5f, -0.5f, 0.5f), XMFLOAT4(1.0f, 0.0f, 0.0f, 1.0f) },
	{ XMFLOAT3(0.5f, -0.5f, 0.5f), XMFLOAT4(0.0f, 0.0f, 1.0f, 1.0f) },
};

//設置圖元類型
m_pd3dImmediateContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLESTRIP);
// 繪製矩形
m_pd3dImmediateContext->Draw(4, 0);

 

除了頂點可以重複利用外，還有一個重要的區別就是繪製時的back face culling選項，如果使用triangle strip繪製，那麼這個選項每繪製一個三角形就flip一次，什麼意思呢？也就是說如果第一個三角形以CCW方式剔除，那麼第二個三角形就以CW方式剔除，第三個三角形又以CCW方式剔除，第四個三角形以CW方式剔除，如此這般。。。這個特徵需要我們在定義頂點的時候小心，必須以“鋸齒”方式定義頂點纔可以。如下。這樣第一個三角形V1V2V3是順時針方向，可以繪製，第二個三角形V2V3V4是逆時針方向，也可以正確繪製。餘下類同。