Direct3D 11 Tutorial 3: Shaders and Effect System_Direct3D 11 教程3：着色器和效果系統

概述

在上一個教程中，咱們設置了一個頂點緩衝區並將一個三角形傳遞給GPU。 如今，咱們將逐步完成圖形管道並查看每一個階段的工做原理。 將解釋着色器和效果系統的概念。

請注意，本教程與前一個源代碼共享相同的源代碼，但將強調不一樣的部分。

 

資源目錄

(SDK root)\Samples\C++\Direct3D11\Tutorials\Tutorial03

Github倉庫

 

圖形管道

在上一個教程中，咱們設置頂點緩衝區，而後將頂點佈局與頂點着色器相關聯。 如今，咱們將解釋着色器是什麼以及它是如何工做的。 爲了徹底理解各個着色器，咱們將退後一步，查看整個圖形管道。

在教程2中，當咱們調用VSSetShader（）和PSSetShader（）時，咱們實際上將着色器綁定到管道中的一個階段。 而後，當咱們調用Draw時，咱們開始處理傳遞到圖形管道的頂點數據。 如下部分詳細描述了Draw命令以後發生的狀況。

 

着色器

在Direct3D 11中，着色器位於圖形管道的不一樣階段。它們是由GPU執行的短程序，它接收某些輸入數據，處理該數據，而後將結果輸出到管道的下一階段。 Direct3D 11支持三種基本類型的着色器：頂點着色器，幾何着色器和像素着色器。頂點着色器將頂點做爲輸入。對於經過頂點緩衝區傳遞給GPU的每一個頂點，它運行一次。幾何着色器將基元做爲輸入，並對傳遞給GPU的每一個基元運行一次。基元是點，線或三角形。像素着色器將像素（或有時稱爲片斷）做爲輸入，而且對於咱們但願渲染的圖元的每一個像素運行一次。頂點，幾何和像素着色器一塊兒是動做的主要部分。使用Direct3D 11渲染時，GPU必須具備有效的頂點着色器和像素着色器。幾何着色器是Direct3D 11中的高級功能，是可選的，所以咱們不會在本教程中討論幾何着色器。在Direct3D 11中，還有用於細分的外殼和域着色器以及用於計算的計算着色器。有關這些的更多信息，請參閱其餘示例。

 

頂點着色器

頂點着色器是GPU在頂點上執行的短程序。 將頂點着色器視爲C函數，將每一個頂點做爲輸入，處理輸入，而後輸出修改後的頂點。 應用程序以頂點緩衝區的形式將頂點數據傳遞給GPU後，GPU遍歷頂點緩衝區中的頂點，併爲每一個頂點執行一次活動頂點着色器，將頂點數據做爲輸入參數傳遞給頂點着色器。

雖然頂點着色器可用於執行許多任務，但頂點着色器最重要的工做是變換。 轉換是將矢量從一個座標系轉換爲另外一個座標系的過程。 例如，3D場景中的三角形可使其頂點位於（0,0,0）（1,0,0）（0,1,0）的位置。 當在2D紋理緩衝區上繪製三角形時，GPU必須知道緩衝區上應該繪製頂點的點的2D座標。 正是轉型幫助咱們實現了這一目標。 轉換將在下一個教程中詳細討論。 在本教程中，咱們將使用一個簡單的頂點着色器，除了將輸入數據做爲輸出傳遞以外什麼都不作。

在Direct3D 11教程中，咱們將使用高級着色語言（HLSL）編寫着色器。 回想一下，咱們的頂點數據有一個3D位置元素，頂點着色器根本不對輸入進行處理。 生成的頂點着色器以下所示：

 float4 VS( float4 Pos : POSITION ) : SV_POSITION
    {
        return Pos;
    }

　　

這個頂點着色器看起來很像C函數。 HLSL使用相似C語法的語言，使C / C ++程序員更容易學習。咱們能夠看到這個名爲VS的頂點着色器採用float4類型的參數並返回一個float4值。在HLSL中，float4是一個4份量向量，其中每一個份量都是一個浮點數。冒號定義參數的語義以及返回值。如上所述，HLSL中的語義描述了數據的性質。在上面的着色器中，咱們選擇POSITION做爲Pos輸入參數的語義，由於此參數將包含頂點位置。返回值的語義SV_POSITION是具備特殊含義的預約義語義。這種語義告訴圖形管道，與語義相關聯的數據定義了剪輯空間位置。 GPU須要此位置才能在屏幕上繪製像素。 （咱們將在下一個教程中討論剪輯空間。）在咱們的着色器中，咱們獲取輸入位置數據並將徹底相同的數據輸出回管道。

 

像素着色器

現代計算機顯示器一般是光柵顯示器，這意味着屏幕其實是稱爲像素的小點的二維網格。 每一個像素包含獨立於其餘像素的顏色。 當咱們在屏幕上渲染三角形時，咱們並不真正將三角形渲染爲一個實體。 相反，咱們點亮了三角形區域所覆蓋的像素組。 圖2顯示了這一點。

                 圖2.左：咱們想要繪製的內容。 右：屏幕上實際顯示的是什麼。

將由三個頂點定義的三角形轉換爲由三角形覆蓋的一組像素的過程稱爲光柵化。 GPU首先肯定被渲染的三角形覆蓋哪些像素。 而後它爲每一個像素調用活動像素着色器。 像素着色器的主要用途是計算每一個像素應具備的顏色。 着色器對要着色的像素進行某些輸入，計算像素的顏色，而後將該顏色輸出回管道。 它所採用的輸入來自活動幾何着色器，或者，若是不存在幾何着色器，例如本教程中的狀況，則輸入直接來自頂點着色器。

咱們在上面建立的頂點着色器輸出一個帶有語義SV_POSITION的float4。 這將是咱們的像素着色器的輸入。 因爲像素着色器輸出顏色值，所以像素着色器的輸出將爲float4。 咱們給輸出語義SV_TARGET以表示輸出到渲染目標格式。 像素着色器以下所示：

float4 PS( float4 Pos : SV_POSITION ) : SV_Target
    {
        return float4( 1.0f, 1.0f, 0.0f, 1.0f );    // 黃色, 同時透明度爲1
    }

　　

建立着色器

在應用程序代碼中，咱們須要建立一個頂點着色器和一個像素着色器對象。 這些對象表明着色器，經過調用 D3DX11CompileFromFile（）建立。 代碼以下所示：

    // 建立頂點着色器
    if( FAILED( D3DX11CompileFromFile( "Tutorial03.fx", NULL, NULL, "VS", "vs_4_0", D3DCOMPILE_ENABLE_STRICTNESS, NULL, NULL, &pVSBlob, &pErrorBlob, NULL ) ) )
        return FALSE;

    // 建立像素着色器
    if( FAILED( D3DX11CompileFromFile( "Tutorial03.fx", NULL, NULL, "PS", "ps_4_0", D3DCOMPILE_ENABLE_STRICTNESS, NULL, NULL, &pPSBlob, &pErrorBlob, NULL ) ) )
        return FALSE;

　　

把它放在一塊兒

在遍歷圖形管道以後，咱們能夠開始理解渲染咱們在教程2開始時建立的三角形的過程。建立Direct3D應用程序須要兩個不一樣的步驟。

1. 第一個階段是在頂點數據中建立源數據，正如咱們在教程2中所作的那樣。
2. 第二個階段是建立着色器，這些着色器將轉換該數據以進行渲染，咱們在本教程中展現了這些。