glcanvas/main.js

const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl");

function render() {
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  requestAnimationFrame(render);
}

function makeShader(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.log("shader compile failed:\n" + gl.getShaderInfoLog(shader));

    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

function makeShaderProgram(vertexSource, fragmentSource) {
  const vertexShader = makeShader(gl.VERTEX_SHADER, vertexSource);
  const fragmentShader = makeShader(gl.FRAGMENT_SHADER, fragmentSource);

  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.log("program link failed:\n" + gl.getProgramInfoLog(shaderProgram));
    gl.deleteProgram(shaderProgram);

    return null;
  }

  return shaderProgram;
}

async function startWebGl() {
  const vertexShader = await fetch("/vertex.glsl", (r) => r.text());
  const fragmentShader = await fetch("/fragment.glsl", (r) => r.text());

  const program = makeShaderProgram(vertexShader, fragmentShader);

  requestAnimationFrame(render);
}

if (gl) {
  await startWebGl();
} else {
  console.log("no webgl");
  // and use a static background probably.
}