当前位置: 首页 > Web前端 > HTML5

风场可视化:随机重置

时间:2023-04-05 01:05:42 HTML5

简介在绘制轨迹的效果中,过了一会儿,你会发现只剩下几条固定的轨迹。原文中也提到了这种现象,并给出了解决方法。个人还是想看看源码。源库:webgl-windOriginMyGitHub原因随着时间的推移,如果offset超过范围,部分粒子会消失,所以需要随机重置消失的风粒子。解决方案需要考虑的问题是:何时重置?复位的判断条件是什么?重置的方法是什么?什么时候重置?在绘制轨迹中,我们知道产生的offset是在末尾更新粒子纹理信息的阶段。这个时候判断是保留新的粒子状态还是重新设置比较合适。重新设置的判定条件是什么?相关的主要发布如下:constupdateFrag=`uniformfloatu_rand_seed;uniformfloatu_drop_rate;uniformfloatu_drop_rate_bump;//伪随机数生成器constvec3rand_constants=vec3(12.9898,844333,78.4373);(constvec2co){floatt=dot(rand_constants.xy,co);returnfract(sin(t)*(rand_constants.z+t));}voidmain(){vec4color=texture2D(u_particles,v_tex_pos);vec2pos=vec2(color.r/255.0+color.b,color.g/255.0+color.a);//从像素RGBAvec2解码粒子位置velocity=mix(u_wind_min,u_wind_max,lookup_wind(pos));floatspeed_t=length(velocity)/length(u_wind_max);pos=fract(1.0+pos+offset);//用于粒子下降的随机种子vec2seed=(pos+v_tex_pos)*u_rand_seed;//下降率是粒子在随机位置重新开始的机会,以避免退化floatdrop_rate=u_drop_rate+speed_t*u_drop_rate_bump;floatdrop=step(1.0-drop_rate,跑d(种子));vec2random_pos=vec2(rand(seed+1.3),rand(seed+2.1));pos=mix(pos,random_pos,drop);}`this.dropRate=0.003;//粒子移动到随机位置的频率this.dropRateBump=0.01;//相对于单个粒子速度的下降率增加//省略代码gl.uniform1f(program.u_rand_seed,Math.random());gl.uniform1f(program.u_drop_rate,this.dropRate);gl.uniform1f(program.u_drop_rate_bump,这个.dropRateBump);先介绍一下内置函数:step(edge,x):如果x