Windows 8 Directx 開發學習筆記（十一）地形紋理貼圖

前一篇實現木箱貼圖時，木箱的六個面都正好用一整張紋理圖，即六個面的紋理座標均在[0，1]內。然而在爲比較大的模型貼圖時，像山峯河谷模型，如果只用一張紋理圖，那麼每個三角形只得到幾個紋理元素，無法爲提供足夠高的分辨率。這時可以在模型表面上平鋪紋理貼圖，像給牆面貼磁磚一樣，只需要知道一個單位的貼圖，就能鋪滿整個表面，從而獲得較高的分辨率。實現起來其實很簡單，只要變換紋理座標的範圍，同時將紋理尋址模式設置爲重複即可。

紋理座標範圍變換有兩種方式，很簡單，如圖1：

其中x,y是原始紋理座標，爲了能與4*4的變換矩陣相乘，將其擴展爲4元向量。等號左邊是一種變換方式，使用變換矩陣進行紋理座標變換，可用GPU計算。等號右邊是第二種變換方式，直接生成變換後的紋理座標，由CPU計算。本文選擇的是第一種變換方式。

下面就開始給學習筆記（九）實現的山峯和水面模型貼圖。

依然是先修改HLSL代碼。在頂點着色器的輸入輸出結構中添加用於存儲紋理座標的成員tex。並在ModelViewProjectionConstantBuffer裏添加texTransform成員，用於存儲縮放和平移變換矩陣。

struct VertexShaderInput
{
    float3 pos : POSITION;
    float3 normal : NORMAL;
    float2 tex : TEXCOOD;
};
 
struct VertexShaderOutput
{
    float4 posH : SV_POSITION;
    float3 posW   : POSITION;
    float3 normal : NORMAL;
    float2 tex : TEXCOOD;
};
 
cbuffer ModelViewProjectionConstantBuffer : register(b0)
{
    matrix model;
    matrix view;
    matrix projection;
    matrix texTransform;
};

變換紋理座標時只要在main方法中添加下面的語句即可：

// 紋理座標變換
output.tex = mul(float4(input.tex, 0.0f, 1.0f),texTransform).xy;

在像素着色器中要定義採樣器和紋理資源，並更改輸入結構體，與頂點着色器的輸出對應。

SamplerState samplerLinear : register(s0);
Texture2D texDiffuse : register(t0);
 
struct PixelShaderInput
{
    float4 posH : SV_POSITION;
    float3 posW : POSITION;
    float3 normal : NORMAL;
    float2 tex : TEXCOOD;
};

爲了減少更改，在main方法中還是使用Material結構進行光照計算，只是Diffuse成員由紋理採樣獲得。

Material textureMat = gMaterial;
textureMat.Diffuse = texDiffuse.Sample(samplerLinear,input.tex);

         HLSL代碼修改至此完成，接下來就要修改C++代碼。

結構先行，修改Directl3DBase.h中的頂點結構體和常量緩衝區定義，保證它們的結構和頂點着色器中定義的一致。

struct VertexPosition
{
    DirectX::XMFLOAT3 pos;
    DirectX::XMFLOAT3 normal;
    DirectX::XMFLOAT2 tex;
};
struct ModelViewProjectionConstantBuffer
{
    DirectX::XMFLOAT4X4 model;
    DirectX::XMFLOAT4X4 view;
    DirectX::XMFLOAT4X4 projection;
    DirectX::XMFLOAT4X4 gTexTransform;
};

由於頂點結構體改變，HillModel和WaterModel裏頂點初始化代碼需要修改。HillModel的Initialize方法裏，頂點初始化代碼修改如下：

const float dx = 1.0f;
const float du = 1.0f/(xRange-1);
const float dv = 1.0f/(zRange-1);
 
VertexPosition *Vertices = new VertexPosition[xRange*zRange];
 
for(int row=0; row<zRange; ++row)
{
    float zPos = row*dx;
 
    for(int col=0;col<xRange; ++col)
    {
       float xPos = col*dx;
       float yPos = 0.3f *(zPos*sinf(0.1f*xPos) + xPos*cosf(0.1f*zPos));
       Vertices[xRange*row+ col].pos = XMFLOAT3(xPos, yPos, zPos);
       Vertices[xRange*row+ col].normal = GetHillNormal(xPos, zPos);
       Vertices[xRange*row+ col].tex.x = row*du;
       Vertices[xRange*row+ col].tex.y = col*dv;
    }
}

du和dv可保證生成的紋理座標正好在[0,1]範圍內，目的是方便理解縮放比例，並不是必須的。WaterModel生成紋理座標的過程與上面類似，是在Update方法中進行的。

// 更新頂點緩衝區
const float du = 1.0f/xRange;
const float dv = 1.0f/zRange;
 
for(uint32 i = 0; i < m_vertexCount; ++i)
{
    vertex[i].pos =mCurrSolution[i];
    vertex[i].tex.x= (i/xRange)*du;
    vertex[i].tex.y= (i%zRange)*dv;
    vertex[i].normal= mNormal[i];
}

這裏雖然每次更新都要重新計算一樣的紋理座標，效率很低，不過鑑於規模小，方便理解就直接修改了。

