Obj模型功能完善(物體材質,光照,法線貼圖).Cg着色語言+OpenTK+F#實現.

　　這篇文章給大家講Obj模型里一些基本功能的完善,包含Cg着色語言,矩陣轉換,光照,多重紋理,法線貼圖的運用.

　　在上篇中,我們用GLSL實現了基本的phong光照,這里用Cg着色語言來實現另一鍾Blinn-phong光照模型,平常我們說語言只是手段,關鍵是怎么運用,這個用在如一些高級編程語言上,我們或多或少有不同想法,但是在着色語言上,我認為太對了.因語法都是基於C,C++來的,並且去除很多高級特性,可以說語法都是簡單到了差不多了,關鍵在於他內置的一些傳遞參數的區別上,下來讓我們用Cg着色器語言來完善Obj模型里的基本功能.

　　我們想在.Net環境中使用Cg着色器語言,首先我們需要安裝Cg Toolkit,然后使用封裝了Cg Toolkit的cgnet,上面還有Cgnet.OpenTK,針對的是Cgnet在OpenTK環境里的簡單封裝.然后我們在.net環境引用相關DLL,就可以引用到Cg着色器語言了.主要用法和Cg中差不多,在這先說最簡單的頂點差色器與片斷着色器,首先是生成一個Cg着色器語言環境,然后在這環境里就可以獲取最新可用的着色器配置,然后和執行代碼生成對應的着色器語言執行對象,在Cg Toolkit安裝中,可以看到里有很多的學習例子,上述過程每個例子基本都存在這過程,雖然是用C++寫的,看幾次就有印象了,額外說一句,本來我看那些例子還分DXD9,DXD10等,OpenGL就一個,還在想,這是不是太偏向DX了,那想打開一看,Opengl里的初級,高級例子比DXD9,DXD10加起來都多,不知是DX本身自帶還是昨的,反正用OpenGL的足夠學習如何使用Cg語法了.下面針對Cg里做一個簡單的封裝.

type CgContext() =
    let cgContext = CgNet.Context.Create()  
    let vertexParameters = new ParameterDict()
    let fragmentParameters = new ParameterDict()
    do
        CgGL.SetDebugMode(false)
        cgContext.ParameterSettingMode <- ParameterSettingMode.Deferred
    member val VertexProgram = Option<Program>.None with get,set
    member val FragmentProgram = Option<Program>.None with get,set
    member val VectexProfile = ProfileType.Unknown with get,set
    member val FragmentProfile = ProfileType.Unknown with get,set
    member val ErrorMessage = "" with get,set
    member this.CreateVectexProgram(fileName,programName) =
        this.VectexProfile <- ProfileClass.Vertex.GetLatestProfile()
        this.VectexProfile.SetOptimalOptions()
        let vertexProgram = 
            cgContext.CreateProgramFromFile(
                ProgramType.Source,
                fileName,
                this.VectexProfile,
                programName,
                null)
        this.ErrorMessage <- cgContext.LastListing
        vertexProgram.Load()
        this.VertexProgram <- Some vertexProgram
    member this.CreateFragmentProgram(fileName,programName) =
        this.FragmentProfile <- ProfileClass.Fragment.GetLatestProfile()
        this.FragmentProfile.SetOptimalOptions()
        let fragmentProfile = 
            cgContext.CreateProgramFromFile(
                ProgramType.Source,
                fileName,
                this.FragmentProfile,
                programName,
                null)
        this.ErrorMessage <- cgContext.LastListing
        fragmentProfile.Load()
        this.FragmentProgram <- Some fragmentProfile
    member this.VertexParameter name=
        if not (vertexParameters.ContainsKey(name)) then vertexParameters.[name] <- this.VertexProgram.Value.GetNamedParameter(name)
        vertexParameters.[name]    
    member this.FragmentParameter name=
        if not (fragmentParameters.ContainsKey(name)) then fragmentParameters.[name] <- this.FragmentProgram.Value.GetNamedParameter(name)
        fragmentParameters.[name]   
    member this.EnableProfile() =
        if this.VertexProgram.IsSome then 
            this.VertexProgram.Value.Bind()
            this.VectexProfile.EnableProfile()
        if this.FragmentProgram.IsSome then 
            this.FragmentProgram.Value.Bind()
            this.FragmentProfile.EnableProfile()
    member this.UpdateParameter() =
        if this.VertexProgram.IsSome then  this.VertexProgram.Value.UpdateParameters()
        if this.FragmentProgram.IsSome then this.FragmentProgram.Value.UpdateParameters()
    member this.DisableProfile() =
        if this.VertexProgram.IsSome then  this.VertexProgram.Value.DisableProgramProfiles()
        if this.FragmentProgram.IsSome then this.FragmentProgram.Value.DisableProgramProfiles()       
    member this.Unload() =
        if this.VertexProgram.IsSome then  this.VertexProgram.Value.Dispose()
        if this.FragmentProgram.IsSome then this.FragmentProgram.Value.Dispose()
        cgContext.Dispose()

