WebGL

Overview

WebGL 2 is the browser's low-level 3D graphics API (OpenGL ES 3.0 semantics, GLSL ES 3.00 shaders), available through canvas.getContext("webgl2") in all current browsers. You supply the shaders, buffers, textures and matrices yourself; for scenes with models, lights and loaders, use a library such as three.js instead. WebGPU is the successor API but WebGL remains the portable default.

Instructions

Initializing a WebGL Context

// src/webgl/init.ts — Get a WebGL2 rendering context and configure it.
// Throws when WebGL2 is unavailable (no silent WebGL1 fallback).
export function initWebGL(canvas: HTMLCanvasElement): WebGL2RenderingContext {
  const gl = canvas.getContext("webgl2", { antialias: true });
  if (!gl) throw new Error("WebGL2 not supported");