[OpenGL] shader instance analysis (7)-Snowflake Falling Effect

Keep forwarding address: http://blog.csdn.net/stalendp/article/details/40624603

After studying the effect of falling snow, I feel very good. I will share it with you. The effect is as follows:

The Code is as follows:

Shader "shadertoy/flakes" {// https://www.shadertoy.com/view/4d2xzcpropertiesjavasimouse ("Mouse POS", vector) = (100,100,) ichannel0 ("ichannel0", 2d) = "white" {} ichannelresolution0 ("ichannelresolution0", vector) = (100,100,)} 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 // screen size # define iresolution _ screenparams // coordinates on the screen, in 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 (150, 0); float dd =; For (INT I = 0; I <dd; I ++) {float an = 6.2831 * float (I)/DD; vec2 of = vec2 (COS (an), sin ()) * (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 implements endcg} fallback off}

Code Analysis: 1) The algorithm for drawing the Pentagon snowflakeThe Code is as follows:

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 );}

Before understanding this code, first understand how to draw a circle. The Code is as follows:

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 );}

Then prepare a texture with a white pixel in the middle and black surrounding it.

The effect is as follows:

Because this code is in vertex shader, it means that the above algorithm is performed on each vertex on the screen. The algorithm is as follows: traverse the points around the point in the texture (the above Code is the point on the circle 20 units away from the point). The brightest point is the color of the point. Because only one point in the texture is white and the rest are black. Then, only a point of 20 units away from this point will become bright, and the remaining points will be black, as shown in the result.

Next we will understand this Code:

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 );}

The output result is as follows:

A) the image of 1.0 + 0.7 * Cos (7.0 * an) is as follows:

B) In the algorithm, the path of the vector is:

The results are clear. In fact, the algorithm here is similar to the algorithm used to draw a heart shape in [OpenGL] shader instance analysis (II)-heart.

2) Subsequent Color Processing

It can be understood as a kind of posteffect processing, specifically the effect contributed by the following code:

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) makes the color warm. The Col value ranges from 0 to 1. The POW operation is performed on decimal places. The higher the number of times, the smaller the value. For example, the power of 0.5 is 0.5, the power of 2 is 0.25, and the power of 3 is 0.125. So the role of this sentence is obvious: the red component remains unchanged, and the green value becomes smaller, blue is smaller. The effect, so that the overall color will be warm.

B) Pow (4.0 * P. y * (1.0-P. Y), 0.2) dimmed both sides of the screen.

The article is complete. Welcome to discuss it.

The following figure shows the images used by the shader:

[OpenGL] shader instance analysis (7)-Snowflake Falling Effect