18910140161

Html5画布实现樱花漫天飞舞效果

顺晟科技

2021-06-16 11:02:06

210

!声明文档类型

超文本标记语言

meta charset='utf-8 '

标题樱花漫天飞舞/title

/head

风格

body {

padding:0

边距n:0

飞越:隐藏;

高度: 600px

相对位置:

}

画布{

padding:0

边距n:0

}

div.btnbg {

位置:固定;

left:0

top:0

}

/style

身体

画布id='樱花/canvas

div class='btnbg '

/div

!-樱花着色器-

脚本id='樱_点_vsh '类型='x着色器/x_vertex '

均匀mat4上行截面;

uniform mat4 uModelview

均匀vec3溶液;

均匀vec3 uOffset

均匀vec3 uDOF//x :焦距,y :焦距半径,z:max更大半径

均匀vec3 uFade//x :开始距离,y :半距离,z :最近渐变开始

属性vec3位置;

属性vec3 aEuler

属性vec2 aMisc//x:size,y:fade

变化的向量对;

可变浮动尺寸

变化的浮动触须;

可变浮动pdist

//变mat3 rotMat

变化的vec3 normX

变化的vec3 normY

变化的vec3 normZ

vec3正常变化;

变化的浮动扩散;

变化的浮动镜面;

可变浮动rstop

浮动距离可变;

void main(void) {

//投影基于垂直角度

vec 4 pos=uModelview * vec 4(apoposition Uoffset,1.0);

gl _ Position=向上引用* pos

GL _ PointSiZe=AMICc。x *向上截面[1][1]/-位置。z * ureSolution。y * 0.5

对立=pos.xyz

psize=aMisc.x

pdist=长度(pos。XYZ);

帕尔帕=smoothstep(0.0,1.0,(pdist-0.1)/ufade。z);

vec 3 elr sn=sin(AEuler);

vec 3 El RCS=cos(AEuler);

mat3 rotx=mat3(

1.0, 0.0, 0.0,

0.0,elrcs.x,elrsn.x,

0.0,-elrsn.x,elrcs.x

);

mat3 roty=mat3(

elrcs.y,0.0,-elrsn.y,

0.0, 1.0, 0.0,

elrsn.y,0.0,elrcs.y

);

mat3 rotz=mat3(

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航