關鍵字 Direct3D，Shader，HLSL
寫過Direct3D程序的朋友們可能還記得，在以往，大家常為如何表現更多真實的材質（如玻璃、金屬等）而發愁。這種情況在DirectX8.0問世后有所改善了，我們可以編寫Shader來完成。最新的Direct3D中，HLSL把程序員從復雜的Shader指令集中解放出來，著力于更重要的算法。
HLSL（High-Level Shader Language）本文將從如下幾個部分介紹
準備工作
HLSL基礎
實例分析首先，什么是
Shader?什么是
HLSL？
簡要地說，Shader就是一種腳本程序，相對獨立于D3D主程序，并且被編譯成顯卡的GPU指令序列在顯示芯片上跑。（你肯定想知道更多，比如這種程序用什么來寫，都要寫什么，怎么讓GPU跑這種程序等等，別著急慢慢來），這里有必要先了解一下：
AGP顯卡的渲染流程：
首先來根據下面這張圖粗略說明一下當前最普遍流行的AGP顯卡的渲染流程，甭管是nVidia還是ATI哪一邊的。
每次渲染過程（例如，在一幀畫面中畫一個饅頭的過程）都包括頂點處理（Vertex Processing）和像素處理（Pixel Processing）兩個主要功能模塊的執行。首先，顯卡從AGP總線接收這個饅頭的頂點數據。這些數據包括位置、法線、貼圖坐標（如果是面包可能更需要貼圖，也就是說貼圖坐標不是必需的）等等，這些都是未經過任何變換，也就是在物體本地空間（Object Space）下的原始坐標。每個頂點依次被送入頂點處理單元，在這里進行坐標變換、光照計算（如果是每頂點光照）等工作，變換的結果是把每個三角形變換置屏幕空間（Screen Space）下直接可用。這里用到的變換矩陣、燈光等信息都是處理每一批頂點時一次性傳給顯卡的，作為顯卡的資源。頂點處理圈定了三角形的范圍，接下來就要逐像素地填充這個三角形了。填充哪些像素是靠對頂點屏幕坐標的線性插值來決定的。像素的其他一些必要參數，如顏色，貼圖坐標等也是通過對上一步計算出來的頂點的這些屬性進行插值得到的。另外每個像素還要通過深度檢測和模板檢測決定最終是否繪制。需要繪制的像素被送進像素處理模塊，進行貼圖像素取值，貼圖混合等工作，必要的話每像素光照也在這里完成。這里貼圖等信息也是作為顯卡的資源。像素最終的處理結果被放進后備緩沖。
以往顯卡在頂點處理和像素處理過程中執行的是一套布在硬件上的固定的程序，D3D程序員只能設置一些參數，實際上就是你調用IDirect3DDevice::SetRenderState()時做的事，而這樣的程序在IDirect3DDevice::DrawPrimitive()中自動執行。那么有些事情就很難辦到，如渲染一個水晶饅頭。應為參數再多，其渲染所用到的光照公式也跑不出石膏這種東西。現在的顯卡，確切的說是現在的Direct3D允許你寫這么一段程序替代固定的頂點處理過程和像素處理過程（記住，只是這兩個過程，跟插值什么的沒關系）。其中替換頂點處理的就叫Vertex Shader（暫時還沒有確切的中文名），替換像素處理的就叫Pixel Shader。就是開篇所說的Shader。
這樣你應該想到Shader中大概應該寫些什么了。如果還不行的話建議復習一下D3D。用什么來寫呢？三。GPU自有GPU的指令集，以往的Shader就是用這種匯編式的指令集組成，例如：
vs_1_1
dcl_position v0
dcl_normal v1,r0, v0.x, c0
mad r2, v0.y, c1, r0就如同匯編用多了必然出現C一樣，自Direct3D9.0后，一種叫HLSL（High Level Shading Language，高級渲染語言）的面向過程的Shader語言應運而生，本篇將詳細介紹的即為此。
HLSL基礎就像每一本編程語言的教材一樣，介紹一門語言，首先從它的數據類型，表達式，控制流這些東西說起。HLSL的這些基本語法很像C/C++，不再贅述。有些常見問題還是要說明一下，是為了讓你不會被這些牽制了全面了解Shader的腳步。
數據類型與CPU不同，在顯卡芯片中，最小的數據吞吐單元是一個由32位浮點數組成的四元組。這一點很有道理不是，想想你在渲染過程中所有涉及到的數據，最復雜的不外乎四維坐標（x,y,z,w）或顏色（r,g,b,a），這樣GPU可以一次性處理一個四元組。而整數什么的在顯卡中被放到四元組的一個分量里使用，而很多顯卡中，整數、布爾值都不被直接支持，而是轉為浮點數使用。至于矩陣，通常用4個四元組表示一個4x4矩陣（默認情況一個四元組存儲一行，也可以指定按列存儲，屬于細節問題，goto：
細節問題）其他尺寸的以此類推。
反映到程序上，一個四維向量就被聲明為float4，4維方矩陣被聲明為float4x4等等。當然，你也可以使用任意不超過4的維度的向量或矩陣，如int3，float3x3，double1。這個double1實際上就是標量了，1可以省略不寫。想知道更多，就goto：
細節問題紋理（Texture）&取樣器（Sampler）這倆東西可以看作特殊類型變量。紋理就是Shader中用到的貼圖資源，這我想沒什么好說的。來解釋一下取樣器：實際上每張貼圖在使用的時候都要用一個取樣器。取樣器相當于這樣一個結構，除了保存貼圖本身數據之外，還包括過濾參數等取樣信息。通常，讀取貼圖這樣的指令接收的都是取樣器類型的參數而并非直接接收紋理貼圖。聲明及使用紋理或取樣器跟使用普通變量一樣。這里有一些初始化取樣器的方法，還是等到后面的實例中講述吧。更多內容請goto：
細節問題Semantic & Annotation任何類型的變量（包括紋理和取樣器），我們都可以用Semantic或Annotation修飾來起到一些特殊作用。Semantic暫時翻譯成語義；Annotation暫時翻譯成注解，這是HLSL中獨特的東西。下面這兩行中，第一個變量冒號后面的POSITION就是Semantic，第二個變量后面用一對尖括號<>圈起來的表達式就是Annotation，一組<>中可以有很多個表達式。
float3 OmniPos : POSITION;
texture TexMap < string name = "test.dds"; >;一般來講，Semantic是告訴應用程序或D3D這個被修飾的變量是做什么用的，Annotation是告訴程序這個變量怎么用。很云山霧罩是嗎，是這樣，在應用程序代碼中，是可以調用D3D的API認出Semantic和Annotation的。例如上面這兩行，程序的邏輯就可能是這樣：首先寫主程序的甲和寫Shader的乙約定好POSITION標識該變量代表燈泡A的位置，甲在程序里寫：{燈泡A.位置 = XXX; 找到Shader中帶POSITION的變量; 給該變量賦值為燈泡A.位置; return;} 那么甲可以不知道乙在Shader中給這個要用燈泡A位置的變量起了什么名，而且乙可以在好幾個Shader中給用這個數據的變量起不同的名。然后，甲和乙再約定遇到Annotation中的“name”就將后面的字符串作為文件名建立貼圖。于是甲的程序就從Shader中讀出了一個文件名，建立了一個貼圖以供這個texture變量使用。Semantic和Annotation大概就這么用，首先要約定好各個Semantic和Annotation都是什么意思，這是up to you的，然后就是通過它們的標識來給變量賦值或作其他輔助性工作了。
既然都是做輔助說明的為什么還要分成Semantic和Annotation，我的想法是Semantic簡單方便而Annotation能干的事更多。不說這個了，無關大局。要說的是，D3D也跟我們約定了一套Semantic，它們大體上都能顧名思義，詳細信息在后面。
控制流控制流，就是if…else，for，while什么的。在CPU中，這些控制流造成的實際上是指令跳轉。但在GPU中指令跳轉并不被廣泛的支持，以往的大部分顯卡只懂得按順序一句一句執行指令。因此HLSL的編譯器可能會做出諸如展開循環、遍歷分支等等莽撞的事來適應顯卡。所以使用時要特別小心，而且不是所有情況的控制流語句都被支持。具體的很多規則還是在
細節問題里。
函數HLSL中提供了很多函數可供調用，在Direct3D 文檔 -> DirectX Graphics -> Reference -> HLSL Shader Reference -> HLSL Intrinsic Functions中有這些函數的詳細列表。也可自己寫函數用，但是在較早的Shader版本中，就像內聯函數一樣編譯時最終要將函數展開插入到函數調用處。還有一點我想你一定會想到的就是主函數會是什么。Vertex Shader和Pixel Shader各自需要一個主函數，由程序員來指定！沒錯，程序員在Shader外部指定。具體方法將在下篇講述（注意不是細節問題）。
// Declare a global uniform variable
float4 UniformGlobal;
float4 main( uniform float4 UniformParam ) : POSITION
{
return UniformGlobal * UniformParam;
} 細節問題你會覺得前面說的太過粗略，還有很多問題沒有敘述，但相對來講這些都算是細枝末節了。例如HLSL中保留關鍵字有哪些；變量的作用域；數據類型的詳細信息；四元組分量的使用法則等等，這些在Direct3D文檔 -> DirectX Graphics -> Programming Guide -> The Programmable Pipeline -> Programmable HLSL Shaders -> HLSL Language Basics中講得比我清楚，我也不再多余翻譯了。
實例分析抑或你覺得看到前面的介紹后有些激動，躍躍欲試想接觸實際代碼，了解Shader的全貌了。那好我們就分析一個例子開始。
我們通過兩個典型的Shader來看看怎么用它來實現我們想要的效果。最好先回顧一下前面的渲染流程，再次熟悉一下從Object空間下的頂點數據流到顯示器像素的途徑。然后不要著急理解下面代碼的每一句，僅僅瀏覽一遍，稍后我會帶你分析的。
先是一個Vertex Shader：
/////////////////////////////////////////////////////////////////////////////
// Copyright (c) FrontFree_Studio. All rights reserved.
/////////////////////////////////////////////////////////////////////////////
/**************** GLOABLE VARIABLES ****************/
float4 MtrlSpec = { 1.0f, 1.0f, 1.0f, 1.0f }; // material’s specular color, white
float SpecPow = 8;
float3 OmniPos : POSITION = { 0.577, 0.577, -0.577 }; // lights (world space)
float4 OmniColor = { 1.0f, 1.0 f, 1.0f, 1.0f }; // light’s color, white
float4 AmbLight = { 0.9f, 0.9f, 0.9f, 0.9f }; // ambient light color;
float3 CameraPos : CAMERAPOSITION = { 0.0f, 3.0f, 5.0f };
// camera (world space)
float4x3 matWorld : WORLD;
float4x4 matViewProj : VIEWPROJ;
/***** vertex shader output structure *********/
struct VS_OUTPUT
{
float4 Pos : POSITION;
float4 Intensity : COLOR0;
float4 Spec : COLOR1;
float3 Texcoord : TEXCOORD;
};
/**************** VERTEX SHADER ****************/
VS_OUTPUT VS( float3 InPos : POSITION, float3 InNormal : NORMAL, float2 InTexcoord : TEXCOORD )
{
VS_OUTPUT Out = (VS_OUTPUT)0;
//Calculate the output color by per-pixel lighting
// first, calculate the diffuse component
float3 P_World = mul(float4(InPos, 1), matWorld); // position to world space
float3 ToLight = normalize( P_World – OmniPos );
float3 Normal = normalize( InNormal );
float4 Diff = dot( ToLight, Normal ) * OmniColor;
Out.Intensity = Diff + AmbLight;
// then, the specular component
float3 Reflection = reflection( -ToLight, Normal );
float3 ToEye = normalize( CameraPos – P_World );
float4 Spec = pow( dot( Reflection, ToEye ), SpecPow ) * MtrlSpec * OmniColor;
Out.Spec = Spec;
// Output the position, texture coordination
Out.Pos = mul(float4(P_World, 1), matViewProj);
Out.Texcoord = InTexcoord;
return Out;
}
下面是個Pixel Shader：
/////////////////////////////////////////////////////////////////////////////
// Copyright (c) FrontFree_Studio. All rights reserved.
/////////////////////////////////////////////////////////////////////////////
/**************** TEXTURES ****************/
texture TexMap < string name = "test.dds"; >;
sampler2D TexSampler = sampler_state
{
Texture = <EnviMap>;
MipFilter = LINEAR;
MinFilter = LINEAR;
MagFilter = LINEAR;
};
/**************** PIXEL SHADER ****************/
float4 PS ( VS_OUTPUT In ) : COLOR
{
float4 Tex = texture2D( TexSampler, In.Texcoord );
return Tex * In.Intensity + In.Spec;
}
這是一個簡單且無聊的例子，說它無聊是因為沒有任何特效，僅僅是有高光，外加一重紋理貼圖。如果不用Shader實現，僅需在D3D默認效果上多加一行代碼。這個例子只是為了告訴你Shader里都需要干什么。首先是在Vertex Shader中將物體坐標轉換至屏幕坐標；同時進行光照計算出頂點的亮度，這里用的是Phone模型。然后在Pixel Shader中進行紋理取樣，再混合上亮度得到最終結果。高光是在Vertex Shader中計算出來并在Pixel Shader中加上去的。
光照模型 說通俗一點，光照模型就是指采用何種方式來根據光源方向、頂點（或像素）位置、法線等信息計算該頂點（或像素） 明暗信息。上面的Shader中采用的是最常見的每頂點Phone模型。即每個頂點的明暗信息由環境光（Ambient）+漫反射光 （Diffuse）+高光（Specular）組成。通常，燈光打在物體上是通過漫反射進入眼睛，因此不管你從哪個方向看一個饅頭， 上面的大部分明暗只取決于背光還是向光。數學上就是取決于該頂點向光的方向（圖中的向量L）和其法線之間的夾角。線數中兩根標準化的 向量點乘結果就是其夾角的最好度量。因此程序里也就這么算。高光（準確講該叫鏡面反射光）就不一樣了。你應該見過這樣的情節 ：張某疾步沖進綠柳莊，突然眼前金光一閃，“哦，倚天劍”……實際上倚天劍和陽光的位置并沒有改變，張某是否看見高光 還要取決于他視線方向和光線反射方向的關系。這兒有個比較復雜的數學公式來計算高光分量，相信讀者應該能把他找出來。至于 環境光，實際的場景中光線是非常復雜的，即使沒有光源直接照射在物體上，它也將受到周圍物體漫射出來的光線照亮。Phone 模型中，假設環境光是從四面八方來的強度一樣的光，因此環境光照分量基本上是不取決于任何方向向量的常量。最后，各個分量 是加在一起最終決定明暗的。
上面只討論光照強度，記得美術老師講過，物體的顏色取決于光源本身的顏色，光照強度和物體材質的顏色。然后D3D老師講過，只要把那三個東西乘到一起就得到了最終的顏色。這里的乘是指各個顏色分量（紅綠藍）分別相乘，實際上這是產生顏色過濾的方法。比如說，一個顏色值為（r,g,b,a）的顏色乘以50%灰（0.5,0.5,0.5,0.5）的結果就是（0.5r, 0.5g,0.5b,0.5a），亮度減了一半，相當于帶了個50%灰的眼鏡看。
由于本篇著重介紹的是HLSL語言，所以對于光照模型，筆者不打算做過多說明，將放到以后的文章中講述。
好了，來看代碼。每個Vertex Shader都要以頂點數據流中的數據作為其入口參數。但你頭腦里清楚哪個參數是位置，哪個是法線，哪個是貼圖坐標，你完全可以把法線叫m_Position，叫abcd，叫……D3D如何知道把數據流中的法線信息往哪兒放呢？好，Semantic。D3D與我們約定了一套Semantic：其中POSITION是位置，NORMAL、TANGENT、BINOMAL分別是法線、切線、副法線，TEXTURE0-7表示8套貼圖坐標。
切線是指頂點的切線向量，副法線是與法線和切線正交的向量，都是預計算好并存在頂點數據里的。常用于凸凹貼圖技術。
Vertex Shader的輸出數據，也就是返回值可以包含很多信息，但是必須有一個float4是表示位置的。因為D3D認為，你可以在頂點處理過程中不作任何光照處理，但是必須要把頂點轉換至正確的屏幕位置。除了位置以外，其他都將向下傳入Pixel Shader作為其入口參數。這些參數也用Semantic標識。
搞清楚一點很重要，當每個頂點的顏色被計算出來之后，像素的顏色將由它所在的三角形的三個頂點插值得到。還記得Direct3D Tutorials2嗎？
你僅僅指定了這個三角形頂點的顏色，而中間那些好看的漸變效果實際上是硬件自己對頂點顏色進行插值得到每個像素的顏色。當我們使用光照的時候，只不過是用光照計算出的頂點顏色代替了你手動指定的顏色。貼圖坐標也是這樣進行插值的。
Pixel Shader所接收的Semantic是COLOR0-7（顏色），TEXCOORD0-7（貼圖坐標）。這里用個結構體來放置所有的返回值，以及Vertex Shader的函數原形一并如下所示：
struct VS_OUTPUT
{
float4 Pos : POSITION;
float4 Intensity : COLOR0;
float4 Spec : COLOR1;
float3 Texcoord : TEXCOORD;
};
VS_OUTPUT VS( float3 InPos : POSITION, float3 InNormal : NORMAL, float2 InTexcoord : TEXCOORD )
Shader中的處理過程無非也就是計算出四個返回值分量。
首先位置（Pos）很好說，就是將頂點的原始位置（InPos）乘上變換矩陣。
float4x3 matWorld : WORLD;
float4x4 matViewProj : VIEWPROJ;
…
float3 P_World = mul(float4(InPos, 1), matWorld); // position to world space
Out.Pos = mul(float4(P_World, 1), matViewProj);
你看到這兩個全局變量被Semantic標志為WORLD和VIEWPROJ，程序中將通過它們把當前的世界變換矩陣，視矩陣和投影矩陣的乘積傳進來。
這里有個優化的原則。記住Vertex Shader是每處理一個頂點運行一遍，如果某些信息對所有頂點（指同一批頂點流即同一物體中，使用同一個Shader的所有頂點）來說計算結果都一樣，那最好把它在程序中計算出來直接傳給Shader。例如三個變換矩陣的乘積。本例中，由于還需要把頂點位置變換置世界空間作他用，因此沒要求程序把矩陣都乘起來。
同理，每頂點能夠計算出來的東西就不要放在Pixel Shader中讓每像素都重復一遍。
將頂點乘以矩陣用到了HLSL的內置指令mul()，實現矩陣乘法。不牽扯到投影的三維坐標變換并不需要第四維w坐標，而且在這些變來變去的過程中w會始終保持為1。因此程序傳進來的頂點數據也是沒有w的。四維向量才被允許乘以4x4矩陣，因此我們還要把InPos和P_World補上w坐標，即float4(InPos, 1)。
然后我們把每個頂點照亮賦給Color。這幾個全局變量就是光照要用到的一些材質顏色，燈光等信息。我想應該能讓你看明白都是干什么的了。SpecPow是用于計算高光的，越大，反光面積越小。其余的我想也不用多解釋了吧。
float4 MtrlSpec = { 1.0f, 1.0f, 1.0f, 1.0f }; // material’s specular color, white
float SpecPow = 8;
float3 OmniPos : POSITION = { 0.577, 0.577, -0.577 }; // lights (world space)
float4 OmniColor = { 1.0f, 1.0 f, 1.0f, 1.0f }; // light’s color, white
float4 AmbLight = { 0.9f, 0.9f, 0.9f, 0.9f }; // ambient light color;
// camera (world space)
float3 CameraPos : CAMERAPOSITION = { 0.0f, 3.0f, 5.0f };
…
float3 ToLight = normalize( P_World – OmniPos );
float3 Normal = normalize( InNormal );
float4 Diff = dot( ToLight, Normal ) * OmniColor;
Out.Intensity = Diff + AmbLight;
// then, the specular component
float3 Reflection = reflection( -ToLight, Normal );
float3 ToEye = normalize( CameraPos – P_World );
float4 Spec = pow( dot( Reflection, ToEye ), SpecPow ) * MtrlSpec * OmniColor;
Out.Spec = Spec;
至于貼圖坐標，直接把它拷貝到返回值就行了。
Out.Texcoord = InTexcoord;
進入Pixel Shader，所有入口參數由Vertex Shader中的計算結果插值得到。我們只不過簡單的用tex2D()進行了一下貼圖取樣，然后與光照強度混合得到最終結果。貼圖的顏色其實才是美術老師說的“物體材質的顏色”。
float4 PS ( VS_OUTPUT In ) : COLOR
{
float4 Tex = texture2D( TexSampler, In.Texcoord );
return Tex * In.Intensity + In.Spec;
}
總結
筆者已經進自己可能給大家講清楚了HLSL的一些基礎知識。從它的優點作用，到基本概念，到渲染流程，最后用個例子給大家串了一遍。
這只是上篇，下一次，我們將看到：
l Shader是如何與你的程序進行交互的
l Shader使用的極致——Effect File
l 介紹多種編輯、編譯、調試Shader的工具
l 等等
好，文章中如有疏漏，懇請大家指出，非常歡迎各位與我交流。我的郵箱是xuantz@frontfree.net，msn是phyligefox@hotmail.com
參考文獻：
《Vertex Shader 結構》 （http://www.gameres.com/Articles/Program/Visual/3D/VertexShader.htm）
《Introduction to the DirectX 9 High-Level Shader Language》Craig Peeper Microsoft Corporation, Jason L. Mitchell ATI Research (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhlsl/html/shaderx2_introductionto.asp)
《ATI™ Radeon X800 3D Architecture white paper》