WebGL

const max: number = gl.getParameter(gl.MAX_TEXTURE_SIZE);
// Constants exist on the instance and the class
gl.TRIANGLES === WebGL2RenderingContext.TRIANGLES; // true

 JS / TS (CPU)                              GPU
 ─────────────                              ───
 Float32Array ─ bufferData ─► ARRAY_BUFFER ─┐
 Uint16Array  ─ bufferData ─► ELEMENT_ARRAY ┤ described by a VAO
                                            ▼
 uniforms, UBOs, textures ─────────► vertex shader  (runs per vertex)
                                            │  gl_Position (clip space)
                                            ▼
                               primitive assembly + clipping
                               ÷ w → NDC → viewport → window px
                                            │  face culling
                                            ▼
                                      rasterisation
                                            │  varyings interpolated
                                            ▼
 uniforms, textures ───────────────► fragment shader (runs per pixel)
                                            │  out vec4 color
                                            ▼
                       scissor → stencil → depth → blend → framebuffer
                       (canvas drawing buffer or your FBO/texture)

const gl = canvas.getContext("webgl2", {
  antialias: true,
  powerPreference: "high-performance",
});
if (!gl) throw new Error("WebGL2 unavailable");

#version 300 es
layout(location = 0) in vec3 aPosition;
layout(location = 1) in vec2 aUv;
 
uniform mat4 uMvp;
 
out vec2 vUv;
 
void main() {
  vUv = aUv;
  gl_Position = uMvp * vec4(aPosition, 1.0);
}

#version 300 es
precision highp float;
 
in vec2 vUv;
uniform sampler2D uTex;
uniform vec4 uTint;
 
out vec4 outColor;
 
void main() {
  outColor = texture(uTex, vUv) * uTint;
}

const positions = new Float32Array([
  // x, y, z,  u, v
  -1, -1, 0,  0, 0,
   1, -1, 0,  1, 0,
   0,  1, 0,  0.5, 1,
]);
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
 
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
 
const stride = 5 * 4; // bytes per vertex
gl.enableVertexAttribArray(0); // aPosition
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(1); // aUv
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 12);
 
const ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); // saved in VAO
gl.bufferData(
  gl.ELEMENT_ARRAY_BUFFER,
  new Uint16Array([0, 1, 2]),
  gl.STATIC_DRAW,
);
gl.bindVertexArray(null);

// One attribute per instance: offsets for 1000 quads
const offsets = new Float32Array(1000 * 2);
const inst = gl.createBuffer();
gl.bindVertexArray(vao);
gl.bindBuffer(gl.ARRAY_BUFFER, inst);
gl.bufferData(gl.ARRAY_BUFFER, offsets, gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribDivisor(2, 1); // one value per instance
gl.useProgram(prog); // shader reads attribute 2
gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, 1000);

const tex = gl.createTexture();
gl.activeTexture(gl.TEXTURE0); // unit 0
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
  gl.TEXTURE_2D, 0, gl.RGBA8, // level, internal format
  gl.RGBA, gl.UNSIGNED_BYTE, bitmap, // format, type, src
);
gl.generateMipmap(gl.TEXTURE_2D);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
  gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,
  gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
  gl.CLAMP_TO_EDGE);
// Sampler uniform = texture unit index
gl.useProgram(prog);
gl.uniform1i(gl.getUniformLocation(prog, "uTex"), 0);

gl.useProgram(prog); // uniforms target the bound program
const uTint = gl.getUniformLocation(prog, "uTint");
const uMvp = gl.getUniformLocation(prog, "uMvp");
gl.uniform4f(uTint, 1, 0.5, 0.2, 1);
gl.uniformMatrix4fv(uMvp, false, mvp); // column-major

layout(std140) uniform Camera {
  mat4 view;      // offset 0
  mat4 proj;      // offset 64
  vec4 eye;       // offset 128 (vec3 would pad anyway)
};

const CAMERA = 0; // binding point
const idx = gl.getUniformBlockIndex(prog, "Camera");
gl.uniformBlockBinding(prog, idx, CAMERA);
 
const ubo = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
gl.bufferData(gl.UNIFORM_BUFFER, 144, gl.DYNAMIC_DRAW);
gl.bindBufferBase(gl.UNIFORM_BUFFER, CAMERA, ubo);
 
// per frame: 36 floats = view(16) + proj(16) + eye(4)
const data = new Float32Array(36);
gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
gl.bufferSubData(gl.UNIFORM_BUFFER, 0, data);

object (model) space
   │  model matrix        scale · rotate · translate the mesh
   ▼
world space
   │  view matrix         inverse of the camera transform
   ▼
view (eye) space          camera at origin, looking down -Z
   │  projection matrix   perspective or orthographic
   ▼
clip space                gl_Position = P · V · M · vec4(pos, 1)
   │  ÷ w (perspective divide)
   ▼
NDC                       x, y, z in -1..1 (WebGPU: z in 0..1)
   │  viewport + depthRange
   ▼
window px                 origin bottom-left, depth 0..1

import { mat4 } from "gl-matrix";
 
