HTML5紫色光圈无限延伸粒子动画特效源码.zip资源-CSDN文库

共5个文件

js：2个

html：1个

css：1个

版权申诉

html5

102 浏览量 2022-11-04 23:44:38 上传评论收藏 267KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5紫色光圈无限延伸粒子动画特效源码.zip （5个子文件）

132686869509763683

css

style.css 51B

img

noise.png 258KB

index.html 4KB

index.js 2KB

apxlmx.js 19KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5紫色光圈粒子动画特效</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="webgl" width="500" height="1758"></canvas> <script id="vertexShader" type="x-shader/x-vertex"> attribute vec4 a_position; uniform mat4 u_modelViewMatrix; uniform mat4 u_projectionMatrix; void main() { gl_Position = a_position; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> precision highp float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D u_noise; float hash(vec2 p) { float o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).x; return o; } vec2 hash2(vec2 p) { vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy; return o; } const int octaves = 2; float noise(vec2 uv) { vec2 id = floor(uv); vec2 subuv = fract(uv); vec2 u = subuv * subuv * (3. - 2. * subuv); float a = hash(id); float b = hash(id + vec2(1., 0.)); float c = hash(id + vec2(0., 1.)); float d = hash(id + vec2(1., 1.)); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } float fbm(in vec2 uv) { float s = .0; float m = .0; float a = .5; for(int i = 0; i < octaves; i++) { s += a * noise(uv); m += a; a *= .5; uv *= 2.; } return s / m; } mat2 rotate2d(float _angle) { return mat2(cos(_angle),sin(_angle), -sin(_angle),cos(_angle)); } vec2 getScreenSpace() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); return uv; } const vec3 fizz_bg1 = vec3(.1, .2, .4); const vec3 fizz_bg2 = vec3(.3, .2, .8); const float multiplier = 15.5; const float zoomSpeed = .5; const int layers = 5; // The render function is where we render the pattern to be added to the layer vec3 render(vec2 uv, float scale, vec3 colour) { vec2 id = floor(uv); vec2 subuv = fract(uv); vec2 rand = hash2(id); float bokeh = abs(scale) * 1.; float particle = 0.; if(length(rand) > 1.3) { vec2 pos = subuv-.5; float field = length(pos); particle = smoothstep(.3, 0., field); particle += smoothstep(.4 * bokeh, 0.34 * bokeh, field); } return vec3(particle*2.); } vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, vec3 colour) { vec2 _uv = uv; float l = float(layer); // Scale // Generating a scale value between zero and 1 based on a mod of u_time // A frequency of 10 dixided by the layer index (10 / layers * layer) float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.); uv *= 5.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster uv *= scale*scale; // then modifying the overall scale by the generated amount uv *= rotate2d(u_time*2.); uv += vec2(25. * l); // ofsetting the UV by an arbitrary amount to make the layer appear different // render vec3 pass = render(uv * multiplier, scale, colour) * .2; // render the pass // this is the opacity of the layer fading in from the "bottom" opacity = 1. + scale; float _opacity = opacity; // This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep) float endOpacity = smoothstep(0., 0.4, scale * -1.) * 2.; return pass * _opacity * endOpacity; } vec3 fizz(vec2 uv) { float n = fbm(uv*4.+u_time*2.); vec3 colour = fizz_bg1; float wave = clamp(sin(length(uv*10. + (n))-u_time*20.) * .5 + .5, 0., 1.); colour = mix(colour, fizz_bg2, wave); wave = pow(wave*wave, 5.); colour += (1. - length(uv*5.)) * .1 + wave * .3; colour *= 1. + wave * .5; colour = mix(colour, fizz_bg1, clamp(length(uv), 0., 1.)); float opacity = 1.; float opacity_sum = 1.; vec3 bubbles = vec3(0.); for(int i = 1; i <= layers; i++) { bubbles += renderLayer(i, layers, uv, opacity, colour); opacity_sum += opacity; } return colour * (bubbles+1.) + bubbles * (.5 + wave); } void main() { vec2 uv = getScreenSpace(); vec3 colour = fizz(uv); gl_FragColor = vec4(colour,1.0); } </script> <script src='js/apxlmx.js'></script> <script src="js/index.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