资源描述
HTML5 canvas纸片3D旋转动画.docx
《HTML5 canvas纸片3D旋转动画.docx》由会员分享，可在线阅读，更多相关《HTML5 canvas纸片3D旋转动画.docx（23页珍藏版）》请在冰点文库上搜索。
HTML5canvas纸片3D旋转动画
doctypehtml>
卷曲噪音
//
//Description:
ArrayandtexturelessGLSL2D/3D/4Dsimplex
//noisefunctions.
//Author:
IanMcEwan,AshimaArts.
//Maintainer:
ijm
//Lastmod:
20110822（ijm）
//License:
Copyright（C）2011AshimaArts.Allrightsreserved.
//DistributedundertheMITLicense.SeeLICENSEfile.
//
//
vec3mod289（vec3x）{
returnx-floor（x*（1.0/289.0））*289.0;
}
vec4mod289（vec4x）{
returnx-floor（x*（1.0/289.0））*289.0;
}
vec4permute（vec4x）{
returnmod289（（（x*34.0）+1.0）*x）;
}
vec4taylorInvSqrt（vec4r）{
return1.79284291400159-0.85373472095314*r;
}
floatsnoise（vec3v）{
constvec2C=vec2（1.0/6.0,1.0/3.0）;
constvec4D=vec4（0.0,0.5,1.0,2.0）;
//Firstcorner
vec3i=floor（v+dot（v,C.yyy））;
vec3x0=v-i+dot（i,C.xxx）;
//Othercorners
vec3g=step（x0.yzx,x0.xyz）;
vec3l=1.0-g;
vec3i1=min（g.xyz,l.zxy）;
vec3i2=max（g.xyz,l.zxy）;
//x0=x0-0.0+0.0*C.xxx;
//x1=x0-i1+1.0*C.xxx;
//x2=x0-i2+2.0*C.xxx;
//x3=x0-1.0+3.0*C.xxx;
vec3x1=x0-i1+C.xxx;
vec3x2=x0-i2+C.yyy;//2.0*C.x=1/3=C.y
vec3x3=x0-D.yyy;//-1.0+3.0*C.x=-0.5=-D.y
//Permutations
i=mod289（i）;
vec4p=permute（permute（permute（
i.z+vec4（0.0,i1.z,i2.z,1.0））
+i.y+vec4（0.0,i1.y,i2.y,1.0））
+i.x+vec4（0.0,i1.x,i2.x,1.0））;
//Gradients:
7x7pointsoverasquare,mappedontoanoctahedron.
//Theringsize17*17=289isclosetoamultipleof49（49*6=294）
floatn_=0.142857142857;//1.0/7.0
vec3ns=n_*D.wyz-D.xzx;
vec4j=p-49.0*floor（p*ns.z*ns.z）;//mod（p,7*7）
vec4x_=floor（j*ns.z）;
vec4y_=floor（j-7.0*x_）;//mod（j,N）
vec4x=x_*ns.x+ns.yyyy;
vec4y=y_*ns.x+ns.yyyy;
vec4h=1.0-abs（x）-abs（y）;
vec4b0=vec4（x.xy,y.xy）;
vec4b1=vec4（x.zw,y.zw）;
//vec4s0=vec4（lessThan（b0,0.0））*2.0-1.0;
//vec4s1=vec4（lessThan（b1,0.0））*2.0-1.0;
vec4s0=floor（b0）*2.0+1.0;
vec4s1=floor（b1）*2.0+1.0;
vec4sh=-step（h,vec4（0.0））;
vec4a0=b0.xzyw+s0.xzyw*sh.xxyy;
vec4a1=b1.xzyw+s1.xzyw*sh.zzww;
vec3p0=vec3（a0.xy,h.x）;
vec3p1=vec3（a0.zw,h.y）;
vec3p2=vec3（a1.xy,h.z）;
vec3p3=vec3（a1.zw,h.w）;
//Normalisegradients
vec4norm=taylorInvSqrt（vec4（dot（p0,p0）,dot（p1,p1）,dot（p2,p2）,dot（p3,p3）））;
p0*=norm.x;
p1*=norm.y;
p2*=norm.z;
p3*=norm.w;
//Mixfinalnoisevalue
vec4m=max（0.6-vec4（dot（x0,x0）,dot（x1,x1）,dot（x2,x2）,dot（x3,x3））,0.0）;
m=m*m;
return42.0*dot（m*m,vec4（dot（p0,x0）,dot（p1,x1）,dot（p2,x2）,dot（p3,x3）））;
}
vec3snoiseVec3（vec3x）{
floats=snoise（vec3（x））;
floats1=snoise（vec3（x.y-19.1,x.z+33.4,x.x+47.2））;
floats2=snoise（vec3（x.z+74.2,x.x-124.5,x.y+99.4））;
vec3c=vec3（s,s1,s2）;
returnc;
}
//via:
https:
//petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
vec3curlNoise（vec3p）{
constfloate=0.1;
floatn1=snoise（vec3（p.x,p.y+e,p.z））;
floatn2=snoise（vec3（p.x,p.y-e,p.z））;
floatn3=snoise（vec3（p.x,p.y,p.z+e））;
floatn4=snoise（vec3（p.x,p.y,p.z-e））;
floatn5=snoise（vec3（p.x+e,p.y,p.z））;
floatn6=snoise（vec3（p.x-e,p.y,p.z））;
floatx=n2-n1-n4+n3;
floaty=n4-n3-n6+n5;
floatz=n6-n5-n2+n1;
constfloatdivisor=1.0/（2.0*e）;
returnnormalize（vec3（x,y,z）*divisor）;
}
uniformfloattimer;
uniformfloatdelta;
uniformfloatspeed;
uniformfloatfactor;
uniformfloatevolution;
uniformfloatradius;
voidmain（）{
vec2uv=gl_FragCoord.xy/resolution.xy;
vec4c=texture2D（posTex,uv）;
vec4oldVel=texture2D（velTex,uv）;
vec3pos=c.xyz;
floatlife=oldVel.a;
floats=life/100.0;
floatspeedInc=1.0;
vec3v=factor*speedInc*delta*speed*（curlNoise（.2*pos））;
pos+=v;
life-=0.3;
if（life<=0.0）{
pos=texture2D（defTex,uv）.xyz;
life=100.0;
}
gl_FragColor=vec4（pos-c.xyz,life）;
}
voidmain（）{
vec2uv=gl_FragCoord.xy/resolution.xy;
vec4tmpPos=texture2D（posTex,uv）;
vec3pos=tmpPos.xyz;
vec4tmpVel=texture2D（velTex,uv）;
vec3vel=tmpVel.xyz;
pos+=vel;
gl_FragColor=vec4（pos,0.0）;
}
voidmain（）{
vec2uv=gl_FragCoord.xy/resolution.xy;
vec4tmpPos=texture2D（defTex,uv）;
gl_FragColor=vec4（tmpPos.rgb,0.0）;
}
attributefloataNum;
attributefloataRandom;
//attributevec2aPosUv
attributevec3aColor;
uniformsampler2DposMap;
uniformsampler2DvelMap;
uniformfloatsize;
uniformfloattimer;
uniformvec3boxScale;
uniformfloatmeshScale;
uniformmat4shadowMatrix;
varyingvec3vPosition;
varyingvec3vColor;
varyingvec4vShadowCoord;
mat3calcLookAtMatrix（vec3vector,floatroll）{
vec3rr=vec3（sin（roll）,cos（roll）,0.0）;
vec3ww=normalize（vector）;
vec3uu=normalize（cross（ww,rr））;
vec3vv=normalize（cross（uu,ww））;
returnmat3（uu,ww,vv）;
}
voidmain（）{
vec2posUv;
posUv.x=mod（aNum,（size-1.0））;
posUv.y=float（aNum/（size-1.0））;
posUv/=vec2（size）;
vec4cubePosition=texture2D（posMap,posUv）;
vec4cubeVelocity=texture2D（velMap,posUv）;
floatalpha=cubeVelocity.a/100.0;
floatscale=0.025*4.0*（1.0-alpha）*alpha;
mat4localRotationMat=mat4（calcLookAtMatrix（cubeVelocity.xyz,0.0））;
vec3modifiedVertex=（localRotationMat*vec4（position*scale*aRandom*（vec3（1.0））*boxScale*meshScale,1.0））.xyz;
vec3modifiedPosition=modifiedVertex+cubePosition.xyz;
gl_Position=projectionMatrix*modelViewMatrix*vec4（modifiedPosition,1.0）;
vPosition=modifiedPosition;
//via:
line7in
vShadowCoord=shadowMatrix*modelMatrix*vec4（modifiedPosition,1.）;
vColor=aColor;
}
varyingvec3vPosition;
varyingvec3vColor;
varyingvec4vShadowCoord;
uniformsampler2DshadowMap;
uniformvec2shadowMapSize;
uniformfloatshadowBias;
uniformfloatshadowRadius;
//uniformsampler2Dprojector;
uniformvec3lightPosition;
uniformvec2resolution;
floatbias;
//via:
constfloatUnpackDownscale=255./256.;//0..1->fraction（excluding1）
constvec3PackFactors=vec3（256.*256.*256.,256.*256.,256.）;
constvec4UnpackFactors=UnpackDownscale/vec4（PackFactors,1.）;
floatunpackRGBAToDepth（constinvec4v）{
returndot（v,UnpackFactors）;
}
floattexture2DCompare（sampler2Ddepths,vec2uv,floatcompare）{
returnstep（compare,unpackRGBAToDepth（texture2D（depths,uv）））;
}
floatgetShadow（sampler2DshadowMap,vec2shadowMapSize,floatshadowBias,floatshadowRadius,vec4shadowCoord）{
floatshadow=1.0;
shadowCoord.xyz/=shadowCoord.w;
shadowCoord.z+=shadowBias;
//if（something&&something）breaksATIOpenGLshadercompiler
//if（all（something,something））usingthisinstead
bvec4inFrustumVec=bvec4（shadowCoord.x>=0.0,shadowCoord.x<=1.0,shadowCoord.y>=0.0,shadowCoord.y<=1.0）;
boolinFrustum=all（inFrustumVec）;
bvec2frustumTestVec=bvec2（inFrustum,shadowCoord.z<=1.0）;
boolfrustumTest=all（frustumTestVec）;
if（frustumTest）{
vec2texelSize=vec2（1.0）/shadowMapSize;
floatdx0=-texelSize.x*shadowRadius;
floatdy0=-texelSize.y*shadowRadius;
floatdx1=+texelSize.x*shadowRadius;
floatdy1=+texelSize.y*shadowRadius;
shadow=（
texture2DCompare（shadowMap,shadowCoord.xy+vec2（dx0,dy0）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（0.0,dy0）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（dx1,dy0）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（dx0,0.0）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（dx1,0.0）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（dx0,dy1）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（0.0,dy1）,shadowCoord.z）+
texture2DCompare（shadowMap,shadowCoord.xy+vec2（dx1,dy1）,shadowCoord.z）
）*（1.0/9.0）;
}
returnshadow;
}
mat2rotationMatrix（floata）{
returnmat2（cos（a）,sin（a）,
-sin（a）,cos（a））;
}
vec3calcIrradiance_hemi（vec3newNormal,vec3lightPos,vec3grd,vec3sky）{
floatdotNL=dot（newNormal,normalize（lightPos））;
floathemiDiffuseWeight=0.5*dotNL+0.5;
returnmix（grd,sky,hemiDiffuseWeight）;
}
vec3calcIrradiance_dir（vec3newNormal,vec3lightPos,vec3light）{
floatdotNL=dot（newNormal,normalize（lightPos））;
returnlight*max（0.0,dotNL）;
}
constfloatPI=3.14159265358979323846264;
//hemispheregroundcolor
constvec3hemiLight_g=vec3（256.0,246.0,191.0）/vec3（256.0）;
//hemisphereskycolor
constvec3hemiLight_s_1=vec3（0.5882352941176471,0.8274509803921568,0.8823529411764706）;
constvec3hemiLight_s_2=vec3（0.96862
升级会员 