　　因為是針對上篇中Obj模型的完善,如這里很多代碼是直接在原文的基礎之上添加,在上文中,我們法線是讀的文本,如果沒有,則沒有,如果要運用光照,則一定需要法線,我們可以自己來計算.原理很簡單,在三角形面中,以二條方向不一樣的矢量的叉積就是這個面的法向量,但是通常我們要求的是頂點的法向量,因為在Obj模型中,一個頂點會被多個面使用,故我們用簡單的方式來處理,取這點所有面的法線平均.下面是主要代碼.　　

 //和頂點數組同樣長的數組,指定,如果這個數組的下標和頂點數組的下標一樣,
        //則這數組里存放的數據就是頂點數組里的頂點的關聯面數,所有法線長度.
        let pIndN = Array.create this.Positions.Count (0.f,Vector3.Zero)
        //根據索引信息來給對應的頂點,法線,紋理坐標賦值
        groups |>List.iter (fun p -> 
            p.Faces.ForEach(fun face -> 
                face.Vectexs |> Array.iter(fun vect ->
                    if vect.PositionIndex > 0 then vect.Position <-this.Positions.[vect.PositionIndex-1]
                    if vect.TexcoordIndex > 0 then  vect.Texcoord <- this.Texcoords.[vect.TexcoordIndex-1]
                    if vect.NormalIndex > 0 then  vect.Normal <- this.Normals.[vect.NormalIndex-1]                      
                    )
                if this.IsAutoNormal && this.Normals.Count < 1 then   
                    let faceNormal = 
                        let p1 =Vector3.Subtract(face.Vectexs.[1].Position, face.Vectexs.[0].Position)
                        let p2 =Vector3.Subtract(face.Vectexs.[2].Position, face.Vectexs.[1].Position)
                        Vector3.Cross(p1,p2)
                    face.Vectexs |> Array.iter(fun v ->
                        let mutable ind,n = pIndN.[v.PositionIndex - 1]
                        n <- n + faceNormal
                        pIndN.[v.PositionIndex - 1] <- (ind+1.f,n)
                    )
                )       
            let mater = this.Materials.Find(fun m -> m.Name = p.Mtllib)
            if box(mater) <> null then
                let mitem = mater.Items.Find(fun i -> i.Name = p.Usemtl)
                if box(mitem) <> null then 
                    p.Material <- mitem
                    p.Path <- this.Path
                    p.IsHaveMaterial <- true
            )
        if this.IsAutoNormal && this.Normals.Count < 1 then 
            groups |>List.iter (fun p -> 
                p.Faces.ForEach(fun face -> 
                    face.Vectexs |> Array.iter(fun v ->
                        let ind,n = pIndN.[v.PositionIndex - 1]
                        v.Normal <- Vector3.Normalize(n / ind)
                        v.LinkFace <- int ind
                    )
                )
            )  

　針對原來的處理,增加了十幾行的代碼,先聲明一個和頂點一樣長的數組,在這里,我們這樣定義,這個數組里存放的數據的下標是和頂點數組中對應頂點的下標一樣,這樣我們就能直接對應頂點與頂點的共面數,共有法線的信息.相當於天然的HashMap.可以去掉平常算法中的比對過程,如let ind,n = pIndN.[v.PositionIndex - 1]可以直接用自己的下標定位到求得的共面信息與法線總和.

