【Visual C++】游戏开发笔记 DirectX11 2D纹理映射知识全攻略.doc

 【Visual C++】游戏开发笔记三十 DirectX11 2D纹理映射知识全攻略
本系列文章由zhmxy555（毛星云）编写，转载请注明出处。

作者：毛星云    邮箱： happylifemxy@  

本节知识先是对DirectX11关于2D纹理映射方面基础知识的一个讲解，然后通过一个demo的创建过程来将学到的理论知识付诸实践。

一、引言

在之前我们提到过，纹理实际上就是映射到物体表面的数据。其实，纹理也可能是其他的一些信息片段，比如用于映射的常规映射值，用于控制透明度的alpha值，等等。
通常情况下，纹理是通过一个叫做纹理映射的过程来映射一幅图像到表面上的颜色值，这种功能能显著地增加所绘制场景的细腻感和真实感。
纹理和游戏开发中需要的其他数据一样，通常都是在运行时加载的。由于纹理是Direct3D重要的组成的部分，微软为我们提供了众多功能强大而丰富的Direct3D内建的函数，来处理纹理相关的操作。

二、基础知识讲解

1.纹理的加载

在Direct3D11中，我们通常使用D3DX11CreateTextureFromFile函数用于从硬盘文件中加载纹理。这个函数支持非常丰富的图像格式，比如BMP,PNG,以及DDS。D3DX11CreateTextureFromFile函数拥有六个变量，具有以下的函数原型：

[cpp] view plaincopyprint?
1. HRESULT D3DX11CreateTextureFromFile(  
2.   
3. ID3D11Device* pDevice,  
4.   
5. LPCTSTR pSrcFile,  
6.   
7. D3DX11_IMAGE_LOAD_INFO* pLoadInfo,  
8.   
9. ID3DX11ThreadPump* pPump,  
10.   
11. ID3D11Resource** ppTexture,  
12.   
13. HRESULT* pHResult  
14.   
15. );  

D3DX11CreateTextureFromFile函数的第一个的参数为ID3D11Device类型的指针变量。
第二个参数pSrcFile为被加载文件的文件路径和文件名。
第三个参数pLoadInfo为一个图形信息结构体。它为一个可选的参数，并允许我们通过指定CPU访问的标识、内部格式、宽度和高度来控制图像纹理的加载方式。
第四个参数pPump用于多线程加载纹理时的异步处理。
第五个参数ppTexture用是纹理对象被调用时这个函数创建出的地址。如果D3DX11CreateTextureFromFile函数调用成功，这个变量就会拥有一个现成的纹理供使用。
最后一个参数pHResult是指向线程返回值的指针。

若此线程的参数不为空，pHResult必须为一个有效的内存地址。在Direct3D中我们能够使用很多函数载入各种琳琅满目的图
像文件格式，下面我们对他们进行一个详细的列举：

Windows Bitmap (BMP)
Joint Photographic Expert Group—i.e., JPEG (JPG)
Portable Network Graphics (PNG)
Tagged Image Format (TIFF)
Graphics Interchange Format (GIF)
DirectDraw Surface (DDS)
Windows Media Player (WMP)

2.纹理接口

纹理接口通常用于管理一个特定类型的图像数据。目前Direct3D纹理接口主要有三种类型，他们分别是：
ID3D11Texture1D——用于1D或者条形的纹理
ID3D11Texture2D——用于2D数据，这也是最常用的纹理资源类型、
ID3D11Texture3D——用于表示3D数据的纹理资源类型
上述3种纹理资源类型都包含一个或者多个子资源。
而游戏开发中使用的大多数纹理类型基本上都为二维的，他们都需要转化为ID3D11Texture2D型资源后再使用。而这些子资源代表了纹理中不同的    MIP等级。
譬如Adobe’s Photoshop这类的图像编辑器是创造2D纹理的最得力帮手。

3. 纹理细节

