【Visual C 】游戲開發(fā)筆記二十九 一步一步教你用優(yōu)雅的DirectD代碼畫一個(gè)三角形

1、 HYPERLINK /zhmxy555/article/details/7774929 【Visual C+】游戲開發(fā)筆記二十九 一步一步教你用優(yōu)雅的Direct3D11代碼畫一個(gè)三角形本系列文章由zhmxy555（毛星云）編寫，轉(zhuǎn)載請(qǐng)注明出處。 HYPERLINK /zhmxy555/article/details/7774929 /zhmxy555/article/details/7774929作者：毛星云 郵箱： happylifemxy 這個(gè)demo演示的效果是用Direct3D11在屏幕上渲染一個(gè)三角形，當(dāng)然是通過這個(gè)demo進(jìn)一步鞏固和學(xué)習(xí)Direct3D11，而不是單單為了畫一

2、個(gè)三角形這么簡(jiǎn)單。正如之前所說，這個(gè)demo是建立在筆記二十八中講解的D3D BlankWindows Demo之上的。那么，我們就開門見山，直入正題吧。一、 載入幾何體我們知道，為了渲染幾何圖形，我們需要一個(gè)頂點(diǎn)緩存，一個(gè)描述頂點(diǎn)布局的輸入層，以及一系列的著色器，自DirectX10以來，著色器開始作為圖形渲染的基礎(chǔ)組成部分，在這個(gè)demo之中我們會(huì)指定頂點(diǎn)著色器與像素著色器，渲染一種簡(jiǎn)單的純色表面。后面我們將延伸的講解如何拓展使用這種效果來在表面映射圖形紋理。下面就開始進(jìn)行這個(gè)demo的書寫：這個(gè)demo的核心內(nèi)容當(dāng)然是一個(gè)叫做TriangleDemo的類，我們?yōu)檫@個(gè)類定義幾個(gè)成員變量，他

3、們分別是ID3D11VertexShader類型的取名為solidColorVS_的變量，一個(gè)ID3D11PixelShader類型的喚作solidColorPS的變量。一個(gè)ID3D11InputLayout類型的喚作inputLayout_的變量，以及一個(gè)ID3D11Buffer類型的叫做vertexBuffer_的變量。下面就是TriangleDemo.h頭文件的源代碼，簡(jiǎn)單的勾勒出了本文主角TriangleDemo類的輪廓：代碼段一 TriangleDemo.h頭文件cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain

4、view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?#includeDx11DemoBase.hclassTriangleDemo:publicDx11DemoBasepublic:TriangleDemo();virtualTriangleDemo();boolLoadContent();voidUn

5、loadContent();voidUpdate(floatdt);voidRender();private:ID3D11VertexShader*solidColorVS_;ID3D11PixelShader*solidColorPS_;ID3D11InputLayout*inputLayout_;ID3D11Buffer*vertexBuffer_;頂點(diǎn)我們采用一個(gè)簡(jiǎn)單的三分量式的浮點(diǎn)型結(jié)構(gòu)體，在XNA Math library中一個(gè)叫做XMFLOAT3的結(jié)構(gòu)體可以勝任這項(xiàng)殊榮。接下來，開始豐富我們的TriangleDemo類，我們?cè)诖a段二中書寫頂點(diǎn)結(jié)構(gòu)體VertexPos和Triang

6、leDemo的類的構(gòu)造函數(shù)以及析構(gòu)函數(shù)代碼段二 TriangleDemo 頂點(diǎn)結(jié)構(gòu)體, 構(gòu)造函數(shù)和析構(gòu)函數(shù).cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?#includeTri

7、angleDemo.h#includestructVertexPosXMFLOAT3pos;TriangleDemo:TriangleDemo():solidColorVS_(0),solidColorPS_(0),inputLayout_(0),vertexBuffer_(0)TriangleDemo:TriangleDemo()下面繼續(xù)豐富我們的TriangleDemo類，在代碼段三中我們進(jìn)行UnloadContent函數(shù)的書寫，顧名思義，UnloadContent是進(jìn)行unload content工作的，與后面將書寫的LoadContent函數(shù)相對(duì)應(yīng)。代碼段三 TriangleDemo類