　　有個法向量后,我們來完善另一個地方,我們原來是物體一直是放在原點下的,也就是模型坐標系和世界坐標系是重和的,我們如果移動,翻轉物體后,他就需要自己的模型坐標系了,用來表示他自己與世界坐標系的對應關系.如下代碼.

    let mutable m = Matrix4.Identity
    let mutable inv = Matrix4.Identity
    let getLazyModelMatrix() = 
        let tr = Matrix4.CreateTranslation(translation)
        let ro = if rotate = Vector3.Zero then Matrix4.Identity else Matrix4.CreateFromAxisAngle(rotate,rotateAngle)
        if bFirstRotate then 
            m <- Matrix4.Mult(tr,ro) 
        else 
            m <- Matrix4.Mult(ro,tr) 
        inv <- Matrix4.Invert(m)
        m,inv 
    member this.IsFirstRotate with get() = bFirstRotate and set(value) = bFirstRotate <- value
    member this.Translation
        with get() = translation
        and set(value) = 
            translation <- value
            getLazyModelMatrix() |> ignore
    member this.Rotate 
        with get() = rotate
        and set(value) = 
            rotate <- value
            getLazyModelMatrix() |> ignore
    member this.RotateAngle
        with get() = rotateAngle
        and set(value) = 
            rotateAngle <- value
            getLazyModelMatrix() |> ignore
    member this.ModelMatrix with get() = m
    member this.InvertMatrix with get() = inv   

　　增加一個表示旋轉與移動的向量,以及旋轉的角度與是否先旋轉,先旋轉還是先移動生成的模型坐標系是不一樣的,注意矩陣相乘的順序,矩陣不滿足交換律的,先后順序的不同一般會得到不同的矩陣,這里因為在Cg中,最好先經過轉置,轉置后再乘,就變成如下了,如先R后T,則Matrix4.Mult(T,R),這個順序非常重要,后面的坐標系變換都要用到.這樣我們就生成了模型坐標系,這個坐標系的作用就是把以模型坐標系里的坐標變成世界坐標系的坐標,如果我們需要把世界坐標系的坐標變為模型坐標系的,可以直接用上面的模型坐標系的逆矩陣,具體運行過程大家可以查找相關資料,這些只說下,矩陣與逆矩陣相乘等於單位矩陣,就是對角線都是1,別的位置都是0的矩陣,我們一般定義一個矩陣,默認應該都用單元矩陣.

　　這里先說下,3D的變換過程大致如下,物體的坐標(經模型坐標系變換成)世界坐標(經過視圖坐標系變換成)視圖模型坐標系(經透視矩陣變換成)屏幕上的坐標(這里說下,Z值並有沒消失,被非線性插值到-1,1之間).這個具體過程,大家想了解可以查找相關資料.下面看一段具體代碼.　　

        GL.Clear (ClearBufferMask.ColorBufferBit ||| ClearBufferMask.DepthBufferBit)
        //生成一個視圖矩陣
        let mutable v = Matrix4.LookAt(caram.Eye,caram.Target,Vector3.UnitY)
        //定位物體在世界坐標系的位置
        model.Translation <- Vector3(5.f,0.f,0.f)
        model.Rotate <- Vector3(1.0f,0.f,0.f)
        model.RotateAngle <- float32 (-Math.PI/2.0)
        //模型矩陣
        let m = model.ModelMatrix
        //Cg與HLSL一樣,使用是行矩陣,與OpenGL的列矩陣需要轉置才能對應.
        //如果相應矩陣是傳給Cg着色器的,則他在進行相關運行前一定要轉置,如果在OpenGL本身運算,則不需要.
        m.Transpose()
        v.Transpose()
        //生成模型視圖矩陣
        let mv = Matrix4.Mult(v,m)
        //啟用相關配置
        cgContext.EnableProfile()
        //得到我們設置的視圖矩陣.
        let mutable p = Matrix4.Identity
        GL.GetFloat(GetPName.ProjectionMatrix,&p)
        p.Transpose()
        //生成模型視圖透視矩陣
        let mvp = Matrix4.Mult(p,mv)
        //傳遞值.
        cgContext.VertexParameter("mvp").SetMatrix(MatrixToArray1 mvp) 
        //眼睛的位置由世界坐標轉換成模型坐標系.
        let modelEye = Vector3.Transform(caram.Eye,model.InvertMatrix)
        cgContext.FragmentParameter("eyePosition").Set(modelEye)
        //燈光的位置由世界坐標轉換成模型坐標系
        let modelLight = Vector3.Transform(lightPosition,model.InvertMatrix)
        cgContext.FragmentParameter("lightPosition").Set(modelLight)
        //針對模型的各參數設置值.
        model.Groups |> List.iteri (fun i p -> 
            if i < 10 then 
                cgContext.FragmentParameter("Ke").Set(p.Material.Emissive)
                cgContext.FragmentParameter("Ka").Set(p.Material.Ambient)
                cgContext.FragmentParameter("Kd").Set(p.Material.Diffuse)
                cgContext.FragmentParameter("Ks").Set(p.Material.Specular)
                cgContext.FragmentParameter("shininess").Set(p.Material.Shiness)
                cgContext.FragmentParameter("dtext").SetTexture(p.Material.DiffuseID)
                cgContext.FragmentParameter("dtext").EnableTexture()
                cgContext.FragmentParameter("maptext").SetTexture(p.Material.BumpID)
                cgContext.FragmentParameter("maptext").EnableTexture()
                cgContext.UpdateParameter()
                //p.DrawVBO(cgContext,cgContext.FragmentParameter("tt"))
                p.DrawVBO()
                cgContext.FragmentParameter("dtext").DisableTexture()
                cgContext.FragmentParameter("maptext").DisableTexture()
        )