在游戏开发的过程中，常常我们需要从加载的纹理中得到一些特定的信息，比如说维度或者像素格式。这时候隶属于ID3D11Texture2D中的GetDesc函数就可以派上用场了。这个函数的功能是为我们填充D3D11_TEXTURE2D_DESC结构体中的各种细节，从而通过这个结构体作为载体，有关的各类数据就一目了然了。

D3D11_TEXTURE2D_DESC是专用于2D纹理的纹理描述结构体家族中的一员。
对于其他的两个维度，Direct3D11为我们准备了D3D11_TEXTURE1D_DESC用于1D纹理，D3D11_TEXTURE3D_DESC用于3D纹理。

作为最常见的纹理，二维的D3D11_TEXTURE2D_DESC声明形式如下：

[cpp] view plaincopyprint?
1. typedef struct D3D11_TEXTURE2D_DESC {  
2.   
3. UINT Width;  
4.   
5. UINT Height;  
6.   
7. UINT MipLevels;  
8.   
9. UINT ArraySize;  
10.   
11. DXGI_FORMAT Format;  
12.   
13. DXGI_SAMPLE_DESC SampleDesc;  
14.   
15. D3D11_USAGE Usage;  
16.   
17. UINT BindFlags;  
18.   
19. UINT CPUAccessFlags;  
20.   
21. UINT MiscFlags;  
22.   
23. } D3D11_TEXTURE2D_DESC;  

三、DirectX11 2D纹理映射demo的创建 

这里，我们先介绍一下这个demo的组成结构：
如图，头文件有Dx11DemoBase.h以及Texture2DDemo.h
源文件有 Dx11DemoBase.cpp，Texture2DDemo.h以及main.cpp

在之前的TriangleDemo的基础上，我们再添加一个叫做TextureDemo的类，以及添加一个叫做colorMap_的D3D11ShaderResourceView类型的着色器资源视图和一个D3D11SamplerState类型的唤做colorMapSampler_ 的采样状态。
着色资源视图简单的来说是一个用于访问资源的对象。当我们加载纹理到内存中的时候，必须创建一个着色器资源视图来通过着色器获取数据，而这些数据会被绑定到输出程序集当中。着色器资源视图也有其他的作用，比如为DirectCompute提供异步运算时需要的数据，本节我们主要是介绍其在纹理方面的运用。ID3D11Texture2D代表数据的缓存，而着色器资源视图允许我们在着色器中查看这个缓存的各项数据。
采样器声明（sampler state）允许我们访问的纹理采样的状态信息。后面将对其做更多更详细的讲解。
TextureDemo类的头文件代码书写风格如下：

代码段一  TextureDemo.h 对TextureDemo类的轮廓书写

[cpp] view plaincopyprint?
1. #ifndef _TEXTURE_2D_DEMO_H_  
2. #define _TEXTURE_2D_DEMO_H_  
3.   
4. #include"Dx11DemoBase.h"  
5.   
6.   
7. class TextureDemo : public Dx11DemoBase  
8. {  
9.     public:  
10.         TextureDemo( );  
11.         virtual ~TextureDemo( );  
12.   
13.         bool LoadContent( );  
14.         void UnloadContent( );  
15.   
16.         void Update( float dt );  
17.         void Render( );  
18.   
19.     private:  
20.         ID3D11VertexShader* solidColorVS_;  
21.         ID3D11PixelShader* solidColorPS_;  
22.   
23.         ID3D11InputLayout* inputLayout_;  
24.         ID3D11Buffer* vertexBuffer_;  
25.   
26.         ID3D11ShaderResourceView* colorMap_;  
27.         ID3D11SamplerState* colorMapSampler_;  
28. };  
29.   
30. #endif  

由于我们正在执行纹理映射这项操作，我们需要对顶点结构体的代码进行更新，使其包含两个浮点型的变量。这项工作可由XMFLOAT2结构体来完成。