const aspect = canvas.clientWidth / canvas.clientHeight;
const proj = mat4.perspective(
  mat4.create(), Math.PI / 4, aspect, 0.1, 100,
);
const view = mat4.lookAt(
  mat4.create(), [0, 2, 5], [0, 0, 0], [0, 1, 0],
);
const model = mat4.fromYRotation(mat4.create(), 0.5);
const mvp = mat4.create();
mat4.multiply(mvp, proj, view);
mat4.multiply(mvp, mvp, model); // P · V · M
gl.uniformMatrix4fv(uMvp, false, mvp);

function createTarget(
  gl: WebGL2RenderingContext, w: number, h: number,
) {
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, w, h);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  const depth = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, depth);
  gl.renderbufferStorage(gl.RENDERBUFFER,
    gl.DEPTH_COMPONENT24, w, h);
  const fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER,
    gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth);
  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  if (status !== gl.FRAMEBUFFER_COMPLETE) {
    const hex = status.toString(16);
    throw new Error(`FBO incomplete: 0x${hex}`);
  }
  return { fbo, tex, depth };
}

let rafId = 0;
canvas.addEventListener("webglcontextlost", (e) => {
  e.preventDefault(); // allow a restore
  cancelAnimationFrame(rafId);
});
canvas.addEventListener("webglcontextrestored", () => {
  initGL(); // recreate programs, buffers, textures
  rafId = requestAnimationFrame(render);
});
 
// Simulate in development
gl.getExtension("WEBGL_lose_context")?.loseContext();

function compile(
  gl: WebGL2RenderingContext, type: GLenum, src: string,
): WebGLShader {
  const sh = gl.createShader(type)!; // null only if lost
  gl.shaderSource(sh, src);
  gl.compileShader(sh);
  const ok = gl.getShaderParameter(sh, gl.COMPILE_STATUS);
  if (ok) return sh;
  const log = gl.getShaderInfoLog(sh);
  gl.deleteShader(sh);
  throw new Error(`Shader compile failed: ${log}`);
}
 
export function createProgram(
  gl: WebGL2RenderingContext, vs: string, fs: string,
): WebGLProgram {
  const p = gl.createProgram();
  gl.attachShader(p, compile(gl, gl.VERTEX_SHADER, vs));
  gl.attachShader(p, compile(gl, gl.FRAGMENT_SHADER, fs));
  gl.linkProgram(p);
  if (gl.getProgramParameter(p, gl.LINK_STATUS)) return p;
  const log = gl.getProgramInfoLog(p);
  throw new Error(`Program link failed: ${log}`);
}

const VS = `#version 300 es
layout(location = 0) in vec2 aPos;
void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`;
const FS = `#version 300 es
precision highp float;
out vec4 color;
void main() { color = vec4(1.0, 0.4, 0.2, 1.0); }`;
 
const canvas = document.querySelector("canvas")!;
const gl = canvas.getContext("webgl2");
if (!gl) throw new Error("WebGL2 unavailable");
const prog = createProgram(gl, VS, FS);
 
gl.bindVertexArray(gl.createVertexArray());
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
const tri = new Float32Array([0, .8, -.8, -.8, .8, -.8]);
gl.bufferData(gl.ARRAY_BUFFER, tri, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
 
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.1, 0.1, 0.1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(prog);
gl.drawArrays(gl.TRIANGLES, 0, 3);

const VS = `#version 300 es
void main() {
  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
}`;
const FS = `#version 300 es
precision highp float;
uniform vec2 iResolution; uniform float iTime;
out vec4 fragColor;
void main() {
  vec2 uv = gl_FragCoord.xy / iResolution;
  vec3 c = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4));
  fragColor = vec4(c, 1.0);
}`;
const prog = createProgram(gl, VS, FS);
const uRes = gl.getUniformLocation(prog, "iResolution");
const uTime = gl.getUniformLocation(prog, "iTime");
gl.useProgram(prog); // default VAO, no attributes needed
requestAnimationFrame(function frame(t) {
  resizeToDisplay(gl); // last recipe
  gl.uniform2f(uRes, gl.canvas.width, gl.canvas.height);
  gl.uniform1f(uTime, t / 1000);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(frame);
});

async function loadTexture(
  gl: WebGL2RenderingContext, url: string,
): Promise<WebGLTexture> {
  const res = await fetch(url, { mode: "cors" });
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${url}`);
  const bmp = await createImageBitmap(await res.blob(), {
    imageOrientation: "flipY",
    premultiplyAlpha: "none",
  });
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.SRGB8_ALPHA8,
    gl.RGBA, gl.UNSIGNED_BYTE, bmp);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
    gl.LINEAR_MIPMAP_LINEAR);
  bmp.close();
  return tex;
}

function resizeToDisplay(
  gl: WebGL2RenderingContext, maxDpr = 2,
): boolean {
  const c = gl.canvas as HTMLCanvasElement;
  const dpr = Math.min(window.devicePixelRatio, maxDpr);
  const w = Math.round(c.clientWidth * dpr);
  const h = Math.round(c.clientHeight * dpr);
  const changed = c.width !== w || c.height !== h;
  if (changed) {
    c.width = w;
    c.height = h;
  }
  gl.viewport(0, 0, gl.drawingBufferWidth,
    gl.drawingBufferHeight);
  return changed; // true: rebuild size-dependent FBOs
}