　　這段代碼里相關的操作我做了比較詳細的注釋,在這段代碼里,我們沒看到相關如加載視圖矩陣的操作了,以及針對模型操作調用如GL.Translation,GL.Rotate等操作,這些算法全是我們自己來處理並放入我們寫的着色器里來操作,操作的順序就如上面寫的物體的坐標變換的順序一樣,注意矩陣相乘的順序.過程如果反着來,如世界坐標變成模型坐標,則乘以對應矩陣的逆.

　　需要說明的幾點是,在Cg操作中,矩陣的順序與DX是一樣的,都是行矩陣,而Opengl用的列矩陣,那么如果我們相應的矩陣以及操作過后的順序給Cg,那么需要在取出來時就先做轉置的操作,把列矩陣順序變成行矩陣的排列順序.在着色器語言操作中,各個頂點用的坐標系一定要是同一個坐標系,要么都是模型坐標系,要么都是世界坐標系,要么都是視角坐標系,如果不同,顯示的效果可能會與你要得到的效果天差之別,如在上面,我們設置燈的位置在世界坐標里的(0,5,8)處,可以看到代碼位置,我們用模型的逆矩陣求把對應的世界坐標變成了模型坐標,如果不調用這句,后面會有啥結果了,大家可以先想一下.

　　寫到這個,大家一定好奇相應的Cg的頂點着色器與片斷着色器的處理了吧.頂點差色器的處理如下:

void v_main(float4 position : POSITION,
            float3 normal : NORMAL,
            float2 texCoord :  TEXCOORD0,
            out float4 oPosition : POSITION,
            out float4 objectPos : TEXCOORD0,
            out float3 oNormal : TEXCOORD1,
            out float2 oTexCoord : TEXCOORD2,
            uniform float4x4 modelView,
            uniform float4x4 mvp)
{    
    oPosition = mul(mvp,position);
    objectPos = position;
    oNormal = normal;
    oTexCoord = texCoord;
}

 　　頂點差色器我們可以看到后面有一些out,uniform,POSITION,TEXCOORD0的關鍵詞,讓我們來解析一下相關參數的功能,前三個float4 position : POSITION,float3 normal : NORMAL,float2 texCoord : TEXCOORD0在類型前面沒有關鍵詞,那表示相應數據是Opengl傳遞給我們的,這個時候后綴很重要,第一個POSITION就表示傳遞的是當前的頂點,NORMAL與TEXCOORD0同理.那么后面的如out float4 oPosition : POSITION,out float4 objectPos : TEXCOORD0,out float3 oNormal : TEXCOORD1,out float2 oTexCoord : TEXCOORD2. 前面才說,后面的后綴如POSITION這些很重要,指定是傳入的數據,那么在這里,后綴就與他單詞的意義沒有關系了,可以看到這些前面都帶一個out,這表示這些數據都是傳遞給片斷着色器的,這些后綴與片斷着色器的對應,表示對應的傳值關系.最后的uniform float4x4 modelView,uniform float4x4 mvp表示的是我們從應用程序傳遞過來的數據,在這里我們分別傳來一個模型視圖矩陣,一個模型視圖透視矩陣,如果我們要把所有值都變成在模型視圖下的坐標,我們可以用到這值,但是在這,我們都用模型坐標系,所以沒用到,和GLSL一樣,我們要得到當前頂點的在模型視圖透視的位置,也就是我們看到的屏幕位置.前面說了,如果世界坐標沒有變成模型坐標,在這里,大家還可以處理一下,得到正確的位置,增加一個傳入的模型矩陣,把當前世界坐標系的位置用這矩陣的逆變成模型坐標系.如果這步你還沒進行,那么相關數據就到片斷着色器中了.

