转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603

研究了一个雪花飘落效果。感觉挺不错的。分享给大家,效果例如以下:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

代码分析:


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 );
}
然后再准备一张贴图,图片中间是一个白色像素,周围都是黑色

【OpenGL】Shader实例分析(七)- 雪花飘落效果

效果例如以下:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

这段代码处于fragment shader中,意味着屏幕上每个点都会进行上述的算法。详细例如以下,遍历贴图中该点周围的点(上面的代码中为距离该点为20单位的圆上的点)。把周围点中最亮的作为该点的颜色。 上面的贴图有点特殊。仅仅有一个点是白色,其余点都是黑色的。那么仅仅有距离该点正好为20单位的点才会变成亮色,其余的点都是黑色。如上图的结果。

一句话总结上面算法的效果:贴图中的每个“相对亮点”的周围都会产生“相对亮的特定图形”,图形的亮度取决于该点的亮度。越亮越明显效果能够參考文末的图片。

接下来理解这段代码:

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 );
}
输出结果例如以下:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

a)  1.0+0.7*cos(7.0*an)的图像例如以下:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

b)算法中 of 向量的路径为:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

结果就非常清晰了;事实上这里算法和《【OpenGL】Shader实例分析(二)- Heart》中绘制心形的算法非常类似。

最后加上时间就能够实现动画了:

vec2  of = vec2( cos(an), sin(an) ) * (1.0+0.6*cos(7.0*an+iGlobalTime)) + vec2( 0.0, iGlobalTime );
第一个iGlobalTime。用来控制雪花的旋转。第二个iGlobalTime使雪花下落。


2)后期颜色等处理

这里能够理解为一种postEffect处理。详细是例如以下的代码贡献的效果:

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)) 这句话使得颜色变成暖色调。

col值的范围为[0,1],对小数继续pow运算,次数越高,该值越小。

比方:0.5的1次方是0.5。 2次方为0.25。 3次方为0.125等。所以这句话的作用非常明显:red成份不变,green变小一些,blue变的更小。达到的效果。使得总体颜色会偏向暖色调。

b)pow(4.0*p.y*(1.0-p.y), 0.2) 使得屏幕上下两边变暗。


最后附上shader中用到的贴图:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

经过程序处理后,得到例如以下:

【OpenGL】Shader实例分析(七)- 雪花飘落效果

文章完成,欢迎讨论。

相关文章:

  • 2022-12-23
  • 2022-02-18
  • 2022-12-23
  • 2022-12-23
  • 2021-12-02
  • 2022-12-23
  • 2022-12-23
  • 2021-08-18
猜你喜欢
  • 2021-07-23
  • 2021-09-03
  • 2021-09-05
  • 2021-08-22
  • 2023-01-01
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案