代码段二中展示了这个demo中顶点结构体，LoadContent,函数和 UnloadContent函数的写法

代码段二  顶点结构体以及 LoadContent和UnloadContent的书写

[cpp] view plaincopyprint?
1. struct VertexPos  
2.   
3. {  
4.   
5. XMFLOAT3 pos;  
6.   
7. XMFLOAT2 tex0;  
8.   
9. };  
10.   
11. bool TextureDemo::LoadContent( )  
12.   
13. {  
14.   
15. ... Load vertex Shader ...  
16.   
17. D3D11_INPUT_ELEMENT_DESC solidColorLayout[] =  
18.   
19. {  
20.   
21. { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT,  
22.   
23. 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },  
24.   
25. { "TEXCOORD", 0, DXGI_FORMAT_R32G32_FLOAT,  
26.   
27. 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 }  
28.   
29. };  
30.   
31. unsigned int totalLayoutElements = ARRAYSIZE( solidColorLayout );  
32.   
33. d3dResult = d3dDevice_->CreateInputLayout( solidColorLayout,  
34.   
35. totalLayoutElements, vsBuffer->GetBufferPointer( ),  
36.   
37. vsBuffer->GetBufferSize( ), &inputLayout_ );  
38.   
39. ... Load Pixel Shader ...  
40.   
41. VertexPos vertices[] =  
42.   
43. {  
44.   
45. { XMFLOAT3( 1.0f, 1.0f, 1.0f ), XMFLOAT2( 1.0f, 1.0f ) },  
46.   
47. { XMFLOAT3( 1.0f, -1.0f, 1.0f ), XMFLOAT2( 1.0f, 0.0f ) },  
48.   
49. { XMFLOAT3( -1.0f, -1.0f, 1.0f ), XMFLOAT2( 0.0f, 0.0f ) },  
50.   
51. { XMFLOAT3( -1.0f, -1.0f, 1.0f ), XMFLOAT2( 0.0f, 0.0f ) },  
52.   
53. { XMFLOAT3( -1.0f, 1.0f, 1.0f ), XMFLOAT2( 0.0f, 1.0f ) },  
54.   
55. { XMFLOAT3( 1.0f, 1.0f, 1.0f ), XMFLOAT2( 1.0f, 1.0f ) },  
56.   
57. };  
58.   
59. ... Create Vertex Buffer ...  
60.   
61. d3dResult = D3DX11CreateShaderResourceViewFromFile( d3dDevice_,  
62.   
63. "decal.dds", 0, 0, &colorMap_, 0 );  
64.   
65. if( FAILED( d3dResult ) )  
66.   
67. {  
68.   
69. DXTRACE_MSG( "Failed to load the texture image!" );  
70.   
71. return false;  
72.   
73. }  
74.   
75. D3D11_SAMPLER_DESC colorMapDesc;  
76.   
77. ZeroMemory( &colorMapDesc, sizeof( colorMapDesc ) );  
78.   
79. colorMapDesc.AddressU = D3D11_TEXTURE_ADDRESS_WRAP;  
80.   
81. colorMapDesc.AddressV = D3D11_TEXTURE_ADDRESS_WRAP;  
82.   
83. colorMapDesc.AddressW = D3D11_TEXTURE_ADDRESS_WRAP;  
84.   
85. colorMapDesc.ComparisonFunc = D3D11_COMPARISON_NEVER;  
86.   
87. colorMapDesc.Filter = D3D11_FILTER_MIN_MAG_MIP_LINEAR;  
88.   
89. colorMapDesc.MaxLOD = D3D11_FLOAT32_MAX;  
90.   
91. d3dResult = d3dDevice_->CreateSamplerState( &colorMapDesc,  
92.   
93. &colorMapSampler_ );  
94.   
95. if( FAILED( d3dResult ) )  
96.   
97. {  
98.   
99. DXTRACE_MSG( "Failed to create color map sampler state!" );  
100.   
101. return false;  
102.   
103. }  
104.   
105. return true;  
106.   
107. }  
108.   
109. void TextureDemo::UnloadContent( )  
110.   
111. {  
112.   
113. if( colorMapSampler_ ) colorMapSampler_->Release( );  
114.   
115. if( colorMap_ ) colorMap_->Release( );  
116.   
117. if( solidColorVS_ ) solidColorVS_->Release( );  
118.   
119. if( solidColorPS_ ) solidColorPS_->Release( );  
120.   
121. if( inputLayout_ ) inputLayout_->Release( );  
122.   
123. if( vertexBuffer_ ) vertexBuffer_->Release( );  
124.   
125. colorMapSampler_ = 0;  
126.   
127. colorMap_ = 0;  
128.   
129. solidColorVS_ = 0;  
130.   
131. solidColorPS_ = 0;  
132.   
133. inputLayout_ = 0;  
134.   
135. vertexBuffer_ = 0;  
136.   
137. }  