　　在這里說下,如果大家都用模型視圖坐標系,請注意,如果我們設置這個坐標系下,朝向是向着Z方向前看的,就是越遠Z值越大.那么視角下的的位置和我們OpenGL的位置是不一樣的,這個坐標系和OpenGL的Z值與X軸方向是反的,這樣想吧,我們在屋內看門的右邊就是我們在屋外看門的左邊.我開始全用的是模型視圖坐標系,偏偏和DX一樣,是向着Z軸向前看(沒辦法,模型加載很多都是這種方向)就是因為這個地方,一些位置老不對,搞的我好怨念啊,你為毛不和DX一樣,用符合人體視角的坐標系.

　　上在的頂點着色器處理后,就到我們的片斷着色器,代碼主要過程如下:

float3 expand(float3 v)
{
    return (v-0.5) * 2.0;
}

void f_main(float4 position  : TEXCOORD0,                        
            float3 normal    : TEXCOORD1,
            float2 texCoord  : TEXCOORD2,
            out float4 color     : COLOR,
            uniform float3 globalAmbient,
            uniform float3 lightColor,
            uniform float3 lightPosition,
            uniform float3 eyePosition,
            uniform float3 Ke,
            uniform float3 Ka,
            uniform float3 Kd,
            uniform float3 Ks,
            uniform sampler2D dtext,
            uniform sampler2D maptext,
            uniform float3 tt,
            uniform float  shininess
            )
{    
    float3 N = normal;
    // Compute emissive term
    float3 emissive = Ke;
    // Compute ambient term
    float3 ambient = Ka * globalAmbient;
    // Compute the diffuse term
    float3 L = normalize(lightPosition - P);
    float diffuseLight = max(dot(L, N), 0);
    float3 diffuse = Kd * lightColor * diffuseLight;
    // Compute the specular term
    float3 V = normalize(eyePosition - P);
    float3 H = normalize(L + V);
    float specularLight = pow(max(dot(H, N), 0), shininess);
    if (diffuseLight <= 0) specularLight = 0;
    float3 specular = Ks * lightColor * specularLight;
    //float3 tex =lerp(tex2D(maptext, texCoord).xyz,tex2D(dtext, texCoord).xyz,1.0);
    float3 tex = tex2D(dtext, texCoord).xyz;
    float3 light = emissive + ambient + diffuse + specular;
    color.xyz = light * tex;
    //    color.xyz = lerp(light,tex,0.5);
//    color.xyz = light;
    color.w = 1;
}

　　在這里,前面的參數也有很多關鍵詞,和前面大部分是一樣的,就是在類型沒有前綴,后面又帶着后綴的,如float4 position : TEXCOORD0, float3 normal : TEXCOORD1,float2 texCoord : TEXCOORD2,這些就是前面頂點着色器傳過來的值.別的就out float4 color : COLOR和前面的out float4 oPosition : POSITION一樣,都是應用的處理,傳遞回給OpenGL用,一個對應的頂點位置,一個對應片斷處理的顏色.后面的uniform一樣,是表示從OpenGL應用程序傳遞進來的值.這個光照模型的算法稱作Blinn-phong，對於上一種光照主要改進在於鏡面光照的計算，他計算頂點到光照與頂點到人眼的矢量二者相加的，因為頂點到光照與頂點到人眼的矢量都取的是單元向量，所以他們相加的矢量，就在他們的半角上，所以這種計算方式也叫求半角，然后求與法線的叉積就是我們要求的鏡面反射量。

