研究了一個雪花飄落效果,感覺挺不錯的,分享給大家,效果如下:
我們提供的服務(wù)有:成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、船山ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的船山網(wǎng)站制作公司
代碼如下:
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 ); }
在理解這段代碼前,先理解怎么畫一個圈,代碼如下:
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)備一張貼圖,圖片中間是一個白色像素,周圍都是黑色
效果如下:
這段代碼處于fragment shader中,意味著屏幕上每個點都會進(jìn)行上述的算法。具體如下,遍歷貼圖中該點周圍的點(上面的代碼中為距離該點為20單位的圓上的點),把周圍點中最亮的作為該點的顏色。 上面的貼圖有點特殊,只有一個點是白色,其余點都是黑色的。那么只有距離該點正好為20單位的點才會變成亮色,其余的點都是黑色,如上圖的結(jié)果。一句話總結(jié)上面算法的效果:貼圖中的每一個“相對亮點”的周圍都會產(chǎn)生“相對亮的特定圖形”,圖形的亮度取決于該點的亮度,越亮越明顯。效果可以參考文末的圖片。
接下來理解這段代碼:
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é)果就很清晰了;其實這里算法和《【OpenGL】Shader實例分析(二)- Heart》中繪制心形的算法很類似。
最后加上時間就可以實現(xiàn)動畫了:
vec2 of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );
第一個iGlobalTime,用來控制雪花的旋轉(zhuǎn),第二個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],對小數(shù)繼續(xù)pow運(yùn)算,次數(shù)越高,該值越小。比如:0.5的1次方是0.5, 2次方為0.25, 3次方為0.125等;所以這句話的作用很明顯:red成份不變,green變小一些,blue變的更小。達(dá)到的效果,使得整體顏色會偏向暖色調(diào)。
b)pow(4.0*p.y*(1.0-p.y), 0.2) 使得屏幕上下兩邊變暗。
最后附上shader中用到的貼圖:
經(jīng)過程序處理后,得到如下:
文章完畢,歡迎討論。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章標(biāo)題:OpenGLShader實例分析(7)雪花飄落效果
分享網(wǎng)址:http://bm7419.com/article28/psshcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、建站公司、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)