UnloadContent函数释放了新对象，而LoadContent函数进行了纹理图像的加载。我们可以使用Direct3D中的D3DX11CreateShaderResourceViewFromFile函数（这个函数名是不是略长啊，哈哈），来加载一个纹理然后在一个简单的调用之中创建着色器资源视图。这个函数在我们想毕其功于一役的时候，即希望加载一个纹理连着创建一个新的着色器资源视图一步到位的时候，非常的好用。
D3DX11CreateShaderResourceViewFromFile函数的变量和D3DX11CreateTextureFromFile函数的相似度很高，这员大将有以下原型：

[cpp] view plaincopyprint?
1. HRESULT D3DX11CreateShaderResourceViewFromFile(  
2.   
3. ID3D11Device* pDevice,  
4.   
5. LPCTSTR pSrcFile,  
6.   
7. D3DX11_IMAGE_LOAD_INFO* pLoadInfo,  
8.   
9. ID3DX11ThreadPump* pPump,  
10.   
11. ID3D11ShaderResourceView** ppShaderResourceView,  
12.   
13. HRESULT* pHResult  
14.   
15. );  

LoadContent函数代码的最后一段完成的功能是采样器声明（sampler state）的创建。为了创建一个采样器声明（sampler state）的对象，很容易就可以通过功能联想到函数名——CreateSamplerState。这个函数以采样器描述作为其一个参数。 而采样器描述拥有以下的声明：

[cpp] view plaincopyprint?
1. typedef struct D3D11_SAMPLER_DESC {  
2.   
3. D3D11_FILTER Filter;  
4.   
5. D3D11_TEXTURE_ADDRESS_MODE AddressU;  
6.   
7. D3D11_TEXTURE_ADDRESS_MODE AddressV;  
8.   
9. D3D11_TEXTURE_ADDRESS_MODE AddressW;  
10.   
11. FLOAT MipLODBias;  
12.   
13. UINT MaxAnisotropy;  
14.   
15. D3D11_COMPARISON_FUNC ComparisonFunc;  
16.   
17. FLOAT BorderColor[4];  
18.   
19. FLOAT MinLOD;  
20.   
21. FLOAT MaxLOD;  
22.   
23. } D3D11_SAMPLER_DESC;  

为了渲染我们的几何纹理，我们必须添加纹理资源以及设置采样器描述。这两项特殊的任务分别分配给PSSetShaderResources函数 以及 PSSetSamplers函数来完成，设置这些数据到像素着色器之中。PSSetShaderResources函数具有以下原型：

[cpp] view plaincopyprint?
1. void PSSetShaderResources(  
2.   
3. UINT StartSlot,  
4.   
5. UINT NumViews,  
6.   
7. ID3D11ShaderResourceView* const* ppShaderResourceViews  
8.   
9.     
10.   
11. );  

