OGL -- Lightweight WebGL

When to use this

• You need custom shaders and nothing else. No scene graph, no loaders, no physics.
• Bundle size is a hard constraint -- OGL is ~24KB min+gzip vs Three.js at ~160KB.
• You are building DOM-synced WebGL planes (images, videos, text blocks) that track scroll and CSS layout.
• The effect is a fullscreen shader (gradient, noise, distortion) that needs no 3D scene graph at all.
• Do NOT use this when you need glTF loading, PBR materials, shadows, or post-processing chains -- use Three.js for that.

Mental model

OGL is a thin WebGL wrapper. It gives you Renderer, Camera, Geometry, Program, Mesh, and Texture -- and almost nothing else. There is no material library, no lights, no loaders, no post-processing pipeline. You write your own shaders for everything.

Geometry takes named attributes as objects with { size, data }. Program compiles a vertex/fragment pair and manages uniforms. Mesh binds geometry + program and draws. That is the entire pipeline.

The power move with OGL is DOM-synced planes: create a WebGL Plane geometry for each DOM element, position it to match the element's getBoundingClientRect(), and apply shader effects (distortion, reveal, hover displacement) that CSS cannot do. The WebGL canvas sits behind (or in front of) the DOM, perfectly aligned. This is the pattern agencies like Locomotive, Lusion, and Active Theory use for award-winning portfolio sites.

The coordinate system is clip-space by default unless you set up a camera. For fullscreen shaders you often skip the camera entirely and draw a single triangle that covers the viewport.