完成以上工作後就可以開始載入紋理。與木箱貼圖一樣，向工程中添加WICTextureLoader的頭文件和源文件。然後在Renderer類裏添加以下成員，保存兩種紋理資源，分別代表陸地和水面。

ID3D11Resource* tex;
Microsoft::WRL::ComPtr<ID3D11ShaderResourceView> m_LandSRV;
Microsoft::WRL::ComPtr<ID3D11ShaderResourceView> m_WaterSRV;
Microsoft::WRL::ComPtr<ID3D11SamplerState> m_Sampler;

然後在CreateDeviceResources方法中載入並初始化紋理資源，初始化採樣器，當然還要修改輸入佈局：

const D3D11_INPUT_ELEMENT_DESC vertexDesc[] =
    {
       { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0,  D3D11_INPUT_PER_VERTEX_DATA, 0 },
       { "NORMAL",   0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 },
       { "TEXCOOD",  0, DXGI_FORMAT_R32G32_FLOAT,    0, 24, D3D11_INPUT_PER_VERTEX_DATA, 0 },
    };
 
……
 
auto createTexTask = (createPSTask &&createVSTask).then([this] () {
    // 載入紋理資源
    DX::ThrowIfFailed(
       CreateWICTextureFromFile(
       m_d3dDevice.Get(),
       m_d3dContext.Get(),
       L"Texture/grass.jpg",
       &tex,
       m_LandSRV.GetAddressOf()
       )
       );
 
    DX::ThrowIfFailed(
       CreateWICTextureFromFile(
       m_d3dDevice.Get(),
       m_d3dContext.Get(),
       L"Texture/water.jpg",
       &tex,
       m_WaterSRV.GetAddressOf()
       )
       );
 
    // 初始化採樣器
    D3D11_SAMPLER_DESC samplerDesc;
    samplerDesc.Filter= D3D11_FILTER_MIN_MAG_MIP_LINEAR;
    samplerDesc.AddressU= D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.AddressV= D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.AddressW= D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.MipLODBias= 0;
    samplerDesc.MaxAnisotropy= 1;
    samplerDesc.ComparisonFunc= D3D11_COMPARISON_NEVER;
    samplerDesc.MinLOD= -3.402823466e+38F; // -FLT_MAX
    samplerDesc.MaxLOD= 3.402823466e+38F; // FLT_MAX
 
    DX::ThrowIfFailed(
       m_d3dDevice->CreateSamplerState(
       &samplerDesc,
       m_Sampler.GetAddressOf()
       )
       );
});

初始化完成後，就能在Render方法設置並使用紋理資源。

// 設置紋理採樣器
m_d3dContext->PSSetSamplers(
   0,
   1,
   m_Sampler.GetAddressOf()
   );
 
// 設置陸地紋理
m_d3dContext->PSSetShaderResources(
    0,
    1,
    m_LandSRV.GetAddressOf()
    );
 
// 設置陸地紋理縮放
XMMATRIX landScale = XMMatrixScaling(5.0f, 5.0f, 0.0f);
XMStoreFloat4x4(&m_constantBufferData.gTexTransform,XMMatrixTranspose(landScale));
 
// 設置陸地材質
m_constantLightBufferData.gMaterial= m_landMat;
 
……
 
// 設置水面紋理
m_d3dContext->PSSetShaderResources(
    0,
    1,
    m_WaterSRV.GetAddressOf()
    );
 
// 設置水面紋理縮放
XMMATRIX waterScale = XMMatrixScaling(5.0f, 5.0f, 0.0f);
XMStoreFloat4x4(&m_constantBufferData.gTexTransform,XMMatrixTranspose(waterScale));
 
// 設置水面材質
m_constantLightBufferData.gMaterial = m_wavesMat;

DirectX裏包含多個生成變換矩陣的方法，如上面的XMMatrixScaling方法生成縮放變換矩陣，後面將用到的XMMatrixTranslation方法可以生成平移變換矩陣。另外注意每次設置好紋理材質後，不但要調用UpdateSubresource方法更新m_constantLightBuffer，還要用它更新m_constantBuffer，因爲紋理縮放矩陣是ModelViewProjectionConstantBuffer的成員。

圖1載入的是grass紋理：

圖2載入的是rock紋理：

以上兩個模型中，水面紋理是不變的，而且沒有流動的效果。簡單的流動效果可以通過紋理座標隨時間偏移實現。

在Renderer類裏添加偏移量成員：

XMFLOAT2 m_waterTexOffset;

在Update方法裏添加代碼，讓偏移量隨時間變化。

// 更新紋理偏移量
m_waterTexOffset.y += 0.1f*timeDelta;
m_waterTexOffset.x += 0.1f*timeDelta;

然後在Render方法中使用偏移量生成平移變換矩陣，並與縮放變換矩陣相乘，這樣水面紋理座標就會保持平鋪效果，並隨時間平移，實現類似流動的效果：

// 設置水面紋理縮放和偏移量
XMMATRIX waterScale = XMMatrixScaling(5.0f, 3.0f, 0.0f);
XMMATRIX waterOffset = XMMatrixTranslation(m_waterTexOffset.x,m_waterTexOffset.y, 0.0f);
XMStoreFloat4x4(&m_constantBufferData.gTexTransform,XMMatrixTranspose(waterScale*waterOffset));

 本篇文章的源代碼

 Direct3DApp_HillWaveTexture