103 lines
2.3 KiB
JavaScript
103 lines
2.3 KiB
JavaScript
/* Canvas set-up */
|
|
var canvas = document.getElementsByTagName("canvas")[0];
|
|
var gl = canvas.getContext("webgl", {
|
|
antialias: false,
|
|
preserveDrawingBuffer: false,
|
|
});
|
|
|
|
function resizeCanvas() {
|
|
const scl = (p) => Math.trunc(p / 8);
|
|
|
|
var width = scl(gl.canvas.clientWidth);
|
|
var height = scl(gl.canvas.clientHeight);
|
|
|
|
if (gl.canvas.width != width || gl.canvas.height != height) {
|
|
gl.canvas.width = width;
|
|
gl.canvas.height = height;
|
|
|
|
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
|
}
|
|
|
|
return [width, height];
|
|
}
|
|
|
|
resizeCanvas();
|
|
|
|
/* WebGL set-up */
|
|
gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
|
|
/* Fetch shader programs */
|
|
const fetchText = async (url) => (await fetch(url)).text();
|
|
|
|
var vsSrc = await fetchText("/shader/bg.vert");
|
|
var fsSrc = await fetchText("/shader/bg.frag");
|
|
|
|
/* Compile vertex shader */
|
|
var vs = gl.createShader(gl.VERTEX_SHADER);
|
|
gl.shaderSource(vs, vsSrc);
|
|
gl.compileShader(vs);
|
|
|
|
/* Compile fragment shader */
|
|
var fs = gl.createShader(gl.FRAGMENT_SHADER);
|
|
gl.shaderSource(fs, fsSrc);
|
|
gl.compileShader(fs);
|
|
|
|
/* Create and use program */
|
|
var program = gl.createProgram();
|
|
gl.attachShader(program, vs);
|
|
gl.attachShader(program, fs);
|
|
gl.linkProgram(program);
|
|
gl.useProgram(program);
|
|
|
|
/* Get attributes and uniforms */
|
|
var a_position = gl.getAttribLocation(program, "a_position");
|
|
var u_time = gl.getUniformLocation(program, "u_time");
|
|
var u_resolution = gl.getUniformLocation(program, "u_resolution");
|
|
|
|
/* Vertices */
|
|
const verts = new Float32Array([
|
|
-1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0, -1.0,
|
|
]);
|
|
|
|
/* Create vertex buffer */
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
|
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
|
|
|
|
/* Bind vertices */
|
|
gl.vertexAttribPointer(
|
|
a_position,
|
|
2,
|
|
gl.FLOAT,
|
|
false,
|
|
verts.BYTES_PER_ELEMENT * 2,
|
|
0,
|
|
);
|
|
gl.enableVertexAttribArray(a_position);
|
|
|
|
/* Draw */
|
|
var startTime = performance.now();
|
|
function draw() {
|
|
requestAnimationFrame(draw);
|
|
|
|
/* Get time */
|
|
var nowTime = performance.now() - startTime;
|
|
if (nowTime >= 8.0) {
|
|
startTime = 0;
|
|
}
|
|
nowTime /= 1000;
|
|
|
|
/* Resize canvas */
|
|
resizeCanvas();
|
|
|
|
/* Set uniforms */
|
|
gl.uniform1f(u_time, nowTime);
|
|
gl.uniform2fv(u_resolution, [gl.drawingBufferWidth, gl.drawingBufferHeight]);
|
|
|
|
// Draw triangles
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
}
|
|
|
|
/* Start !! */
|
|
requestAnimationFrame(draw);
|