three+webgl实现炫酷液态滤镜动画代码
代码语言:html
所属分类:动画
代码描述:three+webgl实现炫酷液态滤镜动画代码
代码标签: thre webgl 炫酷 液态 滤镜 动画 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin: 0px;} </style> </head> <body> <div id="shader"></div> <script id="vertex" type="x-shader/x-vertex"> varying vec2 vUv; void main() { gl_Position = vec4(position, 1.0); 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; float t = (uTime * .2); vec2 uv2 = fract(uv * 2. + sin(t)); vec2 uv3 = fract(uv * 3. + cos(t)); vec2 uv4 = fract(uv * 4. + sin(t * .8)); vec2 uv5 = fract(uv * 6. + sin(t * .9)); 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, uv3.x, uv4.x); 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, .1)); color = mix(color, 1. -color, step(color2.g, .1)); color = mix(color, 1. -color, step(color2.b, .1)); coswarp(color, 1.); coswarp(color, 1.); coswarp(color, 1.); // color = vec3(step(color.r, .5), step(color.g, .5), step(color.b, .5)); color = mix(color, color2, uv5.y ); coswarp(color, 3.); vec3 color3 = color; color = vec3(uv2.x, uv3.x, uv4.y); color = mix(color, 1.-color, color3.r); color = mix(color, 1.-color, color3.g); color = mix(color, 1.-color, color3.b); color = vec3(step(co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0