SKP
Get in touch

SERVICE 03

WEBGL AND SHADERS.

GPU work: procedural environments, instanced geometry at scale, custom materials. Written as shaders rather than assembled from a library, when that's the cheaper answer — and it often is.

Typical
2 — 8 weeks
Languages
GLSL / TypeScript
Output
Scene or module
Budget
Agreed up front
Polished black stellated polyhedron in soft grey light, the kind of geometry built with custom WebGL shaders
Concept render — stellated geometry

//When a shader is the cheap option#

People assume custom GLSL is the expensive, exotic choice. Frequently it's the opposite. A volumetric fog bank rendered as geometry needs meshes, materials, sorting and probably a post-processing pass. The same effect as a fragment shader is forty lines of code, no geometry, no download, and it scales with screen resolution rather than scene complexity. The Aether environment shipped in two megabytes largely because it was a shader instead of a model.

//What I actually do#

Procedural environments — fog, atmosphere, terrain, light shafts — computed per pixel. Instanced rendering when you need tens of thousands of similar objects in one draw call. Custom materials where the standard physically based model is either too heavy or simply the wrong look. And raymarched primitives, which give you genuinely perfect spheres and analytic rings at a fixed cost independent of how close the camera gets.

Equally important is knowing when not to. If a scene needs authored geometry, rigged animation and a lighting artist's control, hand-written shaders are the wrong tool and I'll say so.

//Constraints I work to#

A frame budget in milliseconds on a named target device, agreed before I start. WebGL2 with a WebGL1 path where the audience needs it. Mobile GPUs treated as the primary target rather than an afterthought, because a shader that's comfortable on a desktop card can be four times over budget on a phone.

Fig. 14 — glsl, webgl2, raymarching