　　下面我們來說關於法線貼圖相關操作，在Cg中，啟用多個紋理相對來說比較簡單，調用對應有API就能啟用，分別是關聯紋理，啟用紋理，關閉紋理，不需要GLSL那樣還需要調用GL.ActiveTexture這種API來指定當前紋理。首先，我直接把法線貼圖里的RGB轉成法線，然后原來的法線替換法線帖圖里的法線，結果嘛，在某個方向，我們發現能得到正常的光照，但是更多的位置查看是錯誤的結果，如有黑塊等等現象。那時因為在紋理里的光照存取的都是模型在某個位置時的值，如果模型經過一些旋轉等操作，此時在這個光照已經對應不上了，我們想想一面牆，面對我們時法向量是Z軸，如果把牆轉個90度，那時我們來看法向量就是Y軸，好吧，我感覺這個還復雜了說，你直接想，畫一個立方體，他的六面法向量各不一樣，現在引入一個矩陣，讓你六面法向量只需要設置一次，效果如模型矩陣一樣，他能讓你只設置一種情況下的法向量，外界的改變會反映在這矩陣上，我們要做的只是和這矩陣的操作，而不需要去關注他本身的變換。這個矩陣所對應的坐標系是切線坐標系。下面我給出別人對切線空間比較深刻的說明，希望對大家的理解有幫助。

http://www.opengpu.org/forum.php?mod=viewthread&tid=5169這個里面三樓的回復：

簡單地說就是：
１、樓上講的參數曲面上任一點都有切空間，並且有無數個切空間，其中法線是固定的，它與切平面上任意兩條相互垂直的線（副法線與切線）就構成了一個切空間。
２、法線貼圖的用的那個切空間，就是指副法線與切線剛好與uv軸重合的那個。
３、用切空間的好處之一是，對某些對稱的模型，只用做一半貼圖，就可以貼兩面，因為幾何體在鏡像后，對象空間的法線變了，但是切空間里的沒變。

　　根據如http://blog.csdn.net/bonchoix/article/details/8619624里下的這張圖，能很好說明切線空間中的U，V如何與模型坐標系的頂點對應上的，注意大部分情況都是模型坐標系，意思是相應的模型坐標的結果通過切線矩陣TNB得到在對應切空間的位置，反過來也可以把要空間里的坐標通過TNB得到模型坐標的結果。與別的坐標系的交互要先通過TNB來操作。

　　知道算法后，我們就可以求得切線了，和求法線一樣，需要先求得頂點的各個切線，然后取平均。下面給出主要代碼。

                p.Faces.ForEach(fun face -> 
                    let p10 = face.Vectexs.[1].Position - face.Vectexs.[0].Position
                    let p20 = face.Vectexs.[2].Position - face.Vectexs.[0].Position
                    let t10 = face.Vectexs.[1].Texcoord - face.Vectexs.[0].Texcoord
                    let t20 = face.Vectexs.[2].Texcoord - face.Vectexs.[0].Texcoord
                    let T = (t20.Y * p10 - t10.Y * p20) / (t10.X*t20.Y - t10.Y*t20.X)
                    face.Vectexs |> Array.iter(fun vect ->
                        let mutable ind,n = pIndT.[vect.PositionIndex - 1]
                        n <- n + T
                        pIndT.[vect.PositionIndex - 1] <- (ind+1.f,n)
                    )
                )
            if p.Material.BumpMap <> "" then 
                p.Faces.ForEach(fun face -> 
                    face.Vectexs |> Array.iter(fun v ->
                        let ind,n = pIndT.[v.PositionIndex - 1]
                        v.Tangent <- Vector3.Normalize(n / ind)
                        v.LinkFace <- int ind
                    )
                )                
            )

　　求得切線后，下一步就是寫入內存，因為我們使用的VBO，那如何才能傳入切線到着色器中了，有二種方式，一種是不用VBO，改用直接用一個一個畫三角形，在Face中指定切線，好吧，我最開始就試的這個，直接卡的換的攝像機都動不上了。那第二種也就是繼續用VBO，傳入的時候我們把切線當顏色傳入，然后在着色器里取出來，頂點着色器主要代碼如下：　　

void v_main(float4 position : POSITION,
            float3 normal : NORMAL,
            float2 texCoord :  TEXCOORD0,
            float4 tangent : COLOR,
            out float4 oPosition : POSITION,
            out float3 objectPos : TEXCOORD0,
            out float3 oNormal : TEXCOORD1,
            out float2 oTexCoord : TEXCOORD2,
            out float3x3 oTNB : TEXCOORD3, 
            //out float3 oeyePosition: TEXCOORD3,
            //out float3 olightPosition: TEXCOORD4,
            //uniform float3 eyePosition,
            //uniform float3 lightPosition,            
            uniform float4x4 mvp)
{    
    oPosition = mul(mvp,position);
    float3 tNormal = normal;
    float3 tTangent = tangent.xyz;
    float3 tB = cross(tNormal,tTangent);
    float3x3 tnb = float3x3(normalize(tTangent),normalize(tB),normalize(tNormal));
    oTNB = tnb;
    oNormal = normal;
    oTexCoord = texCoord;
    objectPos = position.xyz;

    //oPosition = mul(mvp,position);
    //float3 tNormal = normal;
    //float3 tTangent = tangent.xyz;
    //float3 tB = cross(tNormal,tTangent);
    //float3x3 tnb = float3x3(normalize(tTangent),normalize(tB),normalize(tNormal));
    //oTNB = tnb;
    //oTexCoord = texCoord;
    //objectPos = mul(tnb,position).xyz;
}