8、的UnloadContent函數(shù)的書寫cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?voidTriangleDemo:UnloadContent()if(solidColorV

9、S_)solidColorVS_-Release();if(solidColorPS_)solidColorPS_-Release();if(inputLayout_)inputLayout_-Release();if(vertexBuffer_)vertexBuffer_-Release();solidColorVS_=0;solidColorPS_=0;inputLayout_=0;vertexBuffer_=0;順理成章的，下一步便是LoadContent函數(shù)的書寫。這個(gè)函數(shù)由頂點(diǎn)著色器載入，在文件SolidGreenColor.fx中可以查看。一旦頂點(diǎn)著色器的源代碼編譯完成，著色器便創(chuàng)

10、建一個(gè)CreateVertexShader函數(shù)的調(diào)用，我們接著創(chuàng)建頂點(diǎn)格式。由于頂點(diǎn)著色器與頂點(diǎn)格式相關(guān)聯(lián)，所以我們還需要將頂點(diǎn)著色器加載到內(nèi)存中。創(chuàng)建完頂點(diǎn)著色器和輸入格式后，下一步我們創(chuàng)建像素著色器。下面這段代碼實(shí)現(xiàn)了LoadContent方法的一半的功能：代碼段四 LoadContent函數(shù)著色器載入代碼cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy

11、555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?boolTriangleDemo:LoadContent()ID3DBlob*vsBuffer=0;boolcompileResult=CompileD3DShader(SolidGreenColor.fx,VS_Main,vs_4_0,&vsBuffer);if(compileResult=false)MessageBox(0,載入頂點(diǎn)著色器錯(cuò)誤!,編譯錯(cuò)誤,MB_OK);returnfalse;HRESULTd

