柏林噪聲實踐(二) 水與火,頂點紋理拾取

　　在上文中，會發現，調用3維柏林實現海水的波動效果，實在是難為CPU了，在這里，我們用着色器Cg語言來把相關計算過程移到GPU,看下效果。

　　先說下，原來紋理我們拿來只限於給模型着色，而在現代GPGPU中，有個比較重要的概念就是，紋理就是數組，想想也對，紋理原來我們放的是RGBA值，那么如果我們用來存取一些別的數據，而不是RGBA，在着色器中把紋理里數據取出來，而不是用於給模型着色,那能實現什么樣的功能了。

　　本文中主要功能都在着色器中，故下面先給出着色器代碼，包含原來的noise計算，還有動畫與着色，可以對比上文F#代碼來看。

//Fragment shader to write color for each pixel

#define ONE 0.00390625
#define ONEHALF 0.001953125

float fade(float t) {
    //return t*t*(3.0-2.0*t); // Old fade
  return t*t*t*(t*(t*6.0-15.0)+10.0);
    // Improved fade
}
 
float noise(float3 P,sampler2D permTexture)
{
    float3 Pi = ONE*floor(P)+ONEHALF;
    float3 Pf = P-floor(P);
    // Noise contributions from (x=0, y=0), z=0 and z=1
  float perm00 = tex2D(permTexture, Pi.xy).a ;
    float3  grad000 = tex2D(permTexture, float2(perm00, Pi.z)).rgb * 4.0 - 1.0;
    float n000 = dot(grad000, Pf);
    float3  grad001 = tex2D(permTexture, float2(perm00, Pi.z + ONE)).rgb * 4.0 - 1.0;
    float n001 = dot(grad001, Pf - float3(0.0, 0.0, 1.0));
    // Noise contributions from (x=0, y=1), z=0 and z=1
  float perm01 = tex2D(permTexture, Pi.xy + float2(0.0, ONE)).a ;
    float3  grad010 = tex2D(permTexture, float2(perm01, Pi.z)).rgb * 4.0 - 1.0;
    float n010 = dot(grad010, Pf - float3(0.0, 1.0, 0.0));
    float3  grad011 = tex2D(permTexture, float2(perm01, Pi.z + ONE)).rgb * 4.0 - 1.0;
    float n011 = dot(grad011, Pf - float3(0.0, 1.0, 1.0));
    // Noise contributions from (x=1, y=0), z=0 and z=1
  float perm10 = tex2D(permTexture, Pi.xy + float2(ONE, 0.0)).a ;
    float3  grad100 = tex2D(permTexture, float2(perm10, Pi.z)).rgb * 4.0 - 1.0;
    float n100 = dot(grad100, Pf - float3(1.0, 0.0, 0.0));
    float3  grad101 = tex2D(permTexture, float2(perm10, Pi.z + ONE)).rgb * 4.0 - 1.0;
    float n101 = dot(grad101, Pf - float3(1.0, 0.0, 1.0));
    // Noise contributions from (x=1, y=1), z=0 and z=1
  float perm11 = tex2D(permTexture, Pi.xy + float2(ONE, ONE)).a ;
    float3  grad110 = tex2D(permTexture, float2(perm11, Pi.z)).rgb * 4.0 - 1.0;
    float n110 = dot(grad110, Pf - float3(1.0, 1.0, 0.0));
    float3  grad111 = tex2D(permTexture, float2(perm11, Pi.z + ONE)).rgb * 4.0 - 1.0;
    float n111 = dot(grad111, Pf - float3(1.0, 1.0, 1.0));
    // Blend contributions along x
  float4 n_x = lerp(float4(n000, n001, n010, n011), float4(n100, n101, n110, n111), fade(Pf.x));
    // Blend contributions along y
  float2 n_xy = lerp(n_x.xy, n_x.zw, fade(Pf.y));
    // Blend contributions along z
  float n_xyz = lerp(n_xy.x, n_xy.y, fade(Pf.z));
    return n_xyz;
}


float turbulence(int octaves, float3 P, float lacunarity, float gain,sampler2D permTexture)
{
    float sum = 0;
    float scale = 1;
    float totalgain = 1;
    for(int i=0;i<octaves;i++){
        sum += totalgain*noise(P*scale,permTexture);
        scale *= lacunarity;
        totalgain *= gain;
    }

  return abs(sum);
}


struct v_Output {
    float4 position : POSITION;
    float pc : TEXCOORD0;
}
;
v_Output main(float3 position : POSITION,   
                           uniform float4x4 mvp,
                           uniform float time,
                           uniform sampler2D permTexture)
{
    v_Output OUT;
    float3 pf = float3(position.xz,time);
    //float ty = noise(pf,permTexture);
    //水
    //float ty = turbulence(4,pf,2,0.5,permTexture);
    //float yy = ty * 0.5 + 0.5;
    //火
    float ty = turbulence(4,pf,0.6,4,permTexture);
    float yy = ty * 0.2 + 0.5;
    float4 pos = float4(position.x,yy,position.z,1);
    OUT.position = mul(mvp,pos);
    OUT.pc = yy;
    return OUT;
}


