API ArcadeISSUE #2 of 23

webgl · the 3d gpu interface

ApiaVSLegacy Larry

Apia saysWebGL (and WebGPU) give low-level GPU access for 3D and high-performance graphics.

canvas.getContext("webgl") exposes the GPU for 3D scenes, shaders, and heavy visual compute. The raw API is extremely verbose (buffers, shaders in GLSL, matrices), so almost everyone uses a library like Three.js. WebGPU is the modern successor with a cleaner API. Reach for these when 2D canvas isn't enough.

Power-ups you unlock

getContext("webgl") = GPU access for 3D
Verbose raw API → use Three.js etc.
WebGPU is the modern successor
For 3D and heavy visual compute

Legacy Larry attacks — common mistakes

Hand-writing raw WebGL for simple scenes
Ignoring context-lost handling
Using WebGL where 2D canvas suffices

Boss battleRecognize when to step up from 2D canvas to a WebGL library like Three.js.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>// raw WebGL is verbose — most use a library:
// import * as THREE from 'three';
const gl = canvas.getContext('webgl');
// buffers, GLSL shaders, draw calls…
// → Three.js wraps all of this</pre></body></html>

▶ Open the interactive comic issue

‹ Canvas Api · 2d Drawing Web Audio Api · Oscillators · Gain · Context ›