中級Shader教程05 2D雪花


本篇主要技術點有:
1. grid 空間劃分
2. 2D模擬3D中”分層”的概念
3. 透視模擬

1.原理:

前面中介紹了2D模擬3D中的一些小技巧,這裏用到了透視以及空間劃分的概念,這裏將不再重複:

2.分析:

ps:後面()中的數字表示前面透視中的特點
根據 中級Shader教程02 基本圖形2D中介紹了相應的一些概念
將上述知識具體到觀察下雪這各場景中:
1. 雪花前面的大點(1)
2. 雪花前面的少點(2)
3. 雪花前面的亮點(3)

其他的特點有:

  1. 整體是向下降落,因爲透視關係後面的下降速度慢點(2)
  2. 現實中的雪花的薄厚程度不一
  3. 雪花的空間分佈比較隨機
  4. 雪花的下落過程的可能會左右移動

3.代碼實現:

1.空間劃分

uv *=10;//將uv放大後frac
uv = frac(uv);
uv-=0.5

2.添加隨機值

fixed2 Rand22(fixed2 co){
    fixed x = frac(sin(dot(co.xy ,fixed2(122.9898,783.233))) * 43758.5453);
    fixed y = frac(sin(dot(co.xy ,fixed2(457.6537,537.2793))) * 37573.5913);
    return fixed2(x,y);
}
fixed2 r = Rand22(floor(uv));
col = fixed3(r,0.0);

3.uv偏移

float2 rgrid = Rand22(floor(uv));//0~1.0
uv = frac(uv);
uv -= (rgrid*2.0-1.0) * 0.35;
uv -=0.5;

4.繪製基本圖形

float r = length(uv);

float r = length(uv);
float circleSize = 0.3;
float val = smoothstep(circleSize,-circleSize,r);
float3 col = float3(val,val,val)* rgrid.x ;

5.添加不同的layer

針對不同的layer 需要調節的參數有
1.格子數量
2.y軸移動速度
3.x軸移動速度
4.格子的隨機值

基本屬性定義

        SIZE_RATE ("SIZE_RATE", float) = 0.1
        XSPEED ("XSPEED", float) = 0.2
        YSPEED ("YSPEED", float) = 0.5
        LAYERS ("LAYERS", float) = 10

單層繪製

        float3 SnowSingleLayer(float2 uv,float layer){
                fixed3 acc = fixed3(0.0,0.0,0.0);//讓雪花的大小變化
                uv = uv * (2.0+layer);//透視視野變大效果
                float xOffset = uv.y * (((Hash11(layer)*2-1.)*0.5+1.)*XSPEED);//增加x軸移動
                float yOffset = (YSPEED*ftime);//y軸下落過程
                uv += fixed2(xOffset,yOffset);
                float2 rgrid = Hash22(floor(uv)+(31.1759*layer));
                uv = frac(uv);
                uv -= (rgrid*2-1.0) * 0.35;
                uv -=0.5;
                float r = length(uv);
                //讓大小變化點
                float circleSize = 0.05*(1.0+0.3*sin(ftime*SIZE_RATE));
                float val = smoothstep(circleSize,-circleSize,r);
                float3 col = float3(val,val,val)* rgrid.x ;
                return col;
            }

        ENDCG
    }//end pass
  }//end SubShader
}//end Shader

1.多層繪製

float3 Snow(float2 uv){
    float3 acc = float3(0,0,0);
    for (fixed i=0.;i<LAYERS;i++) {
        acc += SnowSingleLayer(uv,i); 
    }
    return acc;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章