78 lines
2.4 KiB
HTML
78 lines
2.4 KiB
HTML
<canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
|
<script>
|
|
var canvas = document.getElementById('canvas');
|
|
var gl = canvas.getContext('webgl');
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
var vsSource = 'attribute vec4 aVertexPosition;void main(){gl_Position=aVertexPosition;}';
|
|
var fsSource = `
|
|
precision mediump float;
|
|
uniform float uTime;
|
|
uniform vec2 uResolution;
|
|
void main() {
|
|
vec2 uv=gl_FragCoord.xy/uResolution.xy;
|
|
vec3 c1=vec3(0.1,0.4,0.8);
|
|
vec3 c2=vec3(0.4,0.2,0.8);
|
|
vec3 c3=vec3(0.1,0.6,0.4);
|
|
float w1=sin(uv.x*3.0+uTime*0.5)*0.5+0.5;
|
|
float w2=sin(uv.x*4.0+uTime*0.3+uv.y*2.0)*0.5+0.5;
|
|
float w3=sin(uv.x*2.0+uTime*0.7+uv.y*3.0)*0.5+0.5;
|
|
float d=uv.y*2.0-1.0;
|
|
float g=exp(-d*d*2.0);
|
|
vec3 a=(c1*w1+c2*w2+c3*w3)*g*0.6;
|
|
vec3 b=mix(vec3(0.02,0.02,0.08),vec3(0.05,0.05,0.15),uv.y);
|
|
gl_FragColor=vec4(b+a,1.0);
|
|
}
|
|
`;
|
|
|
|
function loadShader(gl,type,source){
|
|
var s=gl.createShader(type);
|
|
gl.shaderSource(s,source);
|
|
gl.compileShader(s);
|
|
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)){gl.deleteShader(s);return null;}
|
|
return s;
|
|
}
|
|
|
|
var vs=loadShader(gl,gl.VERTEX_SHADER,vsSource);
|
|
var fs=loadShader(gl,gl.FRAGMENT_SHADER,fsSource);
|
|
var prog=gl.createProgram();
|
|
gl.attachShader(prog,vs);
|
|
gl.attachShader(prog,fs);
|
|
gl.linkProgram(prog);
|
|
|
|
var posLoc=gl.getAttribLocation(prog,'aVertexPosition');
|
|
var timeLoc=gl.getUniformLocation(prog,'uTime');
|
|
var resLoc=gl.getUniformLocation(prog,'uResolution');
|
|
|
|
var posBuf=gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER,posBuf);
|
|
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,1,1,1,-1,-1,1,-1]),gl.STATIC_DRAW);
|
|
|
|
var startTime=Date.now();
|
|
var FPS=15,lastFrame=0;
|
|
|
|
function render(ts){
|
|
requestAnimationFrame(render);
|
|
if(ts-lastFrame<1000/FPS)return;
|
|
lastFrame=ts;
|
|
gl.viewport(0,0,canvas.width,canvas.height);
|
|
gl.clearColor(0,0,0,1);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
gl.useProgram(prog);
|
|
gl.enableVertexAttribArray(posLoc);
|
|
gl.bindBuffer(gl.ARRAY_BUFFER,posBuf);
|
|
gl.vertexAttribPointer(posLoc,2,gl.FLOAT,false,0,0);
|
|
gl.uniform1f(timeLoc,(Date.now()-startTime)/1000);
|
|
gl.uniform2f(resLoc,canvas.width,canvas.height);
|
|
gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
|
|
}
|
|
requestAnimationFrame(render);
|
|
</script>
|