wtc实现粒子粉末烟雾流动动画效果代码
代码语言:html
所属分类:粒子
代码描述:wtc实现粒子粉末烟雾流动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #666; margin: 0; overflow: hidden; } canvas { height: 100vh; width: 100vw; touch-action: none; } .osc { left: 0px; position: fixed; top: 0px; } .button { position: fixed; z-index: 10; right: 0; bottom: 0; } .controls { position: fixed; z-index: 10; left: 0; bottom: 0; } .playpause { background: #AAB; padding: 10px; } .playpause label { display: block; box-sizing: border-box; width: 0; height: 20px; cursor: pointer; border-color: transparent transparent transparent #202020; transition: 100ms all ease; will-change: border-width; border-style: double; border-width: 0px 0 0px 20px; } .playpause input[type='checkbox'] { visibility: hidden; } .playpause.checked label { border-style: double; border-width: 0px 0 0px 20px; } .playpause label { border-style: solid; border-width: 10px 0 10px 20px; } /* } */ </style> </head> <body> <script id="vertexShader_particle" type="x-shader/x-vertex"> precision highp float; attribute vec2 reference; attribute vec2 position; uniform vec2 u_resolution; uniform vec2 u_screen; uniform sampler2D b_velocity; uniform sampler2D b_position; varying vec3 v_colour; varying float v_fogDepth; void main() { vec2 position = texture2D(b_position, reference).xy; gl_PointSize = 2.; vec2 p = position/u_resolution; v_colour = vec3(1,1,1); vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.); gl_Position = vec4(pos.xy, 0., 1.); } </script> <script id="fragmentShader_particle" type="x-shader/x-fragment"> #extension GL_OES_standard_derivatives : enable precision highp float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; varying vec3 v_colour; void main() { vec2 uv = gl_PointCoord.xy - .5; gl_FragColor = vec4(0, 0, 0, 1); float l = length(uv); float c = smoothstep(.5, 0., l); float opacity = c; gl_FragColor = vec4(v_colour, opacity); } </script> <script id="fragmentShader_velocity" type="x-shader/x-fragment"> precision highp float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D s_noise; uniform vec2 u_screen; uniform sampler2D b_velocity; uniform sampler2D b_position; // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float rand(float n){return fract(sin(n) * 43758.5453123);} float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = 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 // ( N*N points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)*2.0 + 1.0; vec4 s1 = floor(b1)*2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = 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; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } float noise21(vec2 n) { const vec2 d = vec2(0.0, 1.0); vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n)); return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y); } void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; vec2 position = texture2D(b_position, uv).xy; vec2 velocity = texture2D(b_velocity, uv).xy; float a = snoise(vec3(position*.004, u_time - floor(u_time*5.) * 20.)) * (3.14159 * 2.); float c = cos(a); float s = sin(a); velocity = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0