PSSetSamplers函数也以起始点StartSlot以及采样数量NumViews作为其参数。我们在之前demo里面关于Render的代码随着这节里面对这两个函数的加入，我们就可以看到更加出色的效果了。目前需要做的就是就修改着色器的渲染效果了。Texture Mappingdemo类的Render函数如下代码段X

代码段三 TextureDemo 类的render函数的书写

[cpp] view plaincopyprint?
1. void TextureDemo::Render( )  
2.   
3. {  
4.   
5. if( d3dContext_ == 0 )  
6.   
7. return;  
8.   
9. float clearColor[4] = { 0.0f, 0.0f, 0.25f, 1.0f };  
10.   
11. d3dContext_->ClearRenderTargetView( backBufferTarget_, clearColor );  
12.   
13. unsigned int stride = sizeof( VertexPos );  
14.   
15. unsigned int offset = 0;  
16.   
17. d3dContext_->IASetInputLayout( inputLayout_ );  
18.   
19. d3dContext_->IASetVertexBuffers( 0, 1, &vertexBuffer_, &stride, &offset );  
20.   
21. d3dContext_->IASetPrimitiveTopology( D3D11_PRIMITIVE_TOPOLOGY_  
22.   
23. TRIANGLELIST );  
24.   
25. d3dContext_->VSSetShader( colorMapVS_, 0, 0 );  
26.   
27. d3dContext_->PSSetShader( colorMapPS_, 0, 0 );  
28.   
29. d3dContext_->PSSetShaderResources( 0, 1, &colorMap_ );  
30.   
31. d3dContext_->PSSetSamplers( 0, 1, &colorMapSampler_ );  
32.   
33. d3dContext_->Draw( 6, 0 );  
34.   
35. swapChain_->Present( 0, 0 );  
36.   
37. }  

在着色器之中，如代码段四，我们拥有两个新的全局着色器对象，分别唤作colorMap_和colorSampler_。其中colorSampler_对象的类型为Texture2D，它可以用于2D 纹理之中，而colorSampler_为HLSL(High Level Shader Language高级着色器语言)类型的采样器声明。

为了将这些对象绑定到我们在Render函数中提供的着色器当中，我们需要使用中HLSL(High Level Shader Language高级着色器语言)中的register关键字。绑定第一个纹理输出我们采用t0来表示，其中t代表texture这个单词，0代表数量的索引，即第几个。同理，对于采样器声明，s代表sampler state这个词组，0代表第几个，则s0就代表第一个采样器。因为我们只有一种纹理和一种采样器声明，所以只需t0和s0即可。
着色器当中的另一个需要注意的地方是，我们必须更新顶点着色器以及像素着色器的输入结构来方便地获取纹理坐标。顶点着色器将从顶点缓存中取得纹理坐标，然后将其传递给像素着色器，以便像素着色器方便地访问这些数据。
之后，像素着色器会使用这些纹理坐标和纹理对象来读取颜色值。这一步可以调用HLSL Texture2D对象的Sample函数来完成。
最后提一点，由于我们是从一个2D纹理中读取数据的，则纹理坐标需为float2类型。

在这里列出着色器的构成代码：

代码段四  纹理映射demo中着色器的构成代码

[cpp] view plaincopyprint?
1. Texture2D colorMap_ : register( t0 );  
2.   
3. SamplerState colorSampler_ : register( s0 );  
4.   
5. struct VS_Input  
6.   
7. {  
8.   
9. float4 pos : POSITION;  
10.   
11. float2 tex0 : TEXCOORD0;  
12.   
13. };  
14.   
15. struct PS_Input  
16.   
17. {  
18.   
19. float4 pos : SV_POSITION;  
20.   
21. float2 tex0 : TEXCOORD0;  
22.   
23. };  
24.   
25. PS_Input VS_Main( VS_Input vertex )  
26.   
27. {  
28.   
29. PS_Input vsOut = ( PS_Input )0;  
30.   
31. vsOut.pos = vertex.pos;  
32.   
33. vsOut.tex0 = vertex.tex0;  
34.   
35. return vsOut;  
36.   
37. }  
38.   
39. float4 PS_Main( PS_Input frag ) : SV_TARGET  
40.   
41. {  
42.   
43. return colorMap_.Sample( colorSampler_, frag.tex0 );  
44.   
45. }  
46.   
47.    

