快捷導(dǎo)航

OpenGL Shader實(shí)例分析（7）雪花飄落效果

更新時(shí)間：2019年02月28日 10:36:00 作者：stalendp

這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實(shí)例分析第7篇，實(shí)現(xiàn)雪花飄落效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

研究了一個(gè)雪花飄落效果，感覺(jué)挺不錯(cuò)的，分享給大家，效果如下：

代碼如下：

Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc
 Properties{
 iMouse ("Mouse Pos", Vector) = (100,100,0,0)
 iChannel0("iChannel0", 2D) = "white" {} 
 iChannelResolution0 ("iChannelResolution0", Vector) = (100,100,0,0)
 }
 
 CGINCLUDE 
 #include "UnityCG.cginc" 
 #pragma target 3.0 
 #pragma glsl
 
 #define vec2 float2
 #define vec3 float3
 #define vec4 float4
 #define mat2 float2x2
 #define iGlobalTime _Time.y
 #define mod fmod
 #define mix lerp
 #define atan atan2
 #define fract frac 
 #define texture2D tex2D
 // 屏幕的尺寸
 #define iResolution _ScreenParams
 // 屏幕中的坐標(biāo)，以pixel為單位
 #define gl_FragCoord ((_iParam.srcPos.xy/_iParam.srcPos.w)*_ScreenParams.xy) 
 
 #define PI2 6.28318530718
 #define pi 3.14159265358979
 #define halfpi (pi * 0.5)
 #define oneoverpi (1.0 / pi)
 
 fixed4 iMouse;
 sampler2D iChannel0;
 fixed4 iChannelResolution0;
 
 struct v2f { 
  float4 pos : SV_POSITION; 
  float4 srcPos : TEXCOORD0; 
 };  
 
 // precision highp float;
 v2f vert(appdata_base v){ 
  v2f o;
  o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
  o.srcPos = ComputeScreenPos(o.pos); 
  return o; 
 } 
 
 vec4 main(v2f _iParam);
 
 fixed4 frag(v2f _iParam) : COLOR0 { 
 return main(_iParam);
 } 
 
 
 vec4 main(v2f _iParam) {
 vec2 p = gl_FragCoord.xy/iResolution.xy;
 vec3 col = vec3(0,0,0);
 float dd = 150;
 for( int i=0; i<dd; i++ )
 {
  float an = 6.2831*float(i)/dd;
  vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );
  col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
  col = max( col, texture2D( iChannel0, p + 5.0*of/iResolution.xy ).xyz );
 }
 col = pow( col, vec3(1.0,2.0,3.0) ) * pow( 4.0*p.y*(1.0-p.y), 0.2);
 
 return vec4( col, 1.0 );
 }
 
 ENDCG 
 
 SubShader { 
 Pass { 
  CGPROGRAM 
 
  #pragma vertex vert 
  #pragma fragment frag 
  #pragma fragmentoption ARB_precision_hint_fastest 
 
  ENDCG 
 } 
 } 
 FallBack Off 
}

代碼分析：

1）七邊形雪花的繪制算法

具體代碼如下：

float dd = 150;
for( int i=0; i<dd; i++ )
{
 float an = 6.2831*float(i)/dd;
 vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );
 col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
 col = max( col, texture2D( iChannel0, p + 5.0*of/iResolution.xy ).xyz );
}

在理解這段代碼前，先理解怎么畫(huà)一個(gè)圈，代碼如下：

float dd = 30;
for( int i=0; i<dd; i++ )
{
 float an = 6.2831*float(i)/dd;
 vec2 of = vec2( cos(an), sin(an) );
 col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
}

然后再準(zhǔn)備一張貼圖，圖片中間是一個(gè)白色像素，周圍都是黑色

效果如下：

這段代碼處于fragment shader中，意味著屏幕上每個(gè)點(diǎn)都會(huì)進(jìn)行上述的算法。具體如下，遍歷貼圖中該點(diǎn)周圍的點(diǎn)（上面的代碼中為距離該點(diǎn)為20單位的圓上的點(diǎn)），把周圍點(diǎn)中最亮的作為該點(diǎn)的顏色。上面的貼圖有點(diǎn)特殊，只有一個(gè)點(diǎn)是白色，其余點(diǎn)都是黑色的。那么只有距離該點(diǎn)正好為20單位的點(diǎn)才會(huì)變成亮色，其余的點(diǎn)都是黑色，如上圖的結(jié)果。一句話總結(jié)上面算法的效果：貼圖中的每一個(gè)“相對(duì)亮點(diǎn)”的周圍都會(huì)產(chǎn)生“相對(duì)亮的特定圖形”，圖形的亮度取決于該點(diǎn)的亮度，越亮越明顯。效果可以參考文末的圖片。

接下來(lái)理解這段代碼：

float dd = 150;
for( int i=0; i<dd; i++ )
{
 float an = 6.2831*float(i)/dd;
 vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.7*cos(7.0*an));
 col = max( col, texture2D( iChannel0, p + 20*of/iResolution.xy ).xyz );
// col = max( col, texture2D( iChannel0, p + 5.0*of/iResolution.xy ).xyz );
}

輸出結(jié)果如下：

a) 1.0+0.7*cos(7.0*an)的圖像如下：

b）算法中 of 向量的路徑為：

結(jié)果就很清晰了；其實(shí)這里算法和《【OpenGL】Shader實(shí)例分析（二）－ Heart》中繪制心形的算法很類似。

最后加上時(shí)間就可以實(shí)現(xiàn)動(dòng)畫(huà)了：

vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );

第一個(gè)iGlobalTime，用來(lái)控制雪花的旋轉(zhuǎn)，第二個(gè)iGlobalTime使雪花下落。

2）后期顏色等處理

這里可以理解為一種postEffect處理，具體是如下的代碼貢獻(xiàn)的效果：

col = pow( col, vec3(1.0,2.0,3.0) ) * pow( 4.0*p.y*(1.0-p.y), 0.2);

a) pow(col, vec3(1.0, 2.0, 3.0)) 這句話使得顏色變成暖色調(diào)。col值的范圍為[0,1]，對(duì)小數(shù)繼續(xù)pow運(yùn)算，次數(shù)越高，該值越小。比如：0.5的1次方是0.5， 2次方為0.25， 3次方為0.125等；所以這句話的作用很明顯：red成份不變，green變小一些，blue變的更小。達(dá)到的效果，使得整體顏色會(huì)偏向暖色調(diào)。

b）pow(4.0*p.y*(1.0-p.y), 0.2) 使得屏幕上下兩邊變暗。

最后附上shader中用到的貼圖：