three+webgl实现碎片动画效果代码
代码语言:html
所属分类:动画
代码描述:three+webgl实现碎片动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin: 0px;} </style> </head> <body translate="no" > <div id="shader"></div> <script id="vertex" type="x-shader/x-vertex"> varying vec2 vUv; uniform float u_time; void main() { vec4 modelPosition = modelMatrix * vec4(position, 1.0); vec4 viewPosition = viewMatrix * modelPosition; vec4 projectedPosition = projectionMatrix * viewPosition; gl_Position = projectedPosition; vUv = uv; } </script> <script id="fragment" type="x-shader/x-fragment"> precision highp float; uniform vec2 u_resolution; uniform float uTime; uniform float u_number; varying vec2 vUv; uniform vec2 uMouse; const float PI = 3.1415926535897932384626433832795; const float TAU = PI * 2.; uniform float u_progress; void coswarp(inout vec3 trip, float warpsScale ){ trip.xyz += warpsScale * .1 * sin(3. * trip.yzx + (uTime * .15)); trip.xyz += warpsScale * .05 * sin(11. * trip.yzx + (uTime * .15)); trip.xyz += warpsScale * .025 * sin(17. * trip.yzx + (uTime * .15)); } void uvRipple(inout vec2 uv, float intensity){ vec2 p = uv -.5; float cLength=length(p); uv= uv +(p/cLength)*cos(cLength*15.0-uTime*.5)*intensity; } void main() { vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5; uv = vUv; float t = (uTime * .4) + length(uv-.5); vec2 uv2 = fract(uv * 2. * uv.x); vec2 uv3 = fract(uv * 3. * uv2.y); vec2 uv4 = fract(uv * 4. * uv3.x); vec2 uv5 = fract(uv * 6. * uv3.y); float a = step(length(uv-.5), .5) - step(length(uv-.5), .3); float b = step(length(uv2-.5), .5) - step(length(uv2-.5), .3); float c = step(length(uv3-.5), .5) - step(length(uv3-.5), .3); float d = step(length(uv4-.5), .5) - step(length(uv4-.5), .3); float e = step(length(uv5-.5), .5) - step(length(uv5-.5), .3); vec3 color = vec3(uv2.x, 1., uv5.y); vec3 color2 = vec3(uv.x,uv.y, 1.); coswarp(color2, 3.); coswarp(color2, 3.); coswarp(color2, 3.); color = mix(color, 1. -color, step(color2.r, .5)); color = mix(color, 1. -color, step(color2.g, .5)); color = mix(color, 1. -color, step(color2.b, .5)); color = mix(color, vec3(1.), mix(d,e, step(color2.r, .5))); color = mix(color,1.-color, mix(b,c, step(color2.b, .5))); color = mix(color,1.-color, mix(a,c, step(color2.g, .5))); color = vec3(step(color.r, .5 * cos(t)), ste.........完整代码请登录后点击上方下载按钮下载查看
网友评论0