-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbg.html
More file actions
92 lines (92 loc) · 6.26 KB
/
Copy pathbg.html
File metadata and controls
92 lines (92 loc) · 6.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html><html lang="en"><head><style>#root,body,html{margin:0;height:100%}#canvas,#canvas>canvas{width:100%;height:100%;display:block}</style><title>WebGL Background</title></head><body><div id="root"><canvas id="canvas"></canvas></div><script type="x-shader/x-vertex" id="vertex-shader">attribute vec4 a_position;
void main() {
gl_Position = a_position;
}</script><script type="x-shader/x-fragment" id="fragment-shader">precision highp float;
uniform vec2 iResolution;
uniform float iTime;
#define NUM_LAYERS 2.
#define PULSE .005
#define MAX_PARTICLE_NUMBER 20.
#define MIN_PARTICLE_NUMBER 1.
float N21(vec2 p) {
vec3 a = fract(vec3(p.xyx) * vec3(213.897, 653.453, 253.098));
a += dot(a, a.yzx + 79.76);
return fract((a.x + a.y) * a.z);
}
vec2 GetPos(vec2 id, vec2 offs, float t) {
float n = N21(id+offs);
float n1 = fract(n*10.);
float n2 = fract(n*100.);
float a = t+n;
return offs + vec2(sin(a*n1), cos(a*n2))*.4;
}
float df_line(in vec2 a, in vec2 b, in vec2 p)
{
vec2 pa = p - a, ba = b - a;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0., 1.);
return length(pa - ba * h);
}
float line(vec2 a, vec2 b, vec2 uv) {
float r1 = .04;
float r2 = .01;
float d = df_line(a, b, uv);
float d2 = length(a-b);
float fade = smoothstep(2., 1., d2);
fade += smoothstep(.05, .02, abs(d2-.75));
return smoothstep(r1, r2, d)*fade;
}
float NetLayer(vec2 st, float n, float t) {
vec2 id = floor(st)+n;
st = fract(st)-.5;
vec2 p[9];
int i=0;
p[0] = GetPos(id, vec2(-1, -1), t);
p[1] = GetPos(id, vec2(0, -1), t);
p[2] = GetPos(id, vec2(1, -1), t);
p[3] = GetPos(id, vec2(-1, 0), t);
p[4] = GetPos(id, vec2(0, 0), t);
p[5] = GetPos(id, vec2(1, 0), t);
p[6] = GetPos(id, vec2(-1, 1), t);
p[7] = GetPos(id, vec2(0, 1), t);
p[8] = GetPos(id, vec2(1, 1), t);
float m = 0.;
float sparkle = 0.;
for (int i=0; i<9; i++) {
m += line(p[4], p[i], st);
float d = length(st-p[i]);
float s = (.005/(d*d));
s *= smoothstep(1., .7, d) * PULSE;
sparkle += s;
}
m += line(p[1], p[3], st);
m += line(p[1], p[5], st);
m += line(p[7], p[5], st);
m += line(p[7], p[3], st);
float sPhase = (sin(t+n)+sin(t*.05))*.25+.5;
sPhase += pow(sin(t*.1)*.5+.5, 50.)*5.;
m += sparkle*sPhase;
return m;
}
vec2 rotate(vec2 target, float angle) {
return target * mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}
void main() {
vec2 uv = (gl_FragCoord.xy-iResolution.xy/2.)/iResolution.y;
float time = iTime*.01;
vec2 st = rotate(uv, time);
float m = 0.;
for (float i=0.; i<1.; i+=1./NUM_LAYERS) {
float z = fract(time+i);
float size = mix(MAX_PARTICLE_NUMBER, MIN_PARTICLE_NUMBER, z);
float fade = smoothstep(0., .6, z);
m += fade * NetLayer(st*size*z*3., i, iTime*.5);
}
float glow = -uv.y*0.15;
vec3 baseColor = vec3(0.36328125, 0.7421875, 0.90625);
vec3 col = baseColor*m;
col += baseColor*glow;
col *= 1.-dot(uv, uv);
time = mod(iTime, 230.);
col *= smoothstep(0., 20., time)*smoothstep(224., 200., time) / 10.;
gl_FragColor = vec4(col, 1);
}</script><script>const defaultShaderType=["VERTEX_SHADER","FRAGMENT_SHADER"],canvas=document.querySelector("#canvas"),gl=canvas.getContext("webgl"),vertexShader=document.querySelector("#vertex-shader").innerHTML,fragmentShader=document.querySelector("#fragment-shader").innerHTML,program=createProgramFromSources(gl,[vertexShader,fragmentShader]),positionAttributeLocation=gl.getAttribLocation(program,"a_position"),resolutionLocation=gl.getUniformLocation(program,"iResolution"),timeLocation=gl.getUniformLocation(program,"iTime"),positionBuffer=gl.createBuffer(),autoAnimationMode=!0;let requestAnimationFrameID,time=5,then=0,stopAnimation=!1;function main(){gl&&(gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW),requestAnimationFrame(render))}function handleScroll(){time+=.06}function render(e){e*=3e-4;const t=Math.min(e-then,.1);autoAnimationMode&&(time+=t),then=e,resizeCanvasToDisplaySize(gl.canvas),gl.viewport(0,0,gl.canvas.width,gl.canvas.height),gl.useProgram(program),gl.enableVertexAttribArray(positionAttributeLocation),gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer),gl.vertexAttribPointer(positionAttributeLocation,2,gl.FLOAT,!1,0,0),gl.uniform2f(resolutionLocation,gl.canvas.width,gl.canvas.height),gl.uniform1f(timeLocation,time),gl.drawArrays(gl.TRIANGLES,0,6)}function startRendering(){requestAnimationFrameID||(stopAnimation=!1,requestAnimationFrameID=requestAnimationFrame(updateFrameFrequently))}function stopRendering(){requestAnimationFrameID&&(cancelAnimationFrame(requestAnimationFrameID),requestAnimationFrameID=void 0,stopAnimation=!0)}function updateFrameFrequently(e){stopAnimation?requestAnimationFrameID=void 0:(render(e),requestAnimationFrameID=requestAnimationFrame(updateFrameFrequently))}function resizeCanvasToDisplaySize(e,t){t=t||1;const r=e.clientWidth*t|0,n=e.clientHeight*t|0;return(e.width!==r||e.height!==n)&&(e.width=r,e.height=n,!0)}function createProgramFromSources(e,t,r,n,o){const a=[];for(let r=0;r<t.length;++r)a.push(loadShader(e,t[r],e[defaultShaderType[r]],o));return createProgram(e,a,r,n,o)}function createProgram(e,t,r,n){const o=e.createProgram();t.forEach((function(t){e.attachShader(o,t)})),r&&r.forEach((function(t,r){e.bindAttribLocation(o,n?n[r]:r,t)})),e.linkProgram(o);if(!e.getProgramParameter(o,e.LINK_STATUS)){const t=e.getProgramInfoLog(o);return console.log("Error in program linking:"+t),e.deleteProgram(o),null}return o}function loadShader(e,t,r){const n=e.createShader(r);e.shaderSource(n,t),e.compileShader(n);if(!e.getShaderParameter(n,e.COMPILE_STATUS)){const r=e.getShaderInfoLog(n);return console.log("*** Error compiling shader '"+n+"':"+r+"\n"+t.split("\n").map(((e,t)=>`${t+1}: ${e}`)).join("\n")),e.deleteShader(n),null}return n}main()</script></body></html>