android雪花飘落效果,【OpenGL】Shader实例分析(七)- 雪花飘落效果
研究了一个雪花飘落效果。感觉挺不错的。分享给大家,效果例如以下:
代码例如以下:
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
// 屏幕中的坐标。以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
{
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
{
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
{
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 );
}
然后再准备一张贴图,图片中间是一个白色像素,周围都是黑色
效果例如以下:
这段代码处于fragment shader中,意味着屏幕上每个点都会进行上述的算法。详细例如以下,遍历贴图中该点周围的点(上面的代码中为距离该点为20单位的圆上的点)。把周围点中最亮的作为该点的颜色。 上面的贴图有点特殊。仅仅有一个点是白色,其余点都是黑色的。那么仅仅有距离该点正好为20单位的点才会变成亮色,其余的点都是黑色。如上图的结果。
一句话总结上面算法的效果:贴图中的每个“相对亮点”的周围都会产生“相对亮的特定图形”,图形的亮度取决于该点的亮度。越亮越明显。效果能够參考文末的图片。
接下来理解这段代码:
float dd = 150;
for( int i=0; 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 );
}
输出结果例如以下:
a) 1.0+0.7*cos(7.0*an)的图像例如以下:
b)算法中 of 向量的路径为:
结果就非常清晰了;事实上这里算法和《【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中用到的贴图:
经过程序处理后,得到例如以下:
文章完成,欢迎讨论。
android雪花飘落效果,【OpenGL】Shader实例分析(七)- 雪花飘落效果相关推荐
- android+动态光圈效果,OpenGL Shader实例分析(8)彩色光圈效果
本文实例为大家分享了opengl实现彩色光圈效果的具体代码,供大家参考,具体内容如下 研究了一个彩色光圈效果,感觉挺不错的,分享给大家,效果如下: 代码如下: shader "shadert ...
- android 4实例分析,OpenGL Shader实例分析(4)闪光效果
本文实例为大家分享了opengl shader实例闪光效果的具体代码,供大家参考,具体内容如下 在游戏中,当战斗结束后,对一些获取的宝贝需要进行闪光处理.这篇文章介绍一个进行闪光处理的shader,运 ...
- Android从驱动到应用开发实例分析
Android从驱动到应用开发实例分析 1. 第一个android应用程序 Android应用一般包含一个源代码目录src.一个资源目录res.一个配置文件AndroidManifest.xml.和一 ...
- 【OpenGL】Shader实例分析(十)- 钻石效果
好久没有写文章了,赶紧补几篇.最近研究了一个玻璃折射的效果(用在钻石上),虽然没有达到最满意的效果,还是先分享出来,待以后有更好的想法再补充. 先看效果吧: 这里面有两个效果,左边是unity的免费插 ...
- 【OpenGL】Shader实例分析(六)- 卡牌特效
转发请保持地址:http://blog.csdn.net/stalendp/article/details/30989295 本文将介绍怎么通过alpha通道来隐藏信息.并实现卡牌特效. 执行效果例如 ...
- Android TabLayout(选项卡布局)简单用法实例分析
本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到 ...
- android 图库分析,Android开发之ImageSwitcher相册功能实例分析
本文实例讲述了Android开发之ImageSwitcher相册功能.分享给大家供大家参考,具体如下: 简介: 1.ImageSwitcher是viewSwitcher的子类,所以ImageSwitc ...
- android编程九宫格,Android编程之九宫格实现方法实例分析
本文实例讲述了Android编程之九宫格实现方法.分享给大家供大家参考,具体如下: 显示九宫格需要用GridView , 要显示每个格子中的视图有两种方式,第一种方式是做成xml文件,再将xml文件做 ...
- Android中用OpenGL ES Tracer分析绘制过程
Tracer for OpenGL ES(http://developer.android.com/tools/help/gltracer.html)是Android SDK中新增加的开发工具,可逐帧 ...
最新文章
- 【Python】Python字典的高级用法-统计计数
- Struts2封装获取表单数据方式
- AI技术在游戏开发中的五种有效尝试
- 如何将.sof转换成.jic
- JavaScript小技巧一
- 一个25岁董事长给程序员的18条忠告
- ROS机器人程序设计(原书第2版)2.4.8 使用参数服务器
- Linux 命令(8)—— rz 命令与 sz 命令
- 洛谷P3812 【模板】线性基
- Best of Best系列(1)——CVPR
- uniapp 移动端上传文件_移动端上传头像并裁剪 - Clipic.js
- Android UI学习之Gallery
- 中国英语学习论坛(2:考 研 英 语 资 料 索 引)
- 电影下载、播放、制作、转换、各类问题全攻略
- JS里给日期增加n个月的方法
- matlab拷贝不进u盘,Mac无法拷贝文件到U盘怎么办
- Viola-Jones检测器(VJ)---学习笔记
- Self-Attention与Transformer
- ffpmpeg 音量_有画面无声音 · Issue #2729 · bilibili/ijkplayer · GitHub
- ios客户端学习-UIButton
热门文章
- 3050显卡驱动安装+配置pytorch的cuda环境
- 2022数模国赛河南赛区获奖名单
- 华山全敏还是全劲_一梦江湖华山加点_一梦江湖华山加点推荐2020_攻略
- 淘宝店群玩法,双十一商家自运营,淘宝店群好处,建淘宝店群门槛条件
- lol黑屏显示服务器,LOL英雄联盟进去开始就黑屏,英雄服务器中断进不去
- Python按键检测方法汇总
- MAC_BOOKPRO苹果电脑系统常用快捷键大全
- 为什么LINUX不需要碎片整理(Why Linux Doesn’t Need Defragmenting)
- etsme--Me盒使用初体验
- Python系列01|可视化生成200个优惠券呀~