struct f_Output {
    float4 color : COLOR;
}
;
f_Output fragmentShader(v_Output vin)
{
    f_Output OUT;    
    //水
    //float3 color1 = float3(0.5*vin.pc, 0.8*vin.pc, 0.9*vin.pc);
    //火
    float3 color1 = float3(0.98*vin.pc, 0.6*vin.pc, 0.15*vin.pc);
    OUT.color = float4(color1,1.0);
    return OUT;
}

　　初看起來，可能感覺和上面沒什么相同點，我們來具體分析下，上面，ONE是0.00390625，其實就是1/256，而sampler2D是一個二維紋理，而這個二維紋理中，RGB填充的是對應前面的梯度表，A對應的是前面的排列表，再來看看，是不是感覺生成noise有很多相似的地方。可能有仔細看這代碼的同學吧，然后會發現，原來的梯度表和排列表應該都是一維啊，你這給的是二維紋理，對應不上啊，並且，原來獲取梯度索引用的是p.[p.[x0] + y0]這種，而在這個noise，用的是tex2D(permTexture, Pi.xy).a，明明差別很大啊？不要急，我們來看，這個二維紋理的生成過程。

    //生成一張圖片RGBA源,用於測試
    member this.CreateTexture() =        
        init()
        let size = B * B
        //生成二維紋理GRBA,紋理長與度分別為B。
        let data = Array2D.init size 4 (fun yx i ->
           let y = yx / 256 //每列索引
           let x = yx % 256 //每行數據索引
           let offest = yx * 4
           let vp = p.[p.[x] + y]
           let vg = pg.[vp] * 64.0 + vec3(64.0,64.0,64.0)//由-1到1,映射成0-128
           if i = 0 then byte (vg.X)
           else if i = 1 then byte (vg.Y)
           else if i = 1 then byte (vg.Z)
           else byte (vg.X)
           )
        data

　看到這里，大家是不是明白了上面二個問題，他把原來得到梯度索引的方法映射到一個二維數組上了。注意一點，顏色應該是0-256，但是這里是映射成0-128,所以在着色器中乘以的是4，得到的梯度又變成-1到1了，我前面所說映射成-1到3，應該是錯的，梯度應該是定了范圍到-1到1之間，這里如果有具體研究過的同學，歡迎告知。用了不使之看起來全是一個顏色，看不清變化的波形,故在頂點着色器中，給出一個noise值，用於片斷着色器中顏色賦值。

　　在着色器中，紋理已經不同以前是給物體着色，而是用於計算noise的梯度表與排列表，然后用模型的頂點x,z來做索引，這種用法也叫做頂點紋理拾取。最后在其中分別模擬了二種效果，一種是急流河水，一種是奔騰火山，用的是PerlinNoise，也就是着色器中的turbulence中指定不同的參數，具體分析前面也有說，這就不重復了。

　　最后，給出在form中更新Cg的參數的相關代碼。

    override v.OnRenderFrame e =
        base.OnRenderFrame e
        GL.Clear(ClearBufferMask.ColorBufferBit ||| ClearBufferMask.DepthBufferBit)
        let mutable lookat = Matrix4.LookAt(caram.Eye,caram.Target,Vector3.UnitY)
        GL.MatrixMode(MatrixMode.Modelview)
        GL.LoadMatrix(&lookat)

        cgContext.EnableProfile()
        let mv = lookat
        mv.Transpose()
        let mutable p = Matrix4.Identity
        GL.GetFloat(GetPName.ProjectionMatrix,&p)
        p.Transpose()
        let mvp = Matrix4.Mult(p,mv)
        cgContext.VertexParameter("mvp").SetMatrix(MatrixToArray1 mvp)
        cgContext.VertexParameter("permTexture").EnableTexture()
        let date = float (DateTime.Now.Millisecond /200) 
        cgContext.VertexParameter("time").Set(date)
        plane.Draw()
        cgContext.VertexParameter("permTexture").DisableTexture()
        cgContext.DisableProfile()

        v.SwapBuffers()

　　其中，傳入mvp,前面的模型導入有詳細說明，這里也不多說，然后是上面生成的紋理，最后是時間，這里200，差不多就是每秒更新5次，大家可以自己更改這個數，使之達到自己滿意的效果，下面給出急流河水與奔騰火山的效果圖。

　　上下分別水與火山二楨動畫，最后大家看下，是不是一點延遲都沒有，把noise的代碼移到GPU后，腰不疼了，腳不酸了。

　　完整代碼 http://files.cnblogs.com/zhouxin/CgTest.zip

　　和以前一樣，其中EDSF前后左右移動，鼠標右鍵加移動鼠標控制方向，空格上升，空格在SHIFT下降。如果想看上文的效果，也是CPU生成noise版本，只需要在上面的OnRenderFrame，不啟用着色器相關代碼就可以了。大家有興趣,可以試着改變其中給出的一些參數,來達到一個各式各樣的地面效果.