Build: The Rear Light

The whole file after this topic. If yours differs, you can copy this one and carry on.

// Phase 14: the rear light's glow, drawn with raw WebGL 2 on a transparent canvas laid over the 3D one.
const VERTEX = `#version 300 es
in vec2 corner;            // a corner of a square from -1 to 1
uniform vec2 uCentre;      // the glow's centre, in canvas pixels from the bottom left
uniform float uSize;       // its radius, in canvas pixels
uniform vec2 uViewport;    // the canvas size, in pixels
out vec2 vLocal;
void main() {
  vLocal = corner;
  vec2 pixel = uCentre + corner * uSize;
  gl_Position = vec4(pixel / uViewport * 2.0 - 1.0, 0.0, 1.0);
}`;
const FRAGMENT = `#version 300 es
precision mediump float;
in vec2 vLocal;
uniform float uBrightness;
out vec4 colour;
void main() {
  float glow = uBrightness * pow(1.0 - smoothstep(0.0, 1.0, length(vLocal)), 2.0);
  colour = vec4(vec3(1.0, 0.12, 0.08) * glow, glow);   // premultiplied: colour already times alpha
}`;

function compile(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error("Glow shader: " + gl.getShaderInfoLog(shader));
  return shader;
}

/** Returns { backend, resize(width, height), draw(x, y, size, brightness), dispose() }, or null without WebGL 2. */
export function createGlowWebGL2(container) {
  const canvas = document.createElement("canvas");
  canvas.className = "glow";
  canvas.setAttribute("aria-hidden", "true"); // decoration: the parts list says the bike has a rear light
  const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true, antialias: false });
  if (!gl) return null;
  container.append(canvas);

  const program = gl.createProgram();
  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERTEX));
  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAGMENT));
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("Glow program: " + gl.getProgramInfoLog(program));
  const u = (name) => gl.getUniformLocation(program, name);
  const uniforms = { centre: u("uCentre"), size: u("uSize"), viewport: u("uViewport"), brightness: u("uBrightness") };

  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW); // a strip of 2 triangles
  const corner = gl.getAttribLocation(program, "corner");
  gl.enableVertexAttribArray(corner);
  gl.vertexAttribPointer(corner, 2, gl.FLOAT, false, 0, 0);
  gl.bindVertexArray(null);

  gl.enable(gl.BLEND);
  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // premultiplied alpha: overlapping glow adds up softly
  let ratio = 1;

  return {
    backend: "WebGL 2",
    resize(width, height) {
      ratio = Math.min(window.devicePixelRatio, 2);
      canvas.width = Math.round(width * ratio);
      canvas.height = Math.round(height * ratio);
      gl.viewport(0, 0, canvas.width, canvas.height);
    },
    // x, y in CSS pixels from the top left (like the mouse); size in CSS pixels
    draw(x, y, size, brightness) {
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      if (brightness <= 0) return;
      gl.useProgram(program);
      gl.bindVertexArray(vao);
      gl.uniform2f(uniforms.centre, x * ratio, canvas.height - y * ratio); // WebGL counts y from the bottom
      gl.uniform1f(uniforms.size, size * ratio);
      gl.uniform2f(uniforms.viewport, canvas.width, canvas.height);
      gl.uniform1f(uniforms.brightness, brightness);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    },
    dispose() {
      gl.deleteBuffer(buffer);
      gl.deleteVertexArray(vao);
      gl.deleteProgram(program);
      canvas.remove();
    },
  };
}