　　片斷着色器如下：

float3 expand(float3 v)
{
    return (v-0.5) * 2.0;
}
void f_main(float3 position  : TEXCOORD0,                        
            float3 normal    : TEXCOORD1,
            float2 texCoord  : TEXCOORD2,
            float3x3 tnb : TEXCOORD3, 
            //float3 lightPosition : TEXCOORD3,
            //float3 eyePosition: TEXCOORD4,
            out float4 color     : COLOR,
            uniform float3 globalAmbient,
            uniform float3 lightColor,           
            uniform float3 Ke,
            uniform float3 Ka,
            uniform float3 Kd,
            uniform float3 Ks,
            uniform float3 lightPosition,
            uniform float3 eyePosition,
            uniform sampler2D dtext,
            uniform sampler2D maptext,
            uniform float  shininess
            )
{    
    float3 P = position;
 //   float3 normalTex = tex2D(maptext, texCoord).xyz;
 //   float3 N = expand(normalTex);//normalize(normal); // 
    //float3 E = mul(tnb,eyePosition);
    //float3 Light = mul(tnb,lightPosition);
    float3 normalTex = tex2D(maptext, texCoord).xyz;
    float3 N =normalize(mul(inverse(tnb),expand(normalTex)));  //normalize(normal);
    float3 E = eyePosition;
    float3 Light = lightPosition;
    // Compute emissive term
    float3 emissive = Ke;
    // Compute ambient term
    float3 ambient = Ka * globalAmbient;
    // Compute the diffuse term
    float3 L = normalize(Light - P);
    float diffuseLight = max(dot(L, N), 0);
    float3 diffuse = Kd * lightColor * diffuseLight;
    // Compute the specular term
    float3 V = normalize(E - P);
    float3 H = normalize(L + V);
    float specularLight = pow(max(dot(H, N), 0), shininess);
    if (diffuseLight <= 0) specularLight = 0;
    float3 specular = Ks * lightColor * specularLight;
    //float3 tex =lerp(tex2D(maptext, texCoord).xyz,tex2D(dtext, texCoord).xyz,1.0);
    float3 tex =tex2D(dtext, texCoord).xyz;//,1.0);
    float3 light = emissive + ambient + diffuse + specular;
    color.xyz = light * tex;
    color.w = 1;
}

　　上面着色器中，分別有一些注釋的代碼，沒注釋的是在模型空間運算，注釋的是在切線空間運算，效果是一樣的。

　　其實還有第三種方法，不需要在CPU里計算切線，可以啟用幾何着色器，幾何着色器位與頂點着色器與片斷着色器之間，在這中間，可以根據頂點着色器中各變量，計算相應結果，如切線，然后傳入片斷着色器，因我的機器太舊，啟用不起來，以后有機會再試。

　　下面放出對比效果圖：　　

　　第一張加上法線貼圖，第二張沒有，這二張是同一個模型，同樣的精度，可以看到法線貼圖的模型看起來細節要比沒有的高不少。

　　下面放出源代碼(記的安裝Cg Toolkit)：引用DLL 代碼 模型文件部分1 模型文件部分2 模型文件部分3 和前面一樣，其中EDSF前后左右移動，鼠標右鍵加移動鼠標控制方向，空格上升，空格在SHIFT下降。

　　因為模型文件有些大，故分開上傳，大家組織好對應目錄應該就可以編譯過了。

　　其中大家可以試試求法線或求切線，不按照求平均值的方式，而是在設置面時,對面的每個頂點分別設置時，看看效果，相關部分都有注釋。對這部分有興趣的同學不妨改改相關代碼。加了法線貼圖后，有時會發現在某些角度看有黑點，現在不知是代碼里，相關光照與頂點的計算不在一起的原因還是別的原因，各位如果遇到過這個問題，謝謝指點。