12、3dResult;d3dResult=d3dDevice_-CreateVertexShader(vsBuffer-GetBufferPointer(),vsBuffer-GetBufferSize(),0,&solidColorVS_);if(FAILED(d3dResult)if(vsBuffer)vsBuffer-Release();returnfalse;D3D11_INPUT_ELEMENT_DESCsolidColorLayout=POSITION,0,DXGI_FORMAT_R32G32B32_FLOAT,0,0,D3D11_INPUT_PER_VERTEX_DATA,0;uns

13、ignedinttotalLayoutElements=ARRAYSIZE(solidColorLayout);d3dResult=d3dDevice_-CreateInputLayout(solidColorLayout,totalLayoutElements,vsBuffer-GetBufferPointer(),vsBuffer-GetBufferSize(),&inputLayout_);vsBuffer-Release();if(FAILED(d3dResult)returnfalse;ID3DBlob*psBuffer=0;compileResult=CompileD3DShade

14、r(SolidGreenColor.fx,PS_Main,ps_4_0,&psBuffer);if(compileResult=false)MessageBox(0,載入像素著色器錯(cuò)誤!,編譯錯(cuò)誤,MB_OK);returnfalse;d3dResult=d3dDevice_-CreatePixelShader(psBuffer-GetBufferPointer(),psBuffer-GetBufferSize(),0,&solidColorPS_);psBuffer-Release();if(FAILED(d3dResult)returnfalse;./后接函數(shù)的下半段CompileD3DS

15、hader相關(guān)的代碼在代碼段五中進(jìn)行了演繹，這段代碼巧妙地被分離于LoadContent之外，這樣在加載多個(gè)不同的著色效果的時(shí)候便可以避免大段大段的冗余代碼：代碼段五 CompileShader 函數(shù)的實(shí)現(xiàn)方法cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK

16、 /zhmxy555/article/details/7774929 o ? ?boolDx11DemoBase:CompileD3DShader(char*filePath,char*entry,char*shaderModel,ID3DBlob*buffer)DWORDshaderFlags=D3DCOMPILE_ENABLE_STRICTNESS;#ifdefined(DEBUG)|defined(_DEBUG)shaderFlags|=D3DCOMPILE_DEBUG;#endifID3DBlob*errorBuffer=0;HRESULTresult;result=D3DX11Com

17、pileFromFile(filePath,0,0,entry,shaderModel,shaderFlags,0,0,buffer,&errorBuffer,0);if(FAILED(result)if(errorBuffer!=0)OutputDebugStringA(char*)errorBuffer-GetBufferPointer();errorBuffer-Release();returnfalse;if(errorBuffer!=0)errorBuffer-Release();returntrue;上面我們介紹了上半段LoadContent函數(shù)的構(gòu)成，而下半段LoadConten

18、t函數(shù)主要實(shí)現(xiàn)了頂點(diǎn)緩存的創(chuàng)建。這段代碼行文思路很明朗，首先定義一個(gè)簡(jiǎn)單的三角形，沿X軸與Y軸都是0.5f（半個(gè)單位的長(zhǎng)度）。Z軸依然設(shè)為為0.5f，來使此三角形可見。因?yàn)槿翮R頭隔表面太近或者太遠(yuǎn)，表面都不會(huì)成功的渲染。頂點(diǎn)列表存儲(chǔ)于一個(gè)叫做vertices的數(shù)組中，它提供了一個(gè)子資源數(shù)據(jù)，在CreateBuffer函數(shù)開始調(diào)用進(jìn)行實(shí)際頂點(diǎn)緩存的創(chuàng)建的時(shí)候，這些數(shù)據(jù)可以派上用場(chǎng)。下面就是上面這段敘述的代碼實(shí)現(xiàn)，LoadContent函數(shù)的下半部分書寫風(fēng)格如下：代碼段六 LoadContent函數(shù)的幾何圖形載入代碼cpp HYPERLINK /zhmxy555/article/details/7

19、774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?boolTriangleDemo:LoadContent()/前接函數(shù)的上半段.VertexPosvertices=XMFLOAT3(0.5f,0.5f,0.5f),XMFLOAT3(0.5f,-0.5f,0.5

20、f),XMFLOAT3(-0.5f,-0.5f,0.5f);D3D11_BUFFER_DESCvertexDesc;ZeroMemory(&vertexDesc,sizeof(vertexDesc);vertexDesc.Usage=D3D11_USAGE_DEFAULT;vertexDesc.BindFlags=D3D11_BIND_VERTEX_BUFFER;vertexDesc.ByteWidth=sizeof(VertexPos)*3;D3D11_SUBRESOURCE_DATAresourceData;ZeroMemory(&resourceData,sizeof(resourceD

21、ata);resourceData.pSysMem=vertices;d3dResult=d3dDevice_-CreateBuffer(&vertexDesc,&resourceData,&vertexBuffer_);if(FAILED(d3dResult)returnfalse;returntrue;二、渲染幾何體Direct11三角形Demo代碼的最后兩部分由實(shí)現(xiàn)幾何渲染功能的代碼和著色器本身構(gòu)成。渲染幾何圖形的構(gòu)成代碼在TriangleDemo類中的Render函數(shù)中進(jìn)行。函數(shù)中有有一個(gè)條件語(yǔ)句，這樣可以確保在Direct3D的上下文是有效的。接下來，我們清除渲染目標(biāo)，并設(shè)定輸出程序

22、集（input assembler）。而實(shí)際上，因?yàn)樵谶@個(gè)demo之中的三角形是靜態(tài)的，我們并不一定非要清除渲染目標(biāo)，這里只是為了規(guī)范我們的代碼書寫，以免養(yǎng)成不良的開發(fā)習(xí)慣。在輸出程序集階段的設(shè)置由我們已經(jīng)創(chuàng)建的輸出結(jié)構(gòu)（input layout）進(jìn)行綁定，并提供頂點(diǎn)緩存，設(shè)置拓?fù)淙切蔚牧斜怼Ｏ旅尜N出Render函數(shù)的書寫思路：代碼段七 TriangleDemo類的render函數(shù)書寫cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/detai

23、ls/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?voidTriangleDemo:Render()if(d3dContext_=0)return;floatclearColor4=0.5,0.5f,0.5f,1.0f;/設(shè)定背景顏色d3dContext_-ClearRenderTargetView(backBufferTarget_,clearColor);unsignedintstr

24、ide=sizeof(VertexPos);unsignedintoffset=0;d3dContext_-IASetInputLayout(inputLayout_);d3dContext_-IASetVertexBuffers(0,1,&vertexBuffer_,&stride,&offset);d3dContext_-IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);d3dContext_-VSSetShader(solidColorVS_,0,0);d3dContext_-PSSetShader(solidCo

25、lorPS_,0,0);d3dContext_-Draw(3,0);swapChain_-Present(0,0);最后一部分要介紹的代碼是著色器。籠統(tǒng)的來說，頂點(diǎn)著色器基于它得到的內(nèi)容。詳細(xì)的來說，頂點(diǎn)著色器的作用是將內(nèi)部得到的頂點(diǎn)位置傳遞到輸出處，之后，我們須處理這些數(shù)據(jù)，正確繪制出我們的圖形。但對(duì)于這個(gè)非?；A(chǔ)的demo，僅僅進(jìn)行頂點(diǎn)位置內(nèi)容的傳遞就夠了。如果沒有幾何圖形著色器綁定到輸出程序集之上，頂點(diǎn)著色器的輸出的數(shù)據(jù)就是像素著色器的輸入的數(shù)據(jù)。其中，像素著色器的輸出就是寫到輸出緩存之中的顏色值。當(dāng)交換鏈中的Present函數(shù)調(diào)用的時(shí)候，這個(gè)緩存就會(huì)最終顯示給用戶。TriangleDe

26、mo的頂點(diǎn)著色器和像素著色器的書寫方法如下代碼段八：代碼段八 Triangledemo著色器的實(shí)現(xiàn)代碼cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?float4VS_Main(

27、float4pos:POSITION):SV_POSITIONreturnpos;float4PS_Main(float4pos:SV_POSITION):SV_TARGETreturnfloat4(0.0f,1.0f,0.0f,1.0f);這樣，Triangledemo類就隨著一步一步的勾勒，被我們書寫完成了。三、Dx11DemoBase類的書寫接下來，我們將之前講解的BlankD3DWindows Demo模板中的Dx11DemoBase類進(jìn)行豐富和修改，即可得到適用于本節(jié)demo的Dx11DemoBase類。代碼段九 Dx11DemoBase.hcpp HYPERLINK /zhmxy5

28、55/article/details/7774929 o view plain view plain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?#ifndef_DEMO_BASE_H_#define_DEMO_BASE_H_#include#include#includeclassDx11DemoBasepubli

29、c:Dx11DemoBase();virtualDx11DemoBase();boolInitialize(HINSTANCEhInstance,HWNDhwnd);voidShutdown();boolCompileD3DShader(char*filePath,char*entry,char*shaderModel,ID3DBlob*buffer);virtualboolLoadContent();virtualvoidUnloadContent();virtualvoidUpdate(floatdt)=0;virtualvoidRender()=0;protected:HINSTANCE

30、hInstance_;HWNDhwnd_;D3D_DRIVER_TYPEdriverType_;D3D_FEATURE_LEVELfeatureLevel_;ID3D11Device*d3dDevice_;ID3D11DeviceContext*d3dContext_;IDXGISwapChain*swapChain_;ID3D11RenderTargetView*backBufferTarget_;#endif代碼段十 Dx11DemoBase.cppcpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view plain

31、 HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?#includeDx11DemoBase.h#includeDx11DemoBase:Dx11DemoBase():driverType_(D3D_DRIVER_TYPE_NULL),featureLevel_(D3D_FEATURE_LEVEL_11_0),d3dDev

32、ice_(0),d3dContext_(0),swapChain_(0),backBufferTarget_(0)Dx11DemoBase:Dx11DemoBase()Shutdown();boolDx11DemoBase:Initialize(HINSTANCEhInstance,HWNDhwnd)hInstance_=hInstance;hwnd_=hwnd;RECTdimensions;GetClientRect(hwnd,&dimensions);unsignedintwidth=dimensions.right-dimensions.left;unsignedintheight=di

33、mensions.bottom-dimensions.top;D3D_DRIVER_TYPEdriverTypes=D3D_DRIVER_TYPE_HARDWARE,D3D_DRIVER_TYPE_WARP,D3D_DRIVER_TYPE_REFERENCE,D3D_DRIVER_TYPE_SOFTWARE;unsignedinttotalDriverTypes=ARRAYSIZE(driverTypes);D3D_FEATURE_LEVELfeatureLevels=D3D_FEATURE_LEVEL_11_0,D3D_FEATURE_LEVEL_10_1,D3D_FEATURE_LEVEL

34、_10_0;unsignedinttotalFeatureLevels=ARRAYSIZE(featureLevels);DXGI_SWAP_CHAIN_DESCswapChainDesc;ZeroMemory(&swapChainDesc,sizeof(swapChainDesc);swapChainDesc.BufferCount=1;swapChainDesc.BufferDesc.Width=width;swapChainDesc.BufferDesc.Height=height;swapChainDesc.BufferDesc.Format=DXGI_FORMAT_R8G8B8A8_

35、UNORM;swapChainDesc.BufferDesc.RefreshRate.Numerator=60;swapChainDesc.BufferDesc.RefreshRate.Denominator=1;swapChainDesc.BufferUsage=DXGI_USAGE_RENDER_TARGET_OUTPUT;swapChainDesc.OutputWindow=hwnd;swapChainDesc.Windowed=true;swapChainDesc.SampleDesc.Count=1;swapChainDesc.SampleDesc.Quality=0;unsigne

36、dintcreationFlags=0;#ifdef_DEBUGcreationFlags|=D3D11_CREATE_DEVICE_DEBUG;#endifHRESULTresult;unsignedintdriver=0;for(driver=0;driverGetBuffer(0,_uuidof(ID3D11Texture2D),(LPVOID*)&backBufferTexture);if(FAILED(result)DXTRACE_MSG(獲取交換鏈后臺(tái)緩存失敗!);returnfalse;result=d3dDevice_-CreateRenderTargetView(backBu

37、fferTexture,0,&backBufferTarget_);if(backBufferTexture)backBufferTexture-Release();if(FAILED(result)DXTRACE_MSG(創(chuàng)建渲染目標(biāo)視圖失敗!);returnfalse;d3dContext_-OMSetRenderTargets(1,&backBufferTarget_,0);D3D11_VIEWPORTviewport;viewport.Width=static_cast(width);viewport.Height=static_cast(height);viewport.MinDep

38、th=0.0f;viewport.MaxDepth=1.0f;viewport.TopLeftX=0.0f;viewport.TopLeftY=0.0f;d3dContext_-RSSetViewports(1,&viewport);returnLoadContent();boolDx11DemoBase:CompileD3DShader(char*filePath,char*entry,char*shaderModel,ID3DBlob*buffer)DWORDshaderFlags=D3DCOMPILE_ENABLE_STRICTNESS;#ifdefined(DEBUG)|defined

39、(_DEBUG)shaderFlags|=D3DCOMPILE_DEBUG;#endifID3DBlob*errorBuffer=0;HRESULTresult;result=D3DX11CompileFromFile(filePath,0,0,entry,shaderModel,shaderFlags,0,0,buffer,&errorBuffer,0);if(FAILED(result)if(errorBuffer!=0)OutputDebugStringA(char*)errorBuffer-GetBufferPointer();errorBuffer-Release();returnf

40、alse;if(errorBuffer!=0)errorBuffer-Release();returntrue;boolDx11DemoBase:LoadContent()/進(jìn)行相關(guān)重載returntrue;voidDx11DemoBase:UnloadContent()/進(jìn)行相關(guān)重載voidDx11DemoBase:Shutdown()UnloadContent();if(backBufferTarget_)backBufferTarget_-Release();if(swapChain_)swapChain_-Release();if(d3dContext_)d3dContext_-Rel

41、ease();if(d3dDevice_)d3dDevice_-Release();backBufferTarget_=0;swapChain_=0;d3dContext_=0;d3dDevice_=0;四、 賦予程序生命wWinMain函數(shù)的書寫最后一步，依舊是主函數(shù)的書寫，這個(gè)函數(shù)大家應(yīng)該是最熟悉的，任何想順利運(yùn)行的C/C+程序中必不可少，而且這里的書寫方式和前面demo中的也大同小異，淺墨在這里就不多贅言了，代碼如下：代碼段十一 wWinMain函數(shù)的書寫cpp HYPERLINK /zhmxy555/article/details/7774929 o view plain view p

42、lain HYPERLINK /zhmxy555/article/details/7774929 o copy copy HYPERLINK /zhmxy555/article/details/7774929 o print print HYPERLINK /zhmxy555/article/details/7774929 o ? ?#include#include#includeTriangleDemo.hLRESULTCALLBACKWndProc(HWNDhwnd,UINTmessage,WPARAMwParam,LPARAMlParam);intWINAPIwWinMain(HINST

43、ANCEhInstance,HINSTANCEprevInstance,LPWSTRcmdLine,intcmdShow)UNREFERENCED_PARAMETER(prevInstance);UNREFERENCED_PARAMETER(cmdLine);WNDCLASSEXwndClass=0;wndClass.cbSize=sizeof(WNDCLASSEX);wndClass.style=CS_HREDRAW|CS_VREDRAW;wndClass.lpfnWndProc=WndProc;wndClass.hInstance=hInstance;wndClass.hCursor=LoadCursor(NULL,IDC_ARROW);wndClass.hbrBackground=(HBRUSH)(COLOR_WINDOW+1);wndClass.lpszMenuName=NULL;wndClass.lpszClassName=DX11BookWindowClass;if(!RegisterClassEx(&wndClass)return-1;RECTrc=0,0,640,480;AdjustWindowRect(&rc,WS_OVERLAPPEDWINDO