到这一步，核心的代码都书写完毕了，为了观看的方便，浅墨在这里将最重头的Texture2DDemo.cpp贴出来（Texture2DDemo.h见代码段一）：

代码段五 Texture2DDemo.cpp实现代码

[cpp] view plaincopyprint?
1. #include"Texture2DDemo.h"  
2. #include<xnamath.h>  
3.   
4.   
5. struct VertexPos               //结构体  
6. {  
7.     XMFLOAT3 pos;  
8.     XMFLOAT2 tex0;  
9. };  
10.   
11.   
12. TextureDemo::TextureDemo( ) : solidColorVS_( 0 ), solidColorPS_( 0 ),      //构造函数  
13.                               inputLayout_( 0 ), vertexBuffer_( 0 ),  
14.                               colorMap_( 0 ), colorMapSampler_( 0 )  
15. {  
16.   
17. }  
18.   
19.   
20. TextureDemo::~TextureDemo( )  
21. {  
22.   
23. }  
24.   
25.   
26. bool TextureDemo::LoadContent( )  
27. {  
28.     ID3DBlob* vsBuffer = 0;  
29.   
30.     bool compileResult = CompileD3DShader( "TextureMap.fx", "VS_Main", "vs_4_0", &vsBuffer );  
31.   
32.     if( compileResult == false )  
33.     {  
34.         DXTRACE_MSG( "编译顶点着色器失败!" );  
35.         return false;  
36.     }  
37.   
38.     HRESULT d3dResult;  
39.   
40.     d3dResult = d3dDevice_->CreateVertexShader( vsBuffer->GetBufferPointer( ),  
41.         vsBuffer->GetBufferSize( ), 0, &solidColorVS_ );  
42.   
43.     if( FAILED( d3dResult ) )  
44.     {  
45.         DXTRACE_MSG( "创建顶点着色器失败!" );  
46.   
47.         if( vsBuffer )  
48.             vsBuffer->Release( );  
49.   
50.         return false;  
51.     }  
52.   
53.     D3D11_INPUT_ELEMENT_DESC solidColorLayout[] =  
54.     {  
55.         { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },  
56.         { "TEXCOORD", 0, DXGI_FORMAT_R32G32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 }  
57.     };  
58.   
59.     unsigned int totalLayoutElements = ARRAYSIZE( solidColorLayout );  
60.   
61.     d3dResult = d3dDevice_->CreateInputLayout( solidColorLayout, totalLayoutElements,  
62.         vsBuffer->GetBufferPointer( ), vsBuffer->GetBufferSize( ), &inputLayout_ );  
63.   
64.     vsBuffer->Release( );  
65.   
66.     if( FAILED( d3dResult ) )  
67.     {  
68.         DXTRACE_MSG( "创建输入布局失败!" );  
69.         return false;  
70.     }  
71.   
72.     ID3DBlob* psBuffer = 0;  
73.   
74.     compileResult = CompileD3DShader( "TextureMap.fx", "PS_Main", "ps_4_0", &psBuffer );  
75.   
76.     if( compileResult == false )  
77.     {  
78.         DXTRACE_MSG( "像素着色器编译失败!" );  
79.         return false;  
80.     }  
81.   
82.     d3dResult = d3dDevice_->CreatePixelShader( psBuffer->GetBufferPointer( ),  
83.         psBuffer->GetBufferSize( ), 0, &solidColorPS_ );  
84.   
85.     psBuffer->Release( );  
86.   
87.     if( FAILED( d3dResult ) )  
88.     {  
89.         DXTRACE_MSG( "创建像素着色器失败!" );  